diff --git a/styles/typography.css b/styles/typography.css index c9cce82..0f7b4af 100644 --- a/styles/typography.css +++ b/styles/typography.css @@ -4,11 +4,12 @@ --font-size-small: 0.875rem; --font-size-lead: 1.125rem; - --font-size-h1: 1.802rem; - --font-size-h2: 1.602rem; - --font-size-h3: 1.424rem; - --font-size-h4: 1.266rem; - --font-size-h5: 1.125rem; + /* Fluid typography (768px to 1024px) */ + --font-size-h1: clamp(1.802rem, 5.71vw, 3.247rem); + --font-size-h2: clamp(1.602rem, 4.51vw, 2.566rem); + --font-size-h3: clamp(1.424rem, 3.56vw, 2.027rem); + --font-size-h4: clamp(1.266rem, 3.17vw, 1.802rem); + --font-size-h5: clamp(1.125rem, 2.82vw, 1.602rem); --line-height-body: 1.5; --line-height-heading: 1.2; @@ -28,7 +29,7 @@ --font-heading-color: #302e2e; } -@media (min-width: 768px) { +/* @media (min-width: 768px) { :root { --font-size-h1: 2.566rem; --font-size-h2: 2.281rem; @@ -37,8 +38,8 @@ --font-size-h5: 1.602rem; } } - -@media (min-width: 1024px) { +*/ +/* @media (min-width: 1024px) { :root { --font-size-h1: 3.247rem; --font-size-h2: 2.566rem; @@ -46,7 +47,7 @@ --font-size-h4: 1.802rem; --font-size-h5: 1.602rem; } -} +} */ a { color: inherit;