Add a page header to the list, single, and taxonomy templates

assets/css/099_page_header.css

@@ -0,0 +1,39 @@
+.page-header {
+  font-family: var(--font-family-monospace);
+  grid-column: main-start / main-end;
+  margin-block: var(--space-xl) var(--space-l);
+
+  /* margin-block-start is set by the grid */
+  &:first-child,
+  .page-header__title:first-child
+  {
+    margin-block-start: 0;
+  }
+
+  :last-child {
+    margin-block-end: 0;
+  }
+
+  .page-header__title {
+    font-family: var(--font-family-monospace);
+    font-size: var(--text-xxl);
+    line-height: 1.2;
+    margin-block: var(--space-xs);
+
+    &:only-child {
+      margin-block-end: 0;
+    }
+  }
+
+  .page-header__subtitle {
+    color: var(--gray3);
+    font-size: var(--text-m);
+  }
+
+  .page-date {
+    display: block;
+    font-family: var(--font-family-body);
+    font-size: var(--text-s);
+    margin-block: var(--space-paragraph) 0;
+  }
+}

layouts/_default/list.html

@@ -1,4 +1,7 @@
 {{ define "main" }}
   <main class="main--list">
+    <header class="page-header">
+      {{ partial "page_header.html" (dict "page" .) }}
+    </header>
   </main>
 {{ end }}

layouts/_default/single.html

@@ -1,5 +1,8 @@
 {{ define "main" }}
   <main class="main--single">
+    <header class="page-header">
+      {{ partial "page_header.html" (dict "page" .) }}
+    </header>
     <footer class="page-footer">
       {{ partial "page/footer.html" . }}
     </footer>

layouts/_default/taxonomy.html

@@ -1,4 +1,8 @@
 {{ define "main" }}
   <main class="main--list">
+    <header class="page-header">
+      {{- $title := printf "%s: %s" .Data.Singular .Title }}
+      {{ partial "page_header.html" (dict "page" . "title" $title) }}
+    </header>
   </main>
 {{ end }}

layouts/partials/page_header.html

@@ -0,0 +1,13 @@
+<h1 class="page-header__title">{{ .title | default .page.Title | markdownify }}</h1>
+
+{{- with .page.Params.subtitle -}}
+  <p class="page-header__subtitle">{{ . | markdownify }}</p>
+{{- end }}
+
+{{ if not .page.IsSection }}
+  {{- with .page.Date -}}
+    <time class="page-date" datetime="{{ . | time.Format "2006-01-02" }}">
+      {{- . | time.Format "January 02, 2006" -}}
+    </time>
+  {{- end }}
+{{ end }}