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
10 changed files with 190 additions and 216 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/sass/_init.scss
View file

@ -6,7 +6,7 @@
// project. // project.
// Variables. // Variables.
@import 'variables'; @import 'sass_variables';
@import 'extra'; @import 'extra';
// Mixins and functions. // Mixins and functions.

31
assets/sass/_root.scss
View file

@ -1,31 +0,0 @@
$breakout: $gutters !default;
$max-page-width: $max-content-width !default;
:root {
// Convert sass variables to css4 variables.
// Use like this: var(--color-gutters).
@each $name, $size in $font-size {
--fs-#{$name}: #{$size};
}
@each $name, $weight in $font-weight {
--fw-#{$name}: #{$weight};
}
@each $name, $family in $font-family {
--ff-#{$name}: #{$family};
}
@each $name, $radius in $border-radius {
--radius-#{$name}: #{$radius};
}
--breakout: #{$breakout};
--gutters-reverse: #{$gutters-reverse};
--gutters: #{$gutters};
--heading-line-height: #{$heading-line-height};
--indent-amount: #{$indent-amount};
--max-content-width: #{$max-content-width};
--max-line-width: #{$max-line-width};
--max-page-width: #{$max-page-width};
}

76
assets/sass/_sass_variables.scss Normal file
View file

@ -0,0 +1,76 @@
// Variables
// 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
// 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
// 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;
// Show horizontal grid to help with debugging typography.
$debug: false;

207
assets/sass/_variables.scss
View file

