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.
// Variables.
@import 'variables';
@import 'sass_variables';
@import 'extra';
// 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;

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;
}

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

@ -1,6 +1,7 @@
// Base styles.
// Broken into modular pieces to make it easier to edit.
@import 'reset/reset';
@import 'document/document';
@import 'forms/forms';
@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.
font-family: var(--ff-body);
// 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.
color: var(--color-text);
}
body {
// 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
// $debug variable will toggle its output.
@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;
}
[data-navopen] & { // stylelint-disable max-nesting-depth
[data-navopen] & {
rect {
y: 45px;
@ -105,7 +105,7 @@
transform: rotate(-45deg);
}
}
} // stylelint-enable max-nesting-depth
}
}
&__sheet {

3
assets/sass/print.scss
View file

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

6
assets/sass/styles.scss
View file

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