continue redesign

styles/styles.css

@@ -65,8 +65,8 @@
 }
 
 @font-face {
-	font-family: jetbrains_mono;
-	src: url("jetbrains_mono.ttf");
+	font-family: JetBrains Mono;
+	src: url("jetbrains_mono.woff2") format("woff2");
 }
 
 html {
@@ -80,7 +80,8 @@ body {
 	background-attachment: fixed;
 	background-size: cover;
 	background-position: center;
-	font-family: "Noto Sans", sans-serif;
+	font-family: JetBrains Mono, "Noto Sans", sans-serif;
+	font-weight: lighter;
 	font-size: 16px;
 	display: flex;
 	flex-direction: column;
@@ -130,6 +131,7 @@ header .buttons {
 
 a {
 	color: var(--link-idle-color);
+	text-decoration: none;
 }
 
 header * {
@@ -176,7 +178,7 @@ header * {
 	text-align: center;
 	margin: 1em auto;
 	padding: 0 .5em;
-	font-family: jetbrains_mono, monospace;
+	font-family: JetBrains Mono, monospace;
 	width: fit-content;
 	font-weight: bold;
 }
@@ -188,14 +190,24 @@ header * {
 }
 
 nav {
-	background-color: var(--nav-bg-color);
 	color: var(--nav-fg-color);
+	background-color: var(--nav-bg-color);
 	user-select: none;
+	text-transform: uppercase;
+	width: min(90%, 50em);
+	margin: auto;
+	margin-bottom: 2em;
+	border-radius: .5em;
+	box-shadow: .5em .5em 1em rgba(0, 0, 0, 0.2);
+	overflow: hidden;
 }
 
 nav div {
-	width: min(90%, 50em);
-	margin: auto;
+	width: 100%;
+}
+
+[data-layout="wide"] nav {
+	width: 90%;
 }
 
 [data-layout="wide"] nav div {
@@ -203,6 +215,11 @@ nav div {
 }
 
 @media only screen and (max-width: 50rem) {
+	nav {
+		border-radius: 0;
+		width: 100%;
+	}
+
 	nav div {
 		width: 100% !important;
 	}
@@ -227,7 +244,10 @@ footer {
 	border-top: 1px solid var(--sep-color);
 	color: gray;
 	padding: 1em;
-	text-align: center;
+	width: fit-content;
+	margin: 2em auto;
+	margin-top: 4em;
+	font-size: .8em;
 }
 
 footer>* {
@@ -236,11 +256,15 @@ footer>* {
 
 h1 {
 	margin: 2em 0;
+	margin-top: 4em;
 	font-size: 1.5em;
+	font-weight: bold;
 }
 
 h2 {
 	font-size: 1.25em;
+	font-weight: bolder;
+	margin-top: 3em;
 }
 
 h3 {
@@ -248,6 +272,8 @@ h3 {
 }
 
 table {
+	margin: 2em auto;
+	margin-top: 4em;
 	border-spacing: 0;
 	border: 1px solid var(--sep-color);
 }
@@ -288,6 +314,7 @@ figcaption {
 .poster {
 	margin: 0 auto !important;
 	max-width: 40rem;
+	filter: drop-shadow(0 0 5em black);
 }
 
 nav ul {
@@ -304,7 +331,6 @@ nav ul {
 
 [data-layout="wide"] nav ul {
 	justify-content: left;
-	margin-left: -1em;
 }
 
 @media (width < 50rem) {
@@ -386,3 +412,16 @@ nav ul li a:visited {
 		display: none;
 	}
 }
+
+.map {
+	display: block;
+	width: 90%;
+	margin: 0 auto;
+	margin-top: 4em;
+}
+
+.map-open {
+	display: block;
+	width: fit-content;
+	margin: 0 auto;
+}