From 6a0c47ff96bd2565d32a4df3a9b7a79ce24d8460 Mon Sep 17 00:00:00 2001
From: "Thomas A. Christensen II" <25492070+MillironX@users.noreply.github.com>
Date: Fri, 22 Nov 2024 20:37:42 -0600
Subject: [PATCH] feat: Add card formatting

---
 assets/styles/millironx.css               |  94 +++++++++++++++-
 layouts/_default/list.html                | 129 +++++++++++++---------
 layouts/partials/category-button.html     |  45 ++++----
 layouts/partials/list-item-thumbnail.html |  26 -----
 4 files changed, 192 insertions(+), 102 deletions(-)
 delete mode 100644 layouts/partials/list-item-thumbnail.html

diff --git a/assets/styles/millironx.css b/assets/styles/millironx.css
index a6f91d8..2c077f9 100644
--- a/assets/styles/millironx.css
+++ b/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;
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index fb5e9aa..9168fd5 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,64 +1,91 @@
 {{ 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" . }}
+    {{ range .Pages }}
+      <div class="card">
+        {{ partial "category-button" . }}
 
-
-            <div class="card-body">
-              {{ partial "list-item-thumbnail" . }}
-
-              {{/* Prefer full-text links over local ones */}}
-              {{ $link := default .RelPermalink (index .Params "link") }}
-              <a href="{{ $link }}"><h3 class="card-title">{{ .Title }}</h3></a>
-
-              <div>
-                {{ dateFormat "02 Jan 2006" .Date }}
-              </div>
-
-              {{ range (.GetTerms "people") }}
-                <a
-                  href="{{ .RelPermalink }}"
-                  class="icon-link card-link {{ if eq .LinkTitle "Thomas A. Christensen II" }}
-                    fw-bolder
-                  {{ end }}"
-                  ><i class="fad fa-user"></i> {{ .LinkTitle }}</a
-                >
-              {{ end }}
-
-
-              <p class="card-text">
-                {{ .Summary }}
-                <strong
-                  ><small
-                    ><a href="{{ $link }}">Read&nbsp;more &raquo;</a></small
-                  ></strong
-                >
-              </p>
-            </div>
-
-            <div class="card-footer">
-              {{ range (.GetTerms "tags") }}
-                <a href="{{ .RelPermalink }}" class="icon-link card-link"
-                  ><i class="fad fa-tag"></i> {{ .LinkTitle }}</a
-                >
-              {{ end }}
+        {{ 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>
-          <!-- </card> -->
+        {{ 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">
+          {{/* Prefer full-text links over local ones */}}
+          <div class="card-title">
+            {{ $link := default .RelPermalink (index .Params "link") }}
+            <a href="{{ $link }}"><h3>{{ .Title }}</h3></a>
+          </div>
+
+          <div>
+            {{ dateFormat "02 Jan 2006" .Date }}
+          </div>
+
+          {{ range (.GetTerms "people") }}
+            <a
+              href="{{ .RelPermalink }}"
+              class="card-link {{ if eq .LinkTitle "Thomas A. Christensen II" }}
+                fw-bolder
+              {{ end }}"
+              ><i class="fad fa-user"></i> {{ .LinkTitle }}</a
+            >
+          {{ end }}
+
+
+          <p class="card-text">
+            {{ .Summary }}
+            <strong
+              ><small
+                ><a href="{{ $link }}">Read&nbsp;more&nbsp;&raquo;</a></small
+              ></strong
+            >
+          </p>
+
+          <div class="card-footer">
+            {{ range (.GetTerms "tags") }}
+              <a href="{{ .RelPermalink }}" class="icon-link card-link"
+                ><i class="fad fa-tag"></i> {{ .LinkTitle }}</a
+              >
+            {{ end }}
+          </div>
         </div>
-        <!-- </col> -->
-      {{ end }}
-    </div>
-    <!-- </row> -->
+      </div>
+      <!-- </card> -->
+    {{ end }}
   </section>
 {{ end }}
diff --git a/layouts/partials/category-button.html b/layouts/partials/category-button.html
index e6c5d7c..b54d5ba 100644
--- a/layouts/partials/category-button.html
+++ b/layouts/partials/category-button.html
@@ -1,27 +1,24 @@
-<div class="category-button">
-  {{ with .Param "categories" }}
-    {{ range $i, $category := . }}
-      {{ if eq $i 0 }}
-        {{ with $.Site.GetPage (printf "/%s/%s" "categories" $category) }}
-          {{ $iconDictionary := dict
-            "video" "fad fa-video"
-            "paper" "fad fa-book"
-            "poster" "fad fa-presentation"
-            "thesis" "fad fa-graduation-cap"
-            "presentation" "fad fa-podium"
-            "web" "fad fa-globe"
-          }}
-          {{ $categoryIcon := index $iconDictionary $category }}
-          <a
-            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>
-          </a>
-        {{ end }}
+{{ with .Param "categories" }}
+  {{ range $i, $category := . }}
+    {{ if eq $i 0 }}
+      {{ with $.Site.GetPage (printf "/%s/%s" "categories" $category) }}
+        {{ $iconDictionary := dict
+          "video" "fad fa-video"
+          "paper" "fad fa-book"
+          "poster" "fad fa-presentation"
+          "thesis" "fad fa-graduation-cap"
+          "presentation" "fad fa-podium"
+          "web" "fad fa-globe"
+        }}
+        {{ $categoryIcon := index $iconDictionary $category }}
+        <a
+          class="category-button"
+          href="{{ .RelPermalink }}"
+          title="{{ humanize $category }}"
+        >
+          <i class="{{ $categoryIcon | default "fad fa-tag" }} fa-fw"></i>
+        </a>
       {{ end }}
     {{ end }}
   {{ end }}
-</div>
+{{ end }}
diff --git a/layouts/partials/list-item-thumbnail.html b/layouts/partials/list-item-thumbnail.html
deleted file mode 100644
index 44bed22..0000000
--- a/layouts/partials/list-item-thumbnail.html
+++ /dev/null
@@ -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 }}