Add dark mode.

11 files changed, 227 insertions, 10 deletions

diff --git a/README.md b/README.md
index d6f6eae..661c408 100644
--- a/README.md
+++ b/README.md
@@ -33,13 +33,12 @@ Features in the ori.:
 
 Features in this ported version:
 
-- Add Gitalk intergration.
-- Tag & category page appending more easily.
+- Add Gitalk and Valine intergration.
 - Customizable color scheme. (Some bug in original version, fixed.)
 - Firefox-friendly. (CSS issue in original version, fixed.)
 - `featured_image` url bug is fixed.
 - Table of Contents with scroll spy.
-
+- Dark mode.
 
 ## Quick Start
 
diff --git a/assets/scss/dark-mode.scss b/assets/scss/dark-mode.scss
new file mode 100644
index 0000000..bd393ac
--- /dev/null
+++ b/assets/scss/dark-mode.scss
@@ -0,0 +1,146 @@
+@import "journal";
+
+$dark-mode-text: #ccc;
+
+body.night {
+  background: $dark-mode-back-container-background;
+  :root{
+    --color_555: #ccc;
+  }
+
+  img {
+    opacity: .8;
+  }
+
+  blockquote {
+      * {
+          color: $deep-light-accent;
+      }
+  }
+
+  code {
+    color: $deep-light-accent;
+  }
+
+  a {
+      color: $light-accent;
+      &:hover {
+        color: $deep-light-accent !important;
+      }
+      @media screen and (max-width: $single-column-max-width) {
+        &:hover {
+          text-decoration: none !important;
+        }
+      }
+  }
+
+  .nav-link-list {
+    $nav-item-hover-color-lighten: 30%;
+    $nav-item-active-background-alpha: 0.03;
+    $nav-item-active-color-lighten: 20%;
+    flex-grow: 1;
+    .nav-link-item {
+      color: $dark-mode-text !important;
+      &:hover {
+        color: lighten($color-accent, $nav-item-hover-color-lighten) !important;
+      }
+      &.active {
+        color: lighten($color-accent, $nav-item-active-color-lighten) !important;
+      }
+    }
+  }
+
+  .stream-container {
+    .post{
+      background: $dark-mode-front-container-background;
+      .post-comment-wrapper *{
+        color: $dark-mode-text !important;
+      }
+    }
+    .post-list-container {
+      background: $dark-mode-back-container-background;
+      &,
+    > * {
+      .post-item-wrapper {
+          @media screen and (max-width: $single-column-max-width) {
+            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+            background: $dark-mode-front-container-background;
+          }
+          .post-item{
+            background: $dark-mode-front-container-background;
+          }
+          &:not(.post-item-wrapper-no-hover):hover {
+            * {
+              color: $deep-light-accent;
+            }
+          }
+        }
+      }
+    }
+  }
+  * {
+    color: $dark-mode-text;
+  }
+
+  .single-column-nav-container {
+      @media screen and (max-width: $single-column-max-width) {
+        .nav-dropdown-toggle {
+          &:hover {
+            color: #3f587d !important;
+          }
+        }
+        .navbar-brand {
+          color: $dark-mode-text;
+          &:hover {
+              color: $dark-mode-text;
+          }
+        }
+        .nav-background {
+          background: $dark-mode-front-container-background;
+          box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+        }
+      }
+  }
+
+  .single-column-header-container {
+      @media screen and (max-width: $single-column-max-width) {
+        * {
+          font-family: $sans-preferred-font-list;
+          color: $deep-light-accent;
+        }
+        .single-column-header-title {
+          color: $dark-mode-text;
+        }
+        .single-column-header-subtitle {
+          color: $dark-mode-text;
+        }
+      }
+  }
+
+
+  .single-column-drawer-container {
+    @media screen and (max-width: $single-column-max-width) {
+      .drawer-content {
+        background: $dark-mode-back-container-background;
+        .drawer-menu {
+          .drawer-menu-item {
+            color: $dark-mode-text;
+            &.active {
+              border-right: 2px solid $color-accent;
+              color: $light-accent;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .toc{
+    a {
+      color: $dark-mode-text;
+    }
+    .toc-active{
+      color: $light-accent !important;
+    }
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/journal.scss b/assets/scss/journal.scss
index b238c58..5c4f69e 100644
--- a/assets/scss/journal.scss
+++ b/assets/scss/journal.scss
@@ -1,6 +1,8 @@
 $color-accent: #1976d2;
 $back-container-background: #fcfcfc;
 $front-container-background: #ffffff;
+$dark-mode-back-container-background: #222222;
+$dark-mode-front-container-background: #333333;
 
 $default-font-list: "Lora", "Noto Serif SC", serif;
 $mono-font-list: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro",
@@ -18,7 +20,7 @@ $nav-subtitle-size: 18px;
 $nav-link-size: 20px;
 $nav-footer-size: 12px;
 $post-title-size: 30px;
-$post-subtitle-size: 16px;
+$post-subtitle-size: 12px;
 $post-summary-size: 16px;
 $post-body-size: 16px;
 $post-meta-size: 16px;
@@ -27,6 +29,8 @@ $toc-size: 16px;
 
 $dark-accent: darken($color-accent, 10%);
 $deep-dark-accent: darken($color-accent, 50%);
+$light-accent: lighten($color-accent, 10%);
+$deep-light-accent: lighten($color-accent, 30%);
 $color-text: $deep-dark-accent;
 
 @if lightness($color-accent) <10% {
@@ -56,6 +60,11 @@ $h-diff: 3px;
 }
 
 body {
+  //-webkit-transition: all 0.5s ease;
+  //-moz-transition: all 0.5s ease;
+  //-o-transition: all 0.5s ease;
+  //transition: all 0.2s ease;
+
   background: $back-container-background;
   padding: 0;
   margin: 0;
@@ -247,7 +256,11 @@ a {
     .navbar-brand {
       opacity: 0;
       text-align: left;
-      padding-left: 12px !important;
+      padding-left: 12px;
+      padding-top: 8px;
+      //justify-content: space-between;
+      //align-items: stretch;
+      flex: 1;
     }
     .nav-dropdown-toggle {
       display: flex;
@@ -257,7 +270,20 @@ a {
       justify-content: center;
       background: none !important;
       border: none;
-      padding-top: 1px;
+      //padding-top: 1px;
+      &:hover {
+        color: #3f587d !important;
+      }
+    }
+    .nav-darkmode-toggle {
+      display: flex;
+      align-content: center;
+      align-items: center;
+      justify-items: center;
+      justify-content: center;
+      background: none !important;
+      border: none;
+      //padding-top: 1px;
       &:hover {
         color: #3f587d !important;
       }
@@ -1037,4 +1063,4 @@ a {
 
 .year {
   color: $dark-accent;
-}
\ No newline at end of file
+}
diff --git a/exampleSite/resources/_gen/assets/scss/scss/dark-mode.scss_48b060fe05b0a273d182ef83c0605941.content b/exampleSite/resources/_gen/assets/scss/scss/dark-mode.scss_48b060fe05b0a273d182ef83c0605941.content
new file mode 100644
index 0000000..768bff0
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/scss/dark-mode.scss_48b060fe05b0a273d182ef83c0605941.content
@@ -0,0 +1 @@
+::selection{background:rgba(25,118,210,.4)}body{background:#fcfcfc;padding:0;margin:0;font-family:lora,noto serif sc,serif;text-shadow:1px 1px 1px rgba(0,0,0,.004);text-rendering:optimizeLegibility!important;-webkit-font-smoothing:antialiased!important;color:#000}*{color:#000;line-height:1.7em;word-wrap:break-word;box-sizing:border-box}h1,h2,h3{font-weight:700}h1{font-size:30px;margin:20px auto}h2{font-size:24px;margin:20px auto}h3{font-size:21px;margin:20px auto}h4{font-size:21px;padding:20px auto}h5{font-size:20px;padding:10px auto}h6{font-size:19px;padding:10px auto}textarea,select,input,button{outline:none!important}table{table-layout:fixed;overflow-x:scroll}button{cursor:hand;cursor:pointer}code{color:#145ca4;background:rgba(25,118,210,.07)!important;padding:2px 5px;border-radius:3px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}pre{background:#2e2e2e!important;color:#fff;padding:12px 15px;border-radius:5px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}pre *{background:0 0!important;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace!important}pre code{padding:0}blockquote{padding:10px 20px;border-left:3px solid rgba(25,118,210,.7);color:#145ca4;background:rgba(25,118,210,.05)}blockquote p{margin-bottom:0}blockquote *{color:#145ca4}a{color:#1976d2}a:hover{color:#145ca4;text-underline-position:under}@media screen and (max-width:1020px){a:hover{text-decoration:none!important}}.a-block{display:block;text-decoration:none!important}.a-block:hover{text-decoration:none!important}.no-margin{margin:0}.no-padding{padding:0}.no-overflow{overflow:hidden!important}.animated-visibility{transition:visibility 0s,opacity .5s linear;visibility:visible;opacity:1}.invisible{visibility:hidden;opacity:0}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-to{opacity:0}#lv-container{padding:0 30px}@media screen and (max-width:1020px){#lv-container{padding:0 15px}}.single-column-nav-container{display:none!important}@media screen and (max-width:1020px){.single-column-nav-container{display:block!important;padding:0}.single-column-nav-container *{font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;transition:opacity .5s ease-in-out}.single-column-nav-container button{padding:0;padding-right:12px;padding-left:12px}.single-column-nav-container .nav-content{padding:12px 8px;justify-content:flex-start;max-width:unset!important}.single-column-nav-container .navbar-brand{opacity:0;text-align:left;padding-left:12px;padding-top:8px;flex:1}.single-column-nav-container .nav-dropdown-toggle{display:flex;align-content:center;align-items:center;justify-items:center;justify-content:center;background:0 0!important;border:none}.single-column-nav-container .nav-dropdown-toggle:hover{color:#3f587d!important}.single-column-nav-container .nav-darkmode-toggle{display:flex;align-content:center;align-items:center;justify-items:center;justify-content:center;background:0 0!important;border:none}.single-column-nav-container .nav-darkmode-toggle:hover{color:#3f587d!important}.single-column-nav-container .nav-icon-group{z-index:5;padding-right:5px}.single-column-nav-container .nav-icon-group ul{list-style:none;margin:0;padding:0}.single-column-nav-container .nav-icon-group li{display:inline;margin:0;padding:0}.single-column-nav-container .nav-icon{padding:8px}.single-column-nav-container .nav-background{opacity:0;z-index:-1;left:0;position:absolute;width:100%;height:100%;background:#fff;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2)}}.single-column-header-container{display:none!important}@media screen and (max-width:1020px){.single-column-header-container{display:block!important;padding:50px 20px 80px;transition:padding .5s ease-in-out,margin .5s ease-in-out;text-align:center}.single-column-header-container *{font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;color:#000}.single-column-header-container .single-column-header-title{font-size:28px}.single-column-header-container .single-column-header-subtitle{font-size:20px}}.single-column-drawer-container{display:none!important}@media screen and (max-width:1020px){.single-column-drawer-container{display:block!important;position:fixed;top:0;left:-260px;width:260px;height:100vh;z-index:1800;transition:all .3s ease-in-out}.single-column-drawer-container .drawer-content{background:#fff;height:100%;width:100%;padding:50px 0 80px;display:flex}.single-column-drawer-container .drawer-content .drawer-menu{flex-grow:1;display:flex;justify-items:center;justify-content:center;flex-direction:column}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item{font-size:18px;margin-bottom:10px;border-right:2px solid transparent;padding:8px 30px;cursor:hand;cursor:pointer;transition:all .2s linear;color:#000}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item .nav-link-subitem{font-size:18px;padding:2px}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item .nav-link-subitem li{list-style:none;padding-left:8px}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item .nav-link-subitem a{text-decoration:none;color:#000}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item.active{border-right:2px solid #1976d2;background:rgba(25,118,210,.1);color:#092949}}.single-column-drawer-mask{display:none!important}@media screen and (max-width:1020px){.single-column-drawer-mask{display:block!important;position:fixed;top:0;bottom:0;right:0;left:0;background:rgba(0,0,0,.8);z-index:1600;transition:all .3s ease-in-out}}.single-column-drawer-container-active{left:0;box-shadow:0 0 8px rgba(0,0,0,.2)}.side-container{position:fixed;top:0;height:100vh;width:25%;text-align:right;font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;padding:20px 0 50px;overflow-x:hidden;overflow-y:hidden;display:flex;flex-direction:column;justify-content:space-between}.side-container .nav-head{padding:30px 28px 30px 20px;cursor:hand;cursor:pointer;margin-bottom:10px;transition:all .2s linear;color:#000;border-right:2px solid transparent}.side-container .nav-head .nav-title{font-size:30px;line-height:42px}.side-container .nav-head .nav-subtitle{margin-top:8px;font-size:18px}.side-container .nav-head:hover{border-right:2px solid rgba(25,118,210,.6);background:rgba(25,118,210,.02);color:#092949}.side-container .nav-head.active{border-right:2px solid #1976d2;background:rgba(25,118,210,.03);color:#0e4377}.side-container .nav-link-list{flex-grow:1}.side-container .nav-link-list .nav-link-item{font-size:20px;margin-bottom:10px;border-right:2px solid transparent;padding:8px 28px 8px 30px;cursor:hand;cursor:pointer;transition:all .2s linear;color:#000}.side-container .nav-link-list .nav-link-item .nav-link-subitem{font-size:17px}.side-container .nav-link-list .nav-link-item .nav-link-subitem li{list-style:none;padding-left:2px}.side-container .nav-link-list .nav-link-item .nav-link-subitem a{text-decoration:none}.side-container .nav-link-list .nav-link-item:hover{border-right:2px solid rgba(25,118,210,.6);background:rgba(25,118,210,.02);color:#092949}.side-container .nav-link-list .nav-link-item.active{border-right:2px solid #1976d2;background:rgba(25,118,210,.03);color:#0e4377}.side-container .nav-footer{padding:20px 30px 0 20px;font-size:12px}@media screen and (max-width:1020px){.side-container{display:none}}.extra-container{position:fixed;top:0;right:0;width:25%;font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;overflow-x:hidden;overflow-y:hidden;display:flex;flex-direction:column;justify-content:flex-end}.extra-container .pagination{position:fixed;bottom:0;display:flex;flex-direction:column}.extra-container .pagination .pagination-indicator{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:25%;padding:15px 0;font-size:12px;width:64px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.extra-container .pagination .pagination-action{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:64px;cursor:hand;cursor:pointer;padding:15px 0}.extra-container .pagination .pagination-action :not(.pagination-action-icon){transition:all .2s linear;font-size:13px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.extra-container .pagination .pagination-action *{transition:all .3s linear}.extra-container .pagination .pagination-action:hover{text-decoration:none}.extra-container .pagination .pagination-action:hover *{color:#145ca4}@media screen and (max-width:1020px){.extra-container{display:none}}.pagination-bar-container{position:fixed;top:0;right:0;height:100vh;width:25%;text-align:right;font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;padding:20px 0;overflow:scroll;display:flex;flex-direction:column}.stream-container{padding-left:25%;padding-right:25%;width:100%;min-height:100vh}@media screen and (max-width:1020px){.stream-container{padding:0;min-height:unset}}.stream-container .post-list-container{width:100%;min-height:100vh;padding:20px 0;background:#fff;box-shadow:0 0 16px rgba(0,0,0,.12)}@media screen and (max-width:1020px){.stream-container .post-list-container{min-height:unset;padding:0;box-shadow:0 0 0 rgba(0,0,0,.2)}}.stream-container .post-list-container .post-item-wrapper,.stream-container .post-list-container>* .post-item-wrapper{cursor:hand;cursor:pointer;transition:all .2s linear}.stream-container .post-list-container .post-item-wrapper .post-item,.stream-container .post-list-container>* .post-item-wrapper .post-item{margin:0 28px 0 35px;padding:30px 0;display:flex;flex-direction:row;align-items:center}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item,.stream-container .post-list-container>* .post-item-wrapper .post-item{flex-direction:column-reverse;margin:0 0 15px;padding:0;box-shadow:0 0 8px rgba(0,0,0,.1);background:#fff}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper{flex-grow:1}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper{width:100%;padding:15px 20px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title{font-size:30px;font-weight:600;font-style:normal;margin-bottom:10px;line-height:1.5em}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title{font-size:22px;margin-bottom:5px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small{font-size:22px;margin-bottom:0}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small{font-size:14px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary{font-size:16px;line-height:1.5em;margin-bottom:10px}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary{font-size:16px;margin-bottom:5px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta{font-size:16px}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta{font-size:14px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper{margin-left:20px}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper{width:100%;margin-left:0}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image{width:230px;height:120px;background:no-repeat 50%;background-size:cover;border-radius:5px;overflow:hidden}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image{width:100%;height:180px;border-radius:0}}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item-no-divider,.stream-container .post-list-container>* .post-item-wrapper .post-item-no-divider{border-bottom:none!important}.stream-container .post-list-container .post-item-wrapper .post-item-no-gaps,.stream-container .post-list-container>* .post-item-wrapper .post-item-no-gaps{margin:0;box-shadow:none}}.stream-container .post-list-container .post-item-wrapper *,.stream-container .post-list-container>* .post-item-wrapper *{transition:all .2s linear}.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover{text-decoration:none;background:rgba(0,0,0,.03)}.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title{text-decoration:underline;text-decoration-style:2px solid #1976d2;text-underline-position:under}.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover *,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover *{color:#145ca4}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title{text-decoration:none!important}}.stream-container .post-list-container .post-item-wrapper-no-hover,.stream-container .post-list-container>* .post-item-wrapper-no-hover{cursor:unset}.stream-container .post-list-container:not(:last-child) .post-item,.stream-container .post-list-container>*:not(:last-child) .post-item{border-bottom:1px solid rgba(128,128,128,.12)}@media screen and (max-width:1020px){.stream-container .post-list-container-no-background{background:0 0}}@media screen and (max-width:1020px){.stream-container .post-list-container-shadow{box-shadow:0 0 8px rgba(0,0,0,.1)}}.stream-container .post-list-footer{text-align:center;width:100%;opacity:.3;color:#000;font-family:lora,noto serif sc,serif;font-size:13px;padding:15px}.stream-container .post{padding:0 0 20px}.stream-container .post .post-head-wrapper{margin-top:-20px;background:no-repeat 50%;background-size:cover;position:relative;padding-top:140px}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper{padding-top:120px}}.stream-container .post .post-head-wrapper *{color:#fff}.stream-container .post .post-head-wrapper .post-title{padding:80px 35px 30px;font-size:30px;font-weight:600;font-style:normal;line-height:1.5em;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#c6000000',GradientType=0)}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper .post-title{font-size:22px;padding:80px 20px 30px}}.stream-container .post .post-head-wrapper .post-title .post-subtitle{font-size:12px;width:80%;opacity:.6;padding:0 0 8px}.stream-container .post .post-head-wrapper .post-title .post-meta{margin:0}.stream-container .post .post-head-wrapper .post-title .post-meta,.stream-container .post .post-head-wrapper .post-title .post-meta *{font-size:16px}.stream-container .post .post-head-wrapper .post-title .post-meta .material-icons{vertical-align:middle;margin-bottom:3px}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper .post-title .post-meta,.stream-container .post .post-head-wrapper .post-title .post-meta *{font-size:14px}}.stream-container .post .post-head-wrapper-text-only{padding:30px 35px 0}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper-text-only{padding:30px 20px 0}}.stream-container .post .post-head-wrapper-text-only .post-title{font-size:30px;font-weight:600;font-style:normal;line-height:1.5em}.stream-container .post .post-head-wrapper-text-only .post-title .post-subtitle{font-size:12px;width:80%;opacity:.6;padding:0 0 8px}.stream-container .post .post-head-wrapper-text-only .post-title .post-meta{margin:0}.stream-container .post .post-head-wrapper-text-only .post-title .post-meta,.stream-container .post .post-head-wrapper-text-only .post-title .post-meta *{font-size:16px}.stream-container .post .post-head-wrapper-text-only .post-title .post-meta .material-icons{vertical-align:middle;margin-bottom:3px}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper-text-only .post-title .post-meta,.stream-container .post .post-head-wrapper-text-only .post-title .post-meta *{font-size:14px}}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper-text-only .post-title{font-size:22px}}.stream-container .post .post-body-wrapper{padding:30px 35px 35px}@media screen and (max-width:1020px){.stream-container .post .post-body-wrapper{padding:20px 20px 35px}}.stream-container .post .post-body-wrapper .post-body{font-size:16px;line-height:1.5em}.stream-container .post .post-body-wrapper .post-body *{word-wrap:break-word}.stream-container .post .post-body-wrapper .post-body img{max-width:100%;border-radius:5px;overflow:hidden}@media screen and (max-width:1020px){.stream-container .post .post-body-wrapper .post-body{font-size:16px}}.stream-container .post .post-pagination{padding:20px 35px;width:100%;display:flex;justify-content:space-between}.stream-container .post .post-pagination .newer-posts{padding-right:5px;text-align:left;width:50%}.stream-container .post .post-pagination .older-posts{padding-left:5px;text-align:right;width:50%}@media screen and (max-width:1020px){.stream-container .post .post-pagination{padding:20px}}.stream-container .post .post-comment-wrapper{padding:20px 35px}.stream-container .post .post-comment-wrapper iframe{overflow:hidden!important}@media screen and (max-width:1020px){.stream-container .post .post-comment-wrapper{padding:20px}}#single-column-footer{display:none}@media screen and (max-width:1020px){#single-column-footer{display:block!important;text-align:center;font-size:13px;font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;padding:40px 20px}}.toc{float:right;border-radius:5px;margin-left:30px;margin-right:60px;margin-top:30px;max-width:260px;max-height:80vh;overflow:auto;background:rgba(25,118,210,.05)}.toc,.toc *{font-size:16px}.toc ul{list-style:none;padding:0 0 0 20px;margin:0;line-height:1.7em}.toc .toc-content{padding:20px}.toc .toc-active{color:#03101c!important}@media screen and (max-width:1020px){.toc{line-height:2em;float:none;margin-top:30px;margin-left:0;margin-right:0}.toc,.toc *{}.toc .toc-content{padding:10px}}.pagination{display:none}@media screen and (max-width:1020px){.pagination{display:flex!important;flex-direction:row;justify-content:space-between}.pagination:not(.index-page){margin-top:15px}.pagination .pagination-indicator{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:25%;padding:15px 0;font-size:12px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.pagination .pagination-action{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:64px;cursor:hand;cursor:pointer;padding:15px 0}.pagination .pagination-action :not(.pagination-action-icon){transition:all .2s linear;font-size:13px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.pagination .pagination-action *{transition:all .3s linear}.pagination .pagination-action:hover{text-decoration:none}.pagination .pagination-action:hover *{color:#145ca4}}.year{color:#145ca4}body.night{background:#222}body.night :root{--color_555: #ccc}body.night img{opacity:.8}body.night blockquote *{color:#92c2f2}body.night code{color:#92c2f2}body.night a{color:#378fe7}body.night a:hover{color:#92c2f2!important}@media screen and (max-width:1020px){body.night a:hover{text-decoration:none!important}}body.night .nav-link-list{flex-grow:1}body.night .nav-link-list .nav-link-item{color:#ccc!important}body.night .nav-link-list .nav-link-item:hover{color:#92c2f2!important}body.night .nav-link-list .nav-link-item.active{color:#64a9ed!important}body.night .stream-container .post{background:#333}body.night .stream-container .post .post-comment-wrapper *{color:#ccc!important}body.night .stream-container .post-list-container{background:#222}@media screen and (max-width:1020px){body.night .stream-container .post-list-container .post-item-wrapper,body.night .stream-container .post-list-container>* .post-item-wrapper{box-shadow:0 0 8px rgba(0,0,0,.1);background:#333}}body.night .stream-container .post-list-container .post-item-wrapper .post-item,body.night .stream-container .post-list-container>* .post-item-wrapper .post-item{background:#333}body.night .stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover *,body.night .stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover *{color:#92c2f2}body.night *{color:#ccc}@media screen and (max-width:1020px){body.night .single-column-nav-container .nav-dropdown-toggle:hover{color:#3f587d!important}body.night .single-column-nav-container .navbar-brand{color:#ccc}body.night .single-column-nav-container .navbar-brand:hover{color:#ccc}body.night .single-column-nav-container .nav-background{background:#333;box-shadow:0 2px 2px rgba(0,0,0,.2)}}@media screen and (max-width:1020px){body.night .single-column-header-container *{font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;color:#92c2f2}body.night .single-column-header-container .single-column-header-title{color:#ccc}body.night .single-column-header-container .single-column-header-subtitle{color:#ccc}}@media screen and (max-width:1020px){body.night .single-column-drawer-container .drawer-content{background:#222}body.night .single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item{color:#ccc}body.night .single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item.active{border-right:2px solid #1976d2;color:#378fe7}}body.night .toc a{color:#ccc}body.night .toc .toc-active{color:#378fe7!important}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/scss/dark-mode.scss_48b060fe05b0a273d182ef83c0605941.json b/exampleSite/resources/_gen/assets/scss/scss/dark-mode.scss_48b060fe05b0a273d182ef83c0605941.json
new file mode 100644
index 0000000..86c153b
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/scss/scss/dark-mode.scss_48b060fe05b0a273d182ef83c0605941.json
@@ -0,0 +1 @@
+{"Target":"scss/dark-mode.min.e9ba3b925ffd549f62ca3b40f68d3d6fedb99cb4f9f0c6176cae30336637f3ed.css","MediaType":"text/css","Data":{"Integrity":"sha256-6bo7kl/9VJ9iyjtA9o09b+25nLT58MYXbK4wM2Y38+0="}}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941.content b/exampleSite/resources/_gen/assets/scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941.content
index a27fb61..6c2315e 100644
--- a/exampleSite/resources/_gen/assets/scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941.content
+++ b/exampleSite/resources/_gen/assets/scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941.content
@@ -1 +1 @@
-::selection{background:rgba(25,118,210,.4)}body{background:#fcfcfc;padding:0;margin:0;font-family:lora,noto serif sc,serif;text-shadow:1px 1px 1px rgba(0,0,0,.004);text-rendering:optimizeLegibility!important;-webkit-font-smoothing:antialiased!important;color:#000}*{color:#000;line-height:1.7em;word-wrap:break-word;box-sizing:border-box}h1,h2,h3{font-weight:700}h1{font-size:30px;margin:20px auto}h2{font-size:24px;margin:20px auto}h3{font-size:21px;margin:20px auto}h4{font-size:21px;padding:20px auto}h5{font-size:20px;padding:10px auto}h6{font-size:19px;padding:10px auto}textarea,select,input,button{outline:none!important}table{table-layout:fixed;overflow-x:scroll}button{cursor:hand;cursor:pointer}code{color:#145ca4;background:rgba(25,118,210,.07)!important;padding:2px 5px;border-radius:3px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}pre{background:#2e2e2e!important;color:#fff;padding:12px 15px;border-radius:5px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}pre *{background:0 0!important;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace!important}pre code{padding:0}blockquote{padding:10px 20px;border-left:3px solid rgba(25,118,210,.7);color:#145ca4;background:rgba(25,118,210,.05)}blockquote p{margin-bottom:0}blockquote *{color:#145ca4}a{color:#1976d2}a:hover{color:#145ca4;text-underline-position:under}@media screen and (max-width:1020px){a:hover{text-decoration:none!important}}.a-block{display:block;text-decoration:none!important}.a-block:hover{text-decoration:none!important}.no-margin{margin:0}.no-padding{padding:0}.no-overflow{overflow:hidden!important}.animated-visibility{transition:visibility 0s,opacity .5s linear;visibility:visible;opacity:1}.invisible{visibility:hidden;opacity:0}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-to{opacity:0}#lv-container{padding:0 30px}@media screen and (max-width:1020px){#lv-container{padding:0 15px}}.single-column-nav-container{display:none!important}@media screen and (max-width:1020px){.single-column-nav-container{display:block!important;padding:0}.single-column-nav-container *{font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;transition:opacity .5s ease-in-out}.single-column-nav-container button{padding:0;padding-right:12px;padding-left:12px}.single-column-nav-container .nav-content{padding:12px 8px;justify-content:flex-start;max-width:unset!important}.single-column-nav-container .navbar-brand{opacity:0;text-align:left;padding-left:12px!important}.single-column-nav-container .nav-dropdown-toggle{display:flex;align-content:center;align-items:center;justify-items:center;justify-content:center;background:0 0!important;border:none;padding-top:1px}.single-column-nav-container .nav-dropdown-toggle:hover{color:#3f587d!important}.single-column-nav-container .nav-icon-group{z-index:5;padding-right:5px}.single-column-nav-container .nav-icon-group ul{list-style:none;margin:0;padding:0}.single-column-nav-container .nav-icon-group li{display:inline;margin:0;padding:0}.single-column-nav-container .nav-icon{padding:8px}.single-column-nav-container .nav-background{opacity:0;z-index:-1;left:0;position:absolute;width:100%;height:100%;background:#fff;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2)}}.single-column-header-container{display:none!important}@media screen and (max-width:1020px){.single-column-header-container{display:block!important;padding:50px 20px 80px;transition:padding .5s ease-in-out,margin .5s ease-in-out;text-align:center}.single-column-header-container *{font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;color:#000}.single-column-header-container .single-column-header-title{font-size:28px}.single-column-header-container .single-column-header-subtitle{font-size:20px}}.single-column-drawer-container{display:none!important}@media screen and (max-width:1020px){.single-column-drawer-container{display:block!important;position:fixed;top:0;left:-260px;width:260px;height:100vh;z-index:1800;transition:all .3s ease-in-out}.single-column-drawer-container .drawer-content{background:#fff;height:100%;width:100%;padding:50px 0 80px;display:flex}.single-column-drawer-container .drawer-content .drawer-menu{flex-grow:1;display:flex;justify-items:center;justify-content:center;flex-direction:column}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item{font-size:18px;margin-bottom:10px;border-right:2px solid transparent;padding:8px 30px;cursor:hand;cursor:pointer;transition:all .2s linear;color:#000}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item .nav-link-subitem{font-size:18px;padding:2px}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item .nav-link-subitem li{list-style:none;padding-left:8px}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item .nav-link-subitem a{text-decoration:none;color:#000}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item.active{border-right:2px solid #1976d2;background:rgba(25,118,210,.1);color:#092949}}.single-column-drawer-mask{display:none!important}@media screen and (max-width:1020px){.single-column-drawer-mask{display:block!important;position:fixed;top:0;bottom:0;right:0;left:0;background:rgba(0,0,0,.8);z-index:1600;transition:all .3s ease-in-out}}.single-column-drawer-container-active{left:0;box-shadow:0 0 8px rgba(0,0,0,.2)}.side-container{position:fixed;top:0;height:100vh;width:25%;text-align:right;font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;padding:20px 0 50px;overflow-x:hidden;overflow-y:hidden;display:flex;flex-direction:column;justify-content:space-between}.side-container .nav-head{padding:30px 28px 30px 20px;cursor:hand;cursor:pointer;margin-bottom:10px;transition:all .2s linear;color:#000;border-right:2px solid transparent}.side-container .nav-head .nav-title{font-size:30px;line-height:42px}.side-container .nav-head .nav-subtitle{margin-top:8px;font-size:18px}.side-container .nav-head:hover{border-right:2px solid rgba(25,118,210,.6);background:rgba(25,118,210,.02);color:#092949}.side-container .nav-head.active{border-right:2px solid #1976d2;background:rgba(25,118,210,.03);color:#0e4377}.side-container .nav-link-list{flex-grow:1}.side-container .nav-link-list .nav-link-item{font-size:20px;margin-bottom:10px;border-right:2px solid transparent;padding:8px 28px 8px 30px;cursor:hand;cursor:pointer;transition:all .2s linear;color:#000}.side-container .nav-link-list .nav-link-item .nav-link-subitem{font-size:17px}.side-container .nav-link-list .nav-link-item .nav-link-subitem li{list-style:none;padding-left:2px}.side-container .nav-link-list .nav-link-item .nav-link-subitem a{text-decoration:none}.side-container .nav-link-list .nav-link-item:hover{border-right:2px solid rgba(25,118,210,.6);background:rgba(25,118,210,.02);color:#092949}.side-container .nav-link-list .nav-link-item.active{border-right:2px solid #1976d2;background:rgba(25,118,210,.03);color:#0e4377}.side-container .nav-footer{padding:20px 30px 0 20px;font-size:12px}@media screen and (max-width:1020px){.side-container{display:none}}.extra-container{position:fixed;top:0;right:0;width:25%;font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;overflow-x:hidden;overflow-y:hidden;display:flex;flex-direction:column;justify-content:flex-end}.extra-container .pagination{position:fixed;bottom:0;display:flex;flex-direction:column}.extra-container .pagination .pagination-indicator{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:25%;padding:15px 0;font-size:12px;width:64px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.extra-container .pagination .pagination-action{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:64px;cursor:hand;cursor:pointer;padding:15px 0}.extra-container .pagination .pagination-action :not(.pagination-action-icon){transition:all .2s linear;font-size:13px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.extra-container .pagination .pagination-action *{transition:all .3s linear}.extra-container .pagination .pagination-action:hover{text-decoration:none}.extra-container .pagination .pagination-action:hover *{color:#145ca4}@media screen and (max-width:1020px){.extra-container{display:none}}.pagination-bar-container{position:fixed;top:0;right:0;height:100vh;width:25%;text-align:right;font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;padding:20px 0;overflow:scroll;display:flex;flex-direction:column}.stream-container{padding-left:25%;padding-right:25%;width:100%;min-height:100vh}@media screen and (max-width:1020px){.stream-container{padding:0;min-height:unset}}.stream-container .post-list-container{width:100%;min-height:100vh;padding:20px 0;background:#fff;box-shadow:0 0 16px rgba(0,0,0,.12)}@media screen and (max-width:1020px){.stream-container .post-list-container{min-height:unset;padding:0;box-shadow:0 0 0 rgba(0,0,0,.2)}}.stream-container .post-list-container .post-item-wrapper,.stream-container .post-list-container>* .post-item-wrapper{cursor:hand;cursor:pointer;transition:all .2s linear}.stream-container .post-list-container .post-item-wrapper .post-item,.stream-container .post-list-container>* .post-item-wrapper .post-item{margin:0 28px 0 35px;padding:30px 0;display:flex;flex-direction:row;align-items:center}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item,.stream-container .post-list-container>* .post-item-wrapper .post-item{flex-direction:column-reverse;margin:0 0 15px;padding:0;box-shadow:0 0 8px rgba(0,0,0,.1);background:#fff}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper{flex-grow:1}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper{width:100%;padding:15px 20px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title{font-size:30px;font-weight:600;font-style:normal;margin-bottom:10px;line-height:1.5em}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title{font-size:22px;margin-bottom:5px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small{font-size:22px;margin-bottom:0}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small{font-size:14px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary{font-size:16px;line-height:1.5em;margin-bottom:10px}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary{font-size:16px;margin-bottom:5px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta{font-size:16px}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta{font-size:14px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper{margin-left:20px}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper{width:100%;margin-left:0}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image{width:230px;height:120px;background:no-repeat 50%;background-size:cover;border-radius:5px;overflow:hidden}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image{width:100%;height:180px;border-radius:0}}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item-no-divider,.stream-container .post-list-container>* .post-item-wrapper .post-item-no-divider{border-bottom:none!important}.stream-container .post-list-container .post-item-wrapper .post-item-no-gaps,.stream-container .post-list-container>* .post-item-wrapper .post-item-no-gaps{margin:0;box-shadow:none}}.stream-container .post-list-container .post-item-wrapper *,.stream-container .post-list-container>* .post-item-wrapper *{transition:all .2s linear}.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover{text-decoration:none;background:rgba(0,0,0,.03)}.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title{text-decoration:underline;text-decoration-style:2px solid #1976d2;text-underline-position:under}.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover *,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover *{color:#145ca4}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title{text-decoration:none!important}}.stream-container .post-list-container .post-item-wrapper-no-hover,.stream-container .post-list-container>* .post-item-wrapper-no-hover{cursor:unset}.stream-container .post-list-container:not(:last-child) .post-item,.stream-container .post-list-container>*:not(:last-child) .post-item{border-bottom:1px solid rgba(128,128,128,.12)}@media screen and (max-width:1020px){.stream-container .post-list-container-no-background{background:0 0}}@media screen and (max-width:1020px){.stream-container .post-list-container-shadow{box-shadow:0 0 8px rgba(0,0,0,.1)}}.stream-container .post-list-footer{text-align:center;width:100%;opacity:.3;color:#000;font-family:lora,noto serif sc,serif;font-size:13px;padding:15px}.stream-container .post{padding:0 0 20px}.stream-container .post .post-head-wrapper{margin-top:-20px;background:no-repeat 50%;background-size:cover;position:relative;padding-top:140px}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper{padding-top:120px}}.stream-container .post .post-head-wrapper *{color:#fff}.stream-container .post .post-head-wrapper .post-title{padding:80px 35px 30px;font-size:30px;font-weight:600;font-style:normal;line-height:1.5em;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#c6000000',GradientType=0)}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper .post-title{font-size:22px;padding:80px 20px 30px}}.stream-container .post .post-head-wrapper .post-title .post-subtitle{font-size:16px;width:80%;opacity:.6;padding:0 0 8px}.stream-container .post .post-head-wrapper .post-title .post-meta{margin:0}.stream-container .post .post-head-wrapper .post-title .post-meta,.stream-container .post .post-head-wrapper .post-title .post-meta *{font-size:16px}.stream-container .post .post-head-wrapper .post-title .post-meta .material-icons{vertical-align:middle;margin-bottom:3px}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper .post-title .post-meta,.stream-container .post .post-head-wrapper .post-title .post-meta *{font-size:14px}}.stream-container .post .post-head-wrapper-text-only{padding:30px 35px 0}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper-text-only{padding:30px 20px 0}}.stream-container .post .post-head-wrapper-text-only .post-title{font-size:30px;font-weight:600;font-style:normal;line-height:1.5em}.stream-container .post .post-head-wrapper-text-only .post-title .post-subtitle{font-size:16px;width:80%;opacity:.6;padding:0 0 8px}.stream-container .post .post-head-wrapper-text-only .post-title .post-meta{margin:0}.stream-container .post .post-head-wrapper-text-only .post-title .post-meta,.stream-container .post .post-head-wrapper-text-only .post-title .post-meta *{font-size:16px}.stream-container .post .post-head-wrapper-text-only .post-title .post-meta .material-icons{vertical-align:middle;margin-bottom:3px}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper-text-only .post-title .post-meta,.stream-container .post .post-head-wrapper-text-only .post-title .post-meta *{font-size:14px}}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper-text-only .post-title{font-size:22px}}.stream-container .post .post-body-wrapper{padding:30px 35px 35px}@media screen and (max-width:1020px){.stream-container .post .post-body-wrapper{padding:20px 20px 35px}}.stream-container .post .post-body-wrapper .post-body{font-size:16px;line-height:1.5em}.stream-container .post .post-body-wrapper .post-body *{word-wrap:break-word}.stream-container .post .post-body-wrapper .post-body img{max-width:100%;border-radius:5px;overflow:hidden}@media screen and (max-width:1020px){.stream-container .post .post-body-wrapper .post-body{font-size:16px}}.stream-container .post .post-pagination{padding:20px 35px;width:100%;display:flex;justify-content:space-between}.stream-container .post .post-pagination .newer-posts{padding-right:5px;text-align:left;width:50%}.stream-container .post .post-pagination .older-posts{padding-left:5px;text-align:right;width:50%}@media screen and (max-width:1020px){.stream-container .post .post-pagination{padding:20px}}.stream-container .post .post-comment-wrapper{padding:20px 35px}.stream-container .post .post-comment-wrapper iframe{overflow:hidden!important}@media screen and (max-width:1020px){.stream-container .post .post-comment-wrapper{padding:20px}}#single-column-footer{display:none}@media screen and (max-width:1020px){#single-column-footer{display:block!important;text-align:center;font-size:13px;font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;padding:40px 20px}}.toc{float:right;border-radius:5px;margin-left:30px;margin-right:60px;margin-top:30px;max-width:260px;max-height:80vh;overflow:auto;background:rgba(25,118,210,.05)}.toc,.toc *{font-size:16px}.toc ul{list-style:none;padding:0 0 0 20px;margin:0;line-height:1.7em}.toc .toc-content{padding:20px}.toc .toc-active{color:#03101c!important}@media screen and (max-width:1020px){.toc{line-height:2em;float:none;margin-top:30px;margin-left:0;margin-right:0}.toc,.toc *{}.toc .toc-content{padding:10px}}.pagination{display:none}@media screen and (max-width:1020px){.pagination{display:flex!important;flex-direction:row;justify-content:space-between}.pagination:not(.index-page){margin-top:15px}.pagination .pagination-indicator{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:25%;padding:15px 0;font-size:12px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.pagination .pagination-action{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:64px;cursor:hand;cursor:pointer;padding:15px 0}.pagination .pagination-action :not(.pagination-action-icon){transition:all .2s linear;font-size:13px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.pagination .pagination-action *{transition:all .3s linear}.pagination .pagination-action:hover{text-decoration:none}.pagination .pagination-action:hover *{color:#145ca4}}.year{color:#145ca4}
\ No newline at end of file
+::selection{background:rgba(25,118,210,.4)}body{background:#fcfcfc;padding:0;margin:0;font-family:lora,noto serif sc,serif;text-shadow:1px 1px 1px rgba(0,0,0,.004);text-rendering:optimizeLegibility!important;-webkit-font-smoothing:antialiased!important;color:#000}*{color:#000;line-height:1.7em;word-wrap:break-word;box-sizing:border-box}h1,h2,h3{font-weight:700}h1{font-size:30px;margin:20px auto}h2{font-size:24px;margin:20px auto}h3{font-size:21px;margin:20px auto}h4{font-size:21px;padding:20px auto}h5{font-size:20px;padding:10px auto}h6{font-size:19px;padding:10px auto}textarea,select,input,button{outline:none!important}table{table-layout:fixed;overflow-x:scroll}button{cursor:hand;cursor:pointer}code{color:#145ca4;background:rgba(25,118,210,.07)!important;padding:2px 5px;border-radius:3px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}pre{background:#2e2e2e!important;color:#fff;padding:12px 15px;border-radius:5px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}pre *{background:0 0!important;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace!important}pre code{padding:0}blockquote{padding:10px 20px;border-left:3px solid rgba(25,118,210,.7);color:#145ca4;background:rgba(25,118,210,.05)}blockquote p{margin-bottom:0}blockquote *{color:#145ca4}a{color:#1976d2}a:hover{color:#145ca4;text-underline-position:under}@media screen and (max-width:1020px){a:hover{text-decoration:none!important}}.a-block{display:block;text-decoration:none!important}.a-block:hover{text-decoration:none!important}.no-margin{margin:0}.no-padding{padding:0}.no-overflow{overflow:hidden!important}.animated-visibility{transition:visibility 0s,opacity .5s linear;visibility:visible;opacity:1}.invisible{visibility:hidden;opacity:0}.fade-enter-active,.fade-leave-active{transition:opacity .3s}.fade-enter,.fade-leave-to{opacity:0}#lv-container{padding:0 30px}@media screen and (max-width:1020px){#lv-container{padding:0 15px}}.single-column-nav-container{display:none!important}@media screen and (max-width:1020px){.single-column-nav-container{display:block!important;padding:0}.single-column-nav-container *{font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;transition:opacity .5s ease-in-out}.single-column-nav-container button{padding:0;padding-right:12px;padding-left:12px}.single-column-nav-container .nav-content{padding:12px 8px;justify-content:flex-start;max-width:unset!important}.single-column-nav-container .navbar-brand{opacity:0;text-align:left;padding-left:12px;padding-top:8px;flex:1}.single-column-nav-container .nav-dropdown-toggle{display:flex;align-content:center;align-items:center;justify-items:center;justify-content:center;background:0 0!important;border:none}.single-column-nav-container .nav-dropdown-toggle:hover{color:#3f587d!important}.single-column-nav-container .nav-darkmode-toggle{display:flex;align-content:center;align-items:center;justify-items:center;justify-content:center;background:0 0!important;border:none}.single-column-nav-container .nav-darkmode-toggle:hover{color:#3f587d!important}.single-column-nav-container .nav-icon-group{z-index:5;padding-right:5px}.single-column-nav-container .nav-icon-group ul{list-style:none;margin:0;padding:0}.single-column-nav-container .nav-icon-group li{display:inline;margin:0;padding:0}.single-column-nav-container .nav-icon{padding:8px}.single-column-nav-container .nav-background{opacity:0;z-index:-1;left:0;position:absolute;width:100%;height:100%;background:#fff;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);-moz-box-shadow:0 1px 1px rgba(0,0,0,.2);box-shadow:0 1px 1px rgba(0,0,0,.2)}}.single-column-header-container{display:none!important}@media screen and (max-width:1020px){.single-column-header-container{display:block!important;padding:50px 20px 80px;transition:padding .5s ease-in-out,margin .5s ease-in-out;text-align:center}.single-column-header-container *{font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;color:#000}.single-column-header-container .single-column-header-title{font-size:28px}.single-column-header-container .single-column-header-subtitle{font-size:20px}}.single-column-drawer-container{display:none!important}@media screen and (max-width:1020px){.single-column-drawer-container{display:block!important;position:fixed;top:0;left:-260px;width:260px;height:100vh;z-index:1800;transition:all .3s ease-in-out}.single-column-drawer-container .drawer-content{background:#fff;height:100%;width:100%;padding:50px 0 80px;display:flex}.single-column-drawer-container .drawer-content .drawer-menu{flex-grow:1;display:flex;justify-items:center;justify-content:center;flex-direction:column}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item{font-size:18px;margin-bottom:10px;border-right:2px solid transparent;padding:8px 30px;cursor:hand;cursor:pointer;transition:all .2s linear;color:#000}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item .nav-link-subitem{font-size:18px;padding:2px}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item .nav-link-subitem li{list-style:none;padding-left:8px}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item .nav-link-subitem a{text-decoration:none;color:#000}.single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item.active{border-right:2px solid #1976d2;background:rgba(25,118,210,.1);color:#092949}}.single-column-drawer-mask{display:none!important}@media screen and (max-width:1020px){.single-column-drawer-mask{display:block!important;position:fixed;top:0;bottom:0;right:0;left:0;background:rgba(0,0,0,.8);z-index:1600;transition:all .3s ease-in-out}}.single-column-drawer-container-active{left:0;box-shadow:0 0 8px rgba(0,0,0,.2)}.side-container{position:fixed;top:0;height:100vh;width:25%;text-align:right;font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;padding:20px 0 50px;overflow-x:hidden;overflow-y:hidden;display:flex;flex-direction:column;justify-content:space-between}.side-container .nav-head{padding:30px 28px 30px 20px;cursor:hand;cursor:pointer;margin-bottom:10px;transition:all .2s linear;color:#000;border-right:2px solid transparent}.side-container .nav-head .nav-title{font-size:30px;line-height:42px}.side-container .nav-head .nav-subtitle{margin-top:8px;font-size:18px}.side-container .nav-head:hover{border-right:2px solid rgba(25,118,210,.6);background:rgba(25,118,210,.02);color:#092949}.side-container .nav-head.active{border-right:2px solid #1976d2;background:rgba(25,118,210,.03);color:#0e4377}.side-container .nav-link-list{flex-grow:1}.side-container .nav-link-list .nav-link-item{font-size:20px;margin-bottom:10px;border-right:2px solid transparent;padding:8px 28px 8px 30px;cursor:hand;cursor:pointer;transition:all .2s linear;color:#000}.side-container .nav-link-list .nav-link-item .nav-link-subitem{font-size:17px}.side-container .nav-link-list .nav-link-item .nav-link-subitem li{list-style:none;padding-left:2px}.side-container .nav-link-list .nav-link-item .nav-link-subitem a{text-decoration:none}.side-container .nav-link-list .nav-link-item:hover{border-right:2px solid rgba(25,118,210,.6);background:rgba(25,118,210,.02);color:#092949}.side-container .nav-link-list .nav-link-item.active{border-right:2px solid #1976d2;background:rgba(25,118,210,.03);color:#0e4377}.side-container .nav-footer{padding:20px 30px 0 20px;font-size:12px}@media screen and (max-width:1020px){.side-container{display:none}}.extra-container{position:fixed;top:0;right:0;width:25%;font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;overflow-x:hidden;overflow-y:hidden;display:flex;flex-direction:column;justify-content:flex-end}.extra-container .pagination{position:fixed;bottom:0;display:flex;flex-direction:column}.extra-container .pagination .pagination-indicator{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:25%;padding:15px 0;font-size:12px;width:64px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.extra-container .pagination .pagination-action{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:64px;cursor:hand;cursor:pointer;padding:15px 0}.extra-container .pagination .pagination-action :not(.pagination-action-icon){transition:all .2s linear;font-size:13px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.extra-container .pagination .pagination-action *{transition:all .3s linear}.extra-container .pagination .pagination-action:hover{text-decoration:none}.extra-container .pagination .pagination-action:hover *{color:#145ca4}@media screen and (max-width:1020px){.extra-container{display:none}}.pagination-bar-container{position:fixed;top:0;right:0;height:100vh;width:25%;text-align:right;font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;padding:20px 0;overflow:scroll;display:flex;flex-direction:column}.stream-container{padding-left:25%;padding-right:25%;width:100%;min-height:100vh}@media screen and (max-width:1020px){.stream-container{padding:0;min-height:unset}}.stream-container .post-list-container{width:100%;min-height:100vh;padding:20px 0;background:#fff;box-shadow:0 0 16px rgba(0,0,0,.12)}@media screen and (max-width:1020px){.stream-container .post-list-container{min-height:unset;padding:0;box-shadow:0 0 0 rgba(0,0,0,.2)}}.stream-container .post-list-container .post-item-wrapper,.stream-container .post-list-container>* .post-item-wrapper{cursor:hand;cursor:pointer;transition:all .2s linear}.stream-container .post-list-container .post-item-wrapper .post-item,.stream-container .post-list-container>* .post-item-wrapper .post-item{margin:0 28px 0 35px;padding:30px 0;display:flex;flex-direction:row;align-items:center}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item,.stream-container .post-list-container>* .post-item-wrapper .post-item{flex-direction:column-reverse;margin:0 0 15px;padding:0;box-shadow:0 0 8px rgba(0,0,0,.1);background:#fff}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper{flex-grow:1}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper{width:100%;padding:15px 20px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title{font-size:30px;font-weight:600;font-style:normal;margin-bottom:10px;line-height:1.5em}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title{font-size:22px;margin-bottom:5px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small{font-size:22px;margin-bottom:0}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-title-small{font-size:14px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary{font-size:16px;line-height:1.5em;margin-bottom:10px}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-summary{font-size:16px;margin-bottom:5px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta{font-size:16px}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-info-wrapper .post-item-meta{font-size:14px}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper{margin-left:20px}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper{width:100%;margin-left:0}}.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image{width:230px;height:120px;background:no-repeat 50%;background-size:cover;border-radius:5px;overflow:hidden}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image,.stream-container .post-list-container>* .post-item-wrapper .post-item .post-item-image-wrapper .post-item-image{width:100%;height:180px;border-radius:0}}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper .post-item-no-divider,.stream-container .post-list-container>* .post-item-wrapper .post-item-no-divider{border-bottom:none!important}.stream-container .post-list-container .post-item-wrapper .post-item-no-gaps,.stream-container .post-list-container>* .post-item-wrapper .post-item-no-gaps{margin:0;box-shadow:none}}.stream-container .post-list-container .post-item-wrapper *,.stream-container .post-list-container>* .post-item-wrapper *{transition:all .2s linear}.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover{text-decoration:none;background:rgba(0,0,0,.03)}.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title{text-decoration:underline;text-decoration-style:2px solid #1976d2;text-underline-position:under}.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover *,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover *{color:#145ca4}@media screen and (max-width:1020px){.stream-container .post-list-container .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title,.stream-container .post-list-container>* .post-item-wrapper:not(.post-item-wrapper-no-hover):hover .post-item-title{text-decoration:none!important}}.stream-container .post-list-container .post-item-wrapper-no-hover,.stream-container .post-list-container>* .post-item-wrapper-no-hover{cursor:unset}.stream-container .post-list-container:not(:last-child) .post-item,.stream-container .post-list-container>*:not(:last-child) .post-item{border-bottom:1px solid rgba(128,128,128,.12)}@media screen and (max-width:1020px){.stream-container .post-list-container-no-background{background:0 0}}@media screen and (max-width:1020px){.stream-container .post-list-container-shadow{box-shadow:0 0 8px rgba(0,0,0,.1)}}.stream-container .post-list-footer{text-align:center;width:100%;opacity:.3;color:#000;font-family:lora,noto serif sc,serif;font-size:13px;padding:15px}.stream-container .post{padding:0 0 20px}.stream-container .post .post-head-wrapper{margin-top:-20px;background:no-repeat 50%;background-size:cover;position:relative;padding-top:140px}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper{padding-top:120px}}.stream-container .post .post-head-wrapper *{color:#fff}.stream-container .post .post-head-wrapper .post-title{padding:80px 35px 30px;font-size:30px;font-weight:600;font-style:normal;line-height:1.5em;background:-moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);background:-webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#c6000000',GradientType=0)}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper .post-title{font-size:22px;padding:80px 20px 30px}}.stream-container .post .post-head-wrapper .post-title .post-subtitle{font-size:12px;width:80%;opacity:.6;padding:0 0 8px}.stream-container .post .post-head-wrapper .post-title .post-meta{margin:0}.stream-container .post .post-head-wrapper .post-title .post-meta,.stream-container .post .post-head-wrapper .post-title .post-meta *{font-size:16px}.stream-container .post .post-head-wrapper .post-title .post-meta .material-icons{vertical-align:middle;margin-bottom:3px}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper .post-title .post-meta,.stream-container .post .post-head-wrapper .post-title .post-meta *{font-size:14px}}.stream-container .post .post-head-wrapper-text-only{padding:30px 35px 0}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper-text-only{padding:30px 20px 0}}.stream-container .post .post-head-wrapper-text-only .post-title{font-size:30px;font-weight:600;font-style:normal;line-height:1.5em}.stream-container .post .post-head-wrapper-text-only .post-title .post-subtitle{font-size:12px;width:80%;opacity:.6;padding:0 0 8px}.stream-container .post .post-head-wrapper-text-only .post-title .post-meta{margin:0}.stream-container .post .post-head-wrapper-text-only .post-title .post-meta,.stream-container .post .post-head-wrapper-text-only .post-title .post-meta *{font-size:16px}.stream-container .post .post-head-wrapper-text-only .post-title .post-meta .material-icons{vertical-align:middle;margin-bottom:3px}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper-text-only .post-title .post-meta,.stream-container .post .post-head-wrapper-text-only .post-title .post-meta *{font-size:14px}}@media screen and (max-width:1020px){.stream-container .post .post-head-wrapper-text-only .post-title{font-size:22px}}.stream-container .post .post-body-wrapper{padding:30px 35px 35px}@media screen and (max-width:1020px){.stream-container .post .post-body-wrapper{padding:20px 20px 35px}}.stream-container .post .post-body-wrapper .post-body{font-size:16px;line-height:1.5em}.stream-container .post .post-body-wrapper .post-body *{word-wrap:break-word}.stream-container .post .post-body-wrapper .post-body img{max-width:100%;border-radius:5px;overflow:hidden}@media screen and (max-width:1020px){.stream-container .post .post-body-wrapper .post-body{font-size:16px}}.stream-container .post .post-pagination{padding:20px 35px;width:100%;display:flex;justify-content:space-between}.stream-container .post .post-pagination .newer-posts{padding-right:5px;text-align:left;width:50%}.stream-container .post .post-pagination .older-posts{padding-left:5px;text-align:right;width:50%}@media screen and (max-width:1020px){.stream-container .post .post-pagination{padding:20px}}.stream-container .post .post-comment-wrapper{padding:20px 35px}.stream-container .post .post-comment-wrapper iframe{overflow:hidden!important}@media screen and (max-width:1020px){.stream-container .post .post-comment-wrapper{padding:20px}}#single-column-footer{display:none}@media screen and (max-width:1020px){#single-column-footer{display:block!important;text-align:center;font-size:13px;font-family:montserrat,roboto,source sans pro,helvetica,lora,noto serif sc,serif;padding:40px 20px}}.toc{float:right;border-radius:5px;margin-left:30px;margin-right:60px;margin-top:30px;max-width:260px;max-height:80vh;overflow:auto;background:rgba(25,118,210,.05)}.toc,.toc *{font-size:16px}.toc ul{list-style:none;padding:0 0 0 20px;margin:0;line-height:1.7em}.toc .toc-content{padding:20px}.toc .toc-active{color:#03101c!important}@media screen and (max-width:1020px){.toc{line-height:2em;float:none;margin-top:30px;margin-left:0;margin-right:0}.toc,.toc *{}.toc .toc-content{padding:10px}}.pagination{display:none}@media screen and (max-width:1020px){.pagination{display:flex!important;flex-direction:row;justify-content:space-between}.pagination:not(.index-page){margin-top:15px}.pagination .pagination-indicator{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:25%;padding:15px 0;font-size:12px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.pagination .pagination-action{display:flex;flex-direction:column;align-content:center;justify-content:center;align-items:center;justify-items:center;width:64px;cursor:hand;cursor:pointer;padding:15px 0}.pagination .pagination-action :not(.pagination-action-icon){transition:all .2s linear;font-size:13px;font-family:fira mono,cousine,Monaco,Menlo,source code pro,monospace}.pagination .pagination-action *{transition:all .3s linear}.pagination .pagination-action:hover{text-decoration:none}.pagination .pagination-action:hover *{color:#145ca4}}.year{color:#145ca4}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941.json b/exampleSite/resources/_gen/assets/scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941.json
index d776e01..491f6db 100644
--- a/exampleSite/resources/_gen/assets/scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941.json
+++ b/exampleSite/resources/_gen/assets/scss/scss/journal.scss_48b060fe05b0a273d182ef83c0605941.json
@@ -1 +1 @@
-{"Target":"scss/journal.min.5c667e74038e21ddbb9024b67930f8544e02af62491281cf73fdb817eec2947e.css","MediaType":"text/css","Data":{"Integrity":"sha256-XGZ+dAOOId27kCS2eTD4VE4Cr2JJEoHPc/24F+7ClH4="}}
\ No newline at end of file
+{"Target":"scss/journal.min.1e35efc03f2207dae01a6594546243071b55099fc113eebf868505aadd0b3b1b.css","MediaType":"text/css","Data":{"Integrity":"sha256-HjXvwD8iB9rgGmWUVGJDBxtVCZ/BE+6/hoUFqt0LOxs="}}
\ No newline at end of file
diff --git a/layouts/partials/extrabar.html b/layouts/partials/extrabar.html
index 474863e..2b14e6b 100644
--- a/layouts/partials/extrabar.html
+++ b/layouts/partials/extrabar.html
@@ -10,6 +10,14 @@
                 keyboard_arrow_up
             </i>
         </a>
+        <a class="pagination-action" v-on:click="toggleDarkMode">
+            <i class="material-icons pagination-action-icon" v-if="isDarkMode">
+                brightness_4
+            </i>
+            <i class="material-icons pagination-action-icon" v-else="isDarkMode">
+                brightness_7
+            </i>
+        </a>
         {{ if .Paginator }}
         {{ if gt .Paginator.TotalPages 1 }}
             <div class="pagination-indicator">
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 655bfb8..b435785 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -30,6 +30,9 @@
 {{ $styles := resources.Get "scss/journal.scss" | toCSS | minify | fingerprint }}
 <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">
 
+{{ $darkmode := resources.Get "scss/dark-mode.scss" | toCSS | minify | fingerprint }}
+<link rel="stylesheet" href="{{ $darkmode.Permalink }}" integrity="{{ $darkmode.Data.Integrity }}" media="screen">
+
 <script src="{{.Site.BaseURL}}/js/loadCSS.js"></script>
 <script src="{{.Site.BaseURL}}/js/table.js"></script>
 
diff --git a/layouts/partials/mobile-header.html b/layouts/partials/mobile-header.html
index 3ef3743..ff2af2d 100644
--- a/layouts/partials/mobile-header.html
+++ b/layouts/partials/mobile-header.html
@@ -44,6 +44,14 @@
         <a ref="navTitle" class="navbar-brand" href="{{.Site.BaseURL}}">
             {{.Site.Title}}
         </a>
+        <button type="button" class="nav-darkmode-toggle" v-on:click="toggleDarkMode">
+            <i class="material-icons" v-if="isDarkMode">
+                brightness_4
+            </i>
+            <i class="material-icons" v-else="isDarkMode">
+                brightness_7
+            </i>
+        </button>
     </div>
 </nav>
 <div class="single-column-header-container" ref="pageHead"
diff --git a/static/js/journal.js b/static/js/journal.js
index eaa68d2..2d7a8c9 100644
--- a/static/js/journal.js
+++ b/static/js/journal.js
@@ -7,6 +7,7 @@ app = new Vue({
         navOpacity: 0,
         isDrawerOpen: false,
         mounted: false,
+        isDarkMode: false
     },
     methods: {
             sgn(t, x) {
@@ -48,6 +49,16 @@ app = new Vue({
                 this.isDrawerOpen = false;
                 document.getElementsByTagName('html')[0].style.overflow = this.isDrawerOpen ? 'hidden' : 'unset';
             },
+            toggleDarkMode() {
+                this.isDarkMode = !this.isDarkMode;
+                if (this.isDarkMode==true){
+                    document.cookie = "night=1;path=/";
+                    document.body.classList.add("night");
+                } else {
+                    document.cookie = "night=0;path=/";
+                    document.body.classList.remove("night");
+                }
+            }
     },
     created() {
         window.addEventListener('scroll', this.handleScroll);
@@ -59,6 +70,20 @@ app = new Vue({
             })(navigator.userAgent || navigator.vendor || window.opera);
             return check;
         };
+        
+        // From https://www.jdeal.cn/archives/Dark.html
+        var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+        if (night==""){
+            if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                this.toggleDarkMode();
+            }
+        }else{
+            // If night is not empty
+            if (night=="1") {
+                this.toggleDarkMode();
+            }
+        }
+        
     },
     mounted() {
         this.handleScroll();
@@ -88,4 +113,4 @@ Vue.component('parent',{
         </div>
     </div>
     `
-});
\ No newline at end of file
+});