switch to scss, use scss variables instead of css variables

package.json

@@ -16,6 +16,7 @@
     "parcel-plugin-lazy": "^0.0.4",
     "postcss": "^7.0.16",
     "pug": "^2.0.3",
+    "sass": "^1.20.1",
     "stylelint": "^10.0.1",
     "stylelint-config-standard": "^18.3.0"
   },

src/includes/head.pug

@@ -54,7 +54,7 @@ head
   //- CSS
   //-
   link(
-    href="./styles/index.css"
+    href="./styles/index.scss"
     rel="stylesheet"
   )
 

src/styles/call-to-action.css → src/styles/call-to-action.scss

@@ -1,6 +1,6 @@
 .call-to-action {
   align-items: center;
-  background-color: var(--color-lumos);
+  background-color: $color-lumos;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -27,18 +27,18 @@
 }
 
 .call-to-action .angle--top {
-  fill: var(--color-nocturne);
+  fill: $color-nocturne;
   top: -0.5px;
 }
 
 .call-to-action .angle--bot {
   bottom: -0.5px;
-  fill: var(--color-flame);
+  fill: $color-flame;
 }
 
 .call-to-action-title {
-  color: var(--color-nocturne);
-  font-family: var(--font-serif);
+  color: $color-nocturne;
+  font-family: $font-serif;
   font-size: 2.75rem;
   font-weight: 300;
   line-height: 1.5;
@@ -47,7 +47,7 @@
 }
 
 .call-to-action-title:after {
-  background-color: var(--color-cloud);
+  background-color: $color-cloud;
   bottom: -2rem;
   content: '';
   height: 2px;
@@ -57,34 +57,32 @@
 }
 
 .call-to-action-subtitle {
-  color: var(--color-nocturne);
+  color: $color-nocturne;
   font-size: 1.5rem;
   margin-bottom: 0;
   position: relative;
 }
 
 .call-to-action-content {
-  color: var(--color-nocturne);
+  color: $color-nocturne;
   font-size: 1.5rem;
 }
 
 .call-to-action-content a {
-  color: var(--color-nocturne);
+  color: $color-nocturne;
   display: inline-block;
   font-weight: 700;
   outline: 4px solid transparent;
   outline-offset: 4px;
-  transition:
-    color 400ms,
-    outline 400ms;
+  transition: color 400ms, outline 400ms;
 }
 
 .call-to-action-content a:hover {
-  color: var(--color-flame);
+  color: $color-flame;
   transition-duration: 0ms;
 }
 
 .call-to-action-content a:focus {
-  outline: 4px solid var(--color-water);
+  outline: 4px solid $color-water;
   transition-duration: 0ms;
 }

src/styles/footer.css → src/styles/footer.scss

@@ -1,6 +1,6 @@
 .footer {
   align-items: center;
-  background-color: var(--color-flame);
+  background-color: $color-flame;
   display: flex;
   min-height: 50vh;
   padding: 5rem 3rem;
@@ -31,16 +31,16 @@
 }
 
 .footer-profile-image {
-  background: linear-gradient(60deg, var(--color-water), var(--color-flame));
-  border: 0.35rem solid var(--color-lumos);
+  background: linear-gradient(60deg, $color-water, $color-flame);
+  border: 0.35rem solid $color-lumos;
   flex: 0 0 7rem;
   margin: 0 2rem auto 0;
   position: relative;
 }
 
 .footer-profile-image:before {
   animation: image-loader-spin linear 700ms infinite;
-  border: 4px solid var(--color-lumos);
+  border: 4px solid $color-lumos;
   border-top-color: hsla(0, 0%, 100%, 0.15);
   border-right-color: hsla(0, 0%, 100%, 0.15);
   border-radius: 50%;
@@ -98,31 +98,29 @@
 }
 
 .footer-profile-content {
-  color: var(--color-nocturne);
+  color: $color-nocturne;
   font-size: 1rem;
   font-weight: 400;
   margin-bottom: 0;
   max-width: 50rem;
 }
 
 .footer-profile-content a {
-  color: var(--color-nocturne);
+  color: $color-nocturne;
   font-weight: 700;
   outline: 4px solid transparent;
   outline-offset: 4px;
   position: relative;
-  transition:
-    color 400ms,
-    outline 400ms;
+  transition: color 400ms, outline 400ms;
 }
 
 .footer-profile-content a:hover {
-  color: var(--color-lumos);
+  color: $color-lumos;
   transition-duration: 0ms;
 }
 
 .footer-profile-content a:focus {
-  outline: 4px solid var(--color-lumos);
+  outline: 4px solid $color-lumos;
   transition-duration: 0ms;
   z-index: 1;
 }
@@ -143,7 +141,7 @@
 }
 
 .footer-link:focus {
-  outline: 4px solid var(--color-lumos);
+  outline: 4px solid $color-lumos;
   transition-duration: 0ms;
 }
 
@@ -153,15 +151,15 @@
 
 .footer-link .icon {
   display: block;
-  fill: var(--color-nocturne);
+  fill: $color-nocturne;
   margin: 0 auto 0.25rem;
   transition: fill 400ms;
   vertical-align: middle;
   width: 2rem;
 }
 
 .footer-link:hover .icon {
-  fill: var(--color-lumos);
+  fill: $color-lumos;
   transition-duration: 0ms;
 }
 
