big ol pile

css/nav.css

@@ -0,0 +1,109 @@
+nav {
+	background: var(--color-nav-dark);
+
+	a {
+		font-family: "Elegant Typewriter", serif;
+		text-decoration: none;
+		color: var(--color-nav-light);
+	}
+
+	a[aria-current="page"] {
+		text-decoration: underline solid .2em var(--color-title-bg);
+	}
+}
+
+header nav {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	font-size: 1.4rem;
+
+	> a {
+		height: 5.5rem;
+	}
+
+	img {
+		height: 100%;
+		width: auto;
+	}
+
+	ul {
+		display: flex;
+		flex-flow: row wrap;
+		list-style: none;
+		padding: 0;
+		margin-inline: 1rem;
+		gap: 2rem;
+	}
+
+	button {
+		display: none;
+	}
+}
+
+@media (max-width: 650px) {
+	header nav {
+		--height: 4.5rem;
+
+		display: grid;
+		grid-template-areas:
+			"home button"
+			"links links";
+		padding: 0;
+
+		> a {
+			grid-area: home;
+			height: var(--height);
+		}
+
+		button {
+			grid-area: button;
+			display: unset;
+			margin-inline: 1rem;
+			padding: 1rem;
+			border: none;
+			background: var(--color-nav-dark);
+			color: var(--color-nav-light);
+			cursor: pointer;
+		}
+
+		ul[aria-hidden="true"] {
+			display: none;
+		}
+
+		ul {
+			grid-area: links;
+			flex-flow: column;
+			align-items: center;
+			background: var(--color-nav-light);
+			margin: 0;
+			padding-block: 1rem;
+			border-top: .5rem solid var(--color-title-bg);
+			border-bottom: .5rem solid var(--color-title-bg);
+			position: absolute;
+			top: var(--height);
+			width: 100%;
+
+			a {
+				color: var(--color-nav-dark);
+			}
+		}
+	}
+}
+
+footer nav {
+	padding-block: 1rem;
+	border-top: .5rem solid var(--color-title-bg);
+
+	ul {
+		list-style: none;
+		font-size: 1.1rem;
+		text-align: center;
+	}
+}
+
+@media (max-width: 650px) {
+	footer nav ul {
+		font-size: .95rem;
+	}
+}