From 30c12431472c592a6e5f89910a582defee8d42fd Mon Sep 17 00:00:00 2001 From: Fredrik Jonsson Date: Wed, 25 Jan 2023 17:40:37 +0100 Subject: [PATCH] Style linting fixes. --- assets/sass/_variables.scss | 16 ++++++++++++---- .../sass/components/flex-group/_flex-group.scss | 1 + .../sass/components/grid-group/_grid-group.scss | 4 +++- .../visually-hidden/_visually-hidden.scss | 2 +- assets/sass/mixins/breakpoint/_respond-to.scss | 3 +-- assets/sass/mixins/spacing/_spacing.scss | 12 ++++++++++++ assets/sass/mobile.scss | 1 - assets/sass/print.scss | 3 ++- 8 files changed, 32 insertions(+), 10 deletions(-) diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index eb33872..f195cf7 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -1,4 +1,5 @@ -// stylelint-disable value-keyword-case, scss/dollar-variable-colon-space-after, max-line-length +// stylelint-disable max-line-length, number-leading-zero, number-no-trailing-zeros +// stylelint-disable scss/dollar-variable-colon-space-after, value-keyword-case // Variables @@ -22,6 +23,7 @@ $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: 2.778rem, xxxl: 2.335rem, @@ -35,6 +37,7 @@ $font-size-fixed: ( // 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(1.80rem, calc(1.45rem + 1.73vw), 2.80rem), xxxl: clamp(1.60rem, calc(1.35rem + 1.27vw), 2.33rem), @@ -48,9 +51,10 @@ $font-size-fluid: ( // Set the font sizes to use, fixed or fluid. $font-size: $font-size-fixed; -//$font-size: $font-size-fluid; +// $font-size: $font-size-fluid; // Font weights. +// Use like this: var(--fw-normal) $font-weight: ( bolder: 900, bold: 700, @@ -88,6 +92,8 @@ $system-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Rob // http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/ $menlo: Menlo, 'Ubuntu Mono', 'DejaVu Sans Mono', 'Courier New', Courier, monospace, sans-serif; +// Font family. +// Use like this: var(--ff-body) $font-family: ( body: $garamond, headings: $futura, @@ -96,7 +102,7 @@ $font-family: ( ); // Breakpoints -// Use the `respond-to()` mixin to use named breakpoints. +// Use the `respond-to(s)` mixin to use named breakpoints. $breakpoints: ( 'xxxl': 1222px, 'xxl': 1111px, @@ -110,6 +116,7 @@ $breakpoints: ( ); // Border radius. +// Use like this: var(--radius-m) $border-radius: ( l: 1rem, m: 0.3rem, @@ -117,6 +124,7 @@ $border-radius: ( ); // Spacing. +// Use like this: var(--space-m) $spacing: ( xxxl: 5rem, xxl: 3rem, @@ -135,7 +143,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 "stetch" to strech out to the page edge. -//$max-page-width: 1111px; +// $max-page-width: 1111px; // The max line width for readability. $max-line-width: 70ch; diff --git a/assets/sass/components/flex-group/_flex-group.scss b/assets/sass/components/flex-group/_flex-group.scss index cbb80ed..b95efcb 100644 --- a/assets/sass/components/flex-group/_flex-group.scss +++ b/assets/sass/components/flex-group/_flex-group.scss @@ -1,6 +1,7 @@ .flex-group, %flex-group { $gap: 1; + @include gap($gap); display: flex; flex-wrap: wrap; diff --git a/assets/sass/components/grid-group/_grid-group.scss b/assets/sass/components/grid-group/_grid-group.scss index c8b6a20..386bb16 100644 --- a/assets/sass/components/grid-group/_grid-group.scss +++ b/assets/sass/components/grid-group/_grid-group.scss @@ -1,7 +1,9 @@ .grid-group, %grid-group { - --column-min: 250px; $gap: 1; + + --column-min: 250px; + @include gap($gap); display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--column-min), 1fr)); diff --git a/assets/sass/components/visually-hidden/_visually-hidden.scss b/assets/sass/components/visually-hidden/_visually-hidden.scss index 75ab590..d829abc 100644 --- a/assets/sass/components/visually-hidden/_visually-hidden.scss +++ b/assets/sass/components/visually-hidden/_visually-hidden.scss @@ -4,7 +4,7 @@ .visually-hidden, %visually-hidden { - &:not(:focus):not(:active) { + &:not(:focus, :active) { position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%); diff --git a/assets/sass/mixins/breakpoint/_respond-to.scss b/assets/sass/mixins/breakpoint/_respond-to.scss index d6fa8d2..7ac27ab 100644 --- a/assets/sass/mixins/breakpoint/_respond-to.scss +++ b/assets/sass/mixins/breakpoint/_respond-to.scss @@ -5,8 +5,7 @@ @media (min-width: map-get($breakpoints, $breakpoint)) { @content; } - } - @else { + } @else { @media (min-width: $breakpoint) { @content; } diff --git a/assets/sass/mixins/spacing/_spacing.scss b/assets/sass/mixins/spacing/_spacing.scss index 30518a7..a01677f 100644 --- a/assets/sass/mixins/spacing/_spacing.scss +++ b/assets/sass/mixins/spacing/_spacing.scss @@ -16,21 +16,27 @@ @mixin margin($x) { @include spacing(margin, $x); } + @mixin margin-inline($x) { @include spacing(margin-inline, $x); } + @mixin margin-block($x) { @include spacing(margin-block, $x); } + @mixin margin-top($x) { @include spacing(margin-top, $x); } + @mixin margin-bottom($x) { @include spacing(margin-bottom, $x); } + @mixin margin-left($x) { @include spacing(margin-left, $x); } + @mixin margin-right($x) { @include spacing(margin-right, $x); } @@ -38,21 +44,27 @@ @mixin padding($x) { @include spacing(padding, $x); } + @mixin padding-inline($x) { @include spacing(padding-inline, $x); } + @mixin padding-block($x) { @include spacing(padding-block, $x); } + @mixin padding-top($x) { @include spacing(padding-top, $x); } + @mixin padding-bottom($x) { @include spacing(padding-bottom, $x); } + @mixin padding-left($x) { @include spacing(padding-left, $x); } + @mixin padding-right($x) { @include spacing(padding-right, $x); } diff --git a/assets/sass/mobile.scss b/assets/sass/mobile.scss index 9f47015..63aaf15 100644 --- a/assets/sass/mobile.scss +++ b/assets/sass/mobile.scss @@ -1,4 +1,3 @@ -// @file // The mobile navigation stylesheet for this theme. @import 'init'; diff --git a/assets/sass/print.scss b/assets/sass/print.scss index 49fd62d..0491b89 100644 --- a/assets/sass/print.scss +++ b/assets/sass/print.scss @@ -1,4 +1,5 @@ -// @file +// stylelint-disable color-named + // The print stylesheet for this theme. @import 'init';