From 271c3bec7e6d8a58259f887670a6bbc29e36d724 Mon Sep 17 00:00:00 2001 From: Martin Dvorak Date: Wed, 30 Sep 2026 21:45:08 +0000 Subject: [PATCH] redraw gym icons as squat rack/bench/barbell pictograms, rebalance quick tiles --- agents.md | 16 ++++++---- src/app/web.css | 85 +++++++++++++++++++------------------------------ 2 files changed, 42 insertions(+), 59 deletions(-) diff --git a/agents.md b/agents.md index dd234d6..e9d263c 100644 --- a/agents.md +++ b/agents.md @@ -194,13 +194,15 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark), `.web-section-head` (the eyebrow + `.web-section-title`) and `.web-tile-title` ("Right now" / "Gym PRs"). Desktop keeps the left-aligned headings. - The gym PR icons (`.gym-icon--squat` / `--bench` / `--deadlift`) are **pure - CSS barbells**, not SVGs: a bar (`::before`) plus plates drawn as layered - `linear-gradient` backgrounds on `::after`, all in `currentColor` so they - adapt to light/dark and the desktop app surface. More plates per side = a - heavier lift (bench 1, squat 2, deadlift 3). Don't swap them back to images. -- `.web-quick` is top-aligned (`align-items: start`) so the shorter "Right now" - tile isn't stretched to the Gym tile's height (it used to leave a big empty - gap under the text). + CSS pictograms**, not SVGs: each is drawn as layered solid gradients on the + element's `background` in `currentColor` (one rectangle per background layer), + 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. - 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 9791bb0..f215696 100644 --- a/src/app/web.css +++ b/src/app/web.css @@ -357,9 +357,9 @@ html[data-theme="web"] body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; - /* Don't stretch the shorter "Right now" tile to the taller Gym tile's - height — that left a big empty gap under its text. */ - align-items: start; + /* Equal-height tiles (symmetric with the taller Gym tile); the shorter + "Right now" text centres itself vertically instead of pooling at the top. */ + align-items: stretch; } .web-tile { display: flex; @@ -375,6 +375,7 @@ 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); @@ -731,57 +732,32 @@ html[data-theme="web"][data-scheme="dark"] .social-icon { border-color: var(--accent-line); transform: translateY(-2px); } -/* Custom CSS barbell icons (the squat/bench/deadlift SVGs are gone). Same - barbell, drawn from currentColor so it adapts to the theme; more plates per - side = heavier lift (bench 1, squat 2, deadlift 3). */ +/* Custom CSS pictograms (no SVGs), drawn as layered solid gradients in + currentColor so they follow the theme: squat = a squat rack, bench = a + bench-press station, deadlift = a loaded barbell. Each background layer is + one rectangle (size = w×h, position = top-left). */ .gym-icon { - position: relative; display: block; - width: 54px; - height: 30px; -} -.gym-icon::before { - /* the bar */ - content: ""; - position: absolute; - left: 0; - right: 0; - top: 50%; - height: 3px; - border-radius: 2px; - background: currentColor; - opacity: 0.55; - transform: translateY(-50%); -} -.gym-icon::after { - /* the weight plates */ - content: ""; - position: absolute; - inset: 0; + width: 52px; + height: 34px; background-repeat: no-repeat; - opacity: 0.85; } -.gym-icon--bench::after { - background-image: - linear-gradient(currentColor, currentColor), - linear-gradient(currentColor, currentColor); - background-size: 7px 24px, 7px 24px; - background-position: 9px center, calc(100% - 16px) center; -} -.gym-icon--squat::after { +/* Squat rack: two uprights + top/base rails + a barbell racked across. */ +.gym-icon--squat { background-image: + linear-gradient(currentColor, currentColor), + linear-gradient(currentColor, currentColor), + linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); - background-size: 6px 18px, 7px 26px, 6px 18px, 7px 26px; - background-position: - 5px center, - 12px center, - calc(100% - 11px) center, - calc(100% - 19px) center; + 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; } -.gym-icon--deadlift::after { +/* Bench press: a barbell above a padded bench on two legs. */ +.gym-icon--bench { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), @@ -789,14 +765,19 @@ html[data-theme="web"][data-scheme="dark"] .social-icon { linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); - background-size: 6px 16px, 6px 22px, 7px 28px, 6px 16px, 6px 22px, 7px 28px; - background-position: - 3px center, - 9px center, - 16px center, - calc(100% - 9px) center, - calc(100% - 15px) center, - calc(100% - 23px) center; + background-size: 40px 3px, 5px 12px, 5px 12px, 34px 5px, 4px 11px, 4px 11px; + background-position: 6px 4px, 2px 0, 45px 0, 9px 16px, 13px 21px, 35px 21px; +} +/* Deadlift: a long bar with a stack of plates at each end. */ +.gym-icon--deadlift { + background-image: + linear-gradient(currentColor, currentColor), + linear-gradient(currentColor, currentColor), + linear-gradient(currentColor, currentColor), + linear-gradient(currentColor, currentColor), + linear-gradient(currentColor, currentColor); + background-size: 42px 3px, 4px 14px, 5px 22px, 5px 22px, 4px 14px; + background-position: 5px 15px, 1px 10px, 6px 6px, 41px 6px, 47px 10px; } .gym-label { font-size: 0.66rem;