Make sure border color of site header and footer match

Consolidate styles of site header and site footer components since they're so
closely related.

assets/css/080_site_header_footer.css

@@ -0,0 +1,107 @@
+
+
+
+
+
+/*************************
+ # COMPONENT: SITE HEADER
+ *************************/
+
+:root {
+  --site-header-footer-border-color: light-dark(var(--gray6), var(--gray4));
+  --site-header-footer-nav-separator: var(--site-header-footer-border-color);
+}
+
+
+.site-header {
+  font-family: var(--font-family-monospace);
+  margin-block: var(--space-m) var(--space-xl);
+}
+
+
+.site-header__content {
+  border-bottom: 2px dashed var(--site-header-footer-border-color);
+  gap: var(--space-l);
+  grid-column: main-start / main-end;
+  padding-bottom: var(--space-xs);
+
+  .site-header__title {
+    color: var(--text-color-primary);
+    font-size: var(--text-m);
+    font-weight: medium;
+    letter-spacing: 0.05em;
+
+    a {
+      color: inherit;
+    }
+
+    a:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+
+.site-nav {
+  font-size: var(--text-m);
+  font-weight: normal;
+
+  ul {
+    --spacing: 2ch;
+
+    display: flex;
+    gap: var(--spacing);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    .site-nav__item {
+      margin: 0;
+      padding: 0;
+    }
+
+    .site-nav__item::after {
+      color: var(--site-header-footer-nav-separator);
+      justify-content: center;
+    }
+
+    :is(.site-nav__item, .site-nav__item--dir)::after {
+      content: "/";
+    }
+
+    .site-nav__item--file::after {
+      content: "*";
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .site-header__content {
+    grid-column: full-start / full-end;
+    padding-inline: var(--gutter-width);
+  }
+}
+
+
+
+
+
+/*************************
+ * COMPONENT: SITE FOOTER
+ *************************/
+
+.site-footer {
+  border-top: 2px dashed var(--site-header-footer-border-color);
+  color: var(--text-color-secondary);
+  font-size: var(--text-s);
+  grid-column: main-start / main-end;
+  margin-block: var(--space-xl) var(--space-m);
+  padding-block-start: var(--space-s);
+}
+
+@media screen and (max-width: 480px) {
+  .site-footer {
+    grid-column: full-start / full-end;
+    padding-inline: var(--gutter-width);
+  }
+}