Marco
e4f0c66d7b
New /todo-cards page (Hero, How-it-works, Focus, Testimonials, Pricing) built with the fluid clamp() token system (app/lib/fluid.ts) and scroll-reveal animations (app/components/Reveal.tsx), matching styling consistency with /challenge's testimonial section. Navbar: page-aware active state and anchor-link navigation from any route (not just "/"), fixed logo click to actually navigate instead of silently rewriting the URL, fluid nav text size, custom hash-scroll handling for cross-page anchor links. Hero: responsive breakpoint fix for the text/image split at Tablet widths, entrance animation for the brand's orange dot, removed a red dot artifact from hero.png. Also includes prior uncommitted work on About/Blog/Newsletter/Footer and the cart lib (app/lib/cart.ts). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
19 lines
707 B
TypeScript
19 lines
707 B
TypeScript
const MIN_VW = 768;
|
|
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)`;
|
|
}
|