feat: Add card formatting

assets/styles/millironx.css

@@ -169,6 +169,79 @@ blockquote small {
   line-height: 1;
 }
 
+.card {
+  background-color: color-mix(
+    in srgb,
+    light-dark(var(--brown-swiss-gray), var(--eclipse-gray)),
+    white 10%
+  );
+  border-color: light-dark(
+    var(--manhattan-steel-blue),
+    var(--brown-swiss-gray)
+  );
+  border-width: 1.5pt;
+  border-radius: 0.1rem;
+  border-style: outset;
+  margin: 1rem 0;
+  padding: 0.5rem;
+  padding-top: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-link {
+  white-space: nowrap;
+  display: inline-flex;
+  gap: 0.375rem;
+  align-items: center;
+  text-underline-offset: 0.25em;
+  backface-visibility: hidden;
+  margin: 0 0.5em;
+}
+
+.category-button {
+  position: absolute;
+  top: 1em;
+  right: 1em;
+  display: grid;
+  color: white;
+  background-color: var(--ear-tag-red);
+  border-radius: 0.5em;
+  padding: 1em;
+}
+
+.card-title {
+  margin-right: 3em;
+}
+
+.card-title > a {
+  color: inherit;
+}
+
+.img-thumbnail {
+  width: 100%;
+  height: auto;
+  margin-top: 0.5rem;
+}
+
+.thumb-icon-wrapper {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+
+.thumb-icon-badge {
+  font-size: xx-large;
+  justify-self: center;
+  align-self: center;
+  padding: 1.5rem 3rem;
+  border-radius: 3rem;
+  background-color: var(--ear-tag-red);
+  color: white;
+}
+
 /*
   Helper classes
 */
@@ -254,6 +327,25 @@ blockquote small {
     max-width: 50%;
   }
 
+  .card {
+    flex-direction: row;
+  }
+
+  .img-thumbnail {
+    margin-right: 1rem;
+  }
+
+  .card-header {
+    width: 20vw;
+    flex-shrink: 0;
+    display: flex;
+    justify-content: center;
+  }
+
+  .card-body {
+    margin-left: 1rem;
+  }
+
   /*
     Clearfix implementation
   */
@@ -271,7 +363,7 @@ blockquote small {
   }
 } /* end @media */
 
-@supports (animation-timeline: scroll()) {
+@supports (animation-timeline: scroll()) and (animation-range) {
   @keyframes sticky-header {
     from {
       height: 50vh;

layouts/_default/list.html

@@ -1,25 +1,56 @@
 {{ define "main" }}
   {{ partial "scrolling-image-header" . }}
-  <section class="container-fluid list-main">
-    <div class="container px-5">
+  <section>
+    <div>
       {{ block "content" . }}
         {{ .Content }}
       {{ end }}
     </div>
 
-    <div class="row" data-masonry='{"percentPosition": true}'>
     {{ range .Pages }}
-        <div class="col-xl-6 mb-4">
       <div class="card">
         {{ partial "category-button" . }}
 
+        {{ with .Param "fa-thumbnail" }}
+          <div class="card-header">
+            <div class="thumb-icon-wrapper">
+              <span class="thumb-icon-badge">
+                <i class="fa-fw {{ . }}"></i>
+              </span>
+            </div>
+          </div>
+        {{ end }}
+
+        {{/* Thumbnail images should be stored as 'thumbnail'.* in the page bundle, but
+          historically they might have been referenced as 'thumbnail' in the front
+          matter, or (even more historically) as 'cardImage'. Use scratch to
+          normalize all these different systems.
+        */}}
+        {{ $bundleGlob := "thumbnail.*" }}
+        {{ $frontThumbGlob := print "images/" (.Params.thumbnail) ".*" }}
+        {{ $frontCardGlob := print "images/" (.Params.cardImage) ".jpg" }}
+        {{ $allThumbnailGlob := print "{" $frontThumbGlob "," $frontCardGlob "," $bundleGlob "}" }}
+        {{ with .Resources.GetMatch $allThumbnailGlob }}
+          {{ $thumbnail := . }}
+          {{ $thumbnailResized := $thumbnail.Resize "600x" }}
+
+
+          <div class="card-header">
+            <img
+              class="img-thumbnail"
+              src="{{ $thumbnailResized.RelPermalink }}"
+              alt="Thumbnail of {{ .Title }}"
+            />
+          </div>
+        {{ end }}
+
 
         <div class="card-body">
-              {{ partial "list-item-thumbnail" . }}
-
           {{/* Prefer full-text links over local ones */}}
+          <div class="card-title">
             {{ $link := default .RelPermalink (index .Params "link") }}
-              <a href="{{ $link }}"><h3 class="card-title">{{ .Title }}</h3></a>
+            <a href="{{ $link }}"><h3>{{ .Title }}</h3></a>
+          </div>
 
           <div>
             {{ dateFormat "02 Jan 2006" .Date }}
@@ -28,7 +59,7 @@
           {{ range (.GetTerms "people") }}
             <a
               href="{{ .RelPermalink }}"
-                  class="icon-link card-link {{ if eq .LinkTitle "Thomas A. Christensen II" }}
+              class="card-link {{ if eq .LinkTitle "Thomas A. Christensen II" }}
                 fw-bolder
               {{ end }}"
               ><i class="fad fa-user"></i> {{ .LinkTitle }}</a
@@ -40,11 +71,10 @@
             {{ .Summary }}
             <strong
               ><small
-                    ><a href="{{ $link }}">Read&nbsp;more &raquo;</a></small
+                ><a href="{{ $link }}">Read&nbsp;more&nbsp;&raquo;</a></small
               ></strong
             >
           </p>
-            </div>
 
           <div class="card-footer">
             {{ range (.GetTerms "tags") }}
@@ -54,11 +84,8 @@
             {{ end }}
           </div>
         </div>
+      </div>
       <!-- </card> -->
-        </div>
-        <!-- </col> -->
     {{ end }}
-    </div>
-    <!-- </row> -->
   </section>
 {{ end }}

layouts/partials/category-button.html

@@ -1,4 +1,3 @@
-<div class="category-button">
 {{ with .Param "categories" }}
   {{ range $i, $category := . }}
     {{ if eq $i 0 }}
@@ -13,9 +12,8 @@
         }}
         {{ $categoryIcon := index $iconDictionary $category }}
         <a
+          class="category-button"
           href="{{ .RelPermalink }}"
-            class="btn btn-dark btn-sm"
-            data-bs-toggle="tooltip"
           title="{{ humanize $category }}"
         >
           <i class="{{ $categoryIcon | default "fad fa-tag" }} fa-fw"></i>
@@ -24,4 +22,3 @@
     {{ end }}
   {{ end }}
 {{ end }}
-</div>

layouts/partials/list-item-thumbnail.html

@@ -1,26 +0,0 @@
-{{ with .Param "fa-thumbnail" }}
-  <div class="thumb-icon-wrapper mb-3">
-    <span class="badge thumb-icon-badge rounded-pill bg-primary py-4 px-5">
-      <i class="fa-fw {{ . }}"></i>
-    </span>
-  </div>
-{{ end }}
-
-{{/* Thumbnail images should be stored as 'thumbnail'.* in the page bundle, but
-  historically they might have been referenced as 'thumbnail' in the front
-  matter, or (even more historically) as 'cardImage'. Use scratch to
-  normalize all these different systems.
-*/}}
-{{ $bundleGlob := "thumbnail.*" }}
-{{ $frontThumbGlob := print "images/" (.Params.thumbnail) ".*" }}
-{{ $frontCardGlob := print "images/" (.Params.cardImage) ".jpg" }}
-{{ $allThumbnailGlob := print "{" $frontThumbGlob "," $frontCardGlob "," $bundleGlob "}" }}
-{{ with .Resources.GetMatch $allThumbnailGlob }}
-  {{ $thumbnail := . }}
-  {{ $thumbnailResized := $thumbnail.Resize "600x" }}
-  <img
-    class="img img-thumbnail float-start me-3 md-max-width-33"
-    src="{{ $thumbnailResized.RelPermalink }}"
-    alt="Thumbnail of {{ .Title }}"
-  />
-{{ end }}