77 lines
2.1 KiB
SCSS
77 lines
2.1 KiB
SCSS
// Variables
|
|
// These need to be sass variables since they are used in sass functions and mixins.
|
|
// Override sass variables in "assets/sass/_extra.scss"
|
|
|
|
// Base line height, unitless.
|
|
$base-line-height: 1.5;
|
|
|
|
// 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: 3rem,
|
|
xxxl: 2.5rem,
|
|
xxl: 2rem,
|
|
xl: 1.5rem,
|
|
l: 1.25rem,
|
|
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(2.4881rem, calc(1.8896rem + 2.9924vw), 4.2088rem),
|
|
xxxl: clamp(2.0738rem, calc(1.6968rem + 1.8848vw), 3.1575rem),
|
|
xxl: clamp(1.7281rem, calc(1.5053rem + 1.1141vw), 2.3688rem),
|
|
xl: clamp(1.44rem, calc(1.3228rem + 0.5859vw), 1.7769rem),
|
|
l: clamp(1.2rem, calc(1.1537rem + 0.2315vw), 1.3331rem),
|
|
m: 1rem,
|
|
s: 0.889rem,
|
|
xs: 0.778rem,
|
|
);
|
|
|
|
// Set the font sizes to use, fixed or fluid.
|
|
// $font-size: $font-size-fluid;
|
|
$font-size: $font-size-fixed;
|
|
|
|
// Breakpoints (Deprecated in v5, use css @media directly instead.)
|
|
// 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,
|
|
);
|
|
|
|
// Spacing
|
|
// Generates mt--m (mt = margin-top), mb--m (mb = margin-bottom) and
|
|
// mx--m (mx = margin-block) classes.
|
|
$spacing: (
|
|
xxl: 3,
|
|
xl: 2,
|
|
l: 1.5,
|
|
m: 1,
|
|
s: 0.75,
|
|
xs: 0.5,
|
|
xxs: 0.3,
|
|
0: 0,
|
|
);
|
|
|
|
// 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: $max-content-width;
|
|
|
|
// Show horizontal grid to help with debugging typography.
|
|
$debug: false;
|