Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(fitness): fit body-parts wizard to viewport and tint thigh SVG
CI / update (push) Successful in 1m6s
Details

Browse Source 
Cap shell height to viewport minus header so the bottombar stays visible,
allow the stage to scroll internally, and swap the thigh diagram to a
mask-tinted SVG that tracks the text-primary color across themes.
This commit is contained in:
Alexander Bocken
2026-04-20 23:03:41 +02:00
parent ad154bf914
commit 58b3d4b478
3 changed files with 47 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "homepage",
"version": "1.37.1",
"version": "1.37.2",
"private": true,
"type": "module",
"scripts": {
src/routes/fitness/[measure=fitnessMeasure]/body-parts/+page.svelte
+33 -21
View File
@@ -24,7 +24,7 @@
{ key: 'forearms', labelKey: 'l_forearm', img: null, paired: true, tipKey: 'measure_tip_forearms', dbLeft: 'leftForearm', dbRight: 'rightForearm' },
{ key: 'waist', labelKey: 'waist', img: 'waist.png', paired: false, tipKey: 'measure_tip_waist', dbSingle: 'waist' },
{ key: 'hips', labelKey: 'hips', img: 'hips.png', paired: false, tipKey: 'measure_tip_hips', dbSingle: 'hips' },
{ key: 'thighs', labelKey: 'l_thigh', img: 'thigh.png', paired: true, tipKey: 'measure_tip_thighs', dbLeft: 'leftThigh', dbRight: 'rightThigh' },
{ key: 'thighs', labelKey: 'l_thigh', img: 'thigh.svg', paired: true, tipKey: 'measure_tip_thighs', dbLeft: 'leftThigh', dbRight: 'rightThigh' },
{ key: 'calves', labelKey: 'calves', img: 'calves.png', paired: true, tipKey: 'measure_tip_calves', dbLeft: 'leftCalf', dbRight: 'rightCalf' }
];
@@ -347,7 +347,16 @@
<section class="card" in:fly={flyOpts}>
<div class="hero">
{#if step.img}
<img src="/fitness/measure/{step.img}" alt="" class="hero-pic" />
{#if step.img.endsWith('.svg')}
<div
class="hero-pic hero-svg"
style="--hero-svg-src: url(/fitness/measure/{step.img})"
role="img"
aria-label={stepLabel(step)}
></div>
{:else}
<img src="/fitness/measure/{step.img}" alt="" class="hero-pic" />
{/if}
{:else}
<div class="hero-placeholder" aria-hidden="true">
<Ruler size={72} strokeWidth={1.4} />
@@ -578,11 +587,12 @@
}
.shell {
min-height: 100vh;
--fitness-header-offset: calc(3rem + 12px + env(safe-area-inset-top, 0px));
height: calc(100svh - var(--fitness-header-offset));
min-height: 0;
display: flex;
flex-direction: column;
background:
radial-gradient(1200px 600px at 20% -10%, color-mix(in oklab, var(--color-primary) 10%, transparent), transparent 60%),
radial-gradient(800px 400px at 90% 110%, color-mix(in oklab, var(--color-primary) 8%, transparent), transparent 55%),
var(--color-bg-primary);
color: var(--color-text-primary);
@@ -638,7 +648,8 @@
align-items: flex-start;
justify-content: center;
padding: 0.5rem 1rem 2rem;
overflow: hidden;
overflow-y: auto;
min-height: 0;
}
.card {
width: 100%;
@@ -661,25 +672,27 @@
box-shadow: var(--shadow-md);
position: relative;
}
.hero::after {
content: '';
position: absolute;
inset: -2px;
border-radius: 50%;
border: 1px dashed color-mix(in oklab, var(--color-primary) 45%, transparent);
opacity: 0.6;
pointer-events: none;
}
.hero-pic {
width: 150px;
height: 150px;
object-fit: contain;
}
@media (prefers-color-scheme: dark) {
.hero-pic { filter: invert(1); }
.hero-svg {
mask-image: var(--hero-svg-src);
-webkit-mask-image: var(--hero-svg-src);
mask-size: contain;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-position: center;
background-color: var(--color-text-primary);
}
:global(:root[data-theme="dark"]) .hero-pic { filter: invert(1); }
:global(:root[data-theme="light"]) .hero-pic { filter: none; }
@media (prefers-color-scheme: dark) {
img.hero-pic { filter: invert(1); }
}
:global(:root[data-theme="dark"]) img.hero-pic { filter: invert(1); }
:global(:root[data-theme="light"]) img.hero-pic { filter: none; }
.hero-placeholder {
display: flex;
@@ -977,15 +990,14 @@
@media (min-width: 1024px) {
.shell {
--fitness-header-offset: calc(3rem + 12px + env(safe-area-inset-top, 0px));
display: grid;
grid-template-columns: 260px minmax(0, 1fr) 360px;
grid-template-rows: auto 1fr auto;
grid-template-rows: auto minmax(0, 1fr) auto;
grid-template-areas:
"rail topbar panel"
"rail stage panel"
"rail bottom panel";
min-height: 100vh;
height: 100vh;
margin-top: calc(-1 * var(--fitness-header-offset));
}
.rail { grid-area: rail; }
static/fitness/measure/thigh.svg
+13
View File
@@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="230.97847mm"
height="161.57938mm"
viewBox="0 0 230.97847 161.57938"
version="1.1"
xmlns="http://www.w3.org/2000/svg">
<g transform="translate(10.583333,-67.733332)" fill="none" stroke="currentColor" stroke-width="7.9375" stroke-linecap="round" stroke-linejoin="round">
<path d="m -5.2938776,75.349546 c 0,0 37.0210826,-4.638254 65.9220826,-3.451251 16.254828,0.667607 16.716356,0.857996 37.092959,6.092661 20.583856,5.287909 30.187556,12.829711 52.828226,19.244569 22.64067,6.414855 47.35673,7.358215 58.11105,22.263325 10.75432,14.90511 4.33946,48.11142 4.33946,48.11142 0,0 4.7168,25.47075 3.01875,35.47038 -1.69804,9.99963 -4.7168,22.26332 -4.7168,22.26332" />
<path d="m -6.6145834,170.25168 c 0,0 19.8105854,15.09378 43.2059404,17.73519 23.395358,2.64141 79.431013,-10.1883 95.090803,-13.39573 15.6598,-3.20743 19.81059,1.88672 19.81059,1.88672 0,0 -6.7922,14.52776 -6.60353,28.86686 0.18867,14.33909 2.45274,19.62191 2.45274,19.62191" />
<path d="m 30.275732,127.2863 c 0,0 18.901817,1.34096 48.200862,10.32508 27.805246,8.52607 33.634316,12.94496 33.634316,12.94496" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB