Fixes mobile handling on study card images

assets/css/site.css

@@ -920,13 +920,13 @@ section#studies {
         }
     }
 
+    /* main card element */
     article {
         background-color: var(--card-color);
         background-image: var(--card-bg);
-        background-position: bottom -16rem right -1rem; /* mobile position */
         background-repeat: no-repeat;
-        background-size: auto 30rem; /* mobile size */
-        border: none;
+        border-top: 2px solid var(--hover);
+        border-bottom: 0.5rem solid var(--hover);
         transition: filter 200ms ease-in-out;
         --card-color: var(--blue);
 
@@ -1004,6 +1004,16 @@ section#studies {
             }
         }
 
+        /* specific studies */
+        &#honeycomb {
+            background-position: bottom -13rem right -4rem;
+            background-size: auto 30rem;
+        }
+        &#legacy {
+            background-position: bottom -16rem right -1rem;
+            background-size: auto 30rem;
+        }
+
         &[color="blue"] {
             color: var(--white);
 
@@ -1024,6 +1034,12 @@ section#studies {
                 filter: brightness(105%);
             }
         }
+
+        /* inset the article when clicking the link */
+        &:has(a:active) {
+            border-bottom-width: 2px;
+            margin: calc(0.5rem - 2px) 0 0;
+        }
     }
 }
 
@@ -1395,6 +1411,15 @@ body#values {
             p:first-of-type + p {
                 display: block;
             }
+
+            &#honeycomb {
+                background-position: bottom -16rem right 0rem;
+                background-size: auto 100%;
+            }
+            &#legacy {
+                background-position: bottom -16rem right 2rem;
+                background-size: auto 100%;
+            }
         }
     }
 
@@ -1434,8 +1459,6 @@ body#values {
     section#studies
     {
         article {
-            background-position: top 2rem right 2rem;
-            background-size: 20% auto;
             border: 2px solid var(--hover);
             box-shadow: 0.5rem 0.5rem 0 0 var(--hover);
             width: calc(var(--column-width) + 6px);
@@ -1471,6 +1494,10 @@ body#values {
                     }
                 }
             }
+            &#legacy {
+                background-position: top 2rem right 2rem;
+                background-size: 25% auto;
+            }
         }
     }
 
@@ -1871,6 +1898,12 @@ body#values {
     {
         article {
             width: calc(var(--column-width) + 4rem + 8px);
+
+            &#honeycomb {
+                div {
+                    gap: 2rem;
+                }
+            }
         }
     }
 }

content/studies/honeycomb/index.md

@@ -23,14 +23,14 @@ list:
 study:
   facts:
     - label: "Role"
-      value: "<span>Principal designer,</span> frontend architect"
+      value: "UI Design, <span>Frontend Dev</span>"
       icon: "hat"
       class: "min"
     - label: "Timeline"
       value: "Ongoing production system"
       icon: "calendar"
     - label: "Tools"
-      value: "HTML, CSS, JS, Typescript, Figma"
+      value: "HTML, CSS, JS, Figma"
       icon: "pen"
     - label: "Industry"
       value: "K-12 education SaaS"