From f4c0f791f7eaea95abb325ebd745ba8b1b001781 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Thu, 25 Nov 2021 08:59:56 +0100 Subject: [PATCH 1/5] Replace all CSS comments with Sass comments --- src/styles/base/_auto-grid.scss | 13 +++++------- src/styles/base/_breakpoint.scss | 14 ++++++------- src/styles/base/_color.scss | 15 ++++++------- src/styles/base/_elevation.scss | 13 +++++------- src/styles/base/_font.scss | 13 +++++------- src/styles/base/_grid.scss | 21 ++++++++----------- src/styles/base/_list.scss | 15 ++++++------- src/styles/base/_outline.scss | 15 ++++++------- src/styles/base/_reset.scss | 15 ++++++------- src/styles/base/_root.scss | 14 ++++++------- src/styles/base/_size.scss | 13 +++++------- src/styles/base/_space.scss | 14 ++++++------- src/styles/base/_utility.scss | 14 +++++-------- .../base/utilities/_align-horizontal.scss | 13 +++++------- .../base/utilities/_align-vertical.scss | 13 +++++------- src/styles/base/utilities/_colors.scss | 13 +++++------- src/styles/base/utilities/_contents.scss | 13 +++++------- src/styles/base/utilities/_elevations.scss | 13 +++++------- src/styles/base/utilities/_gutter-gap.scss | 13 +++++------- src/styles/base/utilities/_margins.scss | 13 +++++------- src/styles/base/utilities/_paddings.scss | 13 +++++------- src/styles/base/utilities/_size-content.scss | 13 +++++------- src/styles/base/utilities/_sizing.scss | 13 +++++------- src/styles/base/utilities/_space-content.scss | 13 +++++------- src/styles/base/utilities/_sr-only.scss | 13 +++++------- src/styles/globals.scss | 13 +++++------- 26 files changed, 141 insertions(+), 217 deletions(-) diff --git a/src/styles/base/_auto-grid.scss b/src/styles/base/_auto-grid.scss index d702886..fe190ae 100644 --- a/src/styles/base/_auto-grid.scss +++ b/src/styles/base/_auto-grid.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> auto-grid - | ------------------------------------------------------------- - | - | Easy to implement column layouts with display grid. - | -*/ +// | ------------------------------------------------------------- +// | > Auto Grid +// | ------------------------------------------------------------- +// | Easy to implement column layouts with display grid. +// | ------------------------------------------------------------- // used variables and mixins @use "breakpoint" as *; diff --git a/src/styles/base/_breakpoint.scss b/src/styles/base/_breakpoint.scss index 20431f4..8e825b7 100644 --- a/src/styles/base/_breakpoint.scss +++ b/src/styles/base/_breakpoint.scss @@ -1,11 +1,9 @@ -/* - | ------------------------------------------------------------- - | --> breakpoint - | ------------------------------------------------------------- - | - | Breakpoint mixin used in the other base files. - | -*/ +// | ------------------------------------------------------------- +// | > Breakpoint +// | ------------------------------------------------------------- +// | Breakpoint mixin used in the other base files or in a +// | project. +// | ------------------------------------------------------------- // breakpoints map $breakpoints: ( diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss index dc578a1..960fa87 100644 --- a/src/styles/base/_color.scss +++ b/src/styles/base/_color.scss @@ -1,12 +1,9 @@ -/* - | ------------------------------------------------------------- - | --> color - | ------------------------------------------------------------- - | - | Color map with HSL values. Used to create Custom Properties - | in _root.scss. - | -*/ +// | ------------------------------------------------------------- +// | > Color +// | ------------------------------------------------------------- +// | Color map with HSL values. Used to create Custom +// | Properties in _root.scss. +// | ------------------------------------------------------------- $colors: ( primary-clr: ( diff --git a/src/styles/base/_elevation.scss b/src/styles/base/_elevation.scss index 31772e9..2681c01 100644 --- a/src/styles/base/_elevation.scss +++ b/src/styles/base/_elevation.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> elevation - | ------------------------------------------------------------- - | - | Box-shadow mixins used as tokens in _tokens.scss - | -*/ +// | ------------------------------------------------------------- +// | > Elevation +// | ------------------------------------------------------------- +// | Box-shadow mixins used as tokens in _utility.scss. +// | ------------------------------------------------------------- // use to override other elevations @mixin elevation-000 { diff --git a/src/styles/base/_font.scss b/src/styles/base/_font.scss index 0884fb2..37b803e 100644 --- a/src/styles/base/_font.scss +++ b/src/styles/base/_font.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> font - | ------------------------------------------------------------- - | - | Default font declarations and sizes. - | -*/ +// | ------------------------------------------------------------- +// | > Font +// | ------------------------------------------------------------- +// | Default font declarations and sizes. +// | ------------------------------------------------------------- // used variables and mixins @use "breakpoint" as *; diff --git a/src/styles/base/_grid.scss b/src/styles/base/_grid.scss index 2083e9e..453aa7a 100644 --- a/src/styles/base/_grid.scss +++ b/src/styles/base/_grid.scss @@ -1,15 +1,12 @@ -/* - | ------------------------------------------------------------- - | --> grid - | ------------------------------------------------------------- - | - | This file contains all the settings for making flexible - | grids. Just apply a combination of these classes to build - | your own grid in the front-end. - | - | Docs: https://www.markteekman.nl/project/flexbox-grid - | -*/ +// | ------------------------------------------------------------- +// | > Grid +// | ------------------------------------------------------------- +// | This file contains all the settings for making flexible +// | grids. Just apply a combination of these classes to build +// | your own grid in the front-end. +// | +// | Docs: https://www.markteekman.nl/project/flexbox-grid +// | ------------------------------------------------------------- // used variables and mixins @use "sass:math"; diff --git a/src/styles/base/_list.scss b/src/styles/base/_list.scss index d8c79ff..6af2dbb 100644 --- a/src/styles/base/_list.scss +++ b/src/styles/base/_list.scss @@ -1,12 +1,9 @@ -/* - | ------------------------------------------------------------- - | --> lists - | ------------------------------------------------------------- - | - | A set of defaults styles for standard ordered and unordered - | lists. - | -*/ +// | ------------------------------------------------------------- +// | > Lists +// | ------------------------------------------------------------- +// | A set of default styles for standard ordered and +// | unordered lists. +// | ------------------------------------------------------------- // used variables and mixins @use "breakpoint" as *; diff --git a/src/styles/base/_outline.scss b/src/styles/base/_outline.scss index 2f394f8..3be8ea9 100644 --- a/src/styles/base/_outline.scss +++ b/src/styles/base/_outline.scss @@ -1,12 +1,9 @@ -/* - | ------------------------------------------------------------- - | --> outline - | ------------------------------------------------------------- - | - | Outline mixin to help with (tab)focus of different elements - | on the page. - | -*/ +// | ------------------------------------------------------------- +// | > Outline +// | ------------------------------------------------------------- +// | Outline mixin to help with (tab)focus of different +// | elements on the page. +// | ------------------------------------------------------------- @mixin outline { outline: 2px dotted black; diff --git a/src/styles/base/_reset.scss b/src/styles/base/_reset.scss index e5faac2..175cfb8 100644 --- a/src/styles/base/_reset.scss +++ b/src/styles/base/_reset.scss @@ -1,12 +1,9 @@ -/* - | ------------------------------------------------------------- - | --> reset - | ------------------------------------------------------------- - | - | A set of reset declarations to prevent inconsistencies - | between browser vendors. - | -*/ +// | ------------------------------------------------------------- +// | > Reset +// | ------------------------------------------------------------- +// | A set of reset declarations to prevent inconsistencies +// | between browser vendors. +// | ------------------------------------------------------------- // set box sizing and scroll behaviour html { diff --git a/src/styles/base/_root.scss b/src/styles/base/_root.scss index 11864ce..de4252c 100644 --- a/src/styles/base/_root.scss +++ b/src/styles/base/_root.scss @@ -1,11 +1,9 @@ -/* - | ------------------------------------------------------------- - | --> root - | ------------------------------------------------------------- - | - | Sets all custom properties (variables) to the root element. - | -*/ +// | ------------------------------------------------------------- +// | > Root +// | ------------------------------------------------------------- +// | Sets all custom properties (variables) to the root +// | element. +// | ------------------------------------------------------------- @use "color" as *; diff --git a/src/styles/base/_size.scss b/src/styles/base/_size.scss index b1ff2f1..ff93c99 100644 --- a/src/styles/base/_size.scss +++ b/src/styles/base/_size.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> size - | ------------------------------------------------------------- - | - | Size mixins used in _tokens.scss and other base files. - | -*/ +// | ------------------------------------------------------------- +// | > Size +// | ------------------------------------------------------------- +// | Size mixins used in _utility.scss and other base files. +// | ------------------------------------------------------------- // size mixins @mixin size-10 { diff --git a/src/styles/base/_space.scss b/src/styles/base/_space.scss index 2c94e4f..f9414ac 100644 --- a/src/styles/base/_space.scss +++ b/src/styles/base/_space.scss @@ -1,11 +1,9 @@ -/* - | ------------------------------------------------------------- - | --> space - | ------------------------------------------------------------- - | - | Space variables used in _tokens.scss and other base files. - | -*/ +// | ------------------------------------------------------------- +// | > Space +// | ------------------------------------------------------------- +// | Space variables used in _utility.scss and other base +// | files. +// | ------------------------------------------------------------- // space variables $space-2: 0.125rem; diff --git a/src/styles/base/_utility.scss b/src/styles/base/_utility.scss index 1cd7adb..f07d3d9 100644 --- a/src/styles/base/_utility.scss +++ b/src/styles/base/_utility.scss @@ -1,12 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> utility - | ------------------------------------------------------------- - | - | This file contains all the utility tokens which are distilled - | from bases styles. - | -*/ +// | ------------------------------------------------------------- +// | > Utility +// | ------------------------------------------------------------- +// | This file contains all the utility tokens. +// | ------------------------------------------------------------- @use 'utilities/align-horizontal'; @use 'utilities/align-vertical'; diff --git a/src/styles/base/utilities/_align-horizontal.scss b/src/styles/base/utilities/_align-horizontal.scss index 776e584..1518378 100644 --- a/src/styles/base/utilities/_align-horizontal.scss +++ b/src/styles/base/utilities/_align-horizontal.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> align horizontal - | ------------------------------------------------------------- - | - | Align horizontal utility tokens. - | -*/ +// | ------------------------------------------------------------- +// | > Align Horizontal +// | ------------------------------------------------------------- +// | Align Horizontal utility token. +// | ------------------------------------------------------------- .align-horizontal { display: flex; diff --git a/src/styles/base/utilities/_align-vertical.scss b/src/styles/base/utilities/_align-vertical.scss index 8d32b19..a2040a1 100644 --- a/src/styles/base/utilities/_align-vertical.scss +++ b/src/styles/base/utilities/_align-vertical.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> align vertical - | ------------------------------------------------------------- - | - | Align vertical utility tokens. - | -*/ +// | ------------------------------------------------------------- +// | > Align Vertical +// | ------------------------------------------------------------- +// | Align Vertical utility token. +// | ------------------------------------------------------------- .align-vertical { display: flex; diff --git a/src/styles/base/utilities/_colors.scss b/src/styles/base/utilities/_colors.scss index 392529a..ebc1330 100644 --- a/src/styles/base/utilities/_colors.scss +++ b/src/styles/base/utilities/_colors.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> Colors - | ------------------------------------------------------------- - | - | Colors utility tokens. - | -*/ +// | ------------------------------------------------------------- +// | > Colors +// | ------------------------------------------------------------- +// | Colors utility token. +// | ------------------------------------------------------------- .color-neutral { background-color: var(--neutral-background); diff --git a/src/styles/base/utilities/_contents.scss b/src/styles/base/utilities/_contents.scss index 7fa3d4c..447dfd5 100644 --- a/src/styles/base/utilities/_contents.scss +++ b/src/styles/base/utilities/_contents.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> Contents - | ------------------------------------------------------------- - | - | Contents utility token. - | -*/ +// | ------------------------------------------------------------- +// | > Contents +// | ------------------------------------------------------------- +// | Contents utility token. +// | ------------------------------------------------------------- .contents { display: contents; diff --git a/src/styles/base/utilities/_elevations.scss b/src/styles/base/utilities/_elevations.scss index cfd12f7..05b7667 100644 --- a/src/styles/base/utilities/_elevations.scss +++ b/src/styles/base/utilities/_elevations.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> elevation - | ------------------------------------------------------------- - | - | Elevation utility tokens. - | -*/ +// | ------------------------------------------------------------- +// | > Elevations +// | ------------------------------------------------------------- +// | Elevations utility token. +// | ------------------------------------------------------------- @use '../elevation' as *; diff --git a/src/styles/base/utilities/_gutter-gap.scss b/src/styles/base/utilities/_gutter-gap.scss index c142a80..ff4f92b 100644 --- a/src/styles/base/utilities/_gutter-gap.scss +++ b/src/styles/base/utilities/_gutter-gap.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> gutter gap - | ------------------------------------------------------------- - | - | Gutter gap utility tokens. - | -*/ +// | ------------------------------------------------------------- +// | > Gutter +// | ------------------------------------------------------------- +// | Gutter utility token. +// | ------------------------------------------------------------- .gap-small { gap: var(--gap-small); diff --git a/src/styles/base/utilities/_margins.scss b/src/styles/base/utilities/_margins.scss index d6d3c05..277be51 100644 --- a/src/styles/base/utilities/_margins.scss +++ b/src/styles/base/utilities/_margins.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> margins - | ------------------------------------------------------------- - | - | Margins utility tokens. - | -*/ +// | ------------------------------------------------------------- +// | > Margins +// | ------------------------------------------------------------- +// | Margins utility token. +// | ------------------------------------------------------------- @use '../breakpoint' as *; @use '../space' as *; diff --git a/src/styles/base/utilities/_paddings.scss b/src/styles/base/utilities/_paddings.scss index b33cbd0..d58f46c 100644 --- a/src/styles/base/utilities/_paddings.scss +++ b/src/styles/base/utilities/_paddings.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> padding - | ------------------------------------------------------------- - | - | Padding utility tokens. - | -*/ +// | ------------------------------------------------------------- +// | > Paddings +// | ------------------------------------------------------------- +// | Paddings utility token. +// | ------------------------------------------------------------- @use '../breakpoint' as *; @use '../space' as *; diff --git a/src/styles/base/utilities/_size-content.scss b/src/styles/base/utilities/_size-content.scss index a012bb9..1ca3fe6 100644 --- a/src/styles/base/utilities/_size-content.scss +++ b/src/styles/base/utilities/_size-content.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> size content - | ------------------------------------------------------------- - | - | Size content utility token. - | -*/ +// | ------------------------------------------------------------- +// | > Size Content +// | ------------------------------------------------------------- +// | Size Content utility token. +// | ------------------------------------------------------------- @use '../breakpoint' as *; @use '../size' as *; diff --git a/src/styles/base/utilities/_sizing.scss b/src/styles/base/utilities/_sizing.scss index acff592..d3c2bc3 100644 --- a/src/styles/base/utilities/_sizing.scss +++ b/src/styles/base/utilities/_sizing.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> sizing - | ------------------------------------------------------------- - | - | Sizing utility tokens. - | -*/ +// | ------------------------------------------------------------- +// | > Sizing +// | ------------------------------------------------------------- +// | Sizing utility token. +// | ------------------------------------------------------------- @use '../breakpoint' as *; @use '../size' as *; diff --git a/src/styles/base/utilities/_space-content.scss b/src/styles/base/utilities/_space-content.scss index 4c52dea..72d3d87 100644 --- a/src/styles/base/utilities/_space-content.scss +++ b/src/styles/base/utilities/_space-content.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> Space content - | ------------------------------------------------------------- - | - | Space content utility token. - | -*/ +// | ------------------------------------------------------------- +// | > Space Content +// | ------------------------------------------------------------- +// | Space Content utility token. +// | ------------------------------------------------------------- @use '../breakpoint' as *; @use '../space' as *; diff --git a/src/styles/base/utilities/_sr-only.scss b/src/styles/base/utilities/_sr-only.scss index ed7015a..96a8010 100644 --- a/src/styles/base/utilities/_sr-only.scss +++ b/src/styles/base/utilities/_sr-only.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> sr only - | ------------------------------------------------------------- - | - | Screen reader only utility token. - | -*/ +// | ------------------------------------------------------------- +// | > SR Only +// | ------------------------------------------------------------- +// | Screen Reader Only utility token. +// | ------------------------------------------------------------- .sr-only { position: absolute; diff --git a/src/styles/globals.scss b/src/styles/globals.scss index 4c1ce04..f99e2a5 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -1,11 +1,8 @@ -/* - | ------------------------------------------------------------- - | --> global styles - | ------------------------------------------------------------- - | - | This file contains all the global styling components. - | -*/ +// | ------------------------------------------------------------- +// | > Globals +// | ------------------------------------------------------------- +// | This file contains all the global styling. +// | ------------------------------------------------------------- // global styles @use "base/reset"; From 9493f1f505621dfa54cd168e12f3144743409ba5 Mon Sep 17 00:00:00 2001 From: Mark Teekman Date: Thu, 25 Nov 2021 09:00:22 +0100 Subject: [PATCH 2/5] Remove temporary fix --- src/components/Header.astro | 4 ++-- src/components/Navigation.astro | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Header.astro b/src/components/Header.astro index 3dd5409..7c28676 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -15,10 +15,10 @@ import SkipLinks from '../components/SkipLinks.astro' -