src/scss/app.scss

@@ -1,11 +1,9 @@
-@use "sass:color";
-@import "colors";
 @import "markdown";
 @import "blog";
 
 html, body {
-  background: $background;
-  color: $foreground;
+  background: #121212;
+  color: #f5f5f5;
   font-size: 16px;
 }
 
@@ -15,18 +13,8 @@ html, body {
   }
 }
 
-.keystroke {
-  background: color.adjust($foreground, $lightness: -20%);
-  color: $background;
-  border-radius: 2px;
-  border: color.adjust($foreground, $lightness: -30%);
-  box-shadow: #2b2b2b 2px 2px;
-  font-size: 12px;
-  padding: 2px 4px;
-}
-
 .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem $ui-foreground, 0 0 0 0.25rem #258cfb;
+  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
 }
 
 html {
@@ -47,11 +35,11 @@ main.container {
 a {
   &:link, &:visited, &:hover, &:active {
     text-decoration: none;
-    color: $link-text;
+    color: #03A9F4;
   }
 
   &:hover {
-    color: $link-hover;
+    color: #ffffff;
   }
 }
 
@@ -59,19 +47,19 @@ a {
   a {
     &:link, &:visited, &:hover, &:active {
       text-decoration: none;
-      color: $ui-foreground;
+      color: white;
 
       * {
         font-family: 'Roboto Mono', monospace;
         text-decoration: none;
-        color: $ui-foreground;
+        color: white;
       }
     }
   }
 }
 
 hr.page-separator {
-  border-top: 5px dashed $ui-foreground;
+  border-top: 5px dashed #ffffff;
   opacity: 1;
   margin: 50px 0;
 }
@@ -98,7 +86,7 @@ ul.contact-reasons {
     a {
       &:link, &:visited, &:hover, &:active {
         text-decoration: none;
-        color: $ui-foreground;
+        color: white;
       }
 
       &:hover {
@@ -110,10 +98,10 @@ ul.contact-reasons {
 
 .card {
   background: #212121;
-  color: $ui-foreground;
+  color: #ffffff;
 
   a.btn, button {
-    color: $ui-foreground;
+    color: #ffffff;
   }
 }
 
@@ -140,7 +128,7 @@ nav {
 
         &:link, &:visited, &:hover, &:active {
           text-decoration: none;
-          color: $ui-foreground;
+          color: white;
         }
 
         &:hover {
@@ -156,7 +144,7 @@ nav {
 }
 
 article {
-  background: $content-background;
+  background: #333333;
   padding: 20px;
   border-radius: 5px;
 
@@ -165,7 +153,7 @@ article {
   }
 
   blockquote {
-    border-left: 2px solid $blockquote;
+    border-left: 2px solid #f03;
     padding-left: 10px;
   }
 
@@ -185,7 +173,7 @@ article {
 
   abbr {
     text-decoration: none;
-    border-bottom: 1px dotted $link-hover;
+    border-bottom: 1px dotted #ffffff;
   }
 
   span.timestamp {
@@ -197,7 +185,7 @@ article {
 
 .project-card {
   position: relative;
-  background: $project-background;
+  background: #000;
   box-shadow: 0 0 15px rgba(0, 0, 0, .1);
 
   &:hover {
@@ -225,7 +213,7 @@ article {
 
     a {
       &:link, &:visited, &:hover &:active {
-        color: $ui-foreground;
+        color: #fff;
       }
     }
 
@@ -237,7 +225,7 @@ article {
       width: 100%;
       margin: -34px 0 0;
       padding: 5px;
-      background-color: rgba($project-background, 50%);
+      background-color: rgba(#000, 50%);
     }
   }
 }
@@ -426,7 +414,7 @@ td.trim-p p:last-child {
   }
 
   &:hover {
-    color: $accent;
+    color: #03A9F4;
     background-color: #1E1E1E !important;
   }
 }

src/scss/colors.scss

@@ -1,12 +0,0 @@
-@use "sass:color";
-
-$background: #121212;
-$foreground: #f5f5f5;
-$accent: #03a9f4;
-$ui-foreground: #ffffff;
-$content-background: #333333;
-$blockquote: #ff0033;
-$project-background: #000000;
-
-$link-text: $accent;
-$link-hover: lighten($link-text, 50%);