From 76e3da0de18d9a5031ea6b268e8cc3cc413f67ee Mon Sep 17 00:00:00 2001
From: Eryn Wells <eryn@erynwells.me>
Date: Mon, 31 Oct 2022 08:41:24 -0700
Subject: [PATCH] Add the series to the content header

---
 layouts/partials/content_header.html | 18 ++++++++++++++++++
 layouts/partials/single_main.html    | 10 +---------
 layouts/photos/single.html           | 12 +++---------
 static/styles/root.css               | 19 ++++++++++++++++++-
 4 files changed, 40 insertions(+), 19 deletions(-)
 create mode 100644 layouts/partials/content_header.html

diff --git a/layouts/partials/content_header.html b/layouts/partials/content_header.html
new file mode 100644
index 0000000..3f8ae9e
--- /dev/null
+++ b/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>
diff --git a/layouts/partials/single_main.html b/layouts/partials/single_main.html
index f837c50..ad0fdfc 100644
--- a/layouts/partials/single_main.html
+++ b/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 }}
diff --git a/layouts/photos/single.html b/layouts/photos/single.html
index a69d681..9ed20a8 100644
--- a/layouts/photos/single.html
+++ b/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 }}
diff --git a/static/styles/root.css b/static/styles/root.css
index 4e8ca1f..4e6ad95 100644
--- a/static/styles/root.css
+++ b/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 {