add dark mode support

.gitignore

@@ -4,4 +4,4 @@ _site
 .ruby-version
 node_modules
 .jekyll-cache/
-.jekyll-cache/*
+.jekyll-cache/*

README.md

@@ -20,6 +20,7 @@ If you really enjoy Long Haul and want to give me credit somewhere on the intern
 - Stylish Drop Cap on posts
 - A Better Type Scale for all devices
 - Comments powered by Disqus
+- [Dark Mode support](https://github.com/brianmaierjr/long-haul/blob/gh-pages/preview-dark.png) via [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 
 
 ## Setup
 

_layouts/post.html

@@ -15,14 +15,14 @@ <h1 class="postTitle">{{ page.title }}</h1>
   <!-- POST NAVIGATION -->
   <div class="postNav clearfix">
     {%- if page.previous.url -%} 
-      <a class="prev{%- if page.previous.image -%} image{%- endif -%}" href="{{ page.previous.url | prepend: site.baseurl }}"><span>&laquo;&nbsp;{{ page.previous.title }}</span>
+      <a class="prev{% if page.previous.image %} image{% endif %}" href="{{ page.previous.url | prepend: site.baseurl }}"><span>&laquo;&nbsp;{{ page.previous.title }}</span>
       {%- if page.previous.image -%} 
         <img src="{{ '/assets/img/' | prepend: site.baseurl | append: page.previous.image }}" alt="">
       {%- endif -%}
     </a>
     {%- endif -%}  
     {%- if page.next.url -%}  
-      <a class="next{%- if page.next.image -%} image{%- endif -%}" href="{{ page.next.url | prepend: site.baseurl }}"><span>{{ page.next.title }}&nbsp;&raquo;</span>
+      <a class="next{% if page.next.image %} image{% endif %}" href="{{ page.next.url | prepend: site.baseurl }}"><span>{{ page.next.title }}&nbsp;&raquo;</span>
       {%- if page.next.image -%} 
         <img src="{{ '/assets/img/' | prepend: site.baseurl | append: page.next.image }}" alt="">
       {%- endif -%} 

assets/scss/breakpoints/_800up.scss

@@ -244,3 +244,18 @@ CONTACT PAGE STYLING
     margin-right: 0;
 	}
 }
+
+/***************
+DARK THEME STYLING
+***************/
+
+@media (prefers-color-scheme: dark) {
+	body {
+		background-color: black;
+		color: white;
+	}
+	.content:after,
+	.post .featuredImage:before {
+		background: black;
+	}
+  }

assets/scss/breakpoints/_mobileup.scss

@@ -399,6 +399,11 @@ FOOTER STYLING
 
 			li {
 				display: inline-block;
+				margin-right: 8px;
+
+				&:last-child {
+					margin-right: 0;
+				}
 
 				a {
 					display: inline-block;
@@ -492,3 +497,25 @@ POST LIST STYLING
 	}
 }
 
+
+/***************
+DARK THEME STYLING
+***************/
+
+@media (prefers-color-scheme: dark) {
+	body {
+		background-color: black;
+		color: white;
+	}
+
+	.posts li .date {
+		color: white;
+	}
+	.postNav {
+		border-top: 1px solid lighten(black, 10%);
+		border-bottom: 1px solid lighten(black, 10%);
+	}
+	.footer .container {
+		border-top-color: lighten(black, 10%);
+	}
+}