ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Convert almost all variables from sass to css. Move reset into base.

Browse source
This commit is contained in:
Fredrik Jonsson 2025-03-26 09:01:13 +01:00
commit e9f17c33fe
1 changed files with 190 additions and 216 deletions
Download patch file Download diff file Expand all files Collapse all files

233
assets/sass/_variables.scss
View file

@ -1,173 +1,106 @@
// stylelint-disable scss/dollar-variable-colon-space-after, value-keyword-case
// stylelint-disable scss/double-slash-comment-empty-line-before
$max-page-width: $max-content-width !default;
// Variables
:root {
// Convert sass variables to css variables.
// These need to be sass variables sincethey are used in sass functions and mixins.
// Font faces, stacks and sizes.
@each $name, $size in $font-size {
--fs-#{$name}: #{$size};
}
// The font size set on the root html element.
// Specify unitless, it will be recalculated as %.
$base-font-size: 18;
--max-content-width: #{$max-content-width};
--max-page-width: #{$max-page-width};
// Base and heading line height, unitless.
$base-line-height: 1.5;
$heading-line-height: 1.3;
// Base line height, unitless.
--base-line-height: #{$base-line-height};
// 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,
);
// Set theme css variables.
// Override css variables in "assets/sass/_custom.scss"
// 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,
);
// Heading line height, unitless.
--heading-line-height: 1.3;
// Set the font sizes to use, fixed or fluid.
$font-size: $font-size-fixed;
// $font-size: $font-size-fluid;
// The font size set on the root html element.
// Specify unitless, it will be recalculated as %.
--base-font-size: 18;
// Font weights.
// Use like this: var(--fw-normal)
$font-weight: (
headings: 700,
bolder: 900,
bold: 700,
medium: 500,
normal: 400,
light: 300,
lighter: 200,
);
// stylelint-disable value-keyword-case
// 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.
// 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';
// 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;
// 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;
// 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;
// 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;
// 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
// 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 family.
// Use like this: var(--ff-body)
$font-family: (
body: $ui-serif,
headings: $ui-sans-serif,
alt: $system-ui,
monospace: $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;
// 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.
--radius-xl: 1rem;
--radius-l: 0.75rem;
--radius-m: 0.5rem;
--radius-s: 0.3rem;
--radius-xs: 0.125rem;
// Border radius.
// Use like this: var(--radius-m)
$border-radius: (
xl: 1rem,
l: 0.75rem,
m: 0.5rem,
s: 0.3rem,
xs: 0.125rem,
);
// Breakout amount.
// How much should the "breakout" be. Defaults to same as gutters value.
--breakout: calc(5px + 1.5625vw);
// 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 left/right gutter/padding.
--gutters: calc(5px + 1.5625vw);
--gutters-reverse: calc(0px - (5px + 1.5625vw));
// The max content width. (Consider using one of the breakpoints.)
$max-content-width: 1111px;
// The amount lists, blockquotes and comments are indented.
--indent-amount: 2rem;
// 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 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;
// Show horizontal grid to help with debugging typography.
$debug: false;
// The pt font-size to be used for printing.
--print-font-size: 12pt;
}