From 998036e2a821755a2124283c2ac7983519e840ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= Date: Mon, 23 Dec 2024 23:24:01 -0800 Subject: [PATCH] more fluid zoom --- .../fluid-semantic-zoom-in-a-canvas.html | 44 +++++++++++++++---- 1 file changed, 35 insertions(+), 9 deletions(-) diff --git a/website/canvas/fluid-semantic-zoom-in-a-canvas.html b/website/canvas/fluid-semantic-zoom-in-a-canvas.html index 447ce5b..f836979 100644 --- a/website/canvas/fluid-semantic-zoom-in-a-canvas.html +++ b/website/canvas/fluid-semantic-zoom-in-a-canvas.html @@ -27,7 +27,8 @@ border-radius: 5px; color: white; padding: 0.5rem; - min-width: max-content; + min-width: 20px; + min-height: 20px; h2 { margin: 0; @@ -35,14 +36,37 @@ } p { - font-size: clamp(0rem, calc(1.5rem * (var(--folk-zoom) - 0.35)), 1rem); + font-size: clamp(0rem, calc(1.5rem * (var(--folk-zoom) - 0.5)), 1rem); + opacity: clamp(0, calc(var(--folk-zoom) + 0.25), 1); + max-width: 35ch; + } + } + + @container style(--folk-discrete-zoom: 0) or style(--folk-discrete-zoom: 0.25) or style(--folk-discrete-zoom: 0.5) { + p { + display: none; + } + + h2 { + font-size: calc(3em * (var(--folk-zoom))); opacity: clamp(0, calc(var(--folk-zoom) + 0.5), 1); - max-width: clamp(20ch, calc(100ch * var(--folk-zoom)), 35ch); } } @container style(--folk-discrete-zoom: 0) or style(--folk-discrete-zoom: 0.25) { - p { + folk-shape { + border-radius: clamp(5px, calc((0.25 - var(--folk-zoom)) * 200%), 50%); + } + } + + @container style(--folk-discrete-zoom: 0) { + folk-shape { + width: 20px; + aspect-ratio: 1; + border-radius: 50%; + } + + h2 { display: none; } } @@ -51,7 +75,7 @@ @@ -65,7 +89,7 @@

- +

Dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore @@ -96,12 +120,14 @@ const currentZoom = range.valueAsNumber; let semanticZoom; - if (currentZoom < 0.25) { + if (currentZoom === 0) { semanticZoom = 0; - } else if (currentZoom < 0.5) { + } else if (currentZoom < 0.25) { semanticZoom = 0.25; - } else if (currentZoom < 0.75) { + } else if (currentZoom < 0.5) { semanticZoom = 0.5; + } else if (currentZoom < 0.75) { + semanticZoom = 0.75; } else { semanticZoom = 1; }