@@ -173,7 +171,7 @@
 }
 
 .footer-link-text {
-  color: var(--color-nocturne);
+  color: $color-nocturne;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1;
@@ -182,12 +180,12 @@
 }
 
 .footer-link:hover .footer-link-text {
-  color: var(--color-lumos);
+  color: $color-lumos;
   transition-duration: 0ms;
 }
 
 .footer-meta {
-  color: var(--color-nocturne);
+  color: $color-nocturne;
   flex-basis: 100%;
   font-size: 1rem;
   font-weight: 400;
@@ -197,31 +195,28 @@
 }
 
 .footer-meta a {
-  background-color: var(--color-nocturne);
+  background-color: $color-nocturne;
   border-radius: 0.25rem;
-  color: var(--color-flame);
+  color: $color-flame;
   display: inline-block;
-  font-family: var(--font-monospace);
+  font-family: $font-monospace;
   margin: 0 0.1rem;
   outline: 4px solid transparent;
   outline-offset: 4px;
   padding: 0.25rem 0.35rem;
   position: relative;
   text-decoration: none;
-  transition:
-    background-color 400ms,
-    color 400ms,
-    outline 400ms;
+  transition: background-color 400ms, color 400ms, outline 400ms;
 }
 
 .footer-meta a:hover {
-  background-color: var(--color-lumos);
-  color: var(--color-nocturne);
+  background-color: $color-lumos;
+  color: $color-nocturne;
   transition-duration: 0ms;
 }
 
 .footer-meta a:focus {
-  outline: 4px solid var(--color-lumos);
+  outline: 4px solid $color-lumos;
   transition-duration: 0ms;
   z-index: 1;
 }
@@ -230,4 +225,3 @@
   display: inline-block;
   margin: 0 0.25rem;
 }
-

src/styles/general.css → src/styles/general.scss

@@ -4,13 +4,13 @@
 
 html,
 body {
-  background-color: var(--color-flame);
+  background-color: $color-flame;
   min-height: 100vh;
 }
 
 html.mac-os,
 html.mac-os body {
-  background-color: var(--color-lumos);
+  background-color: $color-lumos;
 }
 
 html {
@@ -42,8 +42,8 @@ html {
 }
 
 body {
-  color: var(--color-cloud);
-  font-family: var(--font-sans-serif);
+  color: $color-cloud;
+  font-family: $font-sans-serif;
   font-weight: 400;
   line-height: 1.75;
 }

src/styles/header.css → src/styles/header.scss

@@ -1,6 +1,6 @@
 .header {
   align-items: center;
-  background-color: var(--color-lumos);
+  background-color: $color-lumos;
   display: flex;
   height: 60vh;
   min-height: 20rem;
@@ -18,13 +18,13 @@
 }
 
 .header .angle--top {
-  fill: var(--color-flame);
+  fill: $color-flame;
   top: -0.5px;
 }
 
 .header .angle--bot {
   bottom: -0.5px;
-  fill: var(--color-nocturne);
+  fill: $color-nocturne;
 }
 
 .header-title {
@@ -34,7 +34,7 @@
 
 .header-title .icon {
   display: block;
-  fill: var(--color-flame);
+  fill: $color-flame;
   margin-right: 2rem;
   width: 4rem;
 }
@@ -44,16 +44,16 @@
 }
 
 .header-title-text-top {
-  color: var(--color-nocturne);
-  font-family: var(--font-serif);
+  color: $color-nocturne;
+  font-family: $font-serif;
   font-size: 3.5rem;
   font-weight: 300;
   line-height: 1;
   margin-bottom: 1.25rem;
 }
 
 .header-title-text-bot {
-  color: var(--color-nocturne);
+  color: $color-nocturne;
   font-size: 1.5rem;
   line-height: 1;
   margin-bottom: 0;

src/styles/index.css → src/styles/index.scss

@@ -1,14 +1,14 @@
-@import './reset.css';
-@import './variables.css';
-@import './animations.css';
-@import './typography.css';
-@import './general.css';
-@import './header.css';
-@import './main.css';
-@import './project-grid.css';
-@import './call-to-action.css';
-@import './footer.css';
-@import './page-not-found.css';
+@import './reset';
+@import './variables';
+@import './animations';
+@import './typography';
+@import './general';
+@import './header';
+@import './main';
+@import './project-grid';
+@import './call-to-action';
+@import './footer';
+@import './page-not-found';
 
 .section {
   margin: 0 auto 9rem;
@@ -25,8 +25,8 @@
 }
 
 .section > h2 {
-  color: var(--color-lumos);
-  font-family: var(--font-serif);
+  color: $color-lumos;
+  font-family: $font-serif;
   font-size: 3rem;
   font-weight: 300;
   line-height: 1.5;
@@ -36,10 +36,10 @@
 }
 
 .section > h2:after {
-  color: var(--color-flame);
+  color: $color-flame;
   content: '//';
   display: none;
-  font-family: var(--font-sans-serif);
+  font-family: $font-sans-serif;
   font-weight: 900;
   letter-spacing: 0.04em;
   margin-right: 1rem;

src/styles/main.css → src/styles/main.scss

@@ -1,5 +1,5 @@
 .main {
-  background-color: var(--color-nocturne);
+  background-color: $color-nocturne;
   overflow: hidden;
   padding: 5rem 3rem;
   position: relative;