4 ms·
Here's what I used in my app [1] to do scaling with CSS only, no breaking points or JS complicated needed. All sizes of fonts and elements (like cards) are deri
by rrr_oh_man 2y ago
Here's what I used in my app [1] to do scaling with CSS only, no breaking points or JS complicated needed. All sizes of fonts and elements (like cards) are derived from the visible viewport and the golden ratio:
:root {
--gr: 1.618;
--font-baseline: clamp(16px, calc(5.725vh + 5.725vw), 72px) !important;
--font-baseline: clamp(16px, calc(5.725svh + 5.725svw), 72px) !important;
--baseline-unit-1: var(--font-baseline);
--baseline-unit-2: calc(var(--font-baseline) / var(--gr));
--baseline-unit-3: calc(var(--font-baseline) / pow(var(--gr), 1));
--baseline-unit-4: calc(var(--font-baseline) / pow(var(--gr), 2));
--baseline-unit-5: calc(var(--font-baseline) / pow(var(--gr), 3));
--baseline-unit-6: calc(var(--font-baseline) / pow(var(--gr), 4));
--baseline-unit-7: calc(var(--font-baseline) / pow(var(--gr), 5));
--baseline-unit-8: calc(var(--font-baseline) / pow(var(--gr), 6));
}
(Initially there was no `clamp()`, but I had to concede that point for a better UX on really large and really small screens.)
[1] https://news.ycombinator.com/item?id=40408418 https://news.ycombinator.com/item?id=40408418
- dwallin 2y agoThat article about the golden ratio lost me with that horribly cropped image. It ignores all the things that actually matter when composing and cropping a shot, and gives some absurd advice that will actively lead people astray. The end result cuts off valuable content in favor of blurry background nonsense, leaving a random pencil end sticking up out of nowhere and a massively distracting board that is uncomfortably lined up with an outer edge. Learning some basic compositional techniques would be far more helpful both for the author and its readers.
- rrr_oh_man 2y agoAgree! I cleaned up my comment. Hopefully it's a bit clearer.