Merge pull request #36 from ethmarks/custom-properties

Phase out SCSS

Author: ethmarks

assets/css/404.scss

@@ -1,7 +1,7 @@
-@import 'base/constants';
-
-$font-404: "Kenia", monospace;
-$font-size-404: clamp(5rem, 60vw, 20rem);
+:root {
+    --font-404: "Kenia", monospace;
+    --font-size-404: clamp(5rem, 60vw, 20rem);
+}
 
 body {
     margin: 0;
@@ -30,17 +30,17 @@ main {
 }
 
 h1 {
-    font-family: $font-404;
-    font-size: $font-size-404;
+    font-family: var(--font-404);
+    font-size: var(--font-size-404);
     font-weight: 1;
     line-height: 1em;
-    color: $color-text;
+    color: var(--color-text);
     margin: 0;
 }
 
 p {
-    font-family: $font-monospace;
-    font-size: $font-size-h2;
+    font-family: var(--font-monospace);
+    font-size: var(--font-size-h2);
     margin: 0;
 }
 

assets/css/about.scss

@@ -1,9 +1,6 @@
-@import 'base/mixins';
-@import 'base/constants';
-@import 'base/media';
-@import 'components/table';
-@import 'components/external-link';
-
+@import "base/media";
+@import "components/table";
+@import "components/external-link";
 
 h2 {
     margin: 0;
@@ -12,7 +9,7 @@ h2 {
 
 main {
     overflow: hidden;
-    @include notMobile {
+    @media (min-width: 768px) {
         --main-margin-sides: 5vw;
     }
 }
@@ -38,7 +35,7 @@ section > div {
     align-items: center;
 }
 
-@include mobile {
+@media (max-width: 768px) {
     section {
         display: block;
         align-items: normal;

assets/css/base/_animations.scss

@@ -1,12 +1,78 @@
-:root {
-    --child-animation-delay: 0s;
-}
-
 .staggered {
-    @for $i from 1 through 25 {
-        &:nth-child(#{$i}) {
-            --child-animation-delay: #{$i * 0.05}s;
-        }
+    &:nth-child(1) {
+        --child-animation-delay: 0.05s;
+    }
+    &:nth-child(2) {
+        --child-animation-delay: 0.1s;
+    }
+    &:nth-child(3) {
+        --child-animation-delay: 0.15s;
+    }
+    &:nth-child(4) {
+        --child-animation-delay: 0.2s;
+    }
+    &:nth-child(5) {
+        --child-animation-delay: 0.25s;
+    }
+    &:nth-child(6) {
+        --child-animation-delay: 0.3s;
+    }
+    &:nth-child(7) {
+        --child-animation-delay: 0.35s;
+    }
+    &:nth-child(8) {
+        --child-animation-delay: 0.4s;
+    }
+    &:nth-child(9) {
+        --child-animation-delay: 0.45s;
+    }
+    &:nth-child(10) {
+        --child-animation-delay: 0.5s;
+    }
+    &:nth-child(11) {
+        --child-animation-delay: 0.55s;
+    }
+    &:nth-child(12) {
+        --child-animation-delay: 0.6s;
+    }
+    &:nth-child(13) {
+        --child-animation-delay: 0.65s;
+    }
+    &:nth-child(14) {
+        --child-animation-delay: 0.7s;
+    }
+    &:nth-child(15) {
+        --child-animation-delay: 0.75s;
+    }
+    &:nth-child(16) {
+        --child-animation-delay: 0.8s;
+    }
+    &:nth-child(17) {
+        --child-animation-delay: 0.85s;
+    }
+    &:nth-child(18) {
+        --child-animation-delay: 0.9s;
+    }
+    &:nth-child(19) {
+        --child-animation-delay: 0.95s;
+    }
+    &:nth-child(20) {
+        --child-animation-delay: 1s;
+    }
+    &:nth-child(21) {
+        --child-animation-delay: 1.05s;
+    }
+    &:nth-child(22) {
+        --child-animation-delay: 1.1s;
+    }
+    &:nth-child(23) {
+        --child-animation-delay: 1.15s;
+    }
+    &:nth-child(24) {
+        --child-animation-delay: 1.2s;
+    }
+    &:nth-child(25) {
+        --child-animation-delay: 1.25s;
     }
 }