dvorakmortonxd/dvorakmortonxd.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

redraw gym icons as squat rack/bench/barbell pictograms, rebalance quick tiles

Browse source
This commit is contained in:
Martin Dvořák 2026-09-30 21:45:08 +00:00
commit 271c3bec7e
2 changed files with 40 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

16
agents.md
View file

@ -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

85
src/app/web.css
View file

@ -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;