fix: fluid section title with clamp() to prevent wrapping below 900px
This commit is contained in:
@@ -42,8 +42,8 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
|
||||
<ViewTransitionWrapper name="section-content">
|
||||
<div className="mb-16">
|
||||
<h1
|
||||
className="font-heading font-black text-5xl leading-[1.2] mb-0"
|
||||
style={{ fontVariationSettings: "'WONK' 1, 'SOFT' 0" }}
|
||||
className="font-heading font-black leading-[1.2] mb-0"
|
||||
style={{ fontSize: 'var(--text-section-title)', fontVariationSettings: "'WONK' 1, 'SOFT' 0" }}
|
||||
>
|
||||
{heading}
|
||||
</h1>
|
||||
|
||||
@@ -20,6 +20,9 @@
|
||||
--font-weight-body: 600;
|
||||
--font-weight-normal: 400;
|
||||
|
||||
/* Fluid section title: scales from 2rem at ~267px to 8rem at ~1707px */
|
||||
--text-section-title: clamp(2rem, 7.5vw, 8rem);
|
||||
|
||||
/* === LINE HEIGHT === */
|
||||
--line-height-tight: 1.2;
|
||||
--line-height-normal: 1.5;
|
||||
|
||||
Reference in New Issue
Block a user