From 748385a71c7e3c2a3153580ed4eb946778bf495f Mon Sep 17 00:00:00 2001
From: Martin Dvorak <dvorak@dvorakmortonxd.dev>
Date: Wed, 30 Sep 2026 21:58:23 +0000
Subject: [PATCH] align panel padding, balance quick tiles, rework squat rack
 icon

---
 agents.md       | 10 ++++++----
 src/app/web.css | 20 ++++++++++++--------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/agents.md b/agents.md
index e9d263c..bd8a8b2 100644
--- a/agents.md
+++ b/agents.md
@@ -199,10 +199,12 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
   so they adapt to light/dark and the desktop app surface. Squat = a squat rack
   with a racked barbell, bench = a bench press, deadlift = a loaded barbell.
   Don't swap them back to images.
-- `.web-quick` keeps equal-height tiles (`align-items: stretch`, symmetric with
-  the taller Gym tile); the shorter "Right now" paragraph centres itself
-  vertically via `margin-block: auto` so it isn't stranded at the top with a
-  big gap under it.
+- The quick tiles (`.web-quick`) are **equal-width (`1fr 1fr`) and equal-height
+  (`align-items: stretch`)**; the "Right now" paragraph sits directly under its
+  title (no `margin-block: auto` — that left an awkward gap between the two).
+  Every panel (`.web-hero` / `.web-section` / `.web-tile`) shares the same
+  **horizontal padding** (`clamp(20px, 3vw, 30px)`) so their content lines up on
+  one left edge; the hero keeps a roomier vertical padding only.
 - 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/web.css b/src/app/web.css
index f215696..0c8032a 100644
--- a/src/app/web.css
+++ b/src/app/web.css
@@ -327,7 +327,9 @@ html[data-theme="web"] body {
    HERO
    ============================================================ */
 .web-hero {
-  padding: clamp(24px, 4vw, 46px);
+  /* Same horizontal inset as the sections/tiles so every panel's content lines
+     up on the same left edge; keep a roomier vertical padding. */
+  padding: clamp(24px, 4vw, 42px) clamp(20px, 3vw, 30px);
 }
 .web-eyebrow {
   display: inline-block;
@@ -355,7 +357,7 @@ html[data-theme="web"] body {
    ============================================================ */
 .web-quick {
   display: grid;
-  grid-template-columns: 1.5fr 1fr;
+  grid-template-columns: 1fr 1fr;
   gap: 20px;
   /* Equal-height tiles (symmetric with the taller Gym tile); the shorter
      "Right now" text centres itself vertically instead of pooling at the top. */
@@ -365,7 +367,9 @@ html[data-theme="web"] body {
   display: flex;
   flex-direction: column;
   gap: 14px;
-  padding: 22px;
+  /* Match .web-section (and .web-hero) so the tile text starts on the same
+     left edge as every other panel. */
+  padding: clamp(20px, 3vw, 30px);
 }
 .web-tile-title {
   font-size: 0.7rem;
@@ -375,7 +379,6 @@ html[data-theme="web"] body {
   color: var(--accent);
 }
 .web-tile-text {
-  margin-block: auto;
   font-size: 1.12rem;
   line-height: 1.7;
   color: var(--web-muted);
@@ -742,7 +745,8 @@ html[data-theme="web"][data-scheme="dark"] .social-icon {
   height: 34px;
   background-repeat: no-repeat;
 }
-/* Squat rack: two uprights + top/base rails + a barbell racked across. */
+/* Squat rack: two tall uprights on feet with a loaded barbell racked at
+   mid-height (its plates make it read as a barbell, not a table). */
 .gym-icon--squat {
   background-image:
     linear-gradient(currentColor, currentColor),
@@ -752,9 +756,9 @@ html[data-theme="web"][data-scheme="dark"] .social-icon {
     linear-gradient(currentColor, currentColor),
     linear-gradient(currentColor, currentColor),
     linear-gradient(currentColor, currentColor);
-  background-size: 4px 28px, 4px 28px, 30px 3px, 30px 3px, 40px 3px, 4px 12px, 4px 12px;
-  background-position: 11px 4px, 37px 4px, 11px 4px, 11px 29px, 6px 16px, 3px 12px,
-    45px 12px;
+  background-size: 4px 28px, 4px 28px, 12px 3px, 12px 3px, 44px 3px, 6px 18px, 6px 18px;
+  background-position: 14px 3px, 34px 3px, 9px 29px, 31px 29px, 4px 14px, 0 7px,
+    46px 7px;
 }
 /* Bench press: a barbell above a padded bench on two legs. */
 .gym-icon--bench {