From c55d3b8b2462e05bcb1620604139fb6d18b20678 Mon Sep 17 00:00:00 2001
From: mxdanger <32040254+mxdanger@users.noreply.github.com>
Date: Wed, 20 Apr 2022 01:54:58 -0700
Subject: [PATCH] Major UI redesign

---
 web/_css/style.css   | 1052 +++---------------------------------------
 web/_img/logo.svg    |    2 +-
 web/_js/draw.js      |  108 ++---
 web/_js/infoblock.js |  121 +++--
 web/_js/main.js      |   12 +-
 web/_js/time.js      |    4 +-
 web/_js/view.js      |   79 ++--
 web/about.html       |  168 ++++---
 web/index.html       |  454 +++++++++++-------
 9 files changed, 674 insertions(+), 1326 deletions(-)

diff --git a/web/_css/style.css b/web/_css/style.css
index a2f2d976..6b5b7769 100644
--- a/web/_css/style.css
+++ b/web/_css/style.css
@@ -13,20 +13,13 @@
 	========================================================================
 */
 
-@font-face {
-	/* 	DejaVuSans-ExtraLight 2.37 - https://dejavu-fonts.github.io/ */
+/* @font-face {
+	DejaVuSans-ExtraLight 2.37 - https://dejavu-fonts.github.io/
 	font-family: 'dejavu';
 	src: url('dejavusans-extralight.woff2') format('woff2');
 	font-weight: normal;
 	font-style: normal;
-}
-
-* {
-	margin: 0;
-	padding: 0;
-	border: none;
-	box-sizing: border-box;
-}
+} */
 
 html, body {
 	min-height: 100%;
@@ -35,21 +28,14 @@ html, body {
 	width: 100%;
 }
 
-p {
-	line-height: 1.5em;
-	margin-bottom: 1em;
+svg.bi {
+	display: inline-block;
+    vertical-align: -.125em;
 }
 
-body {
+body[data-mode] {
 	overflow: hidden;
-	overflow-x: hidden;
-	overflow-y: hidden;
-	
-	font-family: dejavu, sans, Sans-Serif;
 	background-color: #111;
-	color: #FFF;
-	
-	line-height: 1.15;
 }
 
 #wrapper {
@@ -57,170 +43,35 @@ #wrapper {
 	height: 100%;
 	width: 100%;
 	overflow: hidden;
-	overflow-x: hidden;
-	overflow-y: hidden;
 	-webkit-overflow-scrolling: touch;
 }
 
-a {
-	color: #ffcf6f;
-	text-decoration: none;
+.navbar {
+	z-index: 1100 !important;
 }
 
-a:hover {
-	text-decoration: underline;
-}
-
-button,
-.button {
-	background-image: linear-gradient(to bottom, #888, #666);
-	border: 1px #000 solid;
-	color: #FFF;
-	text-align: center;
-	display: inline-block;
-	padding: 5px;
-	cursor: pointer;
-	text-shadow: 1px 1px 0 #444;
-}
-
-button::-moz-focus-inner,
-.button::-moz-focus-inner {
-	border: 0;
-}
-
-button:disabled,
-button:disabled:hover,
-.button:disabled,
-.button:disabled:hover {
-	background-image: none;
-	background-color: #666;
-	color: #AAA;
-	cursor: default;
-}
-
-button:hover,
-.button:hover {
-	background-image: linear-gradient(to bottom, #999, #777);
-	text-decoration: none;
-}
-
-input[type="text"],
-textArea {
-	background-color: #444;
-	border: 1px #000 solid;
-	margin-bottom: 4px;
-	padding: 5px 5px;
-	color: #FFF;
-	box-sizing: border-box;
-}
-
-input[type="text"] {
-	height: 25px;
-}
-
-header {
-	min-width: 360px;
-	height: 50px;
-	position: absolute;
-	background-color: #555;
-	border-right: 1px #000 solid;
-	border-bottom: 1px #000 solid;
-	z-index: 2000;
-	display: inline-block;
-}
-
-@media (max-width: 600px) {
-	header{
-		width: 100%;
+@supports (backdrop-filter: blur()) {
+	.navbar, #offcanvasList, #offcanvasDraw {
+		-webkit-backdrop-filter: saturate(180%) blur(15px);
+		backdrop-filter: saturate(180%) blur(15px);
+		--bs-bg-opacity: .9 !important;
 	}
 }
 
+#offcanvasList, #offcanvasDraw {
+	top: 3.75rem;
+}
+
+body[data-mode]:not([data-mode="draw"]) #drawNavButtons, [data-mode="draw"] #defaultNavButtons {
+	display: none;
+}
+
 @media (max-width: 400px) {
-	header h1{
-		font-size: 28px;
+	.offcanvas-start.show {
+		border-right: none !important;
 	}
 }
 
-@media (max-width: 350px) {
-	header h1{
-		font-size: 20px;
-	}
-}
-
-header.aboutHeader {
-	width: 100%;
-	border-right: 0;
-}
-
-header > a {
-	display: flex;
-	color: #FFF;
-	/*align-items: center;*/
-}
-
-header > a:hover {
-	text-decoration: none;
-	color: #FFAA00;
-}
-
-header h1 {
-	font-size: 24px;
-}
-
-#logo {
-	padding: 5px;
-	/*background-color: #FFF;*/
-}
-
-h1 {
-	font-weight: lighter;
-	padding: 0 10px;
-	display: inline-block;
-	margin-top: 0;
-	line-height: 45px;
-	position: absolute;
-	top: 0;
-	left: 50px;
-	text-shadow: 1px 1px 0 #000;
-}
-
-select {
-	-moz-appearance: none;
-	-webkit-appearance: none;
-	appearance: none;
-	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.264' height='15.313'%3E%3Cpath d='M188.363 392.51h15.264l-7.637 15.313-7.627-15.312' fill='%23fff' fill-opacity='.633' transform='translate(-188.363 -392.51)'/%3E%3C/svg%3E")
-		,linear-gradient(to bottom, #888, #666);
-	background-repeat: no-repeat, repeat;
-	background-position: calc(100% - 10px) center, 0 0;
-	background-size: 10px, cover;
-	border: 1px #222 outset;
-	color: #FFF;
-	cursor: pointer;
-	padding: 3px;
-	padding-left: 7px;
-}
-
-select option[disabled] {
-    display: none;
-}
-
-select:hover {
-	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.264' height='15.313'%3E%3Cpath d='M188.363 392.51h15.264l-7.637 15.313-7.627-15.312' fill='%23fff' fill-opacity='.633' transform='translate(-188.363 -392.51)'/%3E%3C/svg%3E")
-		,linear-gradient(to bottom, #999, #777);
-}
-
-select:active {
-	background-image: linear-gradient(to bottom, #666, #777);
-	background-color: #666;
-}
-
-option,
-optgroup {
-	background-color: #555;
-	font-size: 16px;
-	border-color: #BBB;
-}
-
 #linesCanvas {
 	position: absolute;
 	left: 0;
@@ -232,9 +83,9 @@ #linesCanvas {
 }
 
 #container {
-	width: calc(100% - 320px);
+	width: calc(100% - 400px);
 	height: 100%;
-	margin-left: 320px;
+	margin-left: 400px;
 
 	touch-action: manipulation;
 
@@ -250,7 +101,7 @@ #loading {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	z-index: 1000;
+	z-index: -10;
 }
 
 #loading > div {
@@ -325,7 +176,7 @@ #image {
 	height: 100%;
 	width: 100%;
 	z-index: -1500;
-	image-rendering: -moz-crisp-edges;
+	image-rendering: -webkit-optimize-contrast;
 	image-rendering: pixelated;
 	-ms-interpolation-mode: nearest-neighbor;
 }
@@ -335,19 +186,18 @@ #highlightCanvas {
 	position: absolute;
 	height: 100%;
 	width: 100%;
-	image-rendering: -moz-crisp-edges;
+	image-rendering: -webkit-optimize-contrast;
 	image-rendering: pixelated;
 	-ms-interpolation-mode: nearest-neighbor;
 }
 
 #objectsList {
 	max-width: 300px;
-	width: calc(100% - 10px);
+	width: 100%;
 	position: absolute;
 	right: 0;
-	top: 0;
-	padding: 0;
-	max-height: calc(100% - 40px);
+	top: 3.75rem;
+	max-height: calc(100% - 3.75rem);
 	overflow-y: auto;
 	z-index: 0;
 }
@@ -356,22 +206,8 @@ #closeObjectsListButton {
 	height: 40px;
 	width: 40px;
 	position: absolute;
-	top: 10px;
-	right: 310px;
-	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cg fill='none' stroke-width='24.749' stroke-linecap='square' stroke='%23fff'%3E%3Cpath d='m26.625 166.233 139.59-139.59M166.214 166.233 26.625 26.643' stroke-width='29.999747839999998'/%3E%3C/g%3E%3C/svg%3E")
-		,linear-gradient(to bottom, #666, #444);
-	background-size: 15px, cover;
-	background-position: center, 0 0;
-	background-repeat: no-repeat, no-repeat;
-}
-
-#closeObjectsListButton.hidden {
-	display: none;
-}
-
-#closeObjectsListButton:hover {
-	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cg fill='none' stroke-width='24.749' stroke-linecap='square' stroke='%23fff'%3E%3Cpath d='m26.625 166.233 139.59-139.59M166.214 166.233 26.625 26.643' stroke-width='29.999747839999998'/%3E%3C/g%3E%3C/svg%3E")
-		,linear-gradient(to bottom, #777, #555);
+	top: 4.25rem;
+	right: 300px;
 }
 
 @media (max-width: 750px) {
@@ -383,516 +219,98 @@ @media (max-width: 750px) {
 	}
 }
 
-@media (max-width: 700px) {
+@media (max-width: 576px) {
 	#objectsList {
-		top: 50px;
-		max-height: calc(100% - 90px);
+		max-width: calc(300px - 3rem);
 	}
-}
-
-@media (max-width: 750px) {
 	#closeObjectsListButton {
-		top: 60px;
+		right: calc(300px - 3rem);
 	}
 }
 
-@media (max-width: 530px) {
-	#objectsList {
-		top: 80px;
-		max-height: calc(100% - 130px);
-	}
-	
-	#closeObjectsListButton {
-		top: 55px;
-		right: 10px;
-		height: 30px;
-		width: 30px;
+@media (max-width: 540px) {
+	div:not(.listHidden) > #bottomBar {
+		display: none !important;
 	}
 }
 
-.object {
-	background-color: #555;
-	border: 1px #000 solid;
-	margin: 10px 10px 0 0;
-	padding: 10px;
-	overflow-x: auto;
+#objectDescription p {
+	margin-bottom: 0.5rem;
 }
 
-.object:hover {
-	background-color: #666;
-	border-color: #FFF;
-}
-
-.object:hover a {
-	background-color: #555;
-}
-
-.object:hover h2 {
-	background-color: #777;
-}
-
-.object > * {
-	display: block;
-}
-
-.object h2 {
-	display: block;
-	font-size: 20px;
-	background-color: #666;
-	text-shadow: 1px 1px 0 #000;
-	margin: 0 -10px 10px -10px;
-	font-weight: 300;
-}
-
-.object h2 a {
-	color: #FFF;
-	padding: 3px 10px;
-	display: block;
-	height: 100%;
-	width: 100%;
-}
-
-.object h2 a:hover {
-	color: #FFAA00;
-}
-
-.object a {
-	background-color: #666666;
-	text-align: center;
-	padding: 3px;
-	margin-bottom: 5px;
-}
-
-.object a.inline {
-	background-color: transparent;
-	display: inline;
-	padding: 0;
-	margin: 0;
-}
-
-.object a.inline:hover {
-	background-color: transparent;
-	text-decoration: underline;
-}
-
-.object a:hover {
-	background-color: #777;
-	text-decoration: none;
-}
-
-.object p {
-	margin-bottom: 10px;
-}
-
-p.edit {
-	color: #FFFF00;
-}
-p.add {
-	color: #00FF00;
-}
-p.delete {
-	color: #FF0000;
-}
-
-#drawControlsContainer {
-	background-color: #444;
-	border-right: 1px #000 solid;
-	width: 360px;
-	position: absolute;
-	left: 0;
-	top: 50px;
-	bottom: 0;
-	overflow-y: auto;
-	display: none;
-	padding: 0 20px;
-}
-
-[data-mode="draw"] #drawControlsContainer {
-	display: block;
-}
-
-#drawControls {
-	width: 250px;
-	padding: 15px;
-	margin: 10px auto;
-	background-color: #555;
-}
-
-#drawBackButton {
-	margin: 10px auto 0 auto;
-	display: block;
-	width: 170px;
-}
-
-#drawControls > * {
-	width: 100%;
-	display: flex;
-	justify-content: center;
-	margin-bottom: 5px;
-}
-
-#drawControls > * > * {
-	flex-grow: 1;
-	margin-right: 5px;
-}
-
-#drawControls > * > *:last-child {
-	margin-right: 0;
-}
-
-.checkboxLabel {
-	background-color: #666;
-	padding: 3px;
-	cursor: pointer;
-}
-
-.checkboxLabel:hover {
-	background-color: #777;
-}
-
-#drawControls .checkboxLabel {
-	display: inline-block;
-}
-
-input[type="checkbox"] {
-	margin: 3px;
-	vertical-align: middle;
-	display: inline-block;
-	width: 15px;
-	height: 15px;
-}
-
-#hint {
-	display: block;
-	text-align: left;
-	color: #DDD;
-}
-
-#hint p {
-	margin-bottom: 10px;
-}
-
-#objectInfo {
-	display: none;
-}
-
-#objectInfo input {
-	width: 100%;
+#objectDescription p:last-child {
+	margin-bottom: 0;
 }
 
 #descriptionField {
-	width: 220px;
+	width: 100%;
 	height: 70px;
 }
 
-#infoButtons {
-	display: flex;
-	margin-top: 10px;
-}
-
-#infoButtons button {
-	width: 50px;
-	flex-grow: 1;
-	margin-right: 10px;
-}
-
-#infoButtons button:last-child {
-	margin-right: 0;
-}
-
-.overlay {
-	position: absolute;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background-color: rgba(0, 0, 0, .8);
-	display: none;
-	justify-content: center;
-	z-index: 1000;
-}
-
-#exportWindow {
-	margin: 50px auto;
-	padding: 10px;
-	width: 100%;
-	height: calc(100% - 100px);
-	max-width: 500px;
-	/*max-height: 300px*/;
-
-	border: 1px #000 solid;
-	background-color: #555;
-
-	display: flex;
-	flex-direction: column;
-	overflow-y: auto;
-}
-
-#exportWindow * {
-	flex-shrink: 0;
-	margin-bottom: 10px;
-}
-
-#exportWindow p {
-	
-}
-
 #exportString {
-	flex-grow: 1;
-	flex-shrink: 0;
-}
-
-#exportCloseButton {
-	margin-bottom: 0;
-	width: 100px;
-	align-self: flex-end;
-}
-
-#exportOverlay {
-	display: none;
-}
-
-#coordsWrapper {
-	min-width: 100px;
-	position: absolute;
-    display: flex;
-	gap: 10px;
-	z-index: 100;
-	top: 5px;
-	left: 364px;
-}
-
-#wrapper.listHidden #coordsWrapper {	
-    top: 49px;
-    left: 149px;
-}
-
-@media (max-width: 750px) {
-	#coordsWrapper {
-		display: none;
-	}
-}
-#coords {
-	background-color: #555;
-	border: 1px #000 solid;
-	padding: 6.5px;
-	font-size: 17px;
-	display: flex;
-    align-items: center;
-    justify-content: center;
-	text-align: center;
-}
-
-#coords p {
-	margin: 0;
-	line-height: inherit;
+	min-height: 300px;
 }
 
 #bottomBar {
 	position: absolute;
-    bottom: 10px;
-    left: 10px;
-    right: 10px;
-    display: flex;
-	gap: 10px;
+    bottom: 0;
+    left: 0;
+    right: 0;
 }
 
 div:not(.listHidden) > #bottomBar {
-	left: 370px !important;
-}
-
-@media (max-width: 1120px) {
-	div:not(.listHidden) > #bottomBar  {
-		flex-wrap: wrap;
-	}
-
-	.listHidden #author {
-		flex: 1 !important;
-	}
-}
-
-@media (max-width: 800px) {
-	#bottomBar {
-		flex-wrap: wrap;
-	}
-
-	#timeControls {
-		min-width: calc(100vw - 390px) !important;
-	}
-
-	#author {
-		flex: 1;
-		min-width: 100% !important;
-	}
+	left: 400px !important;
 }
 
 #timeControls {
-	flex: 1;
-	background-color: #555;
-	border: 1px #000 solid;
-	font-size: 12px;
-	text-align: center;
-	min-width: 300px;
 	position: relative;
+	flex-grow: 2;
 }
 
 #timeControls input {
     height: 100%;
-	background: #555;
 	-webkit-appearance: none;
 	appearance: none;
     width: 100%;
 }
 
 #timeControlsTooltip {
-	display: none;
+	opacity: 0;
 	position: absolute;
-	padding: 0.5em 2em;
-	background: #555;
-	border: 1px #000 solid;
-	justify-content: center;
 	bottom: 40px;
-	white-space: nowrap;
 }
 
-#timeControlsTooltip p {
-	line-height: normal;
-	margin-bottom: 0;
+@supports (backdrop-filter: blur()) {
+	#timeControlsTooltip div {
+		-webkit-backdrop-filter: saturate(180%) blur(15px);
+		backdrop-filter: saturate(180%) blur(15px);
+		--bs-bg-opacity: .8 !important;
+	}
 }
 
-#timeControls:hover #timeControlsTooltip {
-	display: flex;
+#timeControls:hover #timeControlsTooltip, #timeControlsSlider:focus #timeControlsTooltip {
+	opacity: 1;
 }
 
 .slider::-webkit-slider-thumb {
 	-webkit-appearance: none;
 	appearance: none;
-	width: 10px;
-	height: 25px;
-	background: #d3d3d3;
+	width: 1rem;
+	height: 2rem;
+	background: var(--bs-light);
+	border-radius: .25rem;
 	cursor: pointer;
-  }
-  
-  .slider::-moz-range-thumb {
+	box-shadow: 0 .5rem 1rem rgba(17,17,17,.5);
+}
+
+.slider::-moz-range-thumb {
 	appearance: none;
-	width: 10px;
-	height: 25px;
-	background: #d3d3d3;
+	width: 1rem;
+	height: 2rem;
+	background: var(--bs-light);
+	border-radius: .25rem;
 	cursor: pointer;
-  }
-
-#author {
-	background-color: #555;
-	border: 1px #000 solid;
-	padding: 3px;
-	font-size: 12px;
-	z-index: 1100;
-	min-width: 320px;
-	text-align: center;
-	display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-#author p {
-	margin: 0;
-	line-height: inherit;
-}
-
-#zoomControls {
-	width: 90px;
-	display: flex;
-	align-self: flex-end;
-}
-
-#zoomControls button {
-	display: inline-block;
-	height: 30px;
-	width: 30px;
-	margin-left: -1px;
-	flex-grow: 1;
-	font-size: 20px;
-	line-height: 0;
-	font-weight: 300;
-	background-size: 15px;
-	background-repeat: no-repeat;
-	background-position: center;
-	background-color: #555;
-}
-
-#zoomControls button:focus {
-	outline: none;
-}
-
-#zoomControls button:hover {
-	background-color: #666;
-}
-
-#zoomInButton {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cpath d='M171.429 495.22h162.857M252.857 413.79v162.858' style='fill:none;stroke:%23fff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='translate(-156.438 -398.781)'/%3E%3C/svg%3E");
-}
-
-button#zoomResetButton {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cpath d='M334.284 576.652h-162.85l-.001-162.866h162.85z' style='fill:none;stroke:%23fff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='translate(-156.438 -398.781)'/%3E%3C/svg%3E");
-}
-
-#zoomOutButton {
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cpath d='M171.429 495.22h162.857' style='fill:none;stroke:%23fff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='translate(-156.438 -398.781)'/%3E%3C/svg%3E");
-}
-
-#entriesListContainer {
-	position: absolute;
-	left: 10px;
-	top: 50px;
-	bottom: 0;
-	padding-bottom: 0;
-	width: 340px;
-	display: flex;
-	flex-direction: column;
-}
-
-@media (max-width: 500px) {
-	div#entriesListContainer {
-		width: calc(100% - 20px);
-	}
-	
-	div#entriesListBackground {
-		width: 100%;
-	}
-
-	div:not(.listHidden) > #bottomBar {
-		display: none !important;
-	}
-
-	div:not(.listHidden) > button#hideListButton {
-		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cg style='stroke:%23fff;stroke-opacity:1'%3E%3Cpath d='m195.278 552.798 115.158-115.157M310.436 552.798 195.278 437.641' style='fill:none;stroke:%23fff;stroke-width:24.74926186;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='matrix(1.21216 0 0 1.21216 -210.083 -503.846)'/%3E%3C/g%3E%3C/svg%3E");
-		background-size: 20px;
-		position: absolute;
-		top: 55px;
-		right: 10px;
-		left: initial;
-		border: 1px #000 solid;
-		width: 40px;
-		height: 40px;
-	}
-
-	#entriesListNav {
-		width: calc(100% - 45px);
-	}
-}
-
-@media (max-width: 350px) {
-	#entriesListNav > a#drawLink {
-		display: none;
-	}
-}
-
-[data-mode="draw"] #entriesListContainer {
-	display: none;
-}
-
-.listHidden #entriesListContainer {
-	display: none;
+	box-shadow: 0 .5rem 1rem rgba(17,17,17,.5);
 }
 
 #entriesListNav {
@@ -937,334 +355,14 @@ #entriesListNav > .small:hover {
 	border-color: transparent;
 }
 
-#entriesListDonate:hover > svg {
-	text-decoration: none;
-	background-image: linear-gradient(to bottom, #FFAA00, #FFAA00);
-	border-radius: 15px;
-	padding: 3px;
-	margin: -3px;
-	height: 28px;
-	width: 28px;
-}
-#entriesListDiscord:hover > svg {
-	text-decoration: none;
-	background-image: linear-gradient(to bottom, #7289DA, #7289DA);
-	border-radius: 12px;
-	padding: 3px;
-	margin: -3px;
-	height: 28px;
-	width: 28px;
-}
-
-#entriesListBackground {
-	position: absolute;
-	left: 0;
-	top: 50px;
-	bottom: 0;
-	width: 360px;
-	z-index: -400;
-	background-color: #333;
-	border-right: 1px #000 solid;
-}
-
-[data-mode="draw"] #entriesListBackground {
-	display: none;
-}
-
-.listHidden #entriesListBackground {
-	display: none;
-}
-
-#hideListButton {
-	position: absolute;
-	height: 100px;
-	width: 15px;
-	top: 60px;
-	left: 360px;
-	border-left: none;
-	background-color: #444;
-	background-size: 7px;
-	background-repeat: no-repeat;
-	background-position: center;
-	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='165.157' height='260.426'%3E%3Cpath d='M310.436 552.798 195.278 437.585l115.158-115.213' style='fill:none;stroke:%23fff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='translate(-170.278 -307.372)'/%3E%3C/svg%3E");
-}
-
-.listHidden #hideListButton::before {
-	content: "Show List";
-	font-size: 17px;
-	font-weight: 300;
-	color: #BBB;
-	margin-left: 20px;
-}
-
-#hideListButton:hover {
-	background-color: #555;
-}
-
-[data-mode="draw"] #hideListButton {
-	display: none;
-}
-
-.listHidden #hideListButton {
-	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='272.844' height='177.594'%3E%3Cpath d='M368.07 380.006 252.857 495.164 137.644 380.006' style='fill:none;stroke:%23fff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='translate(-116.438 -348.781)'/%3E%3C/svg%3E")
-		,linear-gradient(to bottom, #555, #444);
-	background-size: 15px, cover;
-	background-position: 10px center, 0 0;
-	top: 49px;
-	left: 20px;
-	border: 1px #000 solid;
-	border-top: 1px #333 solid;
-	width: 130px;
-	height: 35px;
-	z-index: 100;
-}
-
-#hideListButton:focus {
-	outline: none;
-}
-
-#entriesListControls {
-	background-color: #555;
-	border: 1px #000 solid;
-	color: #CCC;
-	padding: 10px;
-	margin-bottom: 10px;
-}
-
-#entriesListControls input:focus {
-	outline: none;
-	border-color: #CCC;
-}
-
 [data-mode="explore"] #entriesListControls {
 	display: none;
 }
 
