big ol copy

css/nav.css

@@ -0,0 +1,132 @@
+header {
+	border-bottom: .2rem dotted;
+	display: flex;
+	gap: 1rem;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1rem;
+}
+
+#skip-link {
+	text-decoration: none;
+	background: var(--color-bg);
+	color: var(--color-text);
+	padding: 0.5rem 1rem;
+	outline-offset: 0;
+	border-radius: .25rem;
+}
+/* Prevent visually-hidden skip link fom pushing content around when focused */
+#skip-link.visually-hidden:focus {
+	position: absolute;
+	top: 1rem;
+	left: 1rem;
+	/* Ensure it is positioned on top of everything else when it is shown */
+	z-index: 999;
+}
+
+/* logo and title */
+.home-link {
+	font-weight: 700;
+	border-radius: .25rem;
+	display: flex;
+	gap: .5rem;
+	outline-offset: .25rem;
+	text-underline-offset: .2rem;
+}
+.home-link:link:not(:hover) {
+	text-decoration: none;
+}
+a[href].home-link:focus-visible {
+	outline-width: .25rem;
+}
+
+header img {
+	height: 3rem !important;
+	width: 3rem !important;
+	border-radius: .5rem;
+}
+
+header h2 {
+	margin: 0;
+	outline-offset: .25rem;
+	border: none;
+	text-transform: lowercase;
+	color: var(--color-pink);
+}
+header a:has(h2):hover {
+	text-decoration-color: var(--color-text);
+}
+
+/* Nav */
+.nav {
+	display: flex;
+	gap: .5rem 1rem;
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
+.nav-item {
+	display: inline-block;
+}
+.nav a[href][aria-current="page"] {
+	text-decoration: underline;
+	text-decoration-thickness: .2rem;
+}
+.nav a[href][aria-current="page"]:hover {
+	text-decoration-color: var(--color-pink);
+}
+
+/* Pagination */
+.pagination {
+	display: flex;
+	justify-content: space-between;
+	gap: 1rem;
+	border-top: .2rem dotted;
+	margin-top: 2.25rem;
+	padding-top: 2rem;
+	padding-left: 0;
+}
+.pagination li {
+	list-style: none;
+}
+.pagination li:not(:has(a)),
+.pagination a {
+	display: block;
+	border: .1rem dotted;
+	padding: .5rem;
+	border-radius: .75rem;
+}
+
+/* Footer */
+footer {
+	border-top: .2rem dotted;
+	margin-top: 1.5rem;
+	padding: 1rem 0;
+	text-align: center;
+}
+.footer-links {
+	display: flex;
+	gap: 1rem;
+	justify-content: space-between;
+}
+footer p {
+	margin: 0;
+}
+footer .year {
+	width: 30%;
+	padding-top: .5rem;
+	margin: 1rem auto;
+	border-top: .05rem solid;
+}
+
+@media (max-width: 500px) {
+	.footer-links {
+		flex-flow: column;
+		gap: .1rem;
+		align-items: center;
+	}
+	footer .year {
+		width: 65%;
+	}
+}