CSS Checkpoint

- Add the system_css template
- Name the CSS files in the css directory with a numeric prefix so they sort by
  priority.

assets/css/010_structure.css

@@ -0,0 +1,127 @@
+{{/*
+  structure.css
+  Eryn Wells <eryn@erynwells.me>
+  vim: set sw=2 sts=2:
+*/}}
+
+
+
+
+/*************************
+ # CONTENT AREA STRUCTURE
+ ************************/
+
+:root {
+  --content-width: 40em;
+}
+
+body {
+  margin: 0;
+}
+
+main {
+  margin-inline: auto;
+  max-width: var(--content-width);
+}
+
+main,
+.site-header__conatiner,
+.site-footer__container {
+  padding-inline: var(--space-xs);
+}
+
+figure, img {
+  max-width: 100%;
+}
+
+img {
+  object-fit: contain;
+}
+
+.content {
+  .heading {
+    align-items: center;
+    gap: 0.25em;
+    display: flex;
+  }
+
+  .codeblock {
+    overflow: auto;
+  }
+}
+
+
+.page-navigation {
+  align-items: baseline;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  list-style: none;
+  padding-inline: 0;
+
+  &:has(.next-page:only-child) {
+    justify-content: flex-end;
+  }
+
+  li {
+    display: flex block;
+    height: 2lh;
+  }
+
+  .next-page {
+    text-align: right;
+  }
+
+  .previous-page::before {
+    content: "←";
+    padding-inline-end: var(--space-s);
+  }
+
+  .next-page::after {
+    content: "→";
+    padding-inline-start: var(--space-s);
+  }
+}
+
+
+.site-header {
+  border-bottom: 3px solid var(--gray6);
+}
+
+.site-header__container {
+  align-items: baseline;
+  display: flex;
+
+  .site-header__nav {
+    ul {
+      display: flex;
+      list-style: none;
+
+      li {
+        margin: 0;
+        padding: 0;
+      }
+
+      li:not(:last-child)::after {
+        content: "•";
+      }
+    }
+  }
+}
+
+.site-header__container,
+.site-footer__container {
+  margin-inline: auto;
+  max-width: var(--content-width);
+}
+
+
+.content-term-list {
+  display: flex;
+  list-style: none;
+  padding-inline: 0;
+
+  li:not(:last-child) {
+    margin-inline-end: var(--space-s);
+  }
+}