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

align panel padding, balance quick tiles, rework squat rack icon

Browse source
This commit is contained in:
Martin Dvořák 2026-09-30 21:58:23 +00:00
commit 748385a71c
2 changed files with 18 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

10
agents.md
View file

@ -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 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. with a racked barbell, bench = a bench press, deadlift = a loaded barbell.
Don't swap them back to images. Don't swap them back to images.
- `.web-quick` keeps equal-height tiles (`align-items: stretch`, symmetric with - The quick tiles (`.web-quick`) are **equal-width (`1fr 1fr`) and equal-height
the taller Gym tile); the shorter "Right now" paragraph centres itself (`align-items: stretch`)**; the "Right now" paragraph sits directly under its
vertically via `margin-block: auto` so it isn't stranded at the top with a title (no `margin-block: auto` — that left an awkward gap between the two).
big gap under it. 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 - Under `max-width: 640px` the year-grid heatmap (`.heatmap-container`) and its
legend/hover row (`.heatmap-status-row`) are `display: none` — the grid is legend/hover row (`.heatmap-status-row`) are `display: none` — the grid is
unreadable at phone widths. The contribution total and the commit history unreadable at phone widths. The contribution total and the commit history

20
src/app/web.css
View file

@ -327,7 +327,9 @@ html[data-theme="web"] body {
HERO HERO
============================================================ */ ============================================================ */
.web-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 { .web-eyebrow {
display: inline-block; display: inline-block;
@ -355,7 +357,7 @@ html[data-theme="web"] body {
============================================================ */ ============================================================ */
.web-quick { .web-quick {
display: grid; display: grid;
grid-template-columns: 1.5fr 1fr; grid-template-columns: 1fr 1fr;
gap: 20px; gap: 20px;
/* Equal-height tiles (symmetric with the taller Gym tile); the shorter /* Equal-height tiles (symmetric with the taller Gym tile); the shorter
"Right now" text centres itself vertically instead of pooling at the top. */ "Right now" text centres itself vertically instead of pooling at the top. */
@ -365,7 +367,9 @@ html[data-theme="web"] body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 14px; 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 { .web-tile-title {
font-size: 0.7rem; font-size: 0.7rem;
@ -375,7 +379,6 @@ html[data-theme="web"] body {
color: var(--accent); color: var(--accent);
} }
.web-tile-text { .web-tile-text {
margin-block: auto;
font-size: 1.12rem; font-size: 1.12rem;
line-height: 1.7; line-height: 1.7;
color: var(--web-muted); color: var(--web-muted);
@ -742,7 +745,8 @@ html[data-theme="web"][data-scheme="dark"] .social-icon {
height: 34px; height: 34px;
background-repeat: no-repeat; 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 { .gym-icon--squat {
background-image: background-image:
linear-gradient(currentColor, currentColor), 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), 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-size: 4px 28px, 4px 28px, 12px 3px, 12px 3px, 44px 3px, 6px 18px, 6px 18px;
background-position: 11px 4px, 37px 4px, 11px 4px, 11px 29px, 6px 16px, 3px 12px, background-position: 14px 3px, 34px 3px, 9px 29px, 31px 29px, 4px 14px, 0 7px,
45px 12px; 46px 7px;
} }
/* Bench press: a barbell above a padded bench on two legs. */ /* Bench press: a barbell above a padded bench on two legs. */
.gym-icon--bench { .gym-icon--bench {