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_spacing.css

@@ -0,0 +1,138 @@
+{{/*
+  spacing.css
+  Eryn Wells <eryn@erynwells.me>
+  vim: set sw=2 sts=2:
+*/}}
+
+{{- $base := (index . "Base") | default 1 -}}
+{{- $unit := (index . "Unit") | default "rem" -}}
+{{- $factor := (index . "Factor") | default 1.618 -}}
+{{- $scale := partial "size_scale.html" . }}
+
+
+
+
+
+/***********
+ # SPACING
+ ***********/
+
+
+:root {
+  --space-base: {{ $base }}{{ $unit }};
+{{- range $scale }}
+  --space-{{ .Name }}: calc(var(--space-base) * pow({{ $factor }}, {{ .Value }}));
+{{- end }}
+
+  --fixed-space-base: 1rem;
+{{- range $scale }}
+  --fixed-space-{{ .Name }}: calc(var(--fixed-space-base) * pow({{ $factor }}, {{ .Value }}));
+{{- end }}
+
+  --space-paragraph: var(--space-m);
+}
+
+
+{{ range $scale }}
+{{ printf "/* Spacing utility classes: %s */" .Name }}
+.margin-block-start--{{ .Name }}  {  margin-block-start: var(--space-{{ .Name }}); }
+.margin-block-end--{{ .Name }}    {    margin-block-end: var(--space-{{ .Name }}); }
+.margin-inline-start--{{ .Name }} { margin-inline-start: var(--space-{{ .Name }}); }
+.margin-inline-end--{{ .Name }}   {   margin-inline-end: var(--space-{{ .Name }}); }
+{{ end }}
+
+
+h1, h2, h3, h4 {
+  margin-block: var(--space-m);
+}
+
+hr {
+  margin-block: var(--space-m);
+}
+
+main {
+  margin-block-end: var(--space-xl);
+}
+
+p + p {
+  margin-block-start: var(--space-paragraph);
+}
+
+
+/* Figures */
+
+{{- $elementsWithXLBlockMargins := "blockquote, figure, .codeblock, .highlight" -}}
+
+p + :is({{ $elementsWithXLBlockMargins }}) {
+    margin-block-start: var(--space-xl);
+}
+
+:is({{ $elementsWithXLBlockMargins }}):has(+ p) {
+  margin-block-end: var(--space-xl);
+}
+
+.codeblock {
+  --padding: var(--space-m);
+
+  margin-inline-start: calc(-1 * var(--padding));
+  padding: var(--padding);
+  width: 100%;
+}
+
+/* Blockquotes */
+
+blockquote {
+  --border-width: var(--space-xs);
+  --inline-padding: var(--space-l);
+
+  border-inline-start: var(--border-width) solid #eee;
+  margin-inline: 0 var(--inline-padding);
+  padding-inline-start: calc(var(--inline-padding) - var(--border-width));
+}
+
+/* Type size classes */
+
+.title {
+  margin-block-end: var(--space-l);
+}
+
+.subtitle {
+  margin-block-start: 0;
+}
+
+.heading {
+  margin-block-start: var(--space-l);
+}
+
+.heading:has(+ p) {
+  margin-block-end: var(--space-xs);
+}
+
+.subheading {
+}
+
+.content-title {
+  margin-block: var(--space-xl) var(--space-l);
+
+  .title:has(+ .subtitle) {
+    margin-block-end: var(--space-xs);
+  }
+
+  .title:not(:has(+ .subtitle)), .subtitle {
+    margin-block-end: var(--space-m);
+  }
+
+  .content-date {
+    margin-block-end: var(--space-paragraph);
+  }
+}
+
+.footnotes {
+  hr {
+    margin-block-start: var(--space-l);
+  }
+
+  li:not(:last-child) {
+    margin-block-end: var(--space-xs);
+  }
+}