Move footer tags list to a partial so photos and blogs can use the same template

Simplify the blog post layout by removing the <article> tag

content/blog/blog.css

@@ -1,24 +1,13 @@
 :root {
     --post-item-highlight-color: #efefef;
-
-    --tag-foreground-color: rgb(var(--super-dk-gray));
-    --tag-background-color: rgb(var(--super-lt-gray));
-    --tag-spacer-foreground-color: rgb(var(--super-dk-gray));
-    --tag-hover-background-color: rgb(var(--sub-lt-gray));
 }
 @media (prefers-color-scheme: dark) {
     :root {
         --post-item-highlight-color: #121212;
-
-        --tag-foreground-color: rgb(var(--sub-lt-gray));
-        --tag-background-color: rgb(var(--dk-gray));
-        --tag-spacer-foreground-color: rgb(var(--super-dk-gray));
-        --tag-hover-background-color: rgb(var(--super-dk-gray));
-        --tag-hover-foreground-color: rgb(var(--mid-gray));
     }
 }
 
-.post-content > .highlight { margin-block-end: var(--body-item-spacing); }
+.blog > .highlight { margin-block-end: var(--body-item-spacing); }
 
 .post-nav {
     align-items: baseline;
@@ -91,55 +80,3 @@
 .blog.list > ul > li > :first-child {
     text-align: end;
 }
-
-.blog .tags {
-    display: flex;
-    padding-inline-start: 0;
-}
-
-.blog .tags li {
-    background-color: var(--tag-background-color);
-    color: var(--tag-foreground-color);
-    border-radius: 4px;
-    display: inline-block;
-    font-size: 75%;
-    letter-spacing: 1px;
-}
-
-.blog .tags li:hover {
-    background-color: var(--tag-hover-background-color);
-}
-
-.blog .tags li a {
-    color: inherit;
-    display: block;
-    height: 100%;
-    width: 100%;
-    padding: 0.6rem 1rem;
-}
-
-.blog .tags li a:hover {
-    color: var(--tag-hover-foreground-color);
-    text-decoration: none;
-}
-
-.blog .tags li + li { margin-inline-start: 1rem; }
-.blog .tags li.chevron + li { margin-inline-start: 0 }
-
-.blog .tags .chevron {
-    align-items: center;
-    border: 0;
-    border-radius: 0;
-    color: var(--tag-spacer-foreground-color);
-    background-color: inherit;
-    display: flex;
-    justify-content: center;
-    margin-inline-start: 0;
-    padding-inline-start: 1px;
-    width: 2rem;
-}
-
-.blog .tags .chevron:hover {
-    color: var(--tag-background-color);
-    background-color: inherit;
-}

layouts/partials/footer_tags.html

@@ -0,0 +1,24 @@
+{{- if or .Params.categories .Params.tags -}}
+<ul class="tags">
+  {{- if .Params.categories -}}
+    {{- $categories := .GetTerms "categories" -}}
+    {{- if gt (len $categories) 1 -}}
+      {{- errorf "More than one category for %q" .Path -}}
+    {{- end -}}
+
+    {{- with index (.GetTerms "categories") 0 -}}
+      <li class="category"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
+    {{- end -}}
+  {{- end -}}
+
+  {{- if and .Params.categories .Params.tags -}}
+    <li class="chevron noselect">⏵</li>
+  {{- end -}}
+
+  {{- if .Params.tags -}}
+    {{- range .GetTerms "tags" -}}
+      <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
+    {{- end -}}
+  {{- end -}}
+</ul>
+{{- end -}}

layouts/partials/single_main.html

@@ -1,4 +1,3 @@
-<article class="post-single">
   <header>
     {{ partial "development/draft_tag.html" . }}
     <div class="post-title">
@@ -13,39 +12,18 @@
     {{ .Content }}
   </section>
 
-  <footer>
-    {{- if or .Params.categories .Params.tags -}}
-    <ul class="tags">
-      {{- if .Params.categories -}}
-        {{- $categories := .GetTerms "categories" -}}
-        {{- if gt (len $categories) 1 -}}
-          {{- errorf "More than one category for %q" .Path -}}
-        {{- end -}}
-        {{- with index (.GetTerms "categories") 0 -}}
-          <li class="category"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
-        {{- end -}}
-      {{- end -}}
-      {{- if and .Params.categories .Params.tags -}}
-        <li class="chevron noselect">⏵</li>
-      {{- end -}}
-      {{- if .Params.tags -}}
-        {{- range .GetTerms "tags" -}}
-          <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
-        {{- end -}}
-      {{- end -}}
-    </ul>
-    {{- end -}}
+<footer>
+  {{ partial "footer_tags.html" . }}
 
-    {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
-    {{ if and (gt (len $pages) 1) (in $pages . ) }}
+  {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
+  {{- if and (gt (len $pages) 1) (in $pages . ) -}}
     <nav class="post-nav">
       {{ with $pages.Prev . }}
-      <a class="prev" href="{{ .Permalink }}"><span>←</span><span>{{ .Name }}</span></a>
+        <a class="prev" href="{{ .Permalink }}"><span>←</span><span>{{ .Name }}</span></a>
       {{ end }}
       {{ with $pages.Next . }}
-      <a class="next" href="{{ .Permalink }}"><span>{{ .Name }}</span><span>→</span></a>
+        <a class="next" href="{{ .Permalink }}"><span>{{ .Name }}</span><span>→</span></a>
       {{ end }}
     </nav>
-  {{ end }}
-  </footer>
-</article>
+  {{- end -}}
+</footer>

layouts/photos/single.html

@@ -40,6 +40,10 @@
     </ul>
   </figure>
 {{ end }}
+
+<footer>
+  {{ partial "footer_tags.html" . }}
+</footer>
 {{ end }}
 
 {{ define "footer" }}

static/styles/root.css

@@ -50,6 +50,11 @@
 
     --content-width: 80rem;
 
+    --tag-foreground-color: rgb(var(--super-dk-gray));
+    --tag-background-color: rgb(var(--super-lt-gray));
+    --tag-spacer-foreground-color: rgb(var(--super-dk-gray));
+    --tag-hover-background-color: rgb(var(--sub-lt-gray));
+
     --transition-duration: 0.7s;
 
     --social-menu-padding: 1rem;
@@ -73,6 +78,12 @@
         --platter-background-color: rgba(var(--black), var(--platter-background-opacity));
         --platter-backdrop-filter: brightness(0.66) blur(10px);
 
+        --tag-foreground-color: rgb(var(--sub-lt-gray));
+        --tag-background-color: rgb(var(--dk-gray));
+        --tag-spacer-foreground-color: rgb(var(--super-dk-gray));
+        --tag-hover-background-color: rgb(var(--super-dk-gray));
+        --tag-hover-foreground-color: rgb(var(--mid-gray));
+
         --twitter-icon: url(/icons/twitter-dark.svg);
         --github-icon: url(/icons/github-dark.svg);
         --instagram-icon: url(/icons/instagram-dark.svg);
@@ -463,6 +474,58 @@ ol ol {
     padding: 0 0.5rem;
 }
 
+footer > .tags {
+    display: flex;
+    padding-inline-start: 0;
+}
+
+footer > .tags > li {
+    background-color: var(--tag-background-color);
+    color: var(--tag-foreground-color);
+    border-radius: 4px;
+    display: inline-block;
+    font-size: 75%;
+    letter-spacing: 1px;
+}
+
+footer > .tags > li:hover {
+    background-color: var(--tag-hover-background-color);
+}
+
+footer > .tags > li > a {
+    color: inherit;
+    display: block;
+    height: 100%;
+    width: 100%;
+    padding: 0.6rem 1rem;
+}
+
+footer > .tags > li > a:hover {
+    color: var(--tag-hover-foreground-color);
+    text-decoration: none;
+}
+
+footer > .tags > li + li { margin-inline-start: 1rem; }
+footer > .tags > li.chevron + li { margin-inline-start: 0 }
+
+footer > .tags > .chevron {
+    align-items: center;
+    border: 0;
+    border-radius: 0;
+    color: var(--tag-spacer-foreground-color);
+    background-color: inherit;
+    display: flex;
+    justify-content: center;
+    margin-inline-start: 0;
+    padding-inline-start: 1px;
+    width: 2rem;
+}
+
+footer > .tags > .chevron:hover {
+    color: var(--tag-spacer-foreground-color);
+    background-color: inherit;
+}
+
 .youtube iframe {
     aspect-ratio: 16 / 9;
     margin-bottom: -3px;