diff --git a/.stylelintrc b/.stylelintrc
index f537488..d329a86 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -5,6 +5,9 @@
   "syntax": "scss",
   "rules": {
       "indentation": 4,
-      "number-leading-zero": "never"
+      "number-leading-zero": "never",
+      "declaration-colon-space-after": "always-single-line",
+      "declaration-colon-newline-after": "always-multi-line",
+      "value-list-comma-newline-after": "always-multi-line"
   }
 }
diff --git a/src/components/atoms/ProjectImage.scss b/src/components/atoms/ProjectImage.scss
index 8dbf9cf..a987897 100644
--- a/src/components/atoms/ProjectImage.scss
+++ b/src/components/atoms/ProjectImage.scss
@@ -5,13 +5,21 @@
     margin-left: auto;
     margin-right: auto;
     display: block;
-    box-shadow: 0 3px 5px rgba($brand-main, .15), 0 5px 16px rgba($brand-main, .15);
+    box-shadow:
+        0 3px 5px rgba($brand-main, .15),
+        0 5px 16px rgba($brand-main, .15);
 
     @media (min-width: $projectImageMaxWidth) {
         max-width: $projectImageMaxWidth;
         border-radius: .25rem;
         overflow: hidden;
     }
+
+    .dark & {
+        box-shadow:
+            0 3px 5px rgba(darken($brand-main, 20%), .15),
+            0 5px 16px rgba(darken($brand-main, 20%), .15);
+    }
 }
 
 .project__image {
diff --git a/src/components/molecules/ProjectLinks.scss b/src/components/molecules/ProjectLinks.scss
index 11b00f4..e939dfc 100644
--- a/src/components/molecules/ProjectLinks.scss
+++ b/src/components/molecules/ProjectLinks.scss
@@ -40,7 +40,9 @@
         &:hover,
         &:focus {
             transform: translate3d(0, -.1rem, 0);
-            box-shadow: 0 6px 10px rgba($brand-main, .1), 0 10px 25px rgba($brand-main, .1);
+            box-shadow:
+                0 6px 10px rgba($brand-main, .1),
+                0 10px 25px rgba($brand-main, .1);
         }
 
         &:active {
diff --git a/src/components/molecules/ProjectNav.scss b/src/components/molecules/ProjectNav.scss
index 54ad5a9..0594f7d 100644
--- a/src/components/molecules/ProjectNav.scss
+++ b/src/components/molecules/ProjectNav.scss
@@ -11,7 +11,15 @@ $breakpoint-project-nav: 45rem;
 
 .project__nav__image {
     margin: 0;
-    box-shadow: 0 3px 5px rgba($brand-main, .15), 0 5px 16px rgba($brand-main, .15);
+    box-shadow:
+        0 3px 5px rgba($brand-main, .15),
+        0 5px 16px rgba($brand-main, .15);
+
+    .dark & {
+        box-shadow:
+            0 3px 5px rgba(darken($brand-main, 20%), .15),
+            0 5px 16px rgba(darken($brand-main, 20%), .15);
+    }
 }
 
 .project__nav__item {
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 29b45ac..dff9670 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,19 +1,18 @@
-$typekit:               'dtg3zui';
-$projectImageMaxWidth:  1200px;
-$easing:                cubic-bezier(.75, 0, .08, 1);
+$typekit: 'dtg3zui';
+$projectImageMaxWidth: 1200px;
+$easing: cubic-bezier(.75, 0, .08, 1);
 
 // Colors
 /////////////////////////////////////
 
-$brand-main:			#015565;
-$brand-cyan:            #43a699;
-$brand-main-light:      #88bec8;
-$brand-light:           #e7eef4;
-
-$brand-grey:			#6b7f88;
-$brand-grey-light:		lighten($brand-grey, 15%);
-$brand-grey-dimmed:     lighten($brand-grey, 50%);
+$brand-main: #015565;
+$brand-cyan: #43a699;
+$brand-main-light: #88bec8;
+$brand-light: #e7eef4;
 
+$brand-grey: #6b7f88;
+$brand-grey-light: lighten($brand-grey, 15%);
+$brand-grey-dimmed: lighten($brand-grey, 50%);
 
 // Backgrounds
 /////////////////////////////////////
@@ -21,52 +20,51 @@ $brand-grey-dimmed:     lighten($brand-grey, 50%);
 $body-background-color: $brand-light;
 $body-background-color--dark: darken($brand-grey, 30%);
 
-
 // Text Colors
 /////////////////////////////////////
 
-$text-color:            $brand-grey;
-$text-color-light:      $brand-grey-light;
+$text-color: $brand-grey;
+$text-color-light: $brand-grey-light;
 
-$text-color--dark:      $brand-grey-light;
+$text-color--dark: $brand-grey-light;
 $text-color-light--dark: $brand-grey;
 
-
 // Typography
 /////////////////////////////////////
 
-$font-size-root             : 18px;
+$font-size-root: 18px;
 
-$font-size-base             : 1rem;
-$font-size-large            : 1.2rem;
-$font-size-small            : .8rem;
-$font-size-mini             : .7rem;
+$font-size-base: 1rem;
+$font-size-large: 1.2rem;
+$font-size-small: .8rem;
+$font-size-mini: .7rem;
 
-$font-size-h1               : 2.5rem;
-$font-size-h2               : 2rem;
-$font-size-h3               : 1.75rem;
-$font-size-h4               : $font-size-large;
-$font-size-h5               : $font-size-base;
-$font-size-h6               : $font-size-small;
+$font-size-h1: 2.5rem;
+$font-size-h2: 2rem;
+$font-size-h3: 1.75rem;
+$font-size-h4: $font-size-large;
+$font-size-h5: $font-size-base;
+$font-size-h6: $font-size-small;
 
-$line-height                : 1.5;
-$line-height-small          : 1.1428571429;
+$line-height: 1.5;
+$line-height-small: 1.1428571429;
 
-$font-family-base           : 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$font-weight-base           : 400;
-$font-color-base            : $text-color;
+$font-family-base: 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue',
+    Helvetica, Arial, sans-serif;
+$font-weight-base: 400;
+$font-color-base: $text-color;
 
-$font-family-monospace      : Menlo, Monaco, Consolas, 'Courier New', monospace;
+$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
 
-$font-family-headings       : 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',Helvetica,Arial,sans-serif;
-$font-weight-headings       : 400;
-$line-height-headings       : 1.1;
+$font-family-headings: 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',
+    Helvetica, Arial, sans-serif;
+$font-weight-headings: 400;
+$line-height-headings: 1.1;
 
-$color-headings:            $brand-main;
-$color-headings--dark:      $brand-main-light;
+$color-headings: $brand-main;
+$color-headings--dark: $brand-main-light;
 
 // Components spacing
 /////////////////////////////////////
 
-$spacer:                    ($font-size-base * $line-height);
-
+$spacer: ($font-size-base * $line-height);