Merge pull request #14 from markteekman/develop

Develop
markteekman · Nov 25, 2021 · 1863d89 · 1863d89
2 parents bdb34ae + 6d0f42f
commit 1863d89
Show file tree

Hide file tree

Showing 29 changed files with 172 additions and 241 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "accessible-astro-starter",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "private": true,
   "scripts": {
     "start": "astro dev",

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -15,10 +15,10 @@ import SkipLinks from '../components/SkipLinks.astro'
   </section>
 </header>
 
-<style lang="scss" global>
+<style lang="scss">
   @use '../styles/base/breakpoint' as *;
 
-  .container.temp {
+  .container {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;

diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -53,7 +53,7 @@
 
 </script>
 
-<style lang="scss" global>
+<style lang="scss">
   @use '../styles/base/breakpoint' as *;
 
   nav {

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |	--> font
- | -------------------------------------------------------------
- |
- | 	Default font declarations and sizes.
- |
-*/
+// | -------------------------------------------------------------
+// | > Font
+// | -------------------------------------------------------------
+// |   Default font declarations and sizes.
+// | -------------------------------------------------------------
 
 // used variables and mixins
 @use "breakpoint" as *;
@@ -22,10 +19,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
 
-  *:focus {
-    @include outline;
-  }
-
+  // anchor links
   a {
     color: var(--action-color);
 
@@ -47,6 +41,22 @@ body {
   }
 
   // headings
+  :where(h1, h2) {
+    font-family: var(--font-family-special);
+  }
+
+  h1,
+  h2 {
+    font-weight: 800;
+  }
+
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 600;
+  }
+
   h1 {
     @include size-36;
 
@@ -94,20 +104,4 @@ body {
       @include size-18;
     }
   }
-
-  :where(h1, h2) {
-    font-family: var(--font-family-special);
-  }
-
-  h1,
-  h2 {
-    font-weight: 800;
-  }
-
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: 600;
-  }
 }
diff --git 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
@@ -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
@@ -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;
@@ -15,3 +12,13 @@
   -webkit-box-shadow: 0 0 0 2px white;
   box-shadow: 0 0 0 2px white;
 }
+
+*:focus,
+*:focus-visible {
+  @include outline;
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,11 +1,8 @@
-/*
- | -------------------------------------------------------------
- |  --> Colors
- | -------------------------------------------------------------
- |
- | 	Colors utility tokens.
- |
-*/
+// | -------------------------------------------------------------
+// | > Colors
+// | -------------------------------------------------------------
+// |   Colors utility token.
+// | -------------------------------------------------------------
 
 .color-neutral {
   background-color: var(--neutral-background);