From 0ed6a77690dc358f50d36313bde9131d67d5a2e2 Mon Sep 17 00:00:00 2001
From: Ben Goldsworthy <admin@bengoldsworthy.net>
Date: Wed, 9 Apr 2025 10:15:56 +0200
Subject: [PATCH] refactor: item tile headers

---
 assets/css/components/_item-tile.scss         | 76 ++++++++++---------
 assets/css/pages/_single.scss                 | 13 ----
 layouts/partials/item-tile.html               | 21 ++---
 .../single/main-header/item-tile.html         |  9 +--
 layouts/partials/text/item-title.html         | 21 +++++
 5 files changed, 72 insertions(+), 68 deletions(-)
 create mode 100644 layouts/partials/text/item-title.html

diff --git a/assets/css/components/_item-tile.scss b/assets/css/components/_item-tile.scss
index 2685d87..646e069 100644
--- a/assets/css/components/_item-tile.scss
+++ b/assets/css/components/_item-tile.scss
@@ -5,6 +5,10 @@
 
   &:hover {
     border-color: $dark;
+
+    & .item-tile__title-wrapper {
+      opacity: 1;
+    }
   }
 }
 
@@ -13,47 +17,34 @@
 }
 
 .item-tile {
-  display: grid;
-  min-block-size: 180px;
-  grid-template-columns: 5% auto 5%;
-  grid-template-rows: 2.5% auto 2.5%;
-  grid-template-areas:
-    ".       .      ."
-    ". tile-details ."
-    ".       .      .";
-  background-size: cover;
+  background-position: center center;
   background-repeat: no-repeat;
-  background-position: center;
-  word-break: break-word;
+  background-size: cover;
+  block-size: 15em;
+  border: 2px solid $dark;
+  align-content: center;
+  position: relative;
 
   @media (prefers-reduced-data: reduce) {
     background: none !important;
   }
-  
-  &__header {
-    text-align: center;
+
+  &__series {
+    margin-block: 0 1em;
+    margin-inline: auto;
+    font-size: 1.2em;
+    top: 0;
+  }
+
+  &__title-wrapper {
+    display: flex;
+    flex-direction: column;
     background-color: $dark;
     opacity: 0.9;
-    display: grid;
-    grid-area: tile-details;
-    grid-template-columns: 5px auto 5px;
-    grid-template-rows: 0 1.8em auto auto;
-    grid-template-areas:
-      ". 		 . 			."
-      ".    banner   ."
-      ".  tile-title ."
-      ". tile-subtitle .";
-  }
-  
-  &--heading {
-    font-size: 3em;
-
-    & .item-tile__header,
-    & .item-tile__redacted {
-      opacity: 1;
-      grid-template-rows: auto;
-      grid-template-areas: ". tile-title .";
-    }
+    text-align: center;
+    margin: auto;
+    width: 80%;
+    margin-block: auto;
   }
 
   &--ohwhatohjeez {
@@ -68,6 +59,15 @@
     border: 2px solid $omphaloskepsis;
   }
 
+  &--heading {
+    text-align: center;
+    background-color: $dark;
+
+    & .item-tile__header {
+      font-size: 3em;
+    }
+  }
+
   &__banner {
     padding-inline: 0.75em;
     grid-area: banner;
@@ -83,6 +83,14 @@
     background-color: #ebebeb;
   }
 
+  & hgroup {
+    padding: 1em 0.5em;
+
+    & > * {
+      margin: 0.25lh;
+    }
+  }
+
   &__title,
   &__subtitle {
     color: $light;
diff --git a/assets/css/pages/_single.scss b/assets/css/pages/_single.scss
index b788bcf..7c1bc97 100644
--- a/assets/css/pages/_single.scss
+++ b/assets/css/pages/_single.scss
@@ -32,19 +32,6 @@
     padding-inline: 1em;
 
     & .article-header {
-      text-align: center;
-      background-color: $dark;
-      opacity: 0.8;
-      color: $light;
-      display: grid;
-      grid-area: post-header-details;
-      grid-template-columns: 1fr;
-      padding: 20px;
-      grid-template-rows: 1fr auto auto 1fr;
-      justify-items: center;
-      align-items: center;
-      grid-template-areas: "." "post-title" "post-subtitle" ".";
-
       &__series {
         margin-block: 0 1em;
         margin-inline: auto;
diff --git a/layouts/partials/item-tile.html b/layouts/partials/item-tile.html
index 222d08d..7c10329 100644
--- a/layouts/partials/item-tile.html
+++ b/layouts/partials/item-tile.html
@@ -69,14 +69,14 @@
           "
         />
       {{- end }}
-      <header class="item-tile__header">
+      <header class="item-tile__header item-tile__title-wrapper">
         {{ if ( or .Params.series .Params.published_in ) }}
           <span
-            class="item-tile__banner item-tile__banner--{{ if .Params.series }}
+            class="item-tile__banner item-tile__banner--{{ if .Params.series -}}
               series
-            {{ else if .Params.published_in }}
+            {{- else if .Params.published_in -}}
               published-in
-            {{ end }}"
+            {{- end }}"
           >
             {{- if .Params.series -}}
               {{ .Params.series | safeHTML }}
@@ -85,15 +85,10 @@
             {{- end -}}
           </span>
         {{ end }}
-        <h2
-          class="p-name item-tile__title {{ if gt ( len ( .Title | plainify ) ) 40 }}item-tile__title--long{{ end }}"
-          itemprop="name"
-        >
-          {{ default .Title .Params.markup_title | $.Page.RenderString }}
-        </h2>
-        {{ with .Params.subtitle }}
-          <p class="item-tile__subtitle">{{ . | $.Page.RenderString }}</p>
-        {{ end }}
+
+        {{- partialCached "text/item-title.html" ( dict "pc" . "sc" $  "class" "item-tile" ) .File.Filename -}}
+
+
         <p style="display: none;">
           Published:
           <time
diff --git a/layouts/partials/single/main-header/item-tile.html b/layouts/partials/single/main-header/item-tile.html
index d42b451..0b70599 100644
--- a/layouts/partials/single/main-header/item-tile.html
+++ b/layouts/partials/single/main-header/item-tile.html
@@ -40,14 +40,7 @@
 
   <div class="article-header__title-wrapper">
     <a class="u-url u-uid" style="display: none" href="{{ .pc.Permalink }}"></a>
-    <hgroup class="p-name" itemprop="name">
-      <h2 class="article-header__title {{ if gt ( len ( .pc.Title | plainify ) ) 40 }}article-header__title--long{{ end }}">
-        {{- default .pc.Title .pc.Params.markup_title  | .pc.Page.RenderString -}}
-      </h2>
-      {{ with .pc.Params.subtitle }}
-        <p class="article-header__subtitle">{{ . | $.pc.Page.RenderString }}</p>
-      {{ end }}
-    </hgroup>
+   {{- partialCached "text/item-title.html" ( dict "pc" .pc "sc" .sc "class" "article-header" ) .File.Filename -}}
   </div>
 
   {{ with ( .pc.Resources.GetMatch .pc.Params.featured_image ) }}
diff --git a/layouts/partials/text/item-title.html b/layouts/partials/text/item-title.html
new file mode 100644
index 0000000..bdc569b
--- /dev/null
+++ b/layouts/partials/text/item-title.html
@@ -0,0 +1,21 @@
+{{- /*
+  Displays an itemtitle with optional subtitle.
+
+  @params pc    Page context.
+  @params sc  Site context.
+  @params class The base of the element CSS class.
+  */
+-}}
+
+
+<hgroup
+  class="p-name"
+  itemprop="name"
+>
+  <h2 class="{{ .class }}__title {{ if gt ( len ( .pc.Title | plainify ) ) 40 }}{{ .class }}__title--long{{ end }}">
+    {{- default .pc.Title .pc.Params.markup_title  | .pc.Page.RenderString -}}
+  </h2>
+  {{ with .pc.Params.subtitle }}
+    <p class="{{ $.class }}__subtitle">{{ . | $.pc.Page.RenderString }}</p>
+  {{ end }}
+</hgroup>