From faab3537dd9bf65247b08a361a0ba790b39d8694 Mon Sep 17 00:00:00 2001 From: Joe Carstairs Date: Tue, 15 Aug 2023 19:35:00 +0100 Subject: More readable typography --- public/main.css | 21 ++++++--------------- 1 file changed, 6 insertions(+), 15 deletions(-) diff --git a/public/main.css b/public/main.css index 296567d..32762fb 100644 --- a/public/main.css +++ b/public/main.css @@ -60,7 +60,9 @@ --max-width-all-content: 56.6rem; /* golden ratio * prose content width */ --breakpoint-sm: 640px; + --breakpoint-sm-mag: 640; --breakpoint-lg: 1280px; + --breakpoint-lg-mag: 1280; --spacing-block-xl: 4rem; --spacing-block-lg: 2rem; @@ -71,29 +73,18 @@ --spacing-inline-sm: 1.5rem; --spacing-inline-xs: 0.5rem; - --base-font-size-min: 16px; - --base-font-size-max: 30px; - --font-size-sm: 0.875rem; scroll-behavior: smooth; font-family: 'Alegreya Sans', Lato, Calibri, 'sans-serif'; - font-size: var(--base-font-size-min); - font-weight: 300; + font-size: 18px; + font-weight: 400; + letter-spacing: 0.03rem; + line-height: 1.5; color: var(--text-color); background-color: var(--background-color); } -@media (min-width: 40rem) { - :root { - --sm-to-lg: calc(var(--breakpoint-lg) - var(--breakpoint-sm)); - --this-to-lg: calc(100vw - var(--base-font-size-min)); - --base-font-size-range: calc(var(--base-font-size-max) - var(--base-font-size-min)); - --font-size-to-add: calc(var(--base-font-size-range) * (var(--sm-to-lg) / var(--this-to-lg))); - font-size: calc(var(--base-font-size-min) + var(--font-size-to-add)); - } -} - :is(main, article) { container-name: main; container-type: inline-size; -- cgit v1.2.3