16c47eea9d* Lint fixes. * Implement light-dark(). * Lint css with biome, remove stylelint. * Biome lint fixes. * Dark mode adjustments. * Style bug fixes. * Colour adjustments. * Move header and footer styles to base. * Site header adjustments. * Removing jQuery and umbrella libs. They where great but not needed anymore. * Add colorScheme to optionally lock light/dark. * Update README. * Biome adjustments.
122 lines
4.9 KiB
CSS
122 lines
4.9 KiB
CSS
/* biome-ignore-all format: aligned columns for readability */
|
|
|
|
:root {
|
|
/* Set theme css variables.
|
|
Override css variables in "assets/css/_custom.css" */
|
|
|
|
/* The max content width. (Consider using one of the breakpoints.) */
|
|
--max-content-width: 1111px;
|
|
|
|
/* The max page width. Defaults to max-content-width.
|
|
Setting this to a larger value than max-content-width allows
|
|
content with class "stretch" to stretch out to the page edge. */
|
|
--max-page-width: var(--max-content-width);
|
|
|
|
/* Base line height, unitless. */
|
|
--base-line-height: 1.5;
|
|
|
|
/* 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;
|
|
|
|
/* Font sizes. */
|
|
--fs-xxxxl: clamp(2.4881rem, calc(1.8896rem + 2.9924vw), 4.2088rem);
|
|
--fs-xxxl: clamp(2.0738rem, calc(1.6968rem + 1.8848vw), 3.1575rem);
|
|
--fs-xxl: clamp(1.7281rem, calc(1.5053rem + 1.1141vw), 2.3688rem);
|
|
--fs-xl: clamp(1.44rem, calc(1.3228rem + 0.5859vw), 1.7769rem);
|
|
--fs-l: clamp(1.2rem, calc(1.1537rem + 0.2315vw), 1.3331rem);
|
|
--fs-m: 1rem;
|
|
--fs-s: 0.889rem;
|
|
--fs-xs: 0.778rem;
|
|
|
|
/* 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. */
|
|
|
|
/* 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;
|
|
|
|
/* 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;
|
|
}
|