feat: dark mode theme

- adds dark color theme for users with `prefers-color-scheme: dark`
- increase max width to 1200px
- logo png replaced with svg - black on light, white on dark theme
- remove `!important` qualifiers that make editing styles more difficult
- store colors in scss variables for ease of maintenance

Deployed example at https://elements.delta1.dev

Author: delta1

_includes/footer.html

@@ -2,7 +2,7 @@
   <data class="u-url" href="{{ "/" | relative_url }}"></data>
 
   <div class="wrapper">
-    <img class="logo-footer" alt="" src="{{ site.url }}/images/elements_logo_no_border.png" /> 
+    <img class="logo-footer" alt="" src="{{ site.url }}/images/elements_logo_no_border.svg" />
     <div class="footer-col-wrapper">
       <div class="footer-col footer-col-1">
         <ul class="contact-list">

_includes/head.html

@@ -4,9 +4,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   {%- seo -%}
   <link href='{{ "/assets/open-sans.css" | relative_url }}' rel='stylesheet' type='text/css'>
-  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
   <link rel="stylesheet" href="{{ "/assets/bootstrap-v3.3.7.min.css" | relative_url }}">
   <script src="{{ "/assets/jquery-v3.3.1.min.js" | relative_url }}"></script>
   <script src="{{ "/assets/bootstrap-v3.3.7.min.js" | reltive_url }}"></script>
+  <link rel="stylesheet" href="{{ "/assets/main.css" | relative_url }}">
   {%- feed_meta -%}
 </head>

_includes/header.html

@@ -1,7 +1,7 @@
 <header class="site-header" role="banner">
 
 <div class="wrapper">
-  <img class="logo-float-left" alt="" src="{{ site.url }}/images/elements_logo_no_border.png" />  
+  <img class="logo-float-left" alt="" src="{{ site.url }}/images/elements_logo_no_border.svg" />
   {%- assign default_paths = site.pages | map: "path" -%}
   {%- assign page_paths = site.header_pages | default: default_paths -%}
   <span><a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a></span>
@@ -23,7 +23,7 @@
     <!-- Nav links for toggling -->
     <div class="collapse navbar-collapse" id="collapsing-nav-bar">
       <ul class="nav navbar-nav navbar-right">
-        <li><a href="/how-it-works">How it works</a></li> 
+        <li><a href="/how-it-works">How it works</a></li>
         <li><a href="/features">Features</a></li>
         <li><a href="/community">Community</a></li>
         <li><a href="/en/doc">RPC Docs</a></li>
@@ -59,7 +59,7 @@
             <li role="separator" class="divider"></li>
             <li><a href="https://github.com/ElementsProject/elements">Elements on Github</a></li>
           </ul>
-        </li>   
+        </li>
       </ul>
 
     </div><!-- /.navbar-collapse -->
@@ -68,7 +68,7 @@
 
 <script>
 $(document).ready(function() {
-  // Assign the 'active' class for currently viewed page 
+  // Assign the 'active' class for currently viewed page
 
   var pathname = window.location.pathname;
   // Remove trailng '/'
@@ -83,12 +83,12 @@
     mainpathname = pathname.substr(0, secondForwardSlashIndex);
     $('.nav > li > a[href="'+mainpathname+'"]').parent().addClass('active');
   }
-  
+
   // Top level nav bar item
   $('.nav > li > a[href="'+pathname+'"]').parent().addClass('active');
 
   // Nav bar drop down item - must be linked to with the "/" prefix (e.g. /elements-code-tutorial/) in the menu html above
-  $('.nav > li > ul> li > a[href="'+pathname+'"]').parent().parent().parent().addClass('active');  
+  $('.nav > li > ul> li > a[href="'+pathname+'"]').parent().parent().parent().addClass('active');
 
   // Nav bar drop down sub item
   $('.nav > li > ul> li > a[href="'+pathname+'"]').parent().addClass('active');