157 lines
4.7 KiB
SCSS
157 lines
4.7 KiB
SCSS
// stylelint-disable max-line-length, number-leading-zero, number-no-trailing-zeros
|
|
// stylelint-disable scss/dollar-variable-colon-space-after, value-keyword-case
|
|
|
|
// Variables
|
|
|
|
// Font faces, stacks and sizes.
|
|
|
|
// Font styling and line heights are controlled by the several variables that
|
|
// used by mixins like `type-layout()`, `margin-top()`, and `margin-bottom()`.
|
|
// These variable and mixins are documented on the [Typey
|
|
// homepage](https://github.com/jptaranto/typey).
|
|
|
|
// The font size set on the root html element.
|
|
// Specify unitless, it will be recalculated as %.
|
|
$base-font-size: 18;
|
|
|
|
// Base and heading line height, unitless.
|
|
$base-line-height: 1.5;
|
|
$heading-line-height: 1.3;
|
|
|
|
// The pt font-size to be used for printing.
|
|
$print-font-size: 12pt;
|
|
|
|
// The font sizes in our type hierarchy as tee shirt sizes.
|
|
// Size m is base.
|
|
// Use like this: var(--fs-m)
|
|
$font-size-fixed: (
|
|
xxxxl: 2.778rem,
|
|
xxxl: 2.335rem,
|
|
xxl: 2rem,
|
|
xl: 1.556rem,
|
|
l: 1.223rem,
|
|
m: 1rem,
|
|
s: 0.889rem,
|
|
xs: 0.778rem,
|
|
);
|
|
|
|
// The responsive font sizes in our type hierarchy as tee shirt sizes.
|
|
// Size m is base.
|
|
// Use like this: var(--fs-m)
|
|
$font-size-fluid: (
|
|
xxxxl: clamp(1.80rem, calc(1.45rem + 1.73vw), 2.80rem),
|
|
xxxl: clamp(1.60rem, calc(1.35rem + 1.27vw), 2.33rem),
|
|
xxl: clamp(1.42rem, calc(1.24rem + 0.90vw), 1.94rem),
|
|
xl: clamp(1.27rem, calc(1.14rem + 0.62vw), 1.62rem),
|
|
l: clamp(1.13rem, calc(1.05rem + 0.39vw), 1.35rem),
|
|
m: 1rem,
|
|
s: 0.889rem,
|
|
xs: 0.778rem,
|
|
);
|
|
|
|
// Set the font sizes to use, fixed or fluid.
|
|
$font-size: $font-size-fixed;
|
|
// $font-size: $font-size-fluid;
|
|
|
|
// Font weights.
|
|
// Use like this: var(--fw-normal)
|
|
$font-weight: (
|
|
headings: 700,
|
|
bolder: 900,
|
|
bold: 700,
|
|
medium: 500,
|
|
normal: 400,
|
|
light: 300,
|
|
lighter: 200,
|
|
);
|
|
|
|
// 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.
|
|
|
|
// System-ui font stack.
|
|
$system-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', 'Liberation Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
|
|
|
|
// Serif font stacks.
|
|
$ui-serif: ui-serif, Constantia, 'Noto Serif', Georgia, serif;
|
|
$times: 'Times New Roman', 'Liberation Serif', 'Nimbus Roman No9 L', serif;
|
|
$georgia: Georgia, 'Noto Serif', ui-serif, serif;
|
|
$garamond: Garamond, Charter, Cambria, 'Noto Serif', ui-serif, serif;
|
|
|
|
// Sans-serif font stacks.
|
|
$ui-sans-serif: ui-sans-serif, $system-ui;
|
|
$helvetica: 'Helvetica Neue', Helvetica, 'Liberation Sans', 'Nimbus Sans L', Arial, sans-serif;
|
|
$futura: Futura, 'Century Gothic', Montserrat, Calibri, ui-sans-serif, sans-serif;
|
|
|
|
// Monospace font stacks.
|
|
$ui-monospace: ui-monospace, Menlo, 'Cascadia Mono', 'Segoe UI Mono', 'Noto Sans Mono', 'Liberation Mono', Monaco, Consolas, monospace;
|
|
|
|
|
|
// Font family.
|
|
// Use like this: var(--ff-body)
|
|
$font-family: (
|
|
body: $ui-serif,
|
|
headings: $ui-sans-serif,
|
|
alt: $system-ui,
|
|
monospace: $ui-monospace,
|
|
);
|
|
|
|
// Breakpoints
|
|
// Use the `respond-to(s)` mixin to use named breakpoints.
|
|
$breakpoints: (
|
|
'xxxl': 1222px,
|
|
'xxl': 1111px,
|
|
'xl': 999px,
|
|
'l': 888px,
|
|
'm': 777px,
|
|
's': 666px,
|
|
'xs': 555px,
|
|
'xxs': 444px,
|
|
'xxxs': 333px,
|
|
);
|
|
|
|
// Border radius.
|
|
// Use like this: var(--radius-m)
|
|
$border-radius: (
|
|
l: 1rem,
|
|
m: 0.3rem,
|
|
s: 3px,
|
|
);
|
|
|
|
// Spacing.
|
|
// Use like this: var(--space-m)
|
|
$spacing: (
|
|
xxxl: 5rem,
|
|
xxl: 3rem,
|
|
xl: 2rem,
|
|
l: 1.5rem,
|
|
m: 1rem,
|
|
s: 0.75rem,
|
|
xs: 0.5rem,
|
|
xxs: 0.4rem,
|
|
xxxs: 0.3rem,
|
|
);
|
|
|
|
// 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: 1111px;
|
|
|
|
// The max line width for readability.
|
|
$max-line-width: 70ch;
|
|
|
|
// 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;
|
|
|
|
// Control whether RTL styles are added.
|
|
$include-rtl: false;
|