From 46e52cf9c291415136f9e7d97883d81785142f15 Mon Sep 17 00:00:00 2001
From: Martin Dvorak <dvorak@dvorakmortonxd.dev>
Date: Wed, 30 Sep 2026 13:43:03 +0000
Subject: [PATCH] center phone hero and gym note, drop hero CTA pills

---
 agents.md                        |  8 +++++-
 src/app/components/WebLayout.tsx |  9 ------
 src/app/web.css                  | 49 ++++++++++----------------------
 3 files changed, 22 insertions(+), 44 deletions(-)

diff --git a/agents.md b/agents.md
index 432722e..3edf11b 100644
--- a/agents.md
+++ b/agents.md
@@ -156,7 +156,7 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
   near-black reads far stronger than white on a pale page, so copying the light
   alphas makes dark look far more gradient-heavy. Tune the two schemes
   separately, not by eye against each other.
-- Interactive surfaces (`.web-ctl`, pills, `.service-button`, `.social-button`,
+- Interactive surfaces (`.web-ctl`, `.service-button`, `.social-button`,
   `.project-card`, `.gym-item`, `.contribution-entry`, `.heatmap-container`) read
   the `--btn-bg` / `--btn-bg-hi` / `--btn-border` / `--btn-shadow` tokens with
   the glass tokens as **fallbacks** (`var(--btn-bg, var(--glass-lo))`). The
@@ -181,6 +181,12 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
   same `--btn-*` surface / radius / shadow and `0.82rem` / `600` type. Every
   section fits with no horizontal scroll — the collapsed top panel must never
   scroll sideways.
+- The hero CTA pills (`.web-hero-actions` / `.web-pill` — "View projects",
+  "Self-hosted services") were **removed from the markup**; don't reintroduce
+  them (their CSS is gone too). On phones (`max-width: 640px`) the hero is
+  centered instead — heading, the `.web-lead` block (`margin-inline: auto`, not
+  just `text-align`) and the `.social-button` labels — and the gym tile's
+  `.web-tile-note` is centered. Desktop keeps the left-aligned hero.
 - Under `max-width: 640px` the year-grid heatmap (`.heatmap-container`) and its
   legend/hover row (`.heatmap-status-row`) are `display: none` — the grid is
   unreadable at phone widths. The contribution total and the commit history
diff --git a/src/app/components/WebLayout.tsx b/src/app/components/WebLayout.tsx
index edc9ca2..fdfaff3 100644
--- a/src/app/components/WebLayout.tsx
+++ b/src/app/components/WebLayout.tsx
@@ -228,15 +228,6 @@ export default function WebLayout() {
               Welcome to my personal website! Here I show off my projects and the hardware I
               own, as well as my self-hosted services.
             </p>
-            <div className="web-hero-actions">
-              <a className="web-pill" href="#projects">
-                View projects
-              </a>
-              <a className="web-pill ghost" href="#services">
-                Self-hosted services
-              </a>
-            </div>
-
             <div className="web-social-strip">
               <span className="web-eyebrow">Find me</span>
               <Socials />
diff --git a/src/app/web.css b/src/app/web.css
index cf86696..c8c6491 100644
--- a/src/app/web.css
+++ b/src/app/web.css
@@ -350,40 +350,6 @@ html[data-theme="web"] body {
   font-size: 1rem;
   color: var(--web-muted);
 }
-.web-hero-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 22px;
-}
-.web-pill {
-  display: inline-flex;
-  align-items: center;
-  padding: 10px 18px;
-  border-radius: 999px;
-  background: linear-gradient(120deg, var(--accent), var(--accent2));
-  color: #ffffff;
-  font-size: 0.84rem;
-  font-weight: 650;
-  text-decoration: none;
-  box-shadow: 0 12px 26px -12px var(--accent);
-  transition: transform 0.18s ease, box-shadow 0.18s ease;
-}
-.web-pill:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 16px 30px -12px var(--accent);
-}
-.web-pill.ghost {
-  background: var(--btn-bg, var(--glass-lo));
-  color: var(--fg);
-  border: 1px solid var(--btn-border, var(--glass-border));
-  box-shadow: var(--btn-shadow, none);
-}
-.web-pill.ghost:hover {
-  background: var(--btn-bg-hi, var(--glass-hi));
-  border-color: var(--accent-line);
-}
-
 /* ============================================================
    QUICK TILES
    ============================================================ */
@@ -1114,6 +1080,21 @@ html[data-theme="web"][data-scheme="dark"] .heatmap-legend-cell[data-level="4"]
   .web-title {
     font-size: 1.7rem;
   }
+  /* Phone hero: center the heading/lead (the block, not just the text) and the
+     social-button labels. The desktop hero stays left-aligned. */
+  .web-hero {
+    text-align: center;
+  }
+  .web-lead {
+    margin-inline: auto;
+  }
+  .social-button {
+    justify-content: center;
+  }
+  /* Center the note under the gym PR tiles. */
+  .web-tile-note {
+    text-align: center;
+  }
   /* Section nav: fit every link on screen instead of a sideways-scrolling row,
      so the collapsed top panel never scrolls horizontally — a 3-up button
      grid (2-up on very narrow phones, see the 374px block below) styled like