diff --git a/ui/src/css/_root-css-vars.scss b/ui/src/css/_root-css-vars.scss index 92544fa..c0ecfe2 100644 --- a/ui/src/css/_root-css-vars.scss +++ b/ui/src/css/_root-css-vars.scss @@ -35,29 +35,14 @@ CSS custom properties (e.g. from "design tokens") for dynamic theming. --type-step-5: clamp(3.0518rem, 1.9472rem + 3.6819vw, 5.2609rem); --type-step-6: clamp(3.8147rem, 2.2157rem + 5.3302vw, 7.0128rem); - /* Max line-length (aka measure) to improve readability of editorial content */ - --type-max-line-length: 65ch; - // Fluid space scale. /* @link https://utopia.fyi/space/calculator?c=480,16,1.25,1440,20,1.333,6,1,&s=0.75|0.5,1.5|2|3,&g=s,l,xl,12 */ - --space-2xs: clamp(0.5rem, 0.4375rem + 0.2083vw, 0.625rem); - --space-xs: clamp(0.75rem, 0.6563rem + 0.3125vw, 0.9375rem); - --space-s: clamp(1rem, 0.875rem + 0.4167vw, 1.25rem); - --space-m: clamp(1.5rem, 1.3125rem + 0.625vw, 1.875rem); - --space-l: clamp(2rem, 1.75rem + 0.8333vw, 2.5rem); - --space-xl: clamp(3rem, 2.625rem + 1.25vw, 3.75rem); - - // Layout. - --type-scale: 1.414; - --gutter: 1.25rem; - --gutter-xs: calc(var(--gutter-s) / var(--type-scale)); - --gutter-s: calc(var(--gutter) / var(--type-scale)); - --gutter-m: calc(var(--gutter) * var(--type-scale)); - --gutter-l: calc(var(--gutter-m) * var(--type-scale)); - --gutter-xl: calc(var(--gutter-l) * var(--type-scale)); - - --gutter-clamp-l: clamp(var(--gutter-m), 4vw, var(--gutter-l)); - --gutter-clamp-xl: clamp(var(--gutter-m), 5vw, var(--gutter-xl)); + /* One-up pairs */ + --space-2xs-xs: clamp(0.5rem, 0.2813rem + 0.7292vw, 0.9375rem); + --space-xs-s: clamp(0.75rem, 0.5rem + 0.8333vw, 1.25rem); + --space-s-m: clamp(1rem, 0.5625rem + 1.4583vw, 1.875rem); + --space-m-l: clamp(1.5rem, 1rem + 1.6667vw, 2.5rem); + --space-l-xl: clamp(2rem, 1.125rem + 2.9167vw, 3.75rem); } // Dark theme: ensure black & white are NOT truly black & white. diff --git a/ui/src/css/base/_config.scss b/ui/src/css/base/_config.scss index 43d68b2..fd24cc2 100644 --- a/ui/src/css/base/_config.scss +++ b/ui/src/css/base/_config.scss @@ -5,31 +5,17 @@ Config settings. */ :root { - /* - ---------------------------------------------------------------------------- - Layout. - ---------------------------------------------------------------------------- - */ - --site-width: null; // Replace NULL to set a max-width for site. + /* Layout. */ + --site-max-width: null; - /* - ---------------------------------------------------------------------------- - Spacing and gutters. - Use for margin|padding, and gap in flex|grid layouts. - ---------------------------------------------------------------------------- - */ - --gutter-xs: var(--space-2xs); - --gutter-s: var(--space-xs); - --gutter: var(--space-s); - --gutter-m: var(--space-m); - --gutter-l: var(--space-l); - --gutter-xl: var(--space-xl); + /* Spacing and gutters. Use for margin|padding, and gap in flex|grid layouts. */ + --gutter-xs: var(--space-2xs-xs); + --gutter-s: var(--space-xs-s); + --gutter-m: var(--space-s-m); + --gutter-l: var(--space-m-l); + --gutter-xl: var(--space-l-xl); - /* - ---------------------------------------------------------------------------- - Miscellaneous. - ---------------------------------------------------------------------------- - */ + /* Miscellaneous. */ --media-aspect-ratio: 16/9; } diff --git a/ui/src/css/base/_type.scss b/ui/src/css/base/_type.scss index 86839f1..b669c4d 100644 --- a/ui/src/css/base/_type.scss +++ b/ui/src/css/base/_type.scss @@ -52,6 +52,9 @@ Font-face rules. --line-height-h2: 1.2; --line-height-h1: 1.2; --line-height-xl: 1.2; + + /* Max line-length (aka measure) to improve readability of editorial content */ + --type-max-line-length: 65ch; } /* diff --git a/ui/src/css/layouts/_page.scss b/ui/src/css/layouts/_page.scss index 55ea2aa..e7c0cdf 100644 --- a/ui/src/css/layouts/_page.scss +++ b/ui/src/css/layouts/_page.scss @@ -10,7 +10,7 @@ Dependencies. display: grid; grid-template-rows: auto 1fr auto; margin-inline: auto; - max-inline-size: var(--site-width); + max-inline-size: var(--site-max-width); min-block-size: 100vh; // 100dvb might have performance implications. &__sidebar {