Dark Mode (#168)

* Implement toggle button

* Dark mode mixins

* Dark mode color design

* Disable dark mode for prints

* Initial dark mode design

* Fix light mode mixin

* Disable dark mode on print style

* Move dark mode color scheme below the default style to allow referencing

* Fix dropdown

* Fix device-based dark mode

* Dark mode index page design

* Responsive auxiliary nav with dark mode toggle

* Remove box shadow when on smaller displays

* Prevent default on toggle click

* Move attribution/licensing to README.md

* Fix header padding on index page

* Background color transition animation

* Remove margin on index when on mobile displays

* Remove neon border when on mobile

* Fix post-header margin on mobile

* Lighten card headers in dark mode

scss/_tweet.scss

@@ -8,6 +8,10 @@
   $borderRadius: .35em;
   $avatarSize: 36px;
 
+  $borderColorDark: $trans-blue-dark;
+  $textLightDark: #697882;
+  $textDarkDark: #b4d0dd;
+
   font-size: 12px;
   body.post & {
     font-size: 15px;
@@ -22,6 +26,15 @@
   overflow-x: hidden;
   overflow-y: auto;
 
+  @include dark-mode {
+    background-color: $content-bg-dark;
+    border-color: $borderColorDark;
+
+    &:not(.grid-row) {
+      box-shadow: 0 0 5px 2px rgba($trans-blue, 0.5);
+    }
+  }
+
   page-break-inside: avoid;
 
   @include media-breakpoint-up(md) {
@@ -47,6 +60,10 @@
     border-top: 1px solid $borderColor;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
+
+    @include dark-mode {
+      border-top: 1px solid $borderColorDark;
+    }
   }
 
   .tweet-item:first-child .tweet-logo { display: block; }
@@ -69,6 +86,10 @@
     margin-bottom: 1em;
     line-height: 1;
 
+    @include dark-mode {
+      color: $textDarkDark;
+    }
+
     &:hover {
       color: $textHover;
     }
@@ -348,6 +369,10 @@
     .tweet-item {
       border-top: none;
       padding: 0;
+
+      @include dark-mode {
+        border-top: none;
+      }
     }
 
     .tweet-item + .tweet-item {
@@ -383,6 +408,13 @@
     border: none;
     max-height: unset;
 
+    @include dark-mode {
+      // Box shadow hackery
+      margin-left: -1em;
+      margin-right: -1em;
+      padding: 1em;
+    }
+
     .tweet-item {
       background-color: white;
       border: 1px solid $borderColor;
@@ -391,6 +423,12 @@
       border-top-left-radius: $borderRadius;
       border-top-right-radius: $borderRadius;
 
+      @include dark-mode {
+        background-color: $content-bg-dark;
+        border: 1px solid $borderColorDark;
+        box-shadow: 0 0 5px 2px rgba($trans-blue, 0.5);
+      }
+
       .tweet-logo { display: block; }
 
       .tweet-text {
@@ -416,6 +454,11 @@
       flex-direction: column;
       margin: -1px;
 
+      @include dark-mode {
+        background-color: $content-bg-dark;
+        
+      }
+
       .tweet-logo { display: block; }
 
       .tweet-text {