From 70762ec9ef85ce0cb4699c49b7d5b9801d6e121e Mon Sep 17 00:00:00 2001
From: Andrew Gioia <andrew@gioia.email>
Date: Thu, 30 Apr 2026 10:44:19 -0400
Subject: [PATCH] Mobile improvements

---
 assets/css/site.css | 117 ++++++++++++++++++++++++++------------------
 layouts/index.html  |   5 +-
 2 files changed, 73 insertions(+), 49 deletions(-)

diff --git a/assets/css/site.css b/assets/css/site.css
index c46300e..07e9b57 100644
--- a/assets/css/site.css
+++ b/assets/css/site.css
@@ -42,7 +42,7 @@
 }
 
 html {
-    font-size: 14px;
+    font-size: 15px;
     background: var(--bg);
 }
 
@@ -66,9 +66,9 @@ a {
 }
 
 h1 {
-    font-size: clamp(2.25rem, 9dvw, 4rem);
+    font-size: clamp(2.75rem, 9dvw, 4rem);
     font-weight: 700;
-    letter-spacing: -0.5px;
+    letter-spacing: -1px;
     line-height: 1.05;
     margin: 0 0 1rem;
 }
@@ -259,18 +259,17 @@ body {
 main {
     display: grid;
     grid-template-columns: auto;
-    grid-template-rows: ;
+    grid-template-rows: min-content auto; /* header is full initial pane, then content is auto */
     justify-items: center;
 
     /* layout handling for the top sections */
     > header {
         align-content: start;
         display: grid;
-        grid-auto-rows: auto 12rem;
+        grid-auto-rows: auto auto; /* @todo make row 2 12rem on larger screens */
         justify-items: center;
-        height: calc(100lvh - 5rem);
-        max-height: calc(100lvh - 5rem);
         max-width: 100lvw;
+        padding-bottom: 10rem; /* artwork pad on mobile */
         width: 100lvw;
 
         hgroup,
@@ -287,7 +286,7 @@ main {
 
             .lede {
                 margin: 1rem 0 0;
-                font-size: 1.6rem;
+                font-size: 1.4rem;
                 font-weight: 400;
                 line-height: 1.5;
 
@@ -317,7 +316,8 @@ main {
             flex-direction: column;
             gap: 1.5rem;
             justify-content: flex-start;
-            padding-top: 3rem;
+            padding-bottom: 2rem;
+            padding-top: 2rem;
 
             figure {
                 display: grid;
@@ -452,23 +452,32 @@ section#studies {
     h1 {
         border-bottom: 0.25rem solid var(--white);
         color: #fff;
-        margin-bottom: 3rem;
         max-width: var(--column-width);
         padding-bottom: 1rem;
         width: var(--column-width);
 
+        + p {
+            color: var(--white);
+            padding-right: 1rem;
+            margin-bottom: 0;
+            max-width: var(--column-width);
+        }
     }
 
     article {
         background-color: var(--blue);
         background-image: var(--card-bg);
-        background-position: top 20rem right -2rem; /* mobile position */
+        background-position: bottom -16rem right -1rem; /* mobile position */
         background-repeat: no-repeat;
         background-size: 50% auto; /* mobile size */
         border: none;
         color: #fff;
         transition: transform 150ms ease-in, background-position 150ms ease-in;
 
+        &:first-of-type {
+            margin-top: 3rem;
+        }
+
         > a {
             color: inherit;
             display: block;
@@ -479,7 +488,7 @@ section#studies {
         }
 
         h2 {
-            font-size: 2.5rem;
+            font-size: 2rem;
             padding-top: 0;
             text-shadow: none;
             font-weight: 700;
@@ -495,7 +504,7 @@ section#studies {
         }
 
         &:hover {
-            background-position: top 19.5rem right -2rem;
+            background-position: bottom -15.5 right -1rem;
             transform: translateY(-0.5rem);
         }
 
@@ -774,8 +783,6 @@ body#default
     main > header {
         overflow-x: hidden;
         position: relative;
-        justify-items: center;
-        width: 100%;
 
         #circle,
         #rectangle,
@@ -791,7 +798,7 @@ body#default
             bottom: 12dvw;
             height: 10dvw;
             border-radius: 10dvw 10dvw 0 0;
-            left: 52dvw;
+            left: 60dvw;
             width: 20dvw;
         }
 
@@ -800,15 +807,16 @@ body#default
             height: 12dvw;
             width: 12dvw;
             bottom: 0;
+            left: 54dvw;
         }
 
         #circle {
             background: var(--blue);
             border-radius: 50%;
-            height: 20dvw;
-            bottom: 5dvh;
+            height: 16dvw;
+            bottom: 3dvh;
             left: 4dvw;
-            width: 20dvw;
+            width: 16dvw;
 
             &:hover {
                 transform: translateX(1rem);
@@ -817,8 +825,8 @@ body#default
 
         #rectangle {
             background: var(--yellow);
-            height: 5dvh;
-            width: 36dvw;
+            height: 3dvh;
+            width: 32dvw;
             left: 2dvw;
             bottom: 0;
             transform-origin: 38%;
@@ -826,8 +834,8 @@ body#default
 
         #triangle {
             background: var(--red);
-            height: 40dvw;
-            width: 40dvw;
+            height: 32dvw;
+            width: 32dvw;
             bottom: 0;
             right: 0;
             clip-path: polygon(100% 0, 100% 100%, 0 100%);
@@ -838,7 +846,7 @@ body#legacy
 {
     main > header {
         background-image: url('/img/nyc.svg');
-        background-position: bottom 0 right -15dvw;
+        background-position: bottom 0 right -20dvw;
         background-repeat: no-repeat;
         background-size: clamp(300px, 50dvw, 800px) auto;
         position: relative;
@@ -864,6 +872,7 @@ body#legacy
 }
 
 /* small height screens override */
+/* FIX */
 @media (max-height: 720px)
 {
     main > header {
@@ -904,36 +913,43 @@ body#legacy
         }
     }
 
-    main > header {
-        min-height: 860px;
+    main {
+        grid-template-rows: max(800px, calc(100lvh - 5rem)) auto;
 
-        > hgroup {
-            padding-top: 4rem;
+        > header {
+            min-height: calc(800px - 5rem);
 
-            .lede {
-                max-width: 80%;
+            > hgroup {
+                padding-top: 4rem;
+
+                .lede {
+                    font-size: 1.6rem;
+                    max-width: 80%;
+                }
             }
-        }
 
-        > aside {
-            flex-direction: row;
+            > aside {
+                flex-direction: row;
+                padding-bottom: 0;
+                padding-top: 3rem;
 
-            figure {
-                grid-template-columns: auto;
-                grid-template-rows: 2rem 2rem auto;
-                max-width: 16%;
-                padding-right: 1rem;
+                figure {
+                    grid-template-columns: auto;
+                    grid-template-rows: 2rem 2rem auto;
+                    max-width: 16%;
+                    padding-right: 1rem;
 
-                figcaption {
-                    grid-column-start: 1;
+                    figcaption {
+                        grid-column-start: 1;
 
-                    &.min {
-                        width: min-content;
-                    }
+                        &.min {
+                            width: min-content;
+                        }
 
-                    span {
-                        display: inline-block;
-                        white-space: nowrap;
+                        span {
+                            display: inline-block;
+                            white-space: nowrap;
+                        }
                     }
                 }
             }
@@ -1046,7 +1062,7 @@ body#legacy
                 right: -1dvw;
 
                 &:hover {
-                    transform: rotate(6deg) translateY(0.25dvh);
+                    transform: rotate(6deg) translateY(0.125dvh);
 
                     + #square {
                         transform: rotate(6deg) translateY(0.25dvh) translateX(0.5dvw);
@@ -1058,10 +1074,11 @@ body#legacy
                 bottom: 45dvh;
                 height: 12dvh;
                 width: 12dvh;
+                left: auto;
                 right: 2dvw;
 
                 &:has(+ #circle:hover) {
-                    transform: translateX(-0.125dvw);
+                    transform: translateX(-0.25dvw);
                 }
             }
 
@@ -1095,6 +1112,10 @@ body#legacy
         section#studies {
             padding-left: 1.5rem;
             padding-right: 1.5rem;
+
+            article h2 {
+                font-size: 2.5rem;
+            }
         }
     }
 }
diff --git a/layouts/index.html b/layouts/index.html
index 6cb460b..56c4003 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -7,7 +7,7 @@
     <p class="lede">
       <b>20 years experience</b> designing and building software for the browser. I balance intentional design principles with a mastery of CSS, HTML, JavaScript, &amp; WCAG to <b>bridge design and engineering</b>. Performance, accessibility, and the semantic web still matter!
     </p>
-    <p class="lede">
+    <p class="lede tablet-show">
       Read more about my <a href="design" out>design philosophy</a> or take a look at some <a href="#studies" in>case studies</a> below.
     </p>
   </hgroup>
@@ -19,6 +19,9 @@
 </header>
 <section id="studies">
   <h1>Case studies</h1>
+  <p class="tablet-hide">
+    Longer form overviews of some of my projects over the past few years. These each highlight different aspects of my design process, collaboration, and skills.
+  </p>
   {{ range where .Site.RegularPages "Section" "studies" }}
     {{- $page := . -}}
     {{- $cardImage := "" -}}