sass deprecation fixes

src/style.scss

@@ -1,5 +1,6 @@
-@import "material-icons/iconfont/material-icons.css";
-@import "@materializecss/materialize/sass/materialize.scss";
+@use "@materializecss/materialize/sass/variables.scss";
+@use "material-icons/iconfont/material-icons.css";
+@use "@materializecss/materialize/sass/materialize.scss";
 
 body {
   line-height: 1.25;
@@ -36,7 +37,7 @@ main,
 footer {
   padding-left: 300px;
 }
-@media #{$medium-and-down} {
+@media #{variables.$medium-and-down} {
   header,
   main,
   footer {
@@ -64,7 +65,7 @@ footer {
 }
 
 //--------------
-@media #{$small-and-down} {
+@media #{variables.$small-and-down} {
   a.sidenav-trigger.top-nav {
     left: 0;
   }
@@ -73,7 +74,7 @@ footer {
   }
 }
 
-@media #{$medium-and-down} {
+@media #{variables.$medium-and-down} {
   nav .nav-wrapper {
     text-align: center;
     a.page-title {
@@ -82,7 +83,7 @@ footer {
   }
 }
 
-@media #{$medium-and-up} {
+@media #{variables.$medium-and-up} {
   main > .container,
   body > .page-footer > .container,
   .top-nav > .container,
@@ -106,7 +107,7 @@ footer {
     margin-top: 16px;
   }
 }
-@media #{$medium-and-down} {
+@media #{variables.$medium-and-down} {
   #index-banner {
     h1 {
       margin-top: 1rem;
@@ -116,7 +117,7 @@ footer {
     }
   }
 }
-@media #{$small-and-down} {
+@media #{variables.$small-and-down} {
   #index-banner {
     h4 {
       margin-bottom: 0;
@@ -126,7 +127,7 @@ footer {
 //--------------
 
 /*
-@media #{$medium-and-down} {
+@media #{variables.$medium-and-down} {
   header,
   main,
   footer {
@@ -314,14 +315,7 @@ ul.table-of-contents {
   margin: 0;
   top: 65px;
   left: 340px;
-  @media #{$medium-and-down} {
-    top: 65px;
-    left: 100px;
-  }
-  @media #{$small-and-down} {
-    top: 160px;
-    left: 35px;
-  }
+
   z-index: 9999;
   background-color: var(--md-sys-color-surface);
   a {
@@ -338,6 +332,14 @@ ul.table-of-contents {
     white-space: nowrap;
     display: block;
   }
+  @media #{variables.$medium-and-down} {
+    top: 65px;
+    left: 100px;
+  }
+  @media #{variables.$small-and-down} {
+    top: 160px;
+    left: 35px;
+  }
 }
 
 // Thanks for Downloading
@@ -350,91 +352,3 @@ ul.table-of-contents {
   opacity: 0;
   max-height: 0;
 }
-
-/*
-//About page styling
-.image-container {
-  width: 100%;
-  img {
-    max-width: 100%;
-  }
-}
-
-// Mobile page styling
-.mobile-image {
-  @media #{$small-and-down} {
-    max-width: 100%;
-  }
-}
-
-// Card Page styling
-.card-panel span,
-.card-content p {
-  -webkit-font-smoothing: antialiased;
-}
-
-#images .card-panel .row {
-  margin-bottom: 0;
-}
-
-// Pushpin Demo styles
-.pushpin-demo {
-  position: relative;
-  height: 100px;
-}
-
-#pushpin-demo-1 {
-  display: block;
-  height: inherit;
-  background-color: var(--md-sys-color-shadow-light);
-}
-
-// Valign Demo
-.valign-demo {
-  height: 400px;
-  border: 1px solid var(--md-sys-color-secondary);
-}
-
-.talign-demo {
-  height: 100px;
-  border: 1px solid var(--md-sys-color-secondary);
-}
-
-// Transitions demos
-#staggered-test li,
-#image-test {
-  opacity: 0;
-}
-
-// For GitHub and OpenCollective
-.ext-link > img {
-  vertical-align: middle;
-  height: 24px;
-}
-
-#nav-mobile {
-  li .new.badge {
-    background-color: var(--md-sys-color-secondary);
-    color: var(--md-sys-color-on-secondary);
-  }
-}
-
-#palette-selector {
-  width: 420px;
-  .modal-content {
-    display: grid;
-    grid-auto-rows: 80px 60px 40px;
-    align-items: start;
-  }
-  .color-row {
-    display: grid;
-    grid-template-columns: 120px 60px;
-    justify-items: left;
-    align-items: center;
-    label {
-      margin-left: 20px;
-    }
-  }
-}
-
-*/