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

Deprecate sass spacing mixin, use css variables --spacing-x instead.

Browse source
This commit is contained in:
Fredrik Jonsson 2025-03-27 14:59:46 +01:00
commit 73a555446b
13 changed files with 41 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

3
assets/sass/_sass_variables.scss
View file

@ -1,4 +1,5 @@
// 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.
@ -70,7 +71,7 @@ $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;
$max-page-width: $max-content-width;
// Show horizontal grid to help with debugging typography.
$debug: false;

26
assets/sass/_variables.scss
View file

@ -1,8 +1,5 @@
$max-page-width: $max-content-width !default;
:root {
// Convert sass variables to css variables.
// These need to be sass variables sincethey are used in sass functions and mixins.
@each $name, $size in $font-size {
--fs-#{$name}: #{$size};
@ -72,13 +69,22 @@ $max-page-width: $max-content-width !default;
--ff-monospace: var(--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;
--fw-headings: 700;
--fw-bolder: 900;
--fw-bold: 700;
--fw-medium: 500;
--fw-normal: 400;
--fw-light: 300;
--fw-lighter: 200;
// Spacing.
--spacing-xxl: calc(3rem * var(--base-line-height));
--spacing-xl: calc(2rem * var(--base-line-height));
--spacing-l: calc(1.5rem * var(--base-line-height));
--spacing-m: calc(1rem * var(--base-line-height));
--spacing-s: calc(0.75rem * var(--base-line-height));
--spacing-xs: calc(0.5rem * var(--base-line-height));
--spacing-xxs: calc(0.3rem * var(--base-line-height));
// Border radius.
--radius-xl: 1rem;

4
assets/sass/base/forms/_forms.scss
View file

@ -2,13 +2,13 @@
form {
// Add vertical rhythm margins.
@include margin-block(0 1);
margin-block: 0 var(--spacing-m);
}
input,
textarea,
select {
@include margin-block(0 1);
margin-block: 0 var(--spacing-m);
}
label {

8
assets/sass/base/grouping/_grouping.scss
View file

@ -12,7 +12,7 @@
blockquote {
// Add vertical rhythm margins.
@include margin-block(0 1);
margin-block: 0 var(--spacing-m);
// Nicer text wrap, e.g. no lone word on last line.
text-wrap: pretty;
// Also indent the quote on both sides.
@ -28,7 +28,7 @@ ol,
ul,
menu {
// Add vertical rhythm margins.
@include margin-block(0 1);
margin-block: 0 var(--spacing-m);
}
dt {
@ -76,7 +76,7 @@ hr {
p {
// Add vertical rhythm margins.
@include margin-block(0 1);
margin-block: 0 var(--spacing-m);
// Nicer text wrap, e.g. no lone word on last line.
text-wrap: pretty;
@ -90,7 +90,7 @@ p {
pre {
// Add vertical rhythm margins.
@include margin-block(0 1);
margin-block: 0 var(--spacing-m);
font-family: var(--ff-monospace);
}

7
assets/sass/base/headings/_headings.scss
View file

@ -15,7 +15,7 @@ h5,
%h5,
h6,
%h6 {
@include margin-block(1 .33, 'em');
margin-block: 1.5em .5em;
color: var(--color-headings);
font-family: var(--ff-headings);
font-weight: var(--fw-headings);
@ -24,7 +24,7 @@ h6,
// Smaller margin when a headeing is right after another heading.
& + & {
@include margin-block-start(.5, 'em');
margin-block-start: .75em
}
// Set max text line width in main for readability.
@ -36,7 +36,8 @@ h6,
h1,
%h1 {
// h1 only on top of page so different margins.
@include margin-block(1 .5, 'rem');
margin-block-start: var(--spacing-m);
margin-block-end: var(--spacing-xs);
font-size: var(--fs-xxl);
letter-spacing: -.01em;
}

4
assets/sass/base/images/_images.scss
View file

@ -31,7 +31,7 @@ img {
figure {
// Add vertical rhythm margins.
@include margin-block(0 1);
margin-block: 0 var(--spacing-m);
&.image {
figcaption {
@ -81,6 +81,6 @@ figure {
img {
&.image {
// Add vertical rhythm margins.
@include margin-block(0 1);
margin-block: 0 var(--spacing-m);
}
}

2
assets/sass/base/tables/_tables.scss
View file

@ -4,7 +4,7 @@
table {
// Add vertical rhythm margins.
@include margin-block(0 1);
margin-block: 0 var(--spacing-m);
// Remove default spacing between table cells.
border-collapse: collapse;
// Prevent cramped-looking tables

4
assets/sass/components/box/_box.scss
View file

@ -20,8 +20,8 @@
.box,
%box {
// Add vertical rhythm margins.
@include margin-block(1);
@include padding(.5);
margin-block: var(--spacing-m);
padding: var(--spacing-xs);
border: 5px solid var(--color-border);
// Sass compiles this to the selector: .box__title, %box__title {}

4
assets/sass/components/cards/_cards.scss
View file

@ -6,12 +6,12 @@
%cards {
@extend %grid-group;
// Add vertical rhythm margins.
@include margin-block(1);
margin-block: var(--spacing-m);
}
.card,
%card {
@include padding(.5);
padding: var(--spacing-xs);
border: 1px solid var(--color-border);
&--highlight {

4
assets/sass/components/divider/_divider.scss
View file

@ -5,12 +5,12 @@
.divider,
%divider {
// Add vertical rhythm margins.
@include margin-block(1);
margin-block: var(--spacing-m);
border: 0;
border-block-start: 1px solid var(--color-border);
// If used as a container, add a top margin to the first child.
> :first-child {
@include margin-top(1);
margin-block-start: var(--spacing-m);
}
}

2
assets/sass/components/language-selector/_language-selector.scss
View file

@ -5,6 +5,6 @@
}
.language-icon {
@include margin-inline-end(.5);
margin-inline-end: var(--spacing-xs);
fill: var(--color-text);
}

4
assets/sass/components/list-straight-left/_list-straight-left.scss
View file

@ -10,7 +10,7 @@
display: table-row;
&::before {
@include padding-inline-end(.5);
padding-inline-end: var(--spacing-xs);
display: table-cell;
content: '\2981';
font-size: var(--fs-s);
@ -29,7 +29,7 @@
counter-increment: table-ol;
&::before {
@include padding-inline-end(.5);
padding-inline-end: var(--spacing-xs);
display: table-cell;
content: counter(table-ol) '.';
font-size: var(--fs-s);

2
assets/sass/components/pager/_pager.scss
View file

@ -9,7 +9,7 @@
@extend %flex-inline;
@extend %link-nav;
// Add vertical rhythm margins.
@include margin-block(1);
margin-block: var(--spacing-m);
justify-content: center;
.page-item {