diff --git a/site/development/style.css b/site/development/style.css index dd6da36..92a4a3f 100644 --- a/site/development/style.css +++ b/site/development/style.css @@ -16,6 +16,20 @@ --base-size: 14px; --grid-base: 16px; + /* Rounded to whole numbers from https://www.modularscale.com/?14,16&px&1.5 */ + --fs-4: 6px; + --fs-3: 8px; + --fs-2: 9px; + --fs-1: 12px; + --fs0: 14px; + --fs1: 16px; + --fs2: 21px; + --fs3: 24px; + --fs4: 32px; + --fs5: 36px; + --fs6: 47px; + --fs7: 54px; + --serif: 'Frame'; --serif-secondary: 'Sanomat'; --sans: 'Sanomat Sans Text'; @@ -41,8 +55,7 @@ --light-blue-0: oklch(92% 0.042 241.48); --white: oklch(97% 0.01 246.48); - --dark-white: oklch(94% 0.01 246.48); - --light-gray: oklch(92% 0.01 246.48); + --light-gray: oklch(94% 0.01 246.48); --gold: oklch(82.16% 0.148 73.12); --tan: oklch(68.99% 0.073 67.54); @@ -55,8 +68,8 @@ html { font-family: var(--text); - font-size: var(--base-size); - text-size-adjust: from-font; + font-size: var(--fs0); + font-size-adjust: from-font; line-height: 1; background-color: var(--light-blue); color: var(--dark-blue); @@ -125,16 +138,44 @@ article { orphans: 3; hyphens: none; background-color: var(--white); + margin-right: 0; + margin-left: auto; +} + +article h1, +article h2, +article h3, +article h4, +article h5, +article h6 { + line-height: 1; + margin: 0; } -[data-paragraph-flow='spacing'] { - --p-text-indent: 0; - --p-margin: 0 0 1em; +article h1 { + font-size: var(--fs4); + font-weight: 600; } -[data-paragraph-flow='indented'] { - --p-text-indent: 1.65em; - --p-margin: 0; +article h2 { + font-size: var(--fs3); + margin-top: 1em; + margin-bottom: var(--fs-3); +} + +article h3 { + font-size: var(--fs1); + font-weight: 600; + margin-top: 1em; + margin-bottom: var(--fs-3); +} + +article h4 { + font-size: var(--fs0); + font-style: italic; + font-weight: 600; + margin-top: 1em; + margin-bottom: var(--fs-3); } article p { @@ -152,8 +193,8 @@ article p:last-child { } article .item-subtitle { - font-size: 0.92em; font-style: italic; + font-size: var(--fs1); } article blockquote, @@ -204,7 +245,6 @@ article a:hover { .sans { font-family: var(--text-alt); font-weight: var(--text-alt-weight); - font-size-adjust: var(--text-alt-adjust); } /* @@ -305,8 +345,6 @@ abbr { code { font-family: var(--mono); - font-size-adjust: var(--mono-adjust); - letter-spacing: -0.25px; } p code { @@ -324,8 +362,9 @@ pre:has(> code) { } pre code { + display: block; hanging-punctuation: none; - line-height: 1.2; + line-height: 1.15; } .smcp { @@ -351,8 +390,22 @@ sup { /* Rough guess */ @media (min-width: 600px) { :root { - --base-size: 16px; + --base-size: 15px; --grid-base: 18px; + + /* Rounded to whole numbers from https://www.modularscale.com/?15,18&px&1.5 */ + --fs-4: 7px; + --fs-3: 8px; + --fs-2: 10px; + --fs-1: 12px; + --fs0: 15px; + --fs1: 18px; + --fs2: 23px; + --fs3: 27px; + --fs4: 34px; + --fs5: 41px; + --fs6: 51px; + --fs7: 61px; } body { @@ -379,9 +432,25 @@ sup { /* Rough guess, more later! */ @media (min-width: 1024px) { :root { + --base-size: 16px; + --grid-base: 20px; + + /* Rounded to whole numbers from https://www.modularscale.com/?16,20&px&1.5 */ + --fs-4: 7px; + --fs-3: 9px; + --fs-2: 11px; + --fs-1: 13px; + --fs0: 16px; + --fs1: 20px; + --fs2: 24px; + --fs3: 30px; + --fs4: 36px; + --fs5: 45px; + --fs6: 54px; + --fs7: 68px; + --text-lh: 1.5; --text-alt-lh: 1.4; - --grid-base: 20px; } body {