hacker.tours-website/themes/zen/assets/sass/_variables.scss
2024-06-13 22:14:05 +02:00

164 lines
4.9 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.
// 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: 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-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: (
xl: 1rem,
l: 0.75rem,
m: 0.5rem,
s: 0.3rem,
xs: 0.125rem,
);
// Spacing
// Generates mt-m (mt = margin-top), mb-m (mb = margin-bottom) and
// mtb-m (mtb = 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: 1111px;
// The max line width for readability.
$max-line-width: 70ch;
// The left/right gutter/padding.
// Use like this: var(--gutters)
$gutters: calc(5px + 1.5625vw);
$gutters-reverse: calc(0px - (5px + 1.5625vw));
// Breakout amount.
// How much should the "breakout" be. Defaults to gutters value.
// $breakout: calc(5px + 1.5625vw);
// The amount lists, blockquotes and comments are indented.
// Use like this: var(--indent-amount)
$indent-amount: 2rem;
// Control whether RTL styles are added.
$include-rtl: false;
// Show horizontal grid to help with debugging typography.
$debug: false;
$debug-color: $grey-extra-light;