mobile tuning for about

Author: tstromberg

src/about/index.njk

@@ -18,18 +18,19 @@ title: About
       </div>
     </div>
 
-    <h2>FOUNDER & PRINCIPLES</h2>
+    <h2>FOUNDER</h2>
 
     <div class="card card--flex card--compact">
       <img src="/assets/tstromberg.jpg" alt="Thomas Stromberg" class="founder-portrait" />
       <div class="founder-bio">
-        <p><strong>Thomas Stromberg</strong> — 30 years in open source development. Engineering leader at Google and Equinix, Director of Security at Chainguard.</p>
-        <p>Technical lead for minikube (millions of downloads). Contributor to Firefox, FreeBSD, Chrome, and WebKit. Created <a href="https://github.com/google/triage-party">Triage Party</a> to solve GitHub notification overload and <a href="https://github.com/chainguard-dev/malcontent">malcontent</a> for software supply chain security at Chainguard.</p>
+        <p><strong>Thomas Stromberg</strong> — 30 years in open source. Engineering leader at Google and Equinix, Director of Security at Chainguard. Technical lead for minikube (millions of downloads), created <a href="https://github.com/google/triage-party">Triage Party</a> for Kubernetes, and <a href="https://github.com/chainguard-dev/malcontent">malcontent</a> for supply chain security.</p>
         <p>Founded codeGROOVE to solve the code review latency problem that costs engineering teams days of productivity every week.</p>
-        <p><a href="https://www.linkedin.com/in/thomas-str%C3%B6mberg-9977261/">LinkedIn</a> • Based in Chapel Hill, NC</p>
+        <p><a href="https://www.linkedin.com/in/thomas-str%C3%B6mberg-9977261/">LinkedIn</a></p>
       </div>
     </div>
 
+    <h2>PRINCIPLES</h2>
+
     <div class="about-principles">
       <ul class="about-principles-list">
         <li><strong>Security First</strong> OAuth-only authentication. No persistent access tokens. Your code stays with GitHub.</li>

src/assets/css/style.css

@@ -172,7 +172,7 @@ body {
 .nav-hamburger {
     display: none;
     position: absolute;
-    right: 16px;
+    right: 8px;
     top: 50%;
     transform: translateY(-50%);
     flex-direction: column;
@@ -190,23 +190,23 @@ body {
 
 .hamburger-line {
     width: 24px;
-    height: 2.5px;
+    height: 3px;
     background: var(--black);
-    border-radius: 1px;
+    border-radius: 1.5px;
     transition: all 0.3s ease;
     transform-origin: center;
 }
 
 .nav-hamburger--active .hamburger-line:nth-child(1) {
-    transform: translateY(7.5px) rotate(45deg);
+    transform: translateY(7px) rotate(45deg);
 }
 
 .nav-hamburger--active .hamburger-line:nth-child(2) {
     opacity: 0;
 }
 
 .nav-hamburger--active .hamburger-line:nth-child(3) {
-    transform: translateY(-7.5px) rotate(-45deg);
+    transform: translateY(-7px) rotate(-45deg);
 }
 
 /* Mobile Menu Overlay */
@@ -1656,6 +1656,25 @@ button,
 /* Lazy Loading Images - removed opacity transition since there's no JS to handle it */
 
 /* Responsive */
+
+/* Tablet adjustments - tighter spacing for nav */
+@media (max-width: 850px) and (min-width: 769px) {
+    .nav-links {
+        right: 16px;
+        gap: 4px;
+    }
+
+    .nav-links a {
+        padding: 8px 10px;
+        font-size: clamp(14px, 1vw + 12px, 15px);
+    }
+
+    .nav-links li:not(:last-child)::after {
+        margin-left: 4px;
+        font-size: 13px;
+    }
+}
+
 @media (max-width: 768px) {
     .nav {
         height: 34px;
@@ -1671,7 +1690,7 @@ button,
     }
 
     .nav-logo a {
-        font-size: 16px;
+        font-size: 24px;
         letter-spacing: 0.5px;
         transform: skewX(-10deg);
         min-height: 34px;
@@ -1680,7 +1699,7 @@ button,
     }
 
     .nav-accent-angle {
-        width: 8.5em;
+        width: 11em;
         height: 34px;
     }
 
@@ -1743,16 +1762,16 @@ button,
     }
 
     .hero {
-        justify-content: center;
-        padding: 46px 16px 46px;
+        justify-content: flex-start;
+        padding: 100px 16px 80px;
         min-height: 100vh;
         display: flex;
-        align-items: center;
+        align-items: flex-start;
     }
 
     .hero-content {
         margin: 0;
-        padding: 20px;
+        padding: 24px;
         max-width: 100%;
         border-width: 4px;
     }
@@ -1779,6 +1798,20 @@ button,
         margin-top: 16px;
     }
 
+    .hero-bottom-banner {
+        bottom: calc(var(--space) * 2);
+        width: calc(100% - calc(var(--space) * 4));
+    }
+
+    .hero-bottom-banner__content {
+        padding: calc(var(--space) * 2) calc(var(--space) * 2);
+    }
+
+    .hero-bottom-banner__text {
+        font-size: 11px;
+        line-height: 1.4;
+    }
+
     .content-hero {
         padding: 54px 16px 40px;
     }
@@ -1832,8 +1865,8 @@ button,
     }
 
     .founder-portrait {
-        width: 120px;
-        height: 120px;
+        width: 80px;
+        height: 80px;
     }
 
     .pricing-grid {
@@ -1856,11 +1889,15 @@ button,
     .cta-button,
     .hero-button,
     [role="button"] {
-        padding: 12px 24px;
+        padding: 12px 16px;
         font-size: 16px;
         min-height: 44px;
     }
 
+    .hero-cta-wrapper {
+        text-align: center;
+    }
+
     .content-hero a[style*="padding: 16px 32px"] {
         padding: 12px 24px !important;
         font-size: 16px !important;

src/index.njk

@@ -27,7 +27,7 @@ title: Supercharge your dev teams
   <div class="hero-bottom-banner">
     <div class="hero-bottom-banner__content">
       <p class="hero-bottom-banner__text">
-        🔒 Security-first architecture • 🏗️ Built by ex-Google & Chainguard engineers • 💚 Free for OSS
+        Built by former Kubernetes maintainers * Security-first architecture * Free for OSS
       </p>
     </div>
   </div>