chore: migrate to dart sass

.github/workflows/build.yml

@@ -44,7 +44,7 @@ jobs:
       - name: Validate URLs
         # Only run this if these files were edited
         if: contains(steps.files.outputs.added_modified, 'app/data/*.json')
-        uses: urlstechie/urlchecker-action@0.2.1
+        uses: urlstechie/urlchecker-action@0.0.33
         with:
           # Only validate the files that were changed
           include_files: ${{ steps.files.outputs.added_modified }}

.github/workflows/pages.yml

@@ -0,0 +1,56 @@
+name: Deploy GH Pages
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - dev
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Build site and deploy to GHPages
+    steps:
+      - name: Install node 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          cache: npm
+
+      - run: npm ci
+      - run: npm install babel-cli
+      - run: mkdir -p dist
+      - run: npm run babel
+      - run: npm run build
+      # Be sure that all provided URLs are valid
+      - run: set -e && for url in $(jq .[].projectWebsite app/data/projects.json | tr -d \"); do if [ "$url" != "null" ]; then echo "${url}"; curl "${url}" -o /dev/null --fail -L; fi; done
+      - run: set -e && for url in $(jq .[].projectRepository app/data/projects.json | tr -d \"); do if [ "$url" != "null" ]; then echo "${url}"; curl "${url}" -o /dev/null --fail -L; fi; done
+
+      # Automatically uploads an artifact from the './_site' directory by default
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: dist
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

app/components/bandheader/bandheader.scss

@@ -1,4 +1,4 @@
-@import "../../public/styles/global";
+@use "../../public/styles/global";
 
 .band-header {
   &-title {

app/components/card/card.scss

@@ -1,4 +1,5 @@
-@import "../../public/styles/global";
+@use "../../public/styles/global";
+@use "../../public/styles/variables/colors";
 
 .card {
     &--component {
@@ -47,10 +48,10 @@
             }
         }
         [data-layout="3-up"] &-content:last-child {
-            border-left: 2px solid $iron;
+            border-left: 2px solid colors.$iron;
         }
         [data-layout="3-up"] &-content:nth-child(2) {
-            border-left: 2px solid $iron;
+            border-left: 2px solid colors.$iron;
         }
         &-link {
             @extend %subtle-link;

app/components/dynamictable/dynamictable.scss

@@ -1,4 +1,8 @@
-@import '../../public/styles/global';
+@use '../../public/styles/global';
+@use "../../public/styles/mixins/global" as global2;
+@use "../../public/styles/variables/base";
+@use "../../public/styles/variables/breakpoints";
+@use "../../public/styles/variables/colors";
 
 .table {
     &--component {
@@ -11,7 +15,7 @@
         display: grid;
         grid-template-columns: 1fr;
         grid-gap: 10px;
-        @media screen and (min-width: $breakpoint-sm-min) {
+        @media screen and (min-width: breakpoints.$breakpoint-sm-min) {
             grid-auto-rows: 1fr;
             grid-gap: 30px;
             grid-template-columns: 8fr 4fr;
@@ -25,21 +29,21 @@
         grid-template-columns: 7fr 1fr;
 
         &-input {
-            @include make-input();
+            @include global2.make-input();
         }
 
         &-button {
-            @include make-button($btn-color: $brand-primary);
+            @include global2.make-button($btn-color: colors.$brand-primary);
 
-          @media all and (max-width: $breakpoint-sm-max) {
+          @media all and (max-width: breakpoints.$breakpoint-sm-max) {
             padding-left: 20px;
             padding-right: 20px;
           }
         }
     }
 
     &-dropdown {
-        font-family: $base-font-family;
+        font-family: base.$base-font-family;
         align-items: center;
         display: grid;
         grid-auto-rows: 1fr;
@@ -52,15 +56,15 @@
         }
 
         &-select {
-            background-color: $white;
-            color: $stone;
+            background-color: colors.$white;
+            color: colors.$stone;
             height: 100%;
             -webkit-appearance: none;
             border-radius: 0;
             padding: 5px 30px 5px 10px;
 
             + i {
-                color: $stone;
+                color: colors.$stone;
                 position: absolute;
                 top: calc(50% - .55em);
                 right: 10px;
@@ -77,18 +81,18 @@
       width: 100%;
       table-layout: fixed;
 
-      @media all and (max-width: $breakpoint-sm-max) {
+      @media all and (max-width: breakpoints.$breakpoint-sm-max) {
         table-layout: fixed;
       }
 
       thead {
-        @media screen and (max-width: $breakpoint-xs-max) {
+        @media screen and (max-width: breakpoints.$breakpoint-xs-max) {
           display: none;
         }
       }
 
       thead tr {
-        background-color: $iron;
+        background-color: colors.$iron;
       }
 
       th {
@@ -105,23 +109,23 @@
       }
 
       tbody tr:nth-child(even) {
-        background-color: $mercury;
+        background-color: colors.$mercury;
       }
 
       tbody tr:nth-child(odd) {
-        background-color: $white;
+        background-color: colors.$white;
       }
 
       td {
         @extend %table-row;
         padding: 10px;
         overflow: hidden;
         text-overflow: ellipsis;
-        @media screen and (max-width: $breakpoint-xs-max) {
+        @media screen and (max-width: breakpoints.$breakpoint-xs-max) {
           display: block;
         }
         &:first-child {
-          @media screen and (max-width: $breakpoint-xs-max) {
+          @media screen and (max-width: breakpoints.$breakpoint-xs-max) {
             font-weight: 600;
           }
         }

app/components/group/group.scss

@@ -1,4 +1,4 @@
-@import "../../public/styles/global";
+@use "../../public/styles/global";
 
 .group {
   &-container {

app/components/hero/hero.scss

@@ -1,10 +1,11 @@
-@import "../../public/styles/global";
+@use "../../public/styles/global";
+@use "../../public/styles/variables/colors";
 
 .hero {
     &--component {
         @extend %default--band;
         align-items: center;
-        background-color: $gallery;
+        background-color: colors.$gallery;
         background-image: url("../../public/img/hero.png");
         background-position: center center;
         background-repeat: no-repeat;

app/components/navigation/navigation.scss

@@ -1,4 +1,5 @@
-@import "../../public/styles/global";
+@use "../../public/styles/global";
+@use "../../public/styles/variables/breakpoints";
 
 .navigation {
     &--component {
@@ -45,7 +46,7 @@
         @extend %logo-link;
         max-height: 2em;
 
-        @media screen and (min-width: $breakpoint-lg-min) {
+        @media screen and (min-width: breakpoints.$breakpoint-lg-min) {
             max-height: 3em;
         }
     }

app/components/universalfooter/universalfooter.scss

@@ -1,17 +1,19 @@
-@import "../../public/styles/global";
+@use "../../public/styles/global";
+@use "../../public/styles/variables/breakpoints";
+@use "../../public/styles/variables/colors";
 
 .footer {
   &--component {
     @extend %default--band;
-    background-color: $rich-black;
+    background-color: colors.$rich-black;
   }
   &-container {
     @extend %default-container;
     display: grid;
     grid-template-columns: 3fr 2fr;
     grid-gap: 10px;
 
-    @media screen and (min-width: $breakpoint-sm-min) {
+    @media screen and (min-width: breakpoints.$breakpoint-sm-min) {
         align-items: center;
         grid-auto-rows: 1fr;
         grid-gap: 30px;
@@ -22,13 +24,13 @@
     img {
       @extend %logo-link-dark;
       height: 34px;
-      @media screen and (min-width: $breakpoint-sm-min) {
+      @media screen and (min-width: breakpoints.$breakpoint-sm-min) {
         height: 44px;
         min-width: 138px;
       }
     }
     &:last-child {
-      @media screen and (max-width: $breakpoint-xs-max) {
+      @media screen and (max-width: breakpoints.$breakpoint-xs-max) {
         display: flex;
         justify-content: flex-end;
       }
@@ -44,7 +46,7 @@
   }
   &-links {
     > *:not(:last-child) {
-      border-right: 1px solid $stone;
+      border-right: 1px solid colors.$stone;
     }
   }
   &-link {

app/pages/main/main.scss

@@ -1,4 +1,4 @@
-@import "../../public/styles/global";
+@use "../../public/styles/global";
 
 .band {