Adds new list template for case studies, optimizes document page styles

assets/css/site.css

@@ -806,6 +806,9 @@ span[color="red"] {
 span[color="yellow"] {
     color: var(--yellow-body);
 }
+span[color="green"] {
+    color: var(--green);
+}
 
 
 /**
@@ -1232,64 +1235,76 @@ body#honeycomb
 }
 
 /* single page documents */
-body#values {
+body.simple {
-    grid-template-rows: 5rem auto auto;
+    grid-template-rows: var(--header-height) auto auto;
 
     main {
-        grid-template-rows: auto;
+        background: var(--bg);
+        border-top: none;
+        display: grid;
+        gap: var(--article-gap);
+        grid-template-rows: min-content auto;
+        grid-template-columns: var(--article-grid);
         justify-content: center;
+        justify-items: center;
+        padding: var(--article-top) 1.5rem 3rem;
+        width: 100%;
 
-        > article {
+        > header {
-            background: var(--bg);
+            grid-column-start: 1;
-            border-top: none;
+            grid-column-end: 3;
-            display: grid;
+            display: block;
-            grid-template-rows: min-content auto;
+            padding: 3rem 0 1.5rem 0;
-            justify-items: center;
             width: 100%;
 
-            > header {
+            .lede {
-                grid-column-start: 1;
+                margin: 2rem 0 0;
-                grid-column-end: 3;
+                font-size: 1.6rem;
-                justify-self: start;
+                font-weight: 400;
-                padding: 3rem 0 1.5rem 0;
+                line-height: 1.4;
+            }
+        }
 
-                .lede {
+        > section {
-                    margin: 2rem 0 0;
+            grid-column-start: 1;
-                    font-size: 1.6rem;
+            grid-column-end: 3;
-                    font-weight: 400;
+            font-size: 1.125rem;
-                    line-height: 1.4;
+
-                }
+            > :first-child {
+                margin-top: 0;
             }
 
-            > section {
+            p {
-                grid-column-start: 1;
+                margin: 0 0 1.5rem;
-                grid-column-end: 3;
-                font-size: 1.125rem;
 
-                > :first-child {
+                > em:first-child {
-                    margin-top: 0;
+                    color: var(--text);
+                    display: block;
+                    font-size: 1.25rem;
+                    font-style: normal;
+                    font-weight: 700;
+                    line-height: 1.3;
+                    padding-bottom: 0.75rem;
                 }
 
-                p {
+                &:not(:has(> em:first-child)) {
-                    margin: 0 0 1.5rem;
+                    margin-top: -0.75rem;
-
-                    > em:first-child {
-                        color: var(--text);
-                        display: block;
-                        font-size: 1.25rem;
-                        font-style: normal;
-                        font-weight: 700;
-                        line-height: 1.3;
-                        padding-bottom: 0.75rem;
-                    }
-
-                    &:not(:has(> em:first-child)) {
-                        margin-top: -0.75rem;
-                    }
                 }
             }
         }
     }
+
+    section {
+
+        &#studies {
+            background: var(--bg);
+            padding: 0 0 2rem;
+
+            article {
+                width: auto;
+            }
+        }
+    }
 }
 
 /**
@@ -1433,6 +1448,11 @@ body#values {
         }
     }
 
+    /* simple templates need the header fixed */
+    body.simple main > header {
+        min-height: auto;
+    }
+
     /* honeycomb case study art changes */
     body#honeycomb main > header #grid {
         --shape-size: 10dvh;
@@ -1764,7 +1784,7 @@ body#values {
     }
 
     /* single page docs */
-    body#values main > article {
+    body.simple main {
         padding: 10dvh 0 5dvh;
 
         > header {
@@ -1772,6 +1792,14 @@ body#values {
         }
         > section {
             grid-column-start: 2;
+
+            p {
+                font-size: 1rem;
+            }
+
+            &#studies {
+                grid-column-start: 1;
+            }
         }
     }
 
@@ -1848,11 +1876,19 @@ body#values {
     }
 
     /* single page docs */
-    body#values main > article
+    body.simple main
     {
         > header {
             padding-bottom: 3rem;
         }
+
+        section {
+            grid-column-end: 3;
+
+            &#studies {
+                grid-column-end: 4;
+            }
+        }
     }
 }
 

content/studies/_index.md

@@ -1,5 +1,8 @@
 ---
 title: "Case Studies"
+body:
+  id: "list"
+  class: "simple"
 ---
 
-Selected product design and UX case studies.
+Selected product design and UX case studies highlighting different aspects of my <span color="blue">**design process**</span>, <span color="yellow">**thinking**</span>, <span color="red">**collaboration style**</span>, and <span color="green">**skills**</span>. You can also read about my [design philosophy and values](/values) in more detail. 

content/values.md

@@ -2,6 +2,8 @@
 title: "Design philosophy"
 layout: "document"
 slug: "values"
+body:
+  class: "simple"
 summary: "<span color=\"blue\"><strong>How I think about design</strong></span>, particularly for the browser, and the values I hold close. Good design can't happen without <span color=\"red\"><strong>respect for the user</strong></span> and their device. <span color=\"yellow\"><strong>Taste and personality matter</strong></span> quite a bit."
 header:
   page:

layouts/_default/baseof.html

@@ -28,7 +28,7 @@
       {{ end }}
     {{ end }}
   </head>
-  <body id='{{ with .Slug }}{{ . }}{{ else }}default{{ end }}'>
+  <body id='{{ with .Params.body.id }}{{ . }}{{ else }}{{ with .Slug }}{{ . }}{{ else }}default{{ end }}{{ end }}'{{ with .Params.body.class }} class='{{ . }}'{{ end }}>
     {{- $pageLabel := "" -}}
     {{- $pageHref := "" -}}
     {{- if and .IsPage (eq .Section "studies") -}}
@@ -61,7 +61,7 @@
       </div>
       <menu aria-label="Primary">
         <li>
-          <a href='{{ "/#studies" | relURL }}'>
+          <a href='{{ "/studies" | relURL }}'>
             <span>Case studies</span>
             {{ partial "icon.html" (dict "name" "book") }}
           </a>

layouts/_default/document.html

@@ -1,16 +1,14 @@
 {{ define "main" }}
-  <article class="document">
+  <header>
-    <header>
+    {{ with .Params.eyebrow }}
-      {{ with .Params.eyebrow }}
+      <p class="eyebrow">{{ . }}</p>
-        <p class="eyebrow">{{ . }}</p>
+    {{ end }}
-      {{ end }}
+    <h1>{{ .Title }}</h1>
-      <h1>{{ .Title }}</h1>
+    {{ with .Summary }}
-      {{ with .Summary }}
+      <p class="lede">{{ . | markdownify }}</p>
-        <p class="lede">{{ . | markdownify }}</p>
+    {{ end }}
-      {{ end }}
+  </header>
-    </header>
+  <section>
-    <section>
+    {{ .Content }}
-      {{ .Content }}
+  </section>
-    </section>
-  </article>
 {{ end }}

layouts/_default/list.html

@@ -1,23 +1,57 @@
 {{ define "main" }}
-  <section class="page-hero page-hero-compact">
+  <header>
-    <p class="eyebrow">{{ .Section }}</p>
     <h1>{{ .Title }}</h1>
-    {{ with .Content }}
+    {{ with .Summary }}
-      <div class="lede">{{ . }}</div>
+    <p class="lede">{{ . | markdownify }}</p>
     {{ end }}
-  </section>
+  </header>
+  <section id="studies">
 
-  <section class="page-section">
+  {{ range where .Site.RegularPages "Section" "studies" }}
-    <div class="study-list">
+    {{- $page := . -}}
-      {{ range .Pages.ByWeight }}
+    {{- $image := "" -}}
-        <article>
+    {{- $color := "" -}}
-          <p class="study-card-meta">{{ .Section | title }}</p>
+    {{- $cardID := .Slug | default .File.ContentBaseName -}}
-          <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
+    {{- with .Params.list.img -}}
-          <p>{{ .Summary }}</p>
+      {{- $match := $page.Resources.GetMatch . -}}
-        </article>
+      {{- if not $match -}}
-      {{ else }}
+        {{- $match = $page.Resources.GetMatch (printf "%s" .) -}}
-        <p>No entries yet.</p>
+      {{- end -}}
-      {{ end }}
+      {{- with $match -}}
-    </div>
+        {{- $image = .RelPermalink -}}
+      {{- end -}}
+    {{- end -}}
+    {{- with .Params.list.color -}}
+      {{- $color = . -}}
+    {{- end -}}
+    <article id="{{ $cardID }}"{{ with $color }} color="{{ . }}"{{ end }}{{ with $image }} style="--card-bg: url('{{ . }}');"{{ end }}>
+      <a href="{{ .RelPermalink }}">
+        <h2>{{ .Title }}</h2>
+        <p>{{ .Summary }}</p>
+      {{ with .Params.list.more }}<p>{{ . }}</p>{{ end }}
+      {{- with .Params.study.facts -}}
+        <div>
+        {{- range . -}}
+          {{- if or (eq .label "Role") (eq .label "Tools") (eq .label "Industry") -}}
+            {{- $fact := . -}}
+            {{- $iconColor := "" -}}
+            {{- range $page.Params.list.facts -}}
+              {{- if eq (lower .key) (lower $fact.label) -}}
+                {{- $iconColor = .color -}}
+              {{- end -}}
+            {{- end -}}
+          <figure>
+            {{- with $fact.icon -}}
+              {{ partial "icon.html" (dict "name" . "color" $iconColor) }}
+            {{- end -}}
+            <figcaption {{ with $fact.class }}class='{{ . }}'{{ end }}>{{ $fact.value | markdownify }}</figcaption>
+          </figure>
+          {{- end -}}
+        {{- end -}}
+        </div>
+      {{- end -}}
+      </a>
+    </article>
+  {{- end -}}
   </section>
 {{ end }}

layouts/studies/list.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    {{- $target := "/#studies" | relURL -}}
-    <meta charset="utf-8">
-    <title>Redirecting…</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta http-equiv="refresh" content='0; url={{ $target }}'>
-    <link rel="canonical" href='{{ "/" | absURL }}'>
-    <script>
-      window.location.replace('{{ $target }}');
-    </script>
-  </head>
-  <body>
-    <p>
-      Redirecting to <a href='{{ $target }}'>case studies</a>.
-    </p>
-  </body>
-</html>