Upgrade SCSS to drop @import and prefer @use statements

13 files changed, 82 insertions, 62 deletions

diff --git a/assets/scss/_aside.scss b/assets/scss/_aside.scss
index 6ec573f..365e98a 100644
--- a/assets/scss/_aside.scss
+++ b/assets/scss/_aside.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 body > aside {
 
     position: fixed;
@@ -10,7 +12,7 @@ body > aside {
 
     &:hover, &:focus {
 	left: 0;
-	background: $bg-main url(../img/aside-on.png) center left no-repeat;
+	background: variables.$bg-main url(../img/aside-on.png) center left no-repeat;
 	box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, 0.4);
 	width: auto;
 	border-right: 2rem solid black;
@@ -18,7 +20,7 @@ body > aside {
 
 	nav {
 	    display: block;
-	    background: $bg-main url(../img/aside-on.png) center left no-repeat;
+	    background: variables.$bg-main url(../img/aside-on.png) center left no-repeat;
 	    height: 100%;
 
             h3 {
@@ -128,15 +130,15 @@ body > aside {
 		}
 
 		&:first-child {
-		    background: $bg-gfx;
+		    background: variables.$bg-gfx;
 		}
 
 		&:nth-child(2) {
-		    background: $bg-txt;
+		    background: variables.$bg-txt;
 		}
 
 		&:last-child {
-		    background: $bg-vda;
+		    background: variables.$bg-vda;
 		}
 	    }
 	}
diff --git a/assets/scss/_branding.scss b/assets/scss/_branding.scss
index 2efdc4d..5ce0d38 100644
--- a/assets/scss/_branding.scss
+++ b/assets/scss/_branding.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 /**
  * Branding
  **/
@@ -10,12 +12,12 @@ span.ps {
 }
 
 body {
-    font-family: $sans-serif;
+    font-family: variables.$sans-serif;
     font-size: 1em; /* No rem here, bug workaround */
 
     > header, > footer {
 	:link, :visited {
-	    color: $fg-main;
+	    color: variables.$fg-main;
 	}
     }
 
diff --git a/assets/scss/_gfx.scss b/assets/scss/_gfx.scss
index 235aaf4..4f18dd3 100644
--- a/assets/scss/_gfx.scss
+++ b/assets/scss/_gfx.scss
@@ -1,11 +1,13 @@
+@use "variables";
+
 body.gfx {
-	  background-color: $bg-gfx-on;
+	  background-color: variables.$bg-gfx-on;
 
     > aside {
 	      &:hover, &:focus {
-	          background-color: $bg-gfx-on;
+	          background-color: variables.$bg-gfx-on;
 	          nav ul li:first-child {
-		            background: $bg-gfx-on;
+		            background: variables.$bg-gfx-on;
 	          }
 	      }
     }
diff --git a/assets/scss/_header-nav.scss b/assets/scss/_header-nav.scss
index 05e9749..9bdbbb1 100644
--- a/assets/scss/_header-nav.scss
+++ b/assets/scss/_header-nav.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 article > header > nav {
     margin: 0 auto;
 
@@ -7,14 +9,14 @@ article > header > nav {
 	padding: 1rem 0;
 	display: flex;
 	width: 100%;
-	background-color: $bg-header;
+	background-color: variables.$bg-header;
 	
 	li {
 	    margin: 0 auto;
 	    flex: 1;
 	    text-align: center;
 	    width: 12rem;
-	    background-color: $bg-txt-on;
+	    background-color: variables.$bg-txt-on;
 
 	    a {
 		display: inline-block;
@@ -24,7 +26,7 @@ article > header > nav {
 		width: 100%;
 		height: 100%;
 		padding: 1rem 0 0;
-		background-color: $bg-txt-off;
+		background-color: variables.$bg-txt-off;
 		color: black;
 
 		&:last {
@@ -32,7 +34,7 @@ article > header > nav {
 		}
 
 		&:hover, &:active {
-		    background-color: $bg-txt-on;
+		    background-color: variables.$bg-txt-on;
 		    color: black;
 		}
 	    }
diff --git a/assets/scss/_header.scss b/assets/scss/_header.scss
index bee374f..6f9fafb 100644
--- a/assets/scss/_header.scss
+++ b/assets/scss/_header.scss
@@ -1,5 +1,7 @@
+@use "variables";
+
 h1,h2,h3,h4,h5,h6 {
-    font-family: $serif;
+    font-family: variables.$serif;
     font-weight: 600;
 
     a, a:hover, a:focus, a:link, a:visited {
@@ -8,7 +10,7 @@ h1,h2,h3,h4,h5,h6 {
     }
     a:active {
 	text-decoration: underline;
-	color: $bg-main;
+	color: variables.$bg-main;
     }
 }
 
@@ -20,9 +22,9 @@ body.ps {
 	top: 0;
 	left: 0;
 	right: 0;
-	background: $bg-header;
+	background: variables.$bg-header;
 	padding: 0 2rem;
-	color: $fg-header;
+	color: variables.$fg-header;
 
 	h1 {
 	    margin: 0 auto;
@@ -43,7 +45,7 @@ body.ps {
 	}
 
 	p {
-	    font-family: $serif;
+	    font-family: variables.$serif;
 	    font-size: 2rem;
 	    font-style: italic;
 	    margin: -3.8rem 0 0 0;
@@ -56,14 +58,14 @@ body.ps {
     }
 
     &.home > header {
-	background-color: $bg-dark;
+	background-color: variables.$bg-dark;
 	top: unset;
 	right: 5vw;
 	bottom: -2vh;
 	left: 5vw;
 	padding: 1rem;
 	font-size: 1.2rem;
-	color: $fg-white-85;
+	color: variables.$fg-white-85;
 	overflow: auto;
 	transform: rotate(-2.7deg) translateY(4.5vh) skewX(-5deg);
 
diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss
index 335ccca..0193c56 100644
--- a/assets/scss/_main.scss
+++ b/assets/scss/_main.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 body > main {
 
     position: relative;
@@ -10,7 +12,7 @@ body > main {
     
     > article {
 	/* background: $bg-txt-ps-on; */
-        background-color: $bg-main;
+        background-color: variables.$bg-main;
 	margin: 0 auto;
 	max-width: 60rem;
 	min-height: calc(100vh - 24rem);
@@ -25,7 +27,7 @@ article {
 	p {
 	    font-size: 2rem;
 	    line-height: 1.25;
-	    font-family: $serif;
+	    font-family: variables.$serif;
 	    text-variant: italic;
 	    /* padding: 2rem 4rem; */
             padding: 0rem 4rem;
diff --git a/assets/scss/_txt.scss b/assets/scss/_txt.scss
index 5b5393a..f50d46a 100644
--- a/assets/scss/_txt.scss
+++ b/assets/scss/_txt.scss
@@ -1,13 +1,16 @@
+@use "sass:meta";
+@use "variables";
+
 body.txt {
-    background-color: $bg-txt-on;
+    background-color: variables.$bg-txt-on;
 
-    @import 'header-nav';
+    @include meta.load-css('header-nav');
     
     > aside {
 	&:hover, &:focus {
-	    background-color: $bg-txt-on;
+	    background-color: variables.$bg-txt-on;
 	    nav ul li:nth-child(2) {
-		background: $bg-txt-on;
+		background: variables.$bg-txt-on;
 	    }
 	}
     }
diff --git a/assets/scss/_vda.scss b/assets/scss/_vda.scss
index ede9a53..16aee29 100644
--- a/assets/scss/_vda.scss
+++ b/assets/scss/_vda.scss
@@ -1,11 +1,13 @@
+@use "variables";
+
 body.vda {
-    background: $bg-vda-on;
+    background: variables.$bg-vda-on;
 
 	  > aside {
 		    &:hover, &:focus {
-			      background-color: $bg-vda-on;
+			      background-color: variables.$bg-vda-on;
 			      nav ul li:last-child {
-				        background: $bg-vda-on;
+				        background: variables.$bg-vda-on;
 			      }
 		    }
 	  }
diff --git a/assets/scss/_vdo.scss b/assets/scss/_vdo.scss
index b7228ec..816be68 100644
--- a/assets/scss/_vdo.scss
+++ b/assets/scss/_vdo.scss
@@ -1,11 +1,13 @@
+@use "variables";
+
 body.vdo {
-	  background: $bg-vdo-on;
+	  background: variables.$bg-vdo-on;
 
     > aside {
 	      &:hover, &:focus {
-	          background-color: $bg-vdo-on;
+	          background-color: variables.$bg-vdo-on;
 	          nav ul li:last-child {
-		            background: $bg-vdo-on;
+		            background: variables.$bg-vdo-on;
 	          }
 	      }
     }
diff --git a/assets/scss/home.scss b/assets/scss/home.scss
index 8f31726..2f43204 100644
--- a/assets/scss/home.scss
+++ b/assets/scss/home.scss
@@ -1,7 +1,7 @@
 @charset 'UTF-8';
 
-@import 'variables';
-@import 'branding';
+@use 'variables';
+@use 'branding';
 
 html[lang='en'] :lang(fr) {
     display: none !important;
@@ -99,7 +99,7 @@ body > header {
 	    text-align: center;
 	    transform: translateY(-7rem);
 
-	    h4 {
+	    h3,h4 {
 		display: inline;
 	    }
 
diff --git a/assets/scss/mobile.scss b/assets/scss/mobile.scss
index 38d3605..2e86d3e 100644
--- a/assets/scss/mobile.scss
+++ b/assets/scss/mobile.scss
@@ -1,4 +1,4 @@
-@import 'variables';
+@use 'variables';
 
 html {
     &[lang='en'] :lang(fr),
@@ -40,7 +40,7 @@ body {
     padding: 0;
 
     > header {
-	background-color: $bg-dark;
+	background-color: variables.$bg-dark;
 	position: absolute;
 	top: 50vh;
 	height: 50vh;
@@ -52,7 +52,7 @@ body {
 	    width: 100%;
 	    
 	    &.fixed {
-		background-color: $bg-dark;
+		background-color: variables.$bg-dark;
 		position: fixed;
 		z-index: 999;
 		margin-top: 0;
@@ -70,7 +70,7 @@ body {
 	    a {
 		display: inline-block;
 		text-decoration: none;
-		color: $fg-header-h1;
+		color: variables.$fg-header-h1;
 	    }
 	    
 	    img {
@@ -96,13 +96,13 @@ body {
 }
 
 #gfx, #gfx h3 {
-    background-color: $bg-gfx-off;
+    background-color: variables.$bg-gfx-off;
 }
 #txt, #txt h3 {
-    background-color: $bg-txt-off;
+    background-color: variables.$bg-txt-off;
 }
 #vda, #vda h3 {
-    background-color: $bg-vda-off;
+    background-color: variables.$bg-vda-off;
 }
 
 .fixed.libre {
diff --git a/assets/scss/screen.scss b/assets/scss/screen.scss
index 3e346a9..e947e98 100644
--- a/assets/scss/screen.scss
+++ b/assets/scss/screen.scss
@@ -1,18 +1,19 @@
 /**
  * Variables
  **/
-@import 'variables';
+@use "sass:meta";
+@use 'variables';
 
 /**
  * Fonts
  **/
-@import 'fonts';
+@use 'fonts';
 
 /**
  * Reset
  **/
-@import 'normalize';
-@import 'skeleton';
+@use 'normalize';
+@use 'skeleton';
 
 /**
  * Defaults
@@ -22,17 +23,17 @@ a {
     text-decoration: none;
 
     &:link {
-	      color: $a-link;
+	      color: variables.$a-link;
     }
     &:hover {
-	      color: $a-hover;
+	      color: variables.$a-hover;
 	      text-decoration: underline;
     }
     &:active {
-	      color: $a-active;
+	      color: variables.$a-active;
     }
     &:visited {
-	      color: $a-visited;
+	      color: variables.$a-visited;
     }
 }
 
@@ -58,19 +59,19 @@ img {
 /**
  * Layout
  **/
-@import 'header';
-@import 'main';
-@import 'aside';
-@import 'footer';
-@import 'branding';
+@include meta.load-css('header');
+@include meta.load-css('main');
+@include meta.load-css('aside');
+@include meta.load-css('footer');
+@include meta.load-css('branding');
 
 /**
  * Page overrides
  **/
-@import 'gfx';
-@import 'txt';
-@import 'vda';
-@import 'vdo';
+@include meta.load-css('gfx');
+@include meta.load-css('txt');
+@include meta.load-css('vda');
+@include meta.load-css('vdo');
 
 /* Move internal links past the header */
 body.txt :target,
diff --git a/assets/scss/www.scss b/assets/scss/www.scss
index 27a7427..434524a 100755
--- a/assets/scss/www.scss
+++ b/assets/scss/www.scss
@@ -13,8 +13,8 @@ $bg-txt-on: rgba(187, 205, 150, 1);
 $bg-vdo:    rgba(109, 144, 162, 0.7);
 $bg-vdo-on: rgba(109, 144, 162, 1);
 
-@import 'normalize';
-@import 'skeleton';
+@use 'normalize';
+@use 'skeleton';
 
 h1,h2,h3,h4,h5,h6 {
     font-family: $serif;