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

default to dark mode, refresh Right now text, CSS barbell gym icons

Browse source
This commit is contained in:
Martin Dvořák 2026-09-30 21:37:56 +00:00
commit 4a8cac689b
10 changed files with 101 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/app/web.css
View file

@ -357,7 +357,9 @@ html[data-theme="web"] body {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 20px;
align-items: stretch;
/* 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;
}
.web-tile {
display: flex;
@ -373,7 +375,8 @@ html[data-theme="web"] body {
color: var(--accent);
}
.web-tile-text {
font-size: 0.9rem;
font-size: 1.12rem;
line-height: 1.7;
color: var(--web-muted);
}
.web-tile-note {
@ -728,10 +731,72 @@ 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). */
.gym-icon {
width: 100%;
max-width: 42px;
height: auto;
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;
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 {
background-image:
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;
}
.gym-icon--deadlift::after {
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);
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;
}
.gym-label {
font-size: 0.66rem;