Add the series to the content header

layouts/partials/content_header.html

@@ -0,0 +1,18 @@
+<header>
+  {{ partial "development/draft_tag.html" . }}
+  <div class="post-title">
+    <h1>{{ .Title }}</h1>
+    {{ if not (eq .Type "page") }}
+      <div class="post-date"><time>{{ .Date | time.Format "January 2, 2006" }}</time></div>
+    {{ end }}
+  </div>
+  {{- if .Params.series -}}
+    {{- $series := .GetTerms "series" -}}
+    {{- if gt (len $series) 1 -}}
+      {{- errorf "More than one series for %s" .Permalink -}}
+    {{- end -}}
+    {{- with index $series 0 -}}
+      <span class="series"><a href="{{ .Permalink }}">{{ .Title }}</a></span>
+    {{- end -}}
+  {{- end -}}
+</header>

layouts/partials/single_main.html

@@ -1,12 +1,4 @@
-  <header>
-    {{ partial "development/draft_tag.html" . }}
-    <div class="post-title">
-      <h1>{{ .Title }}</h1>
-      {{ if not (eq .Type "page") }}
-      <div class="post-date"><time>{{ .Date | time.Format "January 2, 2006" }}</time></div>
-      {{ end }}
-    </div>
-  </header>
+{{ partial "content_header.html" . }}
 
   <section class="post-content">
     {{ .Content }}

layouts/photos/single.html

@@ -5,15 +5,9 @@
 {{ define "main" }}
 <nav><a class="back" href="{{ ref . `photos` }}">Back</a></nav>
 
-{{ if .Title }}
-<header>
-  {{ partial "development/draft_tag.html" . }}
-  <div class="post-title">
-    <h1 {{ with .Params.langs.title }}lang="{{ . }}"{{ end }}>{{ .Title }}</h1>
-    <div class="post-date"><time>{{ .Date | time.Format "January 2, 2006" }}</time></div>
-  </div>
-</header>
-{{ end }}
+{{- if .Title -}}
+  {{ partial "content_header.html" . }}
+{{- end -}}
 
 {{ $photos := .Resources.ByType "image" }}
 {{ if eq (len $photos) 0 }}

static/styles/root.css

@@ -40,6 +40,7 @@
     --body-code-background-color: rgb(var(--super-lt-gray));
 
     --heading-color: rgb(var(--black));
+    --header-series-arrow-foreground-color: rgb(var(--sub-dk-gray));
 
     --html-background-color: rgb(var(--white));
     --html-color: rgba(var(--black), 0.8);
@@ -71,6 +72,7 @@
         --body-code-background-color: rgb(var(--dk-gray));
 
         --heading-color: rgb(var(--white));
+        --header-series-arrow-foreground-color: rgb(var(--super-dk-gray));
 
         --html-background-color: rgb(var(--black));
         --html-color: rgba(var(--white), 0.8);
@@ -345,6 +347,10 @@ main {
     width: 100%;
 }
 
+main > header {
+    margin-bottom: var(--body-item-spacing);
+}
+
 main > :first-child { margin-block-start: 0; }
 main > :last-child { margin-block-end: 0; }
 
@@ -394,6 +400,18 @@ ol ol {
     margin-inline-start: var(--body-item-spacing);
 }
 
+header > span.series {
+    font-size: 1.75rem;
+    letter-spacing: 1px;
+    margin-inline-start: 0.5em;
+}
+
+header > span.series::before {
+    color: var(--header-series-arrow-foreground-color);
+    content: "↳";
+    margin-inline-end: 0.25em;
+}
+
 .post-list {
     list-style: none;
     margin: 0;
@@ -423,7 +441,6 @@ ol ol {
     display: flex;
     flex-wrap: wrap;
     gap: 0 4rem;
-    margin-bottom: var(--body-item-spacing);
 }
 
 .post-title h1 {