header footer

_includes/header.njk

@@ -1,4 +1,6 @@
 <header>
-	<nav>
+  <a href="/" title="go home" aria-label="go home">
-	</nav>
+    <img class="logo light" src="/img/logo-light.png" alt="the district dharma logo, which depicts a stylized lotus flower under 3 dots, surrounded by an upper and lower curve, in two shades of blue">
+    <img class="logo dark" src="/img/logo-dark.png" alt="the district dharma logo, which depicts a stylized lotus flower under 3 dots, surrounded by an upper and lower curve, in two shades of blue">
+  </a>
 </header>

css/main.css

@@ -24,6 +24,10 @@
   margin: 0; /* 2. Remove default margins */
 }
 
+html {
+	height: 100%;
+}
+
 @media (prefers-reduced-motion: no-preference) {
   html {
     interpolate-size: allow-keywords; /* 3. Enable keyword animations */
@@ -36,6 +40,11 @@ body {
   font-family: sans-serif;
   color: var(--color-text);
   background-color: var(--color-bg);
+  font-family: "Atkinson Hyperlegible Next";
+  height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100%;
 }
 
 #content {
@@ -88,6 +97,61 @@ h1 {
 
 p {
   text-wrap: pretty; /* 9. Improve line wrapping */
+  margin-block: 1.25em;
+}
+
+a {
+	color: var(--color-accent);
+	text-decoration-thickness: .15rem;
+}
+
+a:visited {
+	color: var(--color-text);
+	text-decoration-color: var(--color-accent);
+}
+
+*:focus-visible {
+	outline-offset: .1rem;
+	outline: .1rem solid var(--color-accent);
+}
+
+/* Header/nav/footer */
+header {
+	height: 20vh;
+	padding: 1rem;
+	background-color: var(--color-accent);
+}
+
+.logo {
+	height: 100%;
+	width: auto;
+}
+
+@media (prefers-color-scheme: light) {
+	.dark {
+		display: none;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.light {
+		display: none;
+	}
+}
+
+footer {
+	background-color: var(--color-accent);
+	color: var(--color-bg);
+}
+
+footer p {
+	text-align: center;
+}
+
+footer a,
+footer a:visited {
+	color: var(--color-bg);
+	text-decoration-color: var(--color-bg);
 }
 
 #hero {