Merge #171: feat: dark mode theme

e4f6251 feat: dark mode theme (Byron Hambly)

Pull request description:

  Looking at the RPC docs on a light background was wrecking my eyes 😅

  This PR:

  - adds dark color theme for users with `prefers-color-scheme: dark`
  - increases max width to 1200px
  - replaces logo png with svg - black on light, white on dark theme. Smaller filesize too.
  - removes `!important` qualifiers that make editing styles more difficult
  - stores colors in scss variables for ease of maintenance

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

  ![dark theme RPC doc](https://user-images.githubusercontent.com/351403/214849774-dc25eb02-618c-4baa-9786-e03fb49ecb38.png)

ACKs for top commit:
  delta1:
    ACK e4f6251; tested locally

Tree-SHA512: 8f1c93d208a398fd4c4c0569e6f2e27937024cb3ae68cc11413bc25dbfd2f09876c8b32b15cde4b0133535090fabee344464154ef485ccf839f3f8aa8a546542

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');