115 lines
4.4 KiB
SCSS
115 lines
4.4 KiB
SCSS
:root {
|
|
/* Convert sass variables to css variables. */
|
|
|
|
@each $name, $size in $font-size {
|
|
--fs-#{$name}: #{$size};
|
|
}
|
|
|
|
--max-content-width: #{$max-content-width};
|
|
--max-page-width: #{$max-page-width};
|
|
|
|
/* Base line height, unitless. */
|
|
--base-line-height: #{$base-line-height};
|
|
|
|
|
|
/* Set theme css variables.
|
|
Override css variables in "assets/sass/_custom.scss" */
|
|
|
|
/* Heading line height, unitless. */
|
|
--heading-line-height: 1.3;
|
|
|
|
/* The font size set on the root html element.
|
|
Specify unitless, it will be recalculated as %. */
|
|
--base-font-size: 18;
|
|
|
|
/* Modern font stacks. See how they look at https://modernfontstacks.com/.
|
|
|
|
The following font family declarations use widely available fonts.
|
|
A user's web browser will look at the comma-separated list and will
|
|
attempt to use each font in turn until it finds one that is available
|
|
on the user's computer. The final "generic" font (sans-serif, serif or
|
|
monospace) hints at what type of font to use if the web browser doesn't
|
|
find any of the fonts in the list. */
|
|
|
|
/* stylelint-disable value-keyword-case */
|
|
|
|
/* Emojis font stack. Add to end of other stacks when needed. */
|
|
--emojis: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
|
|
|
/* System-ui font stack. */
|
|
--system-ui: system-ui, sans-serif;
|
|
|
|
/* Serif font stacks. */
|
|
--ui-serif: ui-serif, Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
|
|
--transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
|
|
--old: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
|
|
--slab: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
|
|
--antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
|
|
--didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
|
|
|
|
/* Sans-serif font stacks. */
|
|
--ui-sans-serif: ui-sans-serif, system-ui, sans-serif;
|
|
--humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
|
|
--geometric: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
|
|
--classical: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
|
|
--neo: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
|
|
--industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
|
|
--futura: Futura, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
|
|
|
|
/* Rounded Sans-serif font stacks. */
|
|
--ui-rounded: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
|
|
|
|
/* Monospace font stacks. */
|
|
--ui-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
|
|
/* stylelint-enable value-keyword-case */
|
|
|
|
/* Font family. */
|
|
--ff-body: var(--ui-serif);
|
|
--ff-headings: var(--ui-sans-serif);
|
|
--ff-alt: var(--system-ui);
|
|
--ff-monospace: var(--ui-monospace);
|
|
|
|
/* Font weights. */
|
|
--fw-headings: 700;
|
|
--fw-bolder: 900;
|
|
--fw-bold: 700;
|
|
--fw-medium: 500;
|
|
--fw-normal: 400;
|
|
--fw-light: 300;
|
|
--fw-lighter: 200;
|
|
|
|
/* Spacing.
|
|
Generates mt--m (mt = margin-top), mb--m (mb = margin-bottom) and
|
|
mx--m (mx = margin-block) classes. */
|
|
--spacing-xxl: calc(3rem * var(--base-line-height));
|
|
--spacing-xl: calc(2rem * var(--base-line-height));
|
|
--spacing-l: calc(1.5rem * var(--base-line-height));
|
|
--spacing-m: calc(1rem * var(--base-line-height));
|
|
--spacing-s: calc(0.75rem * var(--base-line-height));
|
|
--spacing-xs: calc(0.5rem * var(--base-line-height));
|
|
--spacing-xxs: calc(0.3rem * var(--base-line-height));
|
|
|
|
/* Border radius. */
|
|
--radius-xl: 1rem;
|
|
--radius-l: 0.75rem;
|
|
--radius-m: 0.5rem;
|
|
--radius-s: 0.3rem;
|
|
--radius-xs: 0.125rem;
|
|
|
|
/* Breakout amount.
|
|
How much should the "breakout" be. Defaults to same as gutters value. */
|
|
--breakout: calc(5px + 1.5625vw);
|
|
|
|
/* The left/right gutter/padding. */
|
|
--gutters: calc(5px + 1.5625vw);
|
|
--gutters-reverse: calc(0px - (5px + 1.5625vw));
|
|
|
|
/* The amount lists, blockquotes and comments are indented. */
|
|
--indent-amount: 2rem;
|
|
|
|
/* The max line width for readability. */
|
|
--max-line-width: 70ch;
|
|
|
|
/* The pt font-size to be used for printing. */
|
|
--print-font-size: 12pt;
|
|
}
|