Finished dark mode! This means re-doing all sass variables in the

variables.scss file and defining css variables in :root and alterting
them based on prefered color scheme. This gives us a mechanism to set
custom color schemes for the entire site from one place and changing
between them just by setting a class to the body element. This is done
by overwriting the css variables and then our scss variables use these
changes and apply them downward. This seems like a really nice setup for
the switching between- and adding color schemes.
Also did a lot of cleanup of unused, duplicate or errors styling
throughout the application.

src/components/LandingBanner.vue

@@ -43,7 +43,7 @@ header {
   background-repeat: no-repeat;
   background-position: 50% 50%;
   position: relative;
-  background-color: $c-dark;
+
   @include tablet-min {
     height: 284px;
   }
@@ -54,7 +54,7 @@ header {
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba($c-light, 0.7);
+    background: $background-70;
   }
   
   .container {
@@ -67,7 +67,7 @@ header {
     font-size: 22px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: $c-dark;
+    color: $text-color;
     margin: 0;
     @include tablet-min{
       font-size: 28px;
@@ -78,35 +78,11 @@ header {
     display: block;
     font-size: 14px;
     font-weight: 300;
-    color: $c-dark;
+    color: $text-color-70;
     margin: 5px 0;
     @include tablet-min{
       font-size: 16px;
     }
   }
-
-  .link {
-    text-decoration: none;
-    color: $c-dark;
-    font-size: 13px;
-    font-weight: 300;
-    opacity: 0.7;
-    transition: opacity 0.5s ease;
-    &:hover {
-      opacity: 1;
-    }
-    span {
-      display: inline-block;
-      vertical-align: middle;
-    }
-    &-icon {
-      display: inline-block;
-      vertical-align: middle;
-      margin-right: 2px;
-      width: 16px;
-      height: 15px;
-      fill: $c-dark;
-    }
-  }
 }
 </style>