Marco
cc935420ec
Tablet layout (768-1023px) hit the md: grid switch exactly where the fluid clamp() tokens were already at their floor, leaving no room to shrink. Moves the fluid floor and structural breakpoint down together to sm: (640px) so real tablets always get the fluid, desktop-like structure; consolidates the ad-hoc md:+lg: patchwork in Hero/About/ Newsletter/Footer/Tools back onto one line, leaving documented lg: exceptions where content genuinely doesn't fit yet. Also shortens the Hero heading to a single sentence with no trailing period (the brand's orange dot already renders one, animated).
19 lines
707 B
TypeScript
19 lines
707 B
TypeScript
const MIN_VW = 640;
|
|
const MAX_VW = 1440;
|
|
|
|
/**
|
|
* Fluid clamp() between two px values, scaling with viewport width from
|
|
* `minVw` to `maxVw`. Below `minVw` the clamp() floor freezes the value —
|
|
* that's the "Tablet-Floor" behavior baked into the formula itself, no
|
|
* separate mobile media query needed for sizing.
|
|
*/
|
|
export function fluid(minPx: number, maxPx: number, minVw = MIN_VW, maxVw = MAX_VW): string {
|
|
const slope = (maxPx - minPx) / (maxVw - minVw);
|
|
const yIntercept = minPx - slope * minVw;
|
|
const minRem = minPx / 16;
|
|
const maxRem = maxPx / 16;
|
|
const yRem = yIntercept / 16;
|
|
const slopeVw = slope * 100;
|
|
return `clamp(${minRem}rem, ${yRem}rem + ${slopeVw}vw, ${maxRem}rem)`;
|
|
}
|