@ -1,65 +1,31 @@
// stylelint-disable scss/dollar-variable-colon-space-after, value-keyword-case $max-page-width: $max-content-width !default;
// stylelint-disable scss/double-slash-comment-empty-line-before
// 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};
}
--max-content-width: #{$max-content-width};
--max-page-width: #{$max-page-width};
// Base line height, unitless.
--base-line-height: #{$base-line-height};
// Set theme css variables.
// Override css variables in "assets/sass/_custom.scss"
// Heading line height, unitless.
--heading-line-height: 1.3;
// The font size set on the root html element. // The font size set on the root html element.
// Specify unitless, it will be recalculated as %. // Specify unitless, it will be recalculated as %.
$base-font-size: 18; --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,
);
// stylelint-disable value-keyword-case
// Modern font stacks. See how they look at https://modernfontstacks.com/. // Modern font stacks. See how they look at https://modernfontstacks.com/.
// //
// The following font family declarations use widely available fonts. // The following font family declarations use widely available fonts.
@ -70,104 +36,71 @@ $font-weight: (
// find any of the fonts in the list. // find any of the fonts in the list.
// Emojis font stack. Add to end of other stacks when needed. // 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: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
// System-ui font stack. // System-ui font stack.
$system-ui: system-ui, sans-serif; --system-ui: system-ui, sans-serif;
// Serif font stacks. // Serif font stacks.
$ui-serif: ui-serif, Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif; --ui-serif: ui-serif, Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
$transitional: 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; --old: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
$slab: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', 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; --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; --didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
// Sans-serif font stacks. // Sans-serif font stacks.
$ui-sans-serif: ui-sans-serif, system-ui, sans-serif; --ui-sans-serif: ui-sans-serif, system-ui, sans-serif;
$humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, 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; --geometric: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
$classical: Optima, Candara, 'Noto Sans', 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; --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; --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; --futura: Futura, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
// Rounded Sans-serif font stacks. // 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; --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. // Monospace font stacks.
$ui-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; --ui-monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
// stylelint-enable value-keyword-case
// Font family. // Font family.
// Use like this: var(--ff-body) --ff-body: var(--ui-serif);
$font-family: ( --ff-headings: var(--ui-sans-serif);
body: $ui-serif, --ff-alt: var(--system-ui);
headings: $ui-sans-serif, --ff-monospace: var(--ui-monospace);
alt: $system-ui,
monospace: $ui-monospace,
);
// Breakpoints // Font weights.
// Use the `respond-to(s)` mixin to use named breakpoints. --fw-headings: 700;
$breakpoints: ( --fw-bolder: 900;
'xxxl': 1222px, --fw-bold: 700;
'xxl': 1111px, --fw-medium: 500;
'xl': 999px, --fw-normal: 400;
'l': 888px, --fw-light: 300;
'm': 777px, --fw-lighter: 200;
's': 666px,
'xs': 555px,
'xxs': 444px,
'xxxs': 333px,
);
// Border radius. // Border radius.
// Use like this: var(--radius-m) --radius-xl: 1rem;
$border-radius: ( --radius-l: 0.75rem;
xl: 1rem, --radius-m: 0.5rem;
l: 0.75rem, --radius-s: 0.3rem;
m: 0.5rem, --radius-xs: 0.125rem;
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. // Breakout amount.
// How much should the "breakout" be. Defaults to gutters value. // How much should the "breakout" be. Defaults to same as gutters value.
// $breakout: calc(5px + 1.5625vw); --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. // The amount lists, blockquotes and comments are indented.
// Use like this: var(--indent-amount) --indent-amount: 2rem;
$indent-amount: 2rem;
// Show horizontal grid to help with debugging typography. // The max line width for readability.
$debug: false; --max-line-width: 70ch;
// The pt font-size to be used for printing.
--print-font-size: 12pt;
}

1
assets/sass/base/_base.scss
View file

@ -1,6 +1,7 @@
// Base styles. // Base styles.
// Broken into modular pieces to make it easier to edit. // Broken into modular pieces to make it easier to edit.
@import 'reset/reset';
@import 'document/document'; @import 'document/document';
@import 'forms/forms'; @import 'forms/forms';
@import 'grouping/grouping'; @import 'grouping/grouping';

4
assets/sass/base/document/_document.scss
View file

@ -4,14 +4,14 @@ html {
// Change the default font family in all browsers. // Change the default font family in all browsers.
font-family: var(--ff-body); font-family: var(--ff-body);
// Set base font size in percent. // Set base font size in percent.
font-size: calc(#{$base-font-size} / 16 * 100%); font-size: calc(var(--base-font-size) / 16 * 100%);
// Set text colour. // Set text colour.
color: var(--color-text); color: var(--color-text);
} }
body { body {
// Correct the line height in all browsers. // Correct the line height in all browsers.
line-height: $base-line-height; line-height: var(--base-line-height);
// Output a horizontal grid to help with debugging typography. The // Output a horizontal grid to help with debugging typography. The
// $debug variable will toggle its output. // $debug variable will toggle its output.
@include debug-grid(); @include debug-grid();

101
assets/sass/base/reset/_reset.scss Normal file
View file

@ -0,0 +1,101 @@
// stylelint-disable property-no-vendor-prefix
// Reset browsers to some sane defaults.
// Document
// Use the saner border-box model for all elements.
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
// Activate transition to intrinsic sizes like auto and fit-content.
interpolate-size: allow-keywords;
}
// Transitioning page view.
@view-transition {
navigation: auto;
}
html {
// Prevent adjustments of font size.
-webkit-text-size-adjust: none;
text-size-adjust: none;
// Improve text rendering.
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
// Sections
body {
// Remove the margin in all browsers.
margin: 0;
padding: 0;
// On short pages, we want the body to fill the entire height
// of the browser.
min-height: 100vh;
}
// Embedded content
img,
svg,
picture,
audio,
video,
canvas,
iframe,
embed,
object {
display: block;
}
img,
svg,
video {
max-width: 100%;
height: auto;
}
figure {
margin-inline: 0;
}
// Form defaults.
input,
button,
textarea,
select {
font: inherit;
letter-spacing: inherit;
word-spacing: inherit;
}
[type='search'] {
@include respond-to(s) {
// Correct the odd appearance in Safari on desktop.
-webkit-appearance: textfield;
}
}
// Code
code,
kbd,
samp {
font-family: var(--ff-monospace);
}
// Numbers
td,
math,
time[datetime*=':'] {
font-variant-numeric: tabular-nums lining-nums;
}

4
assets/sass/mobilemenu.scss
View file

@ -89,7 +89,7 @@
transform-origin: center; transform-origin: center;
} }
[data-navopen] & { // stylelint-disable max-nesting-depth [data-navopen] & {
rect { rect {
y: 45px; y: 45px;
@ -105,7 +105,7 @@
transform: rotate(-45deg); transform: rotate(-45deg);
} }
} }
} // stylelint-enable max-nesting-depth }
} }
&__sheet { &__sheet {

3
assets/sass/print.scss
View file

@ -1,4 +1,3 @@
// The print stylesheet for this theme. // The print stylesheet for this theme.
@import 'init'; @import 'init';
@ -15,7 +14,7 @@ footer {
@media print { @media print {
html { html {
font-size: $print-font-size; font-size: var(--print-font-size);
} }
html, html,

6
assets/sass/styles.scss
View file

@ -10,16 +10,12 @@
// Declaring CSS misc variables in :root. // Declaring CSS misc variables in :root.
@import 'root'; @import 'variables';
// Ensure fonts get loaded early to minimize front-end performance impact. // Ensure fonts get loaded early to minimize front-end performance impact.
@import 'fonts'; @import 'fonts';
// Reset browsers to some sane defaults.
@import 'reset';
// Base styles. // Base styles.
@import 'base/base'; @import 'base/base';