Finishes screenshots in Honeycomb study, adds image to homepage card

assets/css/site.css

@@ -1458,6 +1458,19 @@ body#values {
                 box-shadow: none;
                 margin: 0.5rem -0.5rem -0.5rem 0.5rem;
             }
+
+            &#honeycomb {
+                background-position: top 10% right -35%;
+                background-size: 50% auto;
+
+                div {
+                    gap: 1rem;
+
+                    > figure {
+                        max-width: 22.5%;
+                    }
+                }
+            }
         }
     }
 
@@ -1679,15 +1692,6 @@ body#values {
                     width: 25dvh;
                 }
             }
-
-            section#studies {
-                padding-left: 1.5rem;
-                padding-right: 1.5rem;
-
-                article h2 {
-                    font-size: 2.5rem;
-                }
-            }
         }
 
         > footer {
@@ -1701,6 +1705,21 @@ body#values {
         }
     }
 
+    /* case study list adjustments */
+    section#studies {
+        padding-left: 1.5rem;
+        padding-right: 1.5rem;
+
+        article h2 {
+            font-size: 2.5rem;
+        }
+
+        article#honeycomb {
+            background-position: top 10% right -5%;
+            background-size: 35% auto;
+        }
+    }
+
     /* single page docs */
     body#values main > article {
         padding: 10dvh 0 5dvh;
@@ -1861,4 +1880,12 @@ body#values {
     :root {
         --article-grid: 17rem var(--content-width) 7rem;
     }
+
+    /* case study card adjustments */
+    section#studies {
+        article#honeycomb {
+            background-position: top 10% right -5%;
+            background-size: 30% auto;
+        }
+    }
 }

content/studies/honeycomb/index.md

@@ -11,6 +11,7 @@ hero:
   html: '<div id="grid"><div id="shapes"><div id="square"></div><div id="circle"></div><div id="rectangle"></div><div id="triangle"></div></div></div>'
 list:
   more: "My company needed a design system to unify six very different products as one new edtech platform. We did that while managing very different frontends and skill levels, urgent accessibility needs, and no single framework that everyone could share."
+  img: card.png
   color: yellow
   facts:
     - key: Role

content/studies/legacy/index.md

@@ -11,7 +11,7 @@ hero:
   svg: kangaroo-eyes.svg
 list:
   more: "Wallabyte supports schools and families through critical paperwork, but was woefully unusable. This case study covers how I approached that challenge—from identifying the highest impact issues to shaping a more coherent forms experience."
-  img: card-legacy.png
+  img: card.png
   color: blue
   facts:
     - key: Role

layouts/index.html

@@ -31,10 +31,11 @@
     {{- $page := . -}}
     {{- $image := "" -}}
     {{- $color := "" -}}
+    {{- $cardID := .Slug | default .File.ContentBaseName -}}
     {{- with .Params.list.img -}}
       {{- $match := $page.Resources.GetMatch . -}}
       {{- if not $match -}}
-        {{- $match = $page.Resources.GetMatch (printf "img/%s" .) -}}
+        {{- $match = $page.Resources.GetMatch (printf "%s" .) -}}
       {{- end -}}
       {{- with $match -}}
         {{- $image = .RelPermalink -}}
@@ -43,7 +44,7 @@
     {{- with .Params.list.color -}}
       {{- $color = . -}}
     {{- end -}}
-  <article{{ with $color }} color="{{ . }}"{{ end }}{{ with $image }} style="--card-bg: url('{{ . }}');"{{ end }}>
+  <article id="{{ $cardID }}"{{ with $color }} color="{{ . }}"{{ end }}{{ with $image }} style="--card-bg: url('{{ . }}');"{{ end }}>
     <a href="{{ .RelPermalink }}">
       <h2>{{ .Title }}</h2>
       <p>{{ .Summary }}</p>
@@ -73,4 +74,4 @@
   </article>
   {{- end -}}
 </section>
-{{ end }}
+{{ end }}

layouts/shortcodes/figure.html

@@ -12,6 +12,7 @@
   {{- with $caption }}
   <figcaption>
     {{ $caption | markdownify }}
+    <a href="{{ $url }}" class="tablet-hide">Expand</a>
   </figcaption>
   {{- end }}
 </figure>