-#atlasSize {
-	display: block;
-	margin: 3px 0 5px 0;
-}
-
-#searchList {
-	width: 100%;
-}
-
-#sortContainer {
-	
-}
-
-#sortContainer label {
-	width: 70px;
-}
-
-#sort {
-	width: 150px;
-}
-
-#entriesListControls {
-	width: 100%;
-}
-
-#entriesList {
-	overflow-y: auto;
-	direction: rtl;
-	padding-bottom: 10px;
-	text-align: center;
-}
-
-#entriesList .object {
-	direction: ltr;
-	margin: 0 0 10px 5px;
-	text-align: left;
-}
-
-#aboutContainer {
-	position: absolute;
-	top: 50px;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background-color: #333;
-	display: block;
-	z-index: 2000;
-	overflow-y: auto;
-}
-
-#aboutBackButton {
-	margin: 20px 0 20px;
-	padding: 10px 20px;
-}
-
-#aboutBackButtonContainer {
-	/*margin: 0 auto;
-	width: 100%;
-	max-width: 1300px;*/
-}
-
-#about {
-	margin: 0 auto;
-	width: 100%;
-	max-width: 1000px;
-	padding: 10px;
-}
-
-#about a {
-	white-space: nowrap;
-}
-
-#about h2 {
-	font-weight: 300;
-	font-size: 30px;
-	margin-top: 30px;
-	margin-bottom: 10px;
-}
-
-#about h3 {
-	line-height: 1.4em;
-	text-align: center;
-}
-
-#contributors {
-	text-align: justify;
-	margin-top: 15px;
-	margin-bottom: 15px;
-}
-
-#contributors a {
-	margin: 3px;
-    line-height: 26px;
-}
-
-#donateButton {
-	cursor: pointer;
-}
-
-#donateWindow {
-	display: inline-block;
-	z-index: 2000;
-	max-width: 400px;
-	background-color: #444;
-	border: 1px #000 solid;
-	width: 100%;
-	text-align: center;
-	min-height: 50px;
-	max-height: 500px;
-	overflow: auto;
-	height: auto;
-	align-self: center;
-}
-
-#donateWindow {
-	top: 20px;
-	max-height: 100%;
-	max-width: 800px;
-}
-
-#donateWindow > p {
-	margin: 2px 0;
-	padding: 0 20px;
-	text-align: left;
-	width: 100%;
-}
-
-#donateWindow > * {
-	display: inline-block;
-	margin: 5px 0;
-}
-
-#donateWindow > h2 {
-	font-weight: 200;
-	background-color: #555;
-	width: 100%;
-	line-height: 1.5em;
-	margin: 10px 0;
-	text-shadow: 1px 1px 0 #000;
-}
-
-#donateWindow input {
-	width: 100%;
-	max-width: 350px;
-	font-size: 14px;
-	background-color: #666;
-	text-align: center;
-	cursor: text;
-	color: #FFF;
-}
-
-#donateWindow button {
-	padding: 10px 20px;
-	margin-bottom: 20px;
-	margin-top: 10px;
-}
-
-h2#abouth2 {
-	font-size: 40px;
-	margin-bottom: 20px;
-	text-shadow: 2px 2px 0 #000;
-}
-
-#viewModes {
-	position: relative;
-	display: inline-block;
-}
-
-#viewModes .buffer {
-	bottom: -10px;
-	left: 0;
-	position: absolute;
-	height: 20px;
-	width: 100%
-}
-
-#viewModes .dropdown-content {
-	margin-top: 1.5rem;
-	top: 10px;
-	left: 0;
-	position: absolute;
-	display: none;
-	background: #666;
-	border: 1px #000 solid;
-	cursor: pointer;
-	width: 125%
-}
-  
-#viewModes .dropdown-content a {
-	color: #FFF;
-	text-align: left;
-	padding: 5px 10px;
-	display: block;
-	text-decoration: none;
-	text-shadow: 1px 1px 0 #444;
-}
-  
-#viewModes .dropdown-content a:hover {
-	background-image: linear-gradient(to bottom, #999, #777);
-}
-  
-#viewModes:hover .dropdown-content,
-#viewModes:active .dropdown-content {
-	display: block;
-}
-
 body:not([data-dev]) .show-only-on-dev {
 	display: none !important;
 }
 
-#netlifyBadges {
-	display: flex;
-	align-items: center;
-	gap: .5rem
-}
-
-#donateWindow a.button {
-	padding: 1rem
-}
-
-#donateWindow a.button svg {
-	height: 1em;
-	vertical-align: -0.125em;
-}
-
-#donateWindow a.button path {
-	color: white;
+.nav-link.active {
+	font-weight: 700;
 }
\ No newline at end of file
diff --git a/web/_img/logo.svg b/web/_img/logo.svg
index a53fd296..1ce7808f 100644
--- a/web/_img/logo.svg
+++ b/web/_img/logo.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#ff4500;}</style></defs><rect class="cls-1" width="512" height="512"/><polygon class="cls-2" points="364 76 364 148 148 148 148 436 76 436 76 76 364 76"/><polygon class="cls-2" points="436 148 436 436 220 436 220 364 364 364 364 148 436 148"/><polygon class="cls-2" points="364 148 205 205 307 307 364 148"/><polygon points="205 205 148 364 307 307 205 205"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><style>.cls-1{fill:#000;}.cls-2{fill:#ff4500;}@media (prefers-color-scheme:dark){.cls-1 {fill: #fff;}</style></defs><polygon class="cls-2" points="364 76 364 148 148 148 148 436 76 436 76 76 364 76"/><polygon class="cls-2" points="436 148 436 436 220 436 220 364 364 364 364 148 436 148"/><polygon class="cls-2" points="364 148 205 205 307 307 364 148"/><polygon class="cls-1" points="205 205 148 364 307 307 205 205"/></svg>
\ No newline at end of file
diff --git a/web/_js/draw.js b/web/_js/draw.js
index 7026b86e..e4eca5bf 100644
--- a/web/_js/draw.js
+++ b/web/_js/draw.js
@@ -15,26 +15,34 @@
 
 function initDraw(){
 	
+	// Set up interface
 	wrapper.classList.remove('listHidden')
 
+	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>');
+
+	var myOffcanvas = document.getElementById("offcanvasDraw");
+	var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas);
+	bsOffcanvas.show();
+
 	window.render = render
 	window.renderBackground = renderBackground
 	window.updateHovering = updateHovering
 
+	// Initialize variables
 	var finishButton = document.getElementById("finishButton");
 	var resetButton = document.getElementById("resetButton");
 	var undoButton = document.getElementById("undoButton");
 	var redoButton = document.getElementById("redoButton");
-	var highlightUnchartedLabel = document.getElementById("highlightUnchartedLabel");
 	
-	var objectInfoBox = document.getElementById("objectInfo");
-	var hintText = document.getElementById("hint");
+	var drawControlsBody = document.getElementById("offcanvasDraw-drawControls");
+	var objectInfoBody = document.getElementById("offcanvasDraw-objectInfo");
+	var objectInfoForm = document.getElementById("objectInfo");
 	
-	var exportButton = document.getElementById("exportButton");
 	var cancelButton = document.getElementById("cancelButton");
 
-	var exportOverlay = document.getElementById("exportOverlay");
-	var exportCloseButton = document.getElementById("exportCloseButton");
+	var exportModal = new bootstrap.Modal(document.getElementById("exportModal"))
+	var exportModalElement = document.getElementById("exportModal")
 
 	var rShiftPressed = false;
 	var lShiftPressed = false;
@@ -116,14 +124,10 @@ function initDraw(){
 	});
 
 	window.addEventListener("keyup", function(e){
-		if(e.key == "Enter"){
-			finish();
-		} else if(e.key == "z" && e.ctrlKey){
+		if (e.key == "z" && e.ctrlKey){
 			undo();
 		} else if(e.key == "y" && e.ctrlKey){
 			redo();
-		} else if(e.key == "Escape"){
-			exportOverlay.style.display = "none";
 		} else if (e.key === "Shift" ){
 			if(e.code === "ShiftRight"){
 				rShiftPressed = false;
@@ -135,7 +139,9 @@ function initDraw(){
 	});
 
 	window.addEventListener("keydown", function(e){
-		if (e.key === "Shift" ){
+		if (e.key == "Enter"){
+			finish();
+		} else if (e.key === "Shift" ){
 			if(e.code === "ShiftRight"){
 				rShiftPressed = true;
 			} else if(e.code === "ShiftLeft"){
@@ -165,37 +171,17 @@ function initDraw(){
 		reset();
 	});
 
-	document.getElementById("nameField").addEventListener("keyup", function(e){
-		if(e.key == "Enter"){
-			exportJson();
-		}
+	// refocus on button when modal is closed
+	exportModalElement.addEventListener('hidden.bs.modal', function() {
+		document.getElementById("exportButton").focus();
 	});
 
-	document.getElementById("websiteField").addEventListener("keyup", function(e){
-		if(e.key == "Enter"){
-			exportJson();
-		}
+	// bind it the same as you bind a button, but on submit
+	objectInfoForm.addEventListener('submit', function(e) {
+		e.preventDefault()
+		exportJson()
 	});
 
-	document.getElementById("subredditField").addEventListener("keyup", function(e){
-		if(e.key == "Enter"){
-			exportJson();
-		}
-	});
-
-	exportButton.addEventListener("click", function(e){
-		exportJson();
-	});
-
-	exportCloseButton.addEventListener("click", function(e){
-		reset();
-		exportOverlay.style.display = "none";
-	});
-
-	exportCloseButton.addEventListener("click", function(e){
-		exportDirectPost();
-	})
-
 	document.getElementById("highlightUncharted").addEventListener("click", function(e){
 		highlightUncharted = this.checked;
 		render(path);
@@ -221,13 +207,9 @@ function initDraw(){
 		var directPostUrl = "https://www.reddit.com/r/placeAtlas2/submit?selftext=true&title=New%20Submission&text="+encodeURIComponent(document.getElementById("exportString").value);
 		document.getElementById("exportDirectPost").href=directPostUrl;
 
-		exportOverlay.style.display = "flex";
-		
-		textarea.focus();
-		textarea.select();
+		exportModal.show();
 	}
 
-
 	function calculateCenter(path){
 
 		var area = 0,
@@ -275,16 +257,13 @@ function initDraw(){
 	}
 
 	function finish(){
-		drawing = false;
-		render(path);
-		objectInfoBox.style.display = "block";
-		hintText.style.display = "none";
-		finishButton.style.display = "none";
-		undoButton.style.display = "none";
-		redoButton.style.display = "none";
-		resetButton.style.display = "none";
-		highlightUnchartedLabel.style.display = "none";
-		document.getElementById("nameField").focus();
+		if(drawing) {
+			drawing = false;
+			render(path);
+			objectInfoBody.removeAttribute("style");
+			drawControlsBody.style.display = "none";
+			document.getElementById("nameField").focus();
+		}
 	}
 
 	function reset(){
@@ -295,13 +274,8 @@ function initDraw(){
 		redoButton.disabled = true;
 		drawing = true;
 		render(path);
-		objectInfoBox.style.display = "none";
-		hintText.style.display = "block";
-		finishButton.style.display = "block";
-		undoButton.style.display = "block";
-		redoButton.style.display = "block";
-		resetButton.style.display = "block";
-		highlightUnchartedLabel.style.display = "block";
+		objectInfoBody.style.display = "none";
+		drawControlsBody.removeAttribute("style");
 
 		document.getElementById("nameField").value = "";
 		document.getElementById("descriptionField").value = "";
@@ -379,11 +353,13 @@ function initDraw(){
 				,(e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop))/zoom
 			];
 			var coords_p = document.getElementById("coords_p");
-			coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
-	
+
+			// Displays coordinates as zero instead of NaN
+			if (isNaN(pos[0]) == true) {
+				coords_p.innerText = "0, 0";
+			} else {
+				coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
+			}
 		}
 	}
-
 }
-
-
diff --git a/web/_js/infoblock.js b/web/_js/infoblock.js
index 3ee3065c..5033556d 100644
--- a/web/_js/infoblock.js
+++ b/web/_js/infoblock.js
@@ -14,10 +14,22 @@
 */
 
 function createInfoBlock(entry) {
-    function createInfoParagraph(name, value){
-        let entryParagraphPositionElement = document.createElement("p");
+    function createInfoItem(name, value){
+        let entryParagraphPositionElement = document.createElement("div");
         let nameElement = document.createElement("span");
-        nameElement.style.fontWeight = "bold";
+        nameElement.className = "fw-bold";
+        nameElement.innerText = name;
+        let valueElement = document.createElement("span");
+        valueElement.innerText = value;
+        entryParagraphPositionElement.appendChild(nameElement);
+        entryParagraphPositionElement.appendChild(valueElement);
+        return entryParagraphPositionElement;
+    }
+    function createInfoListItem(name, value){
+        let entryParagraphPositionElement = document.createElement("li");
+        entryParagraphPositionElement.className = "list-group-item";
+        let nameElement = document.createElement("span");
+        nameElement.className = "fw-bold";
         nameElement.innerText = name;
         let valueElement = document.createElement("span");
         valueElement.innerText = value;
@@ -27,44 +39,62 @@ function createInfoBlock(entry) {
     }
 
     var element = document.createElement("div");
-    element.className = "object";
+    element.className = "card mb-2 overflow-hidden shadow";
 
-    let headerElement = document.createElement("h2");
+    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.href = "#" + entry.id;
-    linkElement.innerText = entry.name;
+    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>');
+
+    let bodyElement = document.createElement("div");
 
     element.appendChild(headerElement);
-
-    if (entry.diff) {
-        let diffElement = createInfoParagraph("Diff: ", entry.diff);
-        diffElement.className = entry.diff;
-        element.appendChild(diffElement);
-    }
+    element.appendChild(bodyElement);
 
     if (entry.description) {
-        let descElement = document.createElement("p");
-        descElement.innerText = entry.description;
-        element.appendChild(descElement);
+        let descElement = document.createElement("div");
+        descElement.id = "objectDescription";
+        // descElement.innerText = entry.description;
+        descElement.innerHTML = '<p>' + entry.description.replace(/\n/g, '</p><p>');
+        bodyElement.appendChild(descElement);
     }
-    
-    let [x, y] = entry.center;
-    element.appendChild(createInfoParagraph("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`));
 
-    if(entry.path){
-        let area = calcPolygonArea(entry.path);
-        element.appendChild(createInfoParagraph("Area: ", `${area} pixels`));
+    let linkListElement = document.createElement("div");
+    if (entry.description || entry.website || entry.subreddit) {
+        bodyElement.className = "card-body d-flex flex-column gap-3";
+
+        if (entry.website || entry.subreddit) {
+            linkListElement.className = "d-flex flex-column gap-2";
+            bodyElement.appendChild(linkListElement);
+        }
     }
-    
+
     if (entry.website) {
+        let websiteGroupElement = document.createElement("div");
+        websiteGroupElement.className = "btn-group";
+        linkListElement.appendChild(websiteGroupElement);
+
         let websiteLinkElement = document.createElement("a");
+        websiteLinkElement.className = "btn btn-primary"
         websiteLinkElement.target = "_blank";
         websiteLinkElement.href = entry.website;
         websiteLinkElement.innerText = "Website";
-        element.appendChild(websiteLinkElement);
+        websiteGroupElement.appendChild(websiteLinkElement);
     }
+
+    
     if (entry.subreddit) {
+        let subredditGroupElement = document.createElement("div");
+        subredditGroupElement.className = "btn-group-vertical";
+        linkListElement.appendChild(subredditGroupElement);
+
         var subreddits = entry.subreddit.split(",");
 
         for (var i in subreddits) {
@@ -75,15 +105,52 @@ function createInfoBlock(entry) {
                 subreddit = "/r/" + subreddit;
             }
             let subredditLinkElement = document.createElement("a");
+            subredditLinkElement.className = "btn btn-primary text-truncate";
             subredditLinkElement.target = "_blank";
+            subredditLinkElement.rel = "noopener noreferrer";
             subredditLinkElement.href = "https://reddit.com" + subreddit;
             subredditLinkElement.innerText = subreddit;
-            element.appendChild(subredditLinkElement);
+            subredditGroupElement.appendChild(subredditLinkElement);
         }
     }
-    let idElement = createInfoParagraph("ID: ", entry.id);
-    idElement.style.fontFamily = "Dejavu Sans Mono, sans, Sans-Serif;";
-    element.appendChild(idElement);
+
+    let listElement = document.createElement("ul");
+    listElement.className = "list-group list-group-flush";
+    element.appendChild(listElement);
+
+    if (entry.diff) {
+        let diffElement = createInfoListItem("Diff: ", entry.diff);
+        if (entry.diff == "add") {
+            diffElement.className = "list-group-item list-group-item-success";
+        } else if (entry.diff == "edit") {
+            diffElement.className = "list-group-item list-group-item-warning";
+        } else if (entry.diff == "delete") {
+            diffElement.className = "list-group-item list-group-item-danger";
+        }
+        listElement.appendChild(diffElement);
+    }
+    
+    let [x, y] = entry.center;
+    listElement.appendChild(createInfoListItem("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`));
+
+    if(entry.path){
+        let area = calcPolygonArea(entry.path);
+        listElement.appendChild(createInfoListItem("Area: ", `${area} pixels`));
+    }
+
+    let idElement = createInfoItem("ID: ", entry.id);
+    let idElementContainer = document.createElement("div");
+    idElementContainer.className = "card-footer d-flex justify-content-between align-items-center";
+    idElementContainer.appendChild(idElement);
+    element.appendChild(idElementContainer);
+
+    let editElement = document.createElement("button");
+    editElement.type = "button";
+    editElement.innerText = "Edit";
+    editElement.className = "btn btn-sm btn-outline-primary";
+    editElement.href = "./?mode=draw&id=" + entry.id;
+    idElementContainer.appendChild(editElement);
+
 
     return element;
 }
\ No newline at end of file
diff --git a/web/_js/main.js b/web/_js/main.js
index 92acbcc7..8799eaea 100644
--- a/web/_js/main.js
+++ b/web/_js/main.js
@@ -37,13 +37,13 @@ var lastPosition = [0, 0];
 
 var viewportSize = [0, 0];
 
-document.getElementById("entriesListDonate").addEventListener("click", function(e){
-	document.getElementById("donateOverlay").style.display = "flex";
-});
+// document.getElementById("entriesListDonate").addEventListener("click", function(e){
+// 	document.getElementById("donateOverlay").style.display = "flex";
+// });
 
-document.getElementById("closeDonateButton").addEventListener("click", function(e){
-	document.getElementById("donateOverlay").style.display = "none";
-});
+// document.getElementById("closeDonateButton").addEventListener("click", function(e){
+// 	document.getElementById("donateOverlay").style.display = "none";
+// });
 
 function applyView(){
 	
diff --git a/web/_js/time.js b/web/_js/time.js
index 76e23a42..db688a2e 100644
--- a/web/_js/time.js
+++ b/web/_js/time.js
@@ -125,8 +125,8 @@ async function updateTime(index) {
         atlas = []
     }
     timeCallback(atlas)
-    if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp*1000).toUTCString()
-    else tooltip.querySelector('p').textContent = configObject.timestamp
+    if (typeof configObject.timestamp === "number") tooltip.querySelector('div').textContent = new Date(configObject.timestamp*1000).toUTCString()
+    else tooltip.querySelector('div').textContent = configObject.timestamp
     tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px"
 }
 
diff --git a/web/_js/view.js b/web/_js/view.js
index 55477eaa..62368335 100644
--- a/web/_js/view.js
+++ b/web/_js/view.js
@@ -33,7 +33,6 @@ var closeObjectsListButton = document.getElementById("closeObjectsListButton");
 var filterInput = document.getElementById("searchList");
 
 var entriesList = document.getElementById("entriesList");
-var hideListButton = document.getElementById("hideListButton");
 var entriesListShown = false;
 
 var sortedAtlas;
@@ -42,6 +41,8 @@ var entriesLimit = 50;
 var entriesOffset = 0;
 var moreEntriesButton = document.createElement("button");
 moreEntriesButton.innerHTML = "Show "+entriesLimit+" more";
+moreEntriesButton.type = "button"
+moreEntriesButton.className = "btn btn-primary d-block mb-2 mx-auto"
 moreEntriesButton.id = "moreEntriesButton";
 moreEntriesButton.onclick = function(){
 	buildObjectsList(null, null);
@@ -56,16 +57,6 @@ var lastPos = [0, 0];
 
 var fixed = false; // Fix hovered items in place, so that clicking on links is possible
 
-if(document.documentElement.clientWidth > 2000){
-	entriesListShown = true;
-	wrapper.classList.remove('listHidden')
-}
-
-if(document.documentElement.clientWidth < 2000){
-	entriesListShown = false;
-	wrapper.classList.add('listHidden')
-}
-
 filterInput.addEventListener("input", function(e){
 	entriesOffset = 0;
 	entriesList.innerHTML = "";
@@ -95,25 +86,43 @@ document.getElementById("sort").addEventListener("input", function(e){
 
 });
 
-hideListButton.addEventListener("click", function(e){
-	entriesListShown = !entriesListShown;
-	if(entriesListShown){
-		wrapper.classList.remove('listHidden')
-	} else {
-		wrapper.classList.add('listHidden')
-	}
+var showDraw = document.getElementById('offcanvasDraw')
+showDraw.addEventListener('show.bs.offcanvas', function() {
+	wrapper.classList.remove('listHidden');
+	applyView();
+})
+
+var hideDraw = document.getElementById('offcanvasDraw')
+hideDraw.addEventListener('hide.bs.offcanvas', function() {
+	wrapper.classList.add('listHidden');
+	applyView();
+})
+
+var showList = document.getElementById('offcanvasList')
+showList.addEventListener('show.bs.offcanvas', function(e) {
+	entriesListShown = true;
+	wrapper.classList.remove('listHidden');
 	updateHovering(e);
 	applyView();
 	render();
 	updateLines();
-	return false;
 });
 
-closeObjectsListButton.addEventListener("click", function(e){
+var hideList = document.getElementById('offcanvasList')
+hideList.addEventListener('hide.bs.offcanvas', function(e) {
+	entriesListShown = false;
+	wrapper.classList.add('listHidden');
+	updateHovering(e);
+	applyView();
+	render();
+	updateLines();
+});
+
+closeObjectsListButton.addEventListener("click", function(){
 	hovered = [];
 	objectsContainer.innerHTML = "";
 	updateLines();
-	closeObjectsListButton.className = "hidden";
+	closeObjectsListButton.className = "d-none";
 	fixed = false;
 	render();
 });
@@ -140,7 +149,7 @@ objectsContainer.addEventListener("scroll", function(e){
 	updateLines();
 });
 
-window.addEventListener("resize", function(){
+window.addEventListener("resize", function(e){
 	//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
 
 	var viewportWidth = document.documentElement.clientWidth;
@@ -621,7 +630,13 @@ function updateHovering(e, tapped){
 			,(e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop))/zoom
 		];
 		var coords_p = document.getElementById("coords_p");
-		coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
+
+		// Displays coordinates as zero instead of NaN
+		if (isNaN(pos[0]) == true) {
+			coords_p.innerText = "0, 0";
+		} else {
+			coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
+		}
 
 		if(pos[0] <= 2200 && pos[0] >= -100 && pos[0] <= 2200 && pos[0] >= -100){
 			var newHovered = [];
@@ -660,9 +675,9 @@ function updateHovering(e, tapped){
 				}
 
 				if(hovered.length > 0){
-					closeObjectsListButton.className = "";
+					closeObjectsListButton.className = "btn btn-secondary shadow";
 				} else {
-					closeObjectsListButton.className = "hidden";
+					closeObjectsListButton.className = "d-none";
 				}
 
 
@@ -689,6 +704,18 @@ function highlightEntryFromUrl(){
 
 		document.title = entry.name + " on the 2022 /r/place Atlas";
 		
+		var objectEditNav = document.getElementById("objectEditNav");
+		if (objectEditNav) {
+			objectEditNav.href = "./?mode=draw&id=" + id;
+			objectEditNav.title = "Edit " + entry.name;
+		}
+		else {
+			document.getElementById("showListButton").insertAdjacentHTML("afterend", '<a class="btn btn-outline-primary" type="button" id="objectEditNav" href="" title="">Edit</a>');
+			let objectEditNav = document.getElementById("objectEditNav");
+			objectEditNav.href = "./?mode=draw&id=" + id;
+			objectEditNav.title = "Edit " + entry.name;
+		}
+		
 		var infoElement = createInfoBlock(entry);
 		objectsContainer.innerHTML = "";
 		objectsContainer.appendChild(infoElement);
@@ -716,7 +743,7 @@ function highlightEntryFromUrl(){
 		hovered = [entry];
 		render();
 		hovered[0].element = infoElement;
-		closeObjectsListButton.className = "";
+		closeObjectsListButton.className = "btn btn-secondary shadow";
 		updateLines();
 		fixed = true;
 	}
diff --git a/web/about.html b/web/about.html
index 35ca116e..2ae73f76 100644
--- a/web/about.html
+++ b/web/about.html
@@ -24,80 +24,118 @@
 		<meta name="robots" content="index, follow">
 		
 		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
-		<meta name="color-scheme" content="dark">
+		<meta name="color-scheme" content="light dark">
 		
+		<link rel="apple-touch-icon" href="_img/apple-touch-icon.png" sizes="180x180">
 		<link rel="icon alternate" href="_img/favicon.png" type="image/png" class="js-site-favicon">
 		<link rel="icon" href="_img/favicon.svg" type="image/svg+xml" class="js-site-favicon">
     
-		<link href="./_css/style.css" rel="stylesheet" type="text/css" media="all">
+		<link href="./_css/style.css" rel="stylesheet" type="text/css">
+		
+		<link href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-dark.min.css" rel="stylesheet">
 		<script type="text/javascript" src="./_js/favicon.js" defer></script>
-    
 	</head>
 	<body>
-		<div id="wrapper">
-			<header class="aboutHeader">
-				<a href="./">
-					<img id="logo" src="./_img/logo.svg" height="50" width="50" alt="">
-					<h1>The 2022 /r/place Atlas</h1>
+		<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="">
+					The 2022 /r/place Atlas
 				</a>
-				<!--nav>
-					<a id="viewLink" href="./" class="current">View</a>
-					<a id="drawLink" href="./?mode=draw">Draw</a>
-					<a id="aboutLink" href="./about.html">About</a>
-				</nav-->
-			</header>
-			
-			<div id="author" style="right:25px">
-				Code by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a> (<a target="_blank" href="https://github.com/Codixer/place-atlas">2022 Version Github</a>).
-			</div>
-			
-			
-			<div id="aboutContainer">
-				<div id="about">
-					<a id="aboutBackButton" class="button" href="./">&lt; Back to the Atlas</a>
-					<a href="https://www.netlify.com" id="netlifyBadges">
-						<img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg" alt="Deploys by Netlify" />
-						<img src="https://api.netlify.com/api/v1/badges/1e7291ce-0680-45ed-9843-47a32a992bbb/deploy-status" alt="Deploys by Netlify" />
-					</a>
-					<h2 id="abouth2">The 2022 /r/place Atlas</h2>
-					<p>This is an Atlas aiming to chart all the artworks created during the <a href="https://www.reddit.com/r/place/">/r/place</a> April Fools event on <a href="https://www.reddit.com/" target="_blank">Reddit</a> in 2022.</p>
-					<p>The original code was developed by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a> (<a href="mailto:roland.rytz@gmail.com" target="_blank">mail</a>, <a href="https://reddit.com/user/draemmli/" target="_blank">reddit</a>) and is available under the free <a href="https://www.gnu.org/licenses/agpl-3.0.en.html" target="_blank">AGPL license</a> on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a>.</p>
-					<br>
-					<p>The currently maintained version of the website is managed by <a href="/" target="_blank" rel="author">Stefano Haagmans</a> and is obtainable under the same license within a <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub fork</a>. Images are provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.</p>
-					<p>Maintaining and updating the website takes work, but I enjoy doing it for free and giving this to people. But if you would like to support me, or the people who helped me with contributions to this project. You're free to support us though <a target="_blank" href="https://paypal.me/placeAtlas/5">PayPal</a>, <a target="_blank" href="https://www.patreon.com/placeAtlas">Patreon</a>, or <a target="_blank" href="https://ko-fi.com/placeatlas">Ko-Fi</a>.</p>
-					<p>To maintain the same tradition, I will also be offering stickers to anyone donating more then 20$ (Due to the size increase). But, you're not forced to do anything! This only shows appreciation to us and the people who've worked on this project</p>
-					<br>
-					<p>Roland Rytz worked on the Atlas full-time (and more!) for over two weeks during the 2017 r/place event.</p>
-					<p>If you'd like to support Roland, you can do so by <a target="_blank" href="https://paypal.me/draemmli">PayPal</a>.</p>
-					<p>If you donate more than 10(€/$/CHF/mBTC), He'll (hopefully) send you a nice sticker of the 2017 Place canvas!</p>
-					
-					<h2>How to contribute</h2>
-					<p>The /r/Place Atlas project relies on user contributions.</p>
-					<p>To contribute a label for an artwork, please read <a href="https://www.reddit.com/r/placeAtlas2/comments/tu203o/how_to_contribute/" target="_blank">this post on Reddit</a> to learn how to submit a new entry.</p>
-					<p>Alternatively, contributions can be made directly on <a href="https://github.com/placeAtlas/atlas/blob/master/CONTRIBUTING.md">GitHub</a>.</p>
-					<p>The <a href="https://reddit.com/r/placeAtlas2/" target="_blank">/r/placeAtlas2</a> subreddit is also the place to submit all bug reports, feature requests or questions.</p>
-					
-
-					<h2>r/placeAtlas2 (Current) Contributors and Maintainers</h2>
-					<div id="contributors">
-						<a href="https://reddit.com/user/TCOOfficiall" target="_blank">TCOOfficiall (current maintainer)</a> ·
-						<a href="https://reddit.com/user/prosto_sanja" target="_blank">prosto_sanja (images)</a> <a href="https://place.thatguyalex.com/" target="_blank">(website)</a> ·
-						<a href="https://reddit.com/user/electric-blue" target="_blank">electric-blue</a> ·
-						<a href="https://reddit.com/user/m654zy" target="_blank">m654zy</a> ·
-						<a href="https://reddit.com/user/xXLInkster17Xx" target="_blank">xXLInkster17Xx</a>
-					</div>
-					<p>The 2022 Atlas would not have been possible without the help of our reddit contributors. This section will be updated with all of the contributor's usernames.</p>
-					<p>Thank you to everyone who submitted new entries, amended existing ones, reported bugs and just supported the project in general.</p>
-					
-					<h2 id="contacth2">Contact?</h2>
-					<p>If you're press, a influencer or anything media connected, or you would like to use the atlas in one. Please contact us beforehand through:</p>
-					<p> - <a href="mailto:press@stefanocoding.me" target="_blank">press@stefanocoding.me</a></p>
-					<br>
-					<p>If you need to contact me regarding anything else, you can reach me through:</p>
-					<p> - <a href="mailto:stefano@stefanocoding.me" target="_blank">stefano@stefanocoding.me</a></p>
-					</div>
+				<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">
+					<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>
+				</button>
+				<div class="navbar-collapse collapse" id="navbarCollapse">
+					<ul class="navbar-nav ms-auto pt-2 pt-md-0">
+						<li class="nav-item">
+							<a class="nav-link" href="./">Atlas Map</a>
+						</li>
+						<li class="nav-item">
+							<a class="nav-link active" aria-current="page" href="#">About</a>
+						</li>
+					</ul>
 				</div>
 			</div>
-		</div>
+		</nav>
+		<main class="pt-5">
+			<div class="container py-4">
+				<!-- <header class="d-flex flex-column flex-sm-row align-items-center pb-3 mb-4 border-bottom">
+					<a href="./" class="d-flex align-items-center mb-3 mb-sm-0 me-sm-auto text-body text-decoration-none">
+						<img class="me-2" src="./_img/logo.svg" height="32" width="32" alt="">
+						<span class="fs-4">The 2022 /r/place Atlas</span>
+					</a>
+					<ul class="nav nav-pills">
+						<li class="nav-item"><a href="./" class="nav-link">Atlas Map</a></li>
+						<li class="nav-item"><a href="#" class="nav-link active" aria-current="page">About</a></li>
+					</ul>
+				</header> -->
+				
+				<div class="row g-5">
+					<div class="col-md-7 col-xl-8">
+						<h1 class="display-5 fw-bold">The 2022 /r/place Atlas</h2>
+						<p>This is an Atlas aiming to chart all the artworks created during the <a href="https://www.reddit.com/r/place/">/r/place</a> April Fools event on Reddit in 2022.</p>
+						<p>The original code was developed by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="noopener noreferrer">Roland Rytz</a> (<a href="mailto:roland.rytz@gmail.com">mail</a>, <a href="https://reddit.com/user/draemmli/" target="_blank" rel="noopener noreferrer">reddit</a>) and is available under the free <a href="https://www.gnu.org/licenses/agpl-3.0.en.html" target="_blank" rel="noopener noreferrer">AGPL license</a> on <a href="https://github.com/RolandR/place-atlas" target="_blank" rel="noopener noreferrer">GitHub</a>.</p>
+						<hr>
+						<p>The currently maintained version of the website is managed by Stefano Haagmans and is obtainable under the same license within a <a href="https://github.com/placeAtlas/atlas" target="_blank" rel="noopener noreferrer">GitHub fork</a>. Images are provided by <a href="https://place.thatguyalex.com/">Alex Tsernoh</a>.</p>
+						<p>Maintaining and updating the website takes work, but I enjoy doing it for free and giving this to people. But if you would like to support me, or the people who helped me with contributions to this project. You're free to support us though <a href="https://paypal.me/placeAtlas/5" target="_blank" rel="noopener noreferrer">PayPal</a>, <a href="https://www.patreon.com/placeAtlas" target="_blank" rel="noopener noreferrer">Patreon</a>, or <a href="https://ko-fi.com/placeatlas" target="_blank" rel="noopener noreferrer">Ko-Fi</a>.</p>
+						<p>To maintain the same tradition, I will also be offering stickers to anyone donating more then 20$ (Due to the size increase). But, you're not forced to do anything! This only shows appreciation to us and the people who've worked on this project</p>
+						<p>Roland Rytz worked on the Atlas full-time (and more!) for over two weeks during the 2017 r/place event. If you'd like to support Roland, you can do so by <a href="https://paypal.me/draemmli" target="_blank" rel="noopener noreferrer">PayPal</a>. If you donate more than 10(€/$/CHF/mBTC), He'll (hopefully) send you a nice sticker of the 2017 Place canvas!</p>
+						<h2>How to contribute</h2>
+						<p>The /r/place Atlas project relies on user contributions.</p>
+						<p>To contribute a label for an artwork, please read <a href="https://www.reddit.com/r/placeAtlas2/comments/tu203o/how_to_contribute/" target="_blank" rel="noopener noreferrer">this post on Reddit</a> to learn how to submit a new entry. Alternatively, contributions can be made directly on <a href="https://github.com/placeAtlas/atlas/blob/master/CONTRIBUTING.md">GitHub</a>.</p>
+						<p>The <a href="https://reddit.com/r/placeAtlas2/" target="_blank" rel="noopener noreferrer">/r/placeAtlas2</a> subreddit is also the place to submit all bug reports, feature requests or questions.</p>
+						
+						<h2>Contributors and Maintainers</h2>
+						<ul>
+							<li>Current maintainer: <a href="https://reddit.com/user/TCOOfficiall" target="_blank" rel="noopener noreferrer">TCOOfficiall</a></li>
+							<li>Images: <a href="https://reddit.com/user/prosto_sanja" target="_blank" rel="noopener noreferrer">prosto_sanja</a> (<a href="https://place.thatguyalex.com/" target="_blank" rel="noopener noreferrer">website</a>)</li>
+							<li>Contributor: <a href="https://reddit.com/user/electric-blue" target="_blank" rel="noopener noreferrer">electric-blue</a></li>
+							<li>Contributor: <a href="https://reddit.com/user/m654zy" target="_blank" rel="noopener noreferrer">m654zy</a></li>
+							<li>Contributor: <a href="https://reddit.com/user/xXLInkster17Xx" target="_blank" rel="noopener noreferrer">xXLInkster17Xx</a></li>
+						</ul>
+						<p>The 2022 Atlas would not have been possible without the help of our reddit contributors. This section will be updated with all of the contributor's usernames.</p>
+						<p>Thank you to everyone who submitted new entries, amended existing ones, reported bugs and just supported the project in general.</p>
+					</div>
+					<div class="col-md-5 col-xl-4">
+						<div class="position-sticky" style="top: 5rem;">
+						  <div class="p-4 mb-3 bg-secondary bg-opacity-10 rounded">
+							<h4>Contact?</h4>
+								<p>If you're press, a influencer or anything media connected, or you would like to use the atlas in one. Please contact us beforehand through:</p>
+								<ul>
+									<li><a href="mailto:press@stefanocoding.me">press@stefanocoding.me</a></li>
+								</ul>
+								<p>If you need to contact me regarding anything else, you can reach me through:</p>
+								<ul>
+									<li><a href="mailto:stefano@stefanocoding.me">stefano@stefanocoding.me</a></li>
+								</ul>
+						  </div>
+						  <div class="p-4">
+							<h4>Sponsor this project</h4>
+							<p>Current 2022 Atlas Maintainers:</p>
+							<ul class="mb-0">
+								<li><a href="https://paypal.me/placeAtlas/5">PayPal</a></li>
+								<li><a href="https://www.patreon.com/placeAtlas">Patreon</a></li>
+								<li><a href="https://ko-fi.com/placeatlas">Ko-Fi</a></li>
+							</ul>
+						  </div>
+						  <div class="p-4">
+							<h4>Deployment</h4>
+							<p>Site powered by Netlify.</p>
+							<a class="d-flex flex-wrap justify-content-left gap-2" href="https://www.netlify.com" target="_blank" rel="noopener">
+								<img src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg" alt="Deploys by Netlify" />
+								<img src="https://api.netlify.com/api/v1/badges/1e7291ce-0680-45ed-9843-47a32a992bbb/deploy-status" type="image/svg+xml" alt="Deploys by Netlify" />
+							</a>
+						  </div>
+						</div>
+					</div>
+				</div>
+				<footer class="pt-3 mt-4 text-muted border-top">
+					Code by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="noopener noreferrer author">Roland Rytz</a>. Source on <a href="https://github.com/RolandR/place-atlas" target="_blank" rel="noopener noreferrer">GitHub</a> (<a href="https://github.com/placeAtlas/atlas" target="_blank" rel="noopener noreferrer">2022 Version Github</a>).
+				</footer>
+			</div>
+		</main>
+		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 	</body>
 </html>
diff --git a/web/index.html b/web/index.html
index 4567c057..4f1d4c7e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -37,13 +37,16 @@
 		
 		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, shrink-to-fit=no"> <!-- user-scalable=no -->
 		<meta name="mobile-web-app-capable" content="yes">
-		<meta name="color-scheme" content="dark">
-
+		<meta name="color-scheme" content="light dark">
+		
 		<link rel="apple-touch-icon" href="_img/apple-touch-icon.png" sizes="180x180">
 		<link rel="icon alternate" href="_img/favicon.png" type="image/png" class="js-site-favicon">
 		<link rel="icon" href="_img/favicon.svg" type="image/svg+xml" class="js-site-favicon">
 		
-		<link href="./_css/style.css" rel="stylesheet" type="text/css" media="all">
+		<link rel="stylesheet" href="./_css/style.css" type="text/css">
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.3/dist/css/bootstrap-dark.min.css">
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
+
 		<link rel="manifest" href="./manifest.webmanifest">
 		
 		<script type="text/javascript" src="./_js/favicon.js" defer></script>
@@ -79,20 +82,44 @@
 		</script>
 	</head>
 	<body>
-		<div id="wrapper">
-			<header>
-				<a href="./">
-					<img id="logo" src="./_img/logo.svg" height="50" width="50" alt="Logo">
-					<!-- If you wonder why I shrink the image in html,
-					     it's because this is the image that will be used
-					     by reddit and the like as the thumbnail for the site.
-					     The original is only 5.9kB, which wouldn't get much
-					     smaller by reducing the actualy size.  -->
-					<h1 id="title">The 2022 /r/place Atlas</h1>
-				</a>
+		<div id="wrapper" class="listHidden">
+			<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="">
+						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">
+						<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>
+					</button>
+					<div class="collapse navbar-collapse" id="navbarCollapse">
 
-			</header>
-			
+						<ul class="navbar-nav me-auto my-2 my-md-0">
+							<li class="nav-item">
+								<div class="btn-group" role="group">
+									<button id="showListButton" class="btn btn-outline-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasList" aria-controls="offcanvasList">Enteries List</button>
+								</div>
+							</li>
+						</ul>
+						<ul class="navbar-nav mx-auto">
+							<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>
+						</ul>
+						<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>
+							</li>
+							<li class="nav-item col-6 col-md-auto">
+								<a href="./about.html" class="nav-link">About</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</nav>
 			<div id="container">
 				<div id="loading">
 					<div id="loadingContent">
@@ -112,160 +139,274 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 					<img id="image" width="2000" height="2000" alt="Canvas of /r/place in the state of when the experiment was concluded." />
 				</div>
 			</div>
-			
-			<div id="entriesListContainer">
-				<nav id="entriesListNav">
-					<a id="aboutLink" href="./about.html" class="button">About</a>
-					<a id="drawLink" href="./index.html?mode=draw" class="button">Draw</a>
-					<div class="dropdown button" id="viewModes">
-						<span>Modes</span>
-						<span class="buffer"></span>
-						<div class="dropdown-content">
-						  <a href="./">Normal</a>
-						  <a href="./?mode=explore">Explore</a>
-						  <a href="./?mode=overlap">Overlap</a>
-						  <a href="./?mode=diff" class="show-only-on-dev">With Diff</a>
-						  <a href="./?mode=diffonly" class="show-only-on-dev">Diff Only</a>
+			<div class="offcanvas offcanvas-start bg-body" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasList" aria-labelledby="offcanvasListLabel">
+				<header class="offcanvas-header py-2 border-bottom">
+					<div class="d-flex align-items-center py-1">
+						<h5 class="offcanvas-title" id="offcanvasListLabel">Atlas Entries List</h5>
+					</div>
+					<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+				</header>
+				<div class="py-3 mx-3 border-bottom">
+					<div class="d-flex gap-2 mb-2">
+						<a class="btn btn-primary w-50" id="drawLink" href="./?mode=draw">Draw</a>
+						<button type="button" class="btn btn-primary dropdown-toggle w-50" id="dropdownModes" data-bs-toggle="dropdown" aria-expanded="false">Modes</button>
+						<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownModes">
+							<li><a class="dropdown-item" href="./">Normal</a></li>
+							<li><a class="dropdown-item" href="./?mode=explore">Explore</a></li>
+							<li><a class="dropdown-item" href="./?mode=overlap">Overlap</a></li>
+							<li><hr class="dropdown-divider show-only-on-dev"></li>
+							<li><a class="dropdown-item show-only-on-dev" href="./?mode=diff" title="View normal mode with diff">With Diff</a></li>
+							<li><a class="dropdown-item show-only-on-dev" href="./?mode=diffonly" title="View only diff">Diff Only</a></li>
+						</ul>
+					</div>
+					<div class="btn-group w-100 mb-3" role="group" aria-label="Social links and donate button">
+						<a class="btn btn-outline-primary" href="https://discord.gg/pJkm23b2nA" target="_blank" rel="noopener noreferrer">
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16"><path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"></path></svg>
+							Discord
+						</a>
+						<a class="btn btn-outline-primary" href="https://www.reddit.com/r/placeAtlas2/" target="_blank" rel="noopener noreferrer">
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-reddit" viewBox="0 0 16 16"><path d="M6.167 8a.831.831 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661zm1.843 3.647c.315 0 1.403-.038 1.976-.611a.232.232 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83.458 0 .83-.381.83-.83a.831.831 0 0 0-1.66 0z"/><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.203.203 0 0 0-.153.028.186.186 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224c-.02.115-.029.23-.029.353 0 1.795 2.091 3.256 4.669 3.256 2.577 0 4.668-1.451 4.668-3.256 0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165z"/></svg>
+							Reddit
+						</a>
+						<button type="button" title="Donation links" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#donateModal">
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-currency-exchange" viewBox="0 0 16 16">
+								<path d="M0 5a5.002 5.002 0 0 0 4.027 4.905 6.46 6.46 0 0 1 .544-2.073C3.695 7.536 3.132 6.864 3 5.91h-.5v-.426h.466V5.05c0-.046 0-.093.004-.135H2.5v-.427h.511C3.236 3.24 4.213 2.5 5.681 2.5c.316 0 .59.031.819.085v.733a3.46 3.46 0 0 0-.815-.082c-.919 0-1.538.466-1.734 1.252h1.917v.427h-1.98c-.003.046-.003.097-.003.147v.422h1.983v.427H3.93c.118.602.468 1.03 1.005 1.229a6.5 6.5 0 0 1 4.97-3.113A5.002 5.002 0 0 0 0 5zm16 5.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0zm-7.75 1.322c.069.835.746 1.485 1.964 1.562V14h.54v-.62c1.259-.086 1.996-.74 1.996-1.69 0-.865-.563-1.31-1.57-1.54l-.426-.1V8.374c.54.06.884.347.966.745h.948c-.07-.804-.779-1.433-1.914-1.502V7h-.54v.629c-1.076.103-1.808.732-1.808 1.622 0 .787.544 1.288 1.45 1.493l.358.085v1.78c-.554-.08-.92-.376-1.003-.787H8.25zm1.96-1.895c-.532-.12-.82-.364-.82-.732 0-.41.311-.719.824-.809v1.54h-.005zm.622 1.044c.645.145.943.38.943.796 0 .474-.37.8-1.02.86v-1.674l.077.018z"/>
+							</svg>
+							Donate
+						</button>
+					</div>
+					<div id="entriesListControls" class="d-flex flex-column gap-2 p-3 bg-secondary bg-opacity-10 rounded">
+						<span id="atlasSize"></span>
+						<input autofocus class="form-control" id="searchList" type="search" placeholder="Search…" autocomplete="off" spellcheck="false" aria-label="Search entries">
+						<div class="d-flex align-items-center gap-2"><label>Sort:</label>
+							<select class="form-select" id="sort" title="Sort entries">
+								<option selected value="shuffle">Random</option>
+								<option value="relevant" id="relevantOption" disabled>Relevant</option>
+								<option value="alphaAsc">↓ Alphabetical</option>
+								<option value="alphaDesc">↑ Alphabetical</option>
+								<option value="newest">Newest</option>
+								<option value="oldest">Oldest</option>
+								<option value="area">Area</option>
+							</select>
 						</div>
-					</div> 
-					<a title="Discord" href="https://discord.gg/pJkm23b2nA" class="button small" id="entriesListDiscord">
-						<svg xmlns="http://www.w3.org/2000/svg" width="71" height="55" viewBox="0 0 71 55"><path fill="#FFF" d="M60 5a59 59 0 0 0-15-4l-1 3H27a37 37 0 0 0-2-4 58 58 0 0 0-14 5A60 60 0 0 0 0 46a59 59 0 0 0 18 8l4-5v-1l-6-2v-1a30 30 0 0 0 2-1 42 42 0 0 0 36 0l1 1v1l-6 2v1a47 47 0 0 0 4 6 59 59 0 0 0 18-10A60 60 0 0 0 60 5ZM24 37c-4 0-7-3-7-7s3-7 7-7c3 0 6 3 6 7s-3 7-6 7Zm23 0c-3 0-6-3-6-7s3-7 6-7c4 0 7 3 7 7s-3 7-7 7Z"/ alt="Discord"></svg>
-					</a>
-					<button title="Donate!" id="entriesListDonate" class="small">
-						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M291 384c-1-6-6-8-13-9v-9h-5v9h-4v-9h-6v9h-10v6h3c3 0 3 1 3 2v10h1-1v14c0 1 0 2-2 2h-3l-1 6h10v9h6v-9h4v9h5v-9c9 0 15-3 16-11 1-7-3-10-8-11 3-1 5-4 5-9zm-7 19c0 7-12 6-15 6v-12c3 0 15-1 15 6zm-3-16c0 6-9 5-12 5v-11c3 0 12-1 12 6z" style="fill:#fff" transform="translate(-239 -363)"/ alt="Donate"></svg>
+					</div>
+				</div>
+				<div id="entriesList" class="card-deck pe-3 mx-3 mt-3 overflow-auto"></div>
+			</div>
+			<div id="bottomBar" class="d-flex flex-wrap gap-2 p-2">
+
+				<div id="zoomControls" class="btn-group shadow" role="group" aria-label="Zoom controls">
+					<button type="button" class="btn btn-secondary" id="zoomInButton" title="Zoom in">
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
+							<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+						</svg>
 					</button>
-				</nav>
-				<div id="entriesListControls">
-					<input autofocus id="searchList" type="text" placeholder="Search...">
-					<span id="atlasSize"></span>
-					<div id="sortContainer"><label>Sort:</label>
-						<select id="sort">
-							<option value="shuffle">Random</option>
-							<option value="relevant" id="relevantOption" disabled>Relevant</option>
-							<option value="alphaAsc">↓ Alphabetical</option>
-							<option value="alphaDesc">↑ Alphabetical</option>
-							<option value="newest">Newest</option>
-							<option value="oldest">Oldest</option>
-							<option value="area">Area</option>
-						</select>
+					<button type="button" class="btn btn-secondary" id="zoomResetButton" title="Reset view">
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-square" viewBox="0 0 16 16">
+							<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
+						</svg>
+					</button>
+					<button type="button" class="btn btn-secondary" id="zoomOutButton" title="Zoom out">
+						<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dash-lg" viewBox="0 0 16 16">
+							<path fill-rule="evenodd" d="M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8Z"/>
+						</svg>
+					</button>
+				</div>
+				<div class="" id="timeControls">
+					<div class="tooltip fade text-nowrap" role="tooltip" id="timeControlsTooltip"><div class="bg-body rounded p-1">Tooltip</div></div>
+					<label for="timeControlsSlider" class="visually-hidden">Time control slider</label>
+					<input type="range" class="slider bg-secondary px-1 rounded shadow" min="1" max="1" value="1" id="timeControlsSlider" aria-describedby="timeControlsTooltip"></input>
+				</div>
+				<div class="flex-grow-1" id="variantControls">
+					<select class="form-select shadow" name="variants" id="variants" title="Background image variants">
+						<option value="default" selected>r/place</option>
+						<option value="tfc">The Final Clean</option>
+					</select>
+				</div>
+				<div id="author" class="bg-body flex-grow-1 flex-shrink-1  d-flex align-items-center justify-content-center p-2 rounded shadow">
+					<span style="font-size: 0.75rem;">Code owned by <a href="https://github.com/placeAtlas/atlas" target="_blank" rel="noopener noreferrer">Place Atlas</a>. Source on <a href="https://github.com/placeAtlas/atlas" target="_blank" rel="noopener noreferrer">GitHub</a>. Site powered by <a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer">Netlify</a>. Images provided by <a href="https://place.thatguyalex.com/" target="_blank" rel="noopener noreferrer">Alex Tsernoh</a>.</span>
+				</div>
+			</div>
+			<div class="offcanvas offcanvas-start bg-body" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasDraw" aria-labelledby="offcanvasDrawLabel">
+				<header class="offcanvas-header py-2 border-bottom">
+					<div class="d-flex align-items-center py-1">
+						<h5 class="offcanvas-title" id="offcanvasDrawLabel">Edit Entry</h5>
 					</div>
-				</div>
-				<div id="entriesList">
-					
-				</div>
-			</div>
-			<div id="entriesListBackground"></div>
-			
-			<button id="hideListButton" aria-label:="Show List Button"></button>
+					<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+				</header>
+				<div class="offcanvas-body" id="offcanvasDraw-drawControls">
+					<div id="drawControls" class="d-flex flex-column gap-2 p-3 mb-3 bg-secondary bg-opacity-10 rounded">
+						<div class="d-flex gap-2">
+							<button type="button" class="btn btn-secondary flex-fill" id="undoButton" title="Undo line [ctrl-z]" disabled>
+								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/></svg>
+								Undo
+							</button>
+							<button type="button" class="btn btn-secondary flex-fill" id="redoButton" title="Redo line [ctrl-y]" disabled>
+								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/><path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/></svg>
+								Redo
+							</button>
+						</div>
+						<button type="button" class="btn btn-primary" id="finishButton" title="Finish drawing [enter]" disabled>Finish</button>
+						<button type="button" class="btn btn-secondary" id="resetButton">Reset</button>
 
-			<div id="coordsWrapper" class="collapsed">
-
-				<div id="coords">
-					<p id="coords_p">0, 0</p>
-				</div>
-			</div>
-			
-			<div id="bottomBar">
-				<div id="zoomControls">
-					<button title="Zoom In" id="zoomInButton"></button>
-					<button title="Reset View" id="zoomResetButton"></button>
-					<button title="Zoom Out" id="zoomOutButton"></button>
-				</div>
-				<div id="timeControls">
-					<div id="timeControlsTooltip"><p>Time control slider</p></div>
-					<input type="range" min="1" max="1" value="1" class="slider" id="timeControlsSlider">
-				</div>
-				<div id="author">
-					<p>Code owned by <a href="https://github.com/placeAtlas/atlas" target="_blank" rel="author">Place Atlas</a>. Source on <a target="_blank" href="https://github.com/placeAtlas/atlas">GitHub</a>. Site powered by <a href="https://www.netlify.com">Netlify</a>. Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.</p>
-				</div>
-			</div>
-			
-			<div id="drawControlsContainer">
-				<a id="drawBackButton" class="button" href="./">&lt; Back to the Atlas</a>
-				<div id="drawControls">
-					<div>
-						<button id="undoButton" disabled>Undo</button>
-						<button disabled id="redoButton">Redo</button>
+						<div class="form-check" id="highlightUnchartedLabel">
+							<input class="form-check-input" type="checkbox" id="highlightUncharted" checked>
+							<label class="form-check-label" for="highlightUncharted" title="Highlight uncharted areas of the map">
+								Highlight Empty
+							</label>
+						</div>
 					</div>
-					<button disabled id="finishButton">Finish (Enter)</button>
-					<button id="resetButton">Reset</button>
-					<label id="highlightUnchartedLabel" title="Highlight uncharted areas of the map" class="checkboxLabel">
-						<input type="checkbox" id="highlightUncharted" checked> Highlight Empty
-					</label>
-					<div id="objectInfo">
-						<label for="nameField">Name</label>
-						<input id="nameField" type="text" value="" placeholder="A short title">
-						<label for="descriptionField">Description</label>
-						<textarea id="descriptionField" placeholder="A short description to be understood by everyone"></textarea>
-						<label for="websiteField">Website</label>
-						<input id="websiteField" type="text" value="" placeholder="https://example.com">
-						<label for="subredditField">Subreddit</label>
-						<input id="subredditField" type="text" value="" placeholder="/r/example">
-						<div id="infoButtons">
-							<button id="cancelButton">Cancel</button>
-							<button id="exportButton">OK</button>
+					<div id="hint">
+						<p>Please read <a href="https://www.reddit.com/r/placeAtlas2/comments/tu203o/how_to_contribute/" target="_blank" rel="noopener noreferrer">this Reddit post</a> for instructions.</p>
+						<hr>
+						<p>You can suggest new entries to the Atlas for art that isn't mapped yet.</p>
+						<p>Click anywhere on the image to start drawing a shape. When you're happy with the result, click the "Finish" button above or press the Enter key.</p>
+						<p>You can then add more information about your object.</p>
+						<hr>
+						<div class="text-white p-3 rounded shadow" style="background-color: #5865F2;">
+							<p><strong>Need Help?</strong></p>
+							<p class="mb-0">You can ask for help on <a class="link-light" href="https://discord.gg/pJkm23b2nA" target="_blank" rel="noopener noreferrer">our Discord server</a>!</p>
 						</div>
 					</div>
 				</div>
-				<div id="hint">
-					<p>You can suggest new entries to the Atlas for art that isn't mapped yet.</p>
-					<p>Please read <a href="https://www.reddit.com/r/placeAtlas2/comments/tu203o/how_to_contribute/" target="_blank">this reddit post</a> for instructions.</p>
-					<p>Click anywhere on the image to start drawing a shape.
-					When you're happy with the result, click the "Finish" button above or press the Enter key.</p>
-					<p>You can then add more information about your object.</p>
-					<div style="background-color:#7289DA; padding:20px">
-						<p><b>Need Help?</b></p>
-						<b>You can ask for help on <a href="https://discord.gg/pJkm23b2nA">our Discord server</a>!</b><br>
-					</div>
+				<div class="offcanvas-body" id="offcanvasDraw-objectInfo" style="display: none;">
+					<form id="objectInfo" class="d-flex flex-column p-3 bg-secondary bg-opacity-10 rounded">
+						<div class="mb-3">
+							<label for="nameField" class="form-label">Title</label>
+							<input type="text" id="nameField" class="form-control" placeholder="A short title" required>
+						</div>
+						<div class="mb-3">
+							<label for="descriptionField" class="form-label">Description</label>
+							<textarea id="descriptionField" class="form-control" rows="3" placeholder="A short description to be understood by everyone" required></textarea>
+						</div>
+						<div class="mb-3">
+							<label for="websiteField" class="form-label">Website</label>
+							<input type="url" name="url" id="websiteField"  class="form-control" placeholder="https://example.com" pattern="https?://.*" title="Website URL using the http:// or https:// protocol">
+						</div>
+						<label for="subredditField" class="form-label">Subreddit</label>
+						<div class="mb-3 d-flex flex-column gap-2">
+							<div class="input-group">
+								<span class="input-group-text" id="subredditField-addon">reddit.com/</span>
+								<input type="text" class="form-control" id="subredditField" placeholder="r/example" pattern="^r\/\w+$" title="Subbredit in format of r/example" maxlength="23" aria-describedby="subredditField-addon">
+								<button class="btn btn-outline-secondary" type="button" title="Add Subreddit">
+									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
+										<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+									</svg>
+								</button>
+							</div>
+							<!-- Example with a second input created:
+
+							<div class="input-group">
+								<span class="input-group-text" id="subredditField-addon">reddit.com/</span>
+								<input type="text" class="form-control" id="subredditField" placeholder="r/example" pattern="^r\/\w+$" title="Subbredit in format of r/example" aria-describedby="subredditField-addon">
+								<button class="btn btn-outline-secondary" type="button" title="Remove subreddit">
+									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
+										<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
+									</svg>
+								</button>
+							</div>
+							<div class="input-group">
+								<span class="input-group-text" id="subredditField1-addon">reddit.com/</span>
+								<input type="text" class="form-control" id="subredditField1" placeholder="r/example" pattern="^r\/\w+$" title="Subbredit in format of r/example" aria-describedby="subredditField1-addon">
+								<button class="btn btn-outline-secondary" type="button" title="Add subreddit">
+									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
+										<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+									</svg>
+								</button>
+							</div> -->
+						</div>
+						<label for="discordField" class="form-label">Discord</label>
+						<div class="mb-3 d-flex flex-column gap-2">
+							<div class="input-group">
+								<span class="input-group-text" id="discordField-addon">discord.gg/</span>
+								<input type="text" class="form-control" id="discordField" placeholder="pJkm23b2nA" aria-describedby="discordField-addon"></input>
+								<button type="button" class="btn btn-outline-secondary" title="Add Discord invite">
+									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
+										<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<label for="wikiField" class="form-label">Wiki <a href="https://place-wiki.stefanocoding.me/" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
+							<path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
+							<path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
+						</svg></a></label>
+						<div class="mb-3 d-flex flex-column gap-2">
+							<div class="input-group">
+								<input type="text" class="form-control" id="wikiField" placeholder="Page title"></input>
+								<button type="button" class="btn btn-outline-secondary" title="Add wiki page">
+									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg" viewBox="0 0 16 16">
+										<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+									</svg>
+								</button>
+							</div>
+						</div>
+						<div id="infoButtons" class="d-flex gap-2">
+							<button type="button" class="btn btn-secondary w-50" id="cancelButton">Back</button>
+							<button type="submit" class="btn btn-primary w-50" id="exportButton" data-bs-toggle="modal">Ok</button>
+						</div>
+					</form>
 				</div>
 			</div>
-			
-			<button class="hidden" id="closeObjectsListButton"></button>
-			<div id="objectsList">
-			</div>
-			
-			<div id="exportOverlay" class="overlay">
-				<div id="exportWindow">
-					<p><b>Recommended:</b> Post directly after clicking this button. Don't forget to flair it with the "New Entry" tag. </p>
-					<div style="display:flex; flex-direction:column;align-items:center">
-						<a href="_blank" id="exportDirectPost" class="button">Post Direct to Reddit</a>
-					</div>
-					<hr style="border-bottom: solid black 1px"/>
-					<i>or...</i>
-					<p>Please copy the text below and submit it as a
-					new text post to <a target="_blank" href="https://www.reddit.com/r/placeAtlas2/">/r/placeAtlas2</a> on Reddit.</p>
+			<button type="button" id="closeObjectsListButton" class="d-none btn btn-secondary shadow" aria-label="Close">
+				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
+					<path fill-rule="evenodd" d="M13.854 2.146a.5.5 0 0 1 0 .708l-11 11a.5.5 0 0 1-.708-.708l11-11a.5.5 0 0 1 .708 0Z"/>
+					<path fill-rule="evenodd" d="M2.146 2.146a.5.5 0 0 0 0 .708l11 11a.5.5 0 0 0 .708-.708l-11-11a.5.5 0 0 0-.708 0Z"/>
+				</svg>
+			</button>
+			<div id="objectsList" class="p-2"></div>
+		</div>
+		<div class="modal fade" id="exportModal" tabindex="-1" aria-labelledby="exportModalLabel" aria-hidden="true">
+			<div class="modal-dialog modal-dialog-scrollable modal-xl modal-fullscreen-md-down">
+				<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="exportModalLabel">Export Entry</h5>
+					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+				</div>
+				<div class="modal-body d-flex flex-column">
+					<p>Use the Post Direct to Reddit button or manually copy the text below and submit it as a new text post to <a href="https://www.reddit.com/r/placeAtlas2/" target="_blank" rel="noopener noreferrer">/r/placeAtlas2</a> on Reddit.</p>
 					<p>Don't forget to flair it with the "New Entry" tag.</p>
 					<p>We will then check it and add it to the atlas.</p>
-					<textarea cols="20" rows="5" id="exportString"></textarea>
-					<div style="display:flex; flex-direction:column;align-items:center">
-						<button id="exportCloseButton">Done</button>
-					</div>
+					<textarea class="form-control flex-grow-1" cols="40" rows="20" id="exportString" title="Raw JSON string"></textarea>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Done</button>
+					<a id="exportDirectPost" type="button" class="btn btn-primary" href="#" target="_blank" rel="noopener noreferrer">Post Direct to Reddit</a>
+				</div>
 				</div>
 			</div>
-			
-			<div id="donateOverlay" class="overlay">
-				<div id="donateWindow">
-					<h2>Donation Links</h2>
-					<p>Current 2022 Atlas Maintainers:</p>
-					<a class="button" target="_blank" href="https://paypal.me/placeAtlas/5">
-						<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PayPal</title><path fill="white" d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"/></svg>
-						PayPal
-					</a>
-					<a class="button" target="_blank" href="https://www.patreon.com/placeAtlas">
-						<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Patreon</title><path fill="white" d="M0 .48v23.04h4.22V.48zm15.385 0c-4.764 0-8.641 3.88-8.641 8.65 0 4.755 3.877 8.623 8.641 8.623 4.75 0 8.615-3.868 8.615-8.623C24 4.36 20.136.48 15.385.48z"/></svg>
-						Patreon
-					</a>
-					<a class="button" target="_blank" href="https://ko-fi.com/placeatlas">
-						<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Ko-fi</title><path fill="white" d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/></svg>
-						Ko-Fi
-					</a>
-					<p>Original 2017 Atlas Developer (draemmli aka Roland Rytz): </p>
-					<a class="button" target="_blank" href="https://paypal.me/draemmli">
-						<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PayPal</title><path fill="white" d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"/></svg>
-						PayPal
-					</a>
-					<br>
-					<button id="closeDonateButton">Close</button>
+		</div>
+		<div class="modal fade" id="donateModal" tabindex="-1" aria-labelledby="donateModalLabel" aria-hidden="true">
+			<div class="modal-dialog modal-fullscreen-sm-down">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title" id="donateModalLabel">Donation Links</h5>
+						<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+					</div>
+					<div class="modal-body">
+						<p>Current 2022 Atlas Maintainers:</p>
+						<a class="btn btn-primary" target="_blank" rel="noopener noreferrer" href="https://paypal.me/placeAtlas/5">
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-paypal" viewBox="0 0 16 16" aria-hidden="true"><path d="M14.06 3.713c.12-1.071-.093-1.832-.702-2.526C12.628.356 11.312 0 9.626 0H4.734a.7.7 0 0 0-.691.59L2.005 13.509a.42.42 0 0 0 .415.486h2.756l-.202 1.28a.628.628 0 0 0 .62.726H8.14c.429 0 .793-.31.862-.731l.025-.13.48-3.043.03-.164.001-.007a.351.351 0 0 1 .348-.297h.38c1.266 0 2.425-.256 3.345-.91.379-.27.712-.603.993-1.005a4.942 4.942 0 0 0 .88-2.195c.242-1.246.13-2.356-.57-3.154a2.687 2.687 0 0 0-.76-.59l-.094-.061ZM6.543 8.82a.695.695 0 0 1 .321-.079H8.3c2.82 0 5.027-1.144 5.672-4.456l.003-.016c.217.124.4.27.548.438.546.623.679 1.535.45 2.71-.272 1.397-.866 2.307-1.663 2.874-.802.57-1.842.815-3.043.815h-.38a.873.873 0 0 0-.863.734l-.03.164-.48 3.043-.024.13-.001.004a.352.352 0 0 1-.348.296H5.595a.106.106 0 0 1-.105-.123l.208-1.32.845-5.214Z"/></svg>
+							PayPal
+						</a>
+						<a class="btn btn-primary" target="_blank" rel="noopener noreferrer" href="https://www.patreon.com/placeAtlas">
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi" viewBox="0 0 24 24" aria-hidden="true"><path d="M0 .48v23.04h4.22V.48zm15.385 0c-4.764 0-8.641 3.88-8.641 8.65 0 4.755 3.877 8.623 8.641 8.623 4.75 0 8.615-3.868 8.615-8.623C24 4.36 20.136.48 15.385.48z"/></svg>
+							Patreon
+						</a>
+						<a class="btn btn-primary" target="_blank" rel="noopener noreferrer" href="https://ko-fi.com/placeatlas">
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi" viewBox="0 0 24 24" aria-hidden="true"><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/></svg>
+							Ko-Fi
+						</a>
+						<hr>
+						<p>Original 2017 Atlas Developer (draemmli aka Roland Rytz): </p>
+						<a class="btn btn-primary" target="_blank" rel="noopener noreferrer" href="https://paypal.me/draemmli">
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-paypal" viewBox="0 0 16 16" aria-hidden="true"><path d="M14.06 3.713c.12-1.071-.093-1.832-.702-2.526C12.628.356 11.312 0 9.626 0H4.734a.7.7 0 0 0-.691.59L2.005 13.509a.42.42 0 0 0 .415.486h2.756l-.202 1.28a.628.628 0 0 0 .62.726H8.14c.429 0 .793-.31.862-.731l.025-.13.48-3.043.03-.164.001-.007a.351.351 0 0 1 .348-.297h.38c1.266 0 2.425-.256 3.345-.91.379-.27.712-.603.993-1.005a4.942 4.942 0 0 0 .88-2.195c.242-1.246.13-2.356-.57-3.154a2.687 2.687 0 0 0-.76-.59l-.094-.061ZM6.543 8.82a.695.695 0 0 1 .321-.079H8.3c2.82 0 5.027-1.144 5.672-4.456l.003-.016c.217.124.4.27.548.438.546.623.679 1.535.45 2.71-.272 1.397-.866 2.307-1.663 2.874-.802.57-1.842.815-3.043.815h-.38a.873.873 0 0 0-.863.734l-.03.164-.48 3.043-.024.13-.001.004a.352.352 0 0 1-.348.296H5.595a.106.106 0 0 1-.105-.123l.208-1.32.845-5.214Z"/></svg>
+							PayPal
+						</a>
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -277,6 +418,7 @@ <h2>Donation Links</h2>
 		<script type="text/javascript" src="./_js/overlap.js"></script>
 		<script type="text/javascript" src="./_js/draw.js"></script>
 		<script type="text/javascript" src="./_js/main.js"></script>
+		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
 <!--
 		<script type="text/javascript" src="./_js/stats.js"></script>