Various additions/fixes

* Added wiki link to navbar
* Updated info block card header to be body color instead of link color
* Updated logo with no padding
* Updated logo to switch based on media query
* Fixed entries list to be hidden when drawing
* Fixed -webkit-backdrop-filter supports media query

web/_css/style.css

@@ -50,7 +50,7 @@ .navbar {
 	z-index: 1100 !important;
 }
 
-@supports (backdrop-filter: blur()) {
+@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
 	.navbar, #offcanvasList, #offcanvasDraw {
 		-webkit-backdrop-filter: saturate(180%) blur(15px);
 		backdrop-filter: saturate(180%) blur(15px);
@@ -280,7 +280,7 @@ #timeControlsTooltip {
 	bottom: 40px;
 }
 
-@supports (backdrop-filter: blur()) {
+@supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {
 	#timeControlsTooltip div {
 		-webkit-backdrop-filter: saturate(180%) blur(15px);
 		backdrop-filter: saturate(180%) blur(15px);

web/_js/draw.js

@@ -20,6 +20,7 @@ function initDraw(){
 
 	var backButton = document.getElementById("showListButton");
 	backButton.insertAdjacentHTML("afterend", '<button class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasDraw" aria-controls="offcanvasDraw">Edit</button><a id="drawBackButton" class="btn btn-outline-primary" href="./">Exit Draw Mode</a>');
+	backButton.remove();
 
 	var myOffcanvas = document.getElementById("offcanvasDraw");
 	var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);

web/_js/infoblock.js

@@ -44,14 +44,14 @@ function createInfoBlock(entry) {
     let headerElement = document.createElement("h4");
     headerElement.className = "card-header";
     let linkElement = document.createElement("a");
-    linkElement.className = "text-decoration-none d-flex justify-content-between";
+    linkElement.className = "text-decoration-none d-flex justify-content-between text-body";
     linkElement.href = "#" + entry.id;
     let linkNameElement = document.createElement("span");
     linkNameElement.className = "flex-grow-1 text-break";
     linkNameElement.innerText = entry.name;
     headerElement.appendChild(linkElement);
     linkElement.appendChild(linkNameElement);
-    linkElement.insertAdjacentHTML("beforeend", '<i class="bi bi-link-45deg align-self-center"></i>');// '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-link-45deg ms-1 align-self-center flex-shrink-0" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/></svg>');
+    linkElement.insertAdjacentHTML("beforeend", '<i class="bi bi-link-45deg align-self-center link-primary"></i>');// '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-link-45deg ms-1 align-self-center flex-shrink-0" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/><path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/></svg>');
 
     let bodyElement = document.createElement("div");
 

web/about.html

@@ -39,10 +39,13 @@
 		<nav class="navbar navbar-expand-md fixed-top bg-body border-bottom">
 			<div class="container">
 				<a class="navbar-brand text-body" href="./">
-					<img class="d-inline-block align-text-top me-2" src="./_img/logo.svg" height="32" width="32" alt="">
+					<picture>
+						<source srcset="./_img/favicon-dark.svg" media="(prefers-color-scheme: dark)">
+						<img class="d-inline-block align-text-top me-2" src="./_img/favicon.svg" height="32" width="32" alt="">
+					</picture>
 					The 2022 /r/place Atlas
 				</a>
-				<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+				<button class="navbar-toggler text-body collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
 					<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
 						<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
 					</svg>
@@ -53,7 +56,10 @@
 							<a class="nav-link" href="./">Atlas Map</a>
 						</li>
 						<li class="nav-item">
-							<a class="nav-link active" aria-current="page" href="#">About</a>
+							<a class="nav-link" href="https://place-wiki.stefanocoding.me/" >Wiki</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link active" href="#" aria-current="page">About</a>
 						</li>
 					</ul>
 				</div>

web/index.html

@@ -86,10 +86,13 @@
 			<nav id="main-navbar" class="navbar navbar-expand-md fixed-top bg-body border-bottom">
 				<div class="container-fluid">
 					<a class="navbar-brand text-body" href="./">
-						<img class="d-inline-block align-text-top me-2" src="./_img/logo.svg" height="32" width="32" alt="">
+						<picture>
+							<source srcset="./_img/favicon-dark.svg" media="(prefers-color-scheme: dark)">
+							<img class="d-inline-block align-text-top me-2" src="./_img/favicon.svg" height="32" width="32" alt="">
+						</picture>
 						The 2022 /r/place Atlas
 					</a>
-					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+					<button class="navbar-toggler text-body collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
 						<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
 							<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
 						</svg>
@@ -103,7 +106,7 @@
 								</div>
 							</li>
 						</ul>
-						<ul class="navbar-nav mx-auto">
+						<ul class="navbar-nav mx-auto d-block d-md-none d-lg-block">
 							<li class="nav-item d-flex align-items-center gap-2">
 								<span class="p-2">Coordinates: <span class="badge bg-secondary" id="coords_p">0, 0</span></span>
 							</li>
@@ -111,10 +114,13 @@
 						<hr class="d-md-none">
 						<ul class="navbar-nav flex-row flex-wrap ms-auto">
 							<li class="nav-item col-6 col-md-auto">
-								<a href="./" class="nav-link active" aria-current="page">Atlas Map</a>
+								<a class="nav-link active" href="./" aria-current="page">Atlas Map</a>
 							</li>
 							<li class="nav-item col-6 col-md-auto">
-								<a href="./about.html" class="nav-link">About</a>
+								<a class="nav-link" href="https://place-wiki.stefanocoding.me/">Wiki</a>
+							</li>
+							<li class="nav-item col-6 col-md-auto">
+								<a class="nav-link" href="./about.html">About</a>
 							</li>
 						</ul>
 					</div>