dartcss

assets/sass/_global.scss

@@ -1,9 +1,9 @@
 @use "./utils/variables";
 
 body {
-  font-family: $fontParagraph;
-  color: $white;
-  background-color: $backgroundDark;
+  font-family: v.$fontParagraph;
+  color: v.$white;
+  background-color: v.$backgroundDark;
   margin: 0;
   display: flex;
   flex-direction: column;
@@ -13,26 +13,26 @@ body {
 }
 
 a {
-  color: $orange;
+  color: v.$orange;
 }
 
 pre code {
-  font-family: $fontCode;
+  font-family: v.$fontCode;
   font-size: 75%;
   display: block;
-  background: $backgroundDarker;
+  background: v.$backgroundDarker;
   padding: 10px;
   overflow: auto;
 }
 
 code {
-  font-family: $fontCode;
+  font-family: v.$fontCode;
   font-size: 75%;
 }
 
 @for $i from 1 through 6 {
   h#{$i} {
-    font-family: $fontHeader;
+    font-family: v.$fontHeader;
   }
 }
 

assets/sass/components/_footer.scss

@@ -3,9 +3,9 @@
 .footer {
   padding: 15px;
   text-align: center;
-  background-color: $backgroundDarker;
+  background-color: v.$backgroundDarker;
 }
 
 .footerLink {
-  color: $orange;
+  color: v.$orange;
 }

assets/sass/components/_header.scss

@@ -1,20 +1,20 @@
 @use "../utils/variables";
 
 .header {
-  font-family: $fontHeader;
+  font-family: v.$fontHeader;
   font-size: 1.1rem;
   padding: 0 20px;
   height: 60px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: $width;
+  width: v.$width;
 }
 
 .headerWrapper {
   overflow: auto;
   box-sizing: border-box;
-  background-color: $backgroundDarker;
+  background-color: v.$backgroundDarker;
   display: flex;
   justify-content: center;
   flex-shrink: 0;
@@ -29,10 +29,10 @@
       display: inline;
       margin: 5px;
       a {
-        color: $white;
+        color: v.$white;
       }
       a:hover {
-      color: $link_hover_color;
+      color: v.$link_hover_color;
       }
     }
   }
@@ -41,10 +41,10 @@
   font-size: 1.1rem;
 }
 .terminal a{
-  color: $white;
+  color: v.$white;
   text-decoration: none;
 }
 .terminal a:hover {
-  color: $h1_header_color;
+  color: v.$h1_header_color;
 }
 

assets/sass/components/_post.scss

@@ -2,13 +2,13 @@
 
 .postDate {
   float: right;
-  color: $white;
+  color: v.$white;
 }
 
 .postTitle {
-  color: $orange;
+  color: v.$orange;
   text-transform: capitalize;
-  font-family: $fontHeader;
+  font-family: v.$fontHeader;
   font-size: 1.25rem;
   margin: 0;
 }
@@ -27,14 +27,14 @@
 
 .postListItem {
   padding: 20px;
-  background-color: $backgroundDarker;
+  background-color: v.$backgroundDarker;
   margin-bottom: 20px;
 }
 
 .postExcerpt {
   text-align: initial;
   text-decoration: none;
-  color: $white;
+  color: v.$white;
 }
 
 .headerContainer {
@@ -47,5 +47,5 @@
 }
 
 a:hover {
-  color: $link_hover_color;
+  color: v.$link_hover_color;
 };

assets/sass/pages/_baseof.scss

@@ -30,6 +30,6 @@
   padding: 20px;
 
   @media only screen and (min-width: $breakLarge) {
-    width: $width;
+    width: v.$width;
   }
 }

assets/sass/pages/_single.scss

@@ -7,9 +7,9 @@
 }
 
 .postMetadata {
-    font-family: $fontCode;
+    font-family: v.$fontCode;
     display: block;
-    background: $backgroundDarker;
+    background: v.$backgroundDarker;
     padding: 10px;
 }