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

templates/layout.hbs

@@ -61,7 +61,7 @@
       <nav>
         <a href="/{{page.lang}}" class="top-brand">{{{lang 'HEADER_TITLE'}}}</a>
 
-        <div class="top-nav">
+        <div class="top-nav main-nav">
           <ul class="top-nav-inner">
             <li>{{import (join [ '/public/' page.lang '/_menu' ] "")}}</li>
             <li>
@@ -69,9 +69,20 @@
               {{import "~/language-menu"}}
             </li>
             <li><a href="/tweets/" class="top-nav-item" title="{{{lang 'TRANS_TWITTER_TOPICS'}}}"><img src="/images/transtwitter.png" width="24" height="24" alt=""></a></li>
-            <li class="disposable"><a href="https://github.com/GenderDysphoria/GenderDysphoria.fyi" class="top-nav-item">{{icon 'brands/github'}}</a></li>
-            <li class="disposable"><a href="https://patreon.com/curvyandtrans" class="top-nav-item" title="Patreon">{{icon 'brands/patreon'}}</a></li>
-            <li class="disposable"><a href="https://ko-fi.com/curvyandtrans" class="top-nav-item" title="Ko-Fi">{{icon 'brands/ko-fi'}}</a></li>
+          </ul>
+        </div>
+
+        <div class="top-nav aux-nav">
+          <ul class="top-nav-inner">
+            <li><a href="https://github.com/GenderDysphoria/GenderDysphoria.fyi" class="top-nav-item">{{icon 'brands/github'}}</a></li>
+            <li><a href="https://patreon.com/curvyandtrans" class="top-nav-item" title="Patreon">{{icon 'brands/patreon'}}</a></li>
+            <li><a href="https://ko-fi.com/curvyandtrans" class="top-nav-item" title="Ko-Fi">{{icon 'brands/ko-fi'}}</a></li>
+            <li>
+              <a href="#" class="top-nav-item dark-toggle" title="Dark Mode">
+                <span class="svg-icon dark-toggle-sun">{{icon 'sun'}}</span>
+                <span class="svg-icon dark-toggle-moon">{{icon 'moon'}}</span>
+              </a>
+            </li>
           </ul>
         </div>
       </nav>