From 6a68f5910e9cf92c715ef410be8d55812b37ac28 Mon Sep 17 00:00:00 2001
From: amazingrise <8315221+AmazingRise@users.noreply.github.com>
Date: Mon, 11 Nov 2019 21:40:58 +0800
Subject: Initial commit.

---
 static/css/journal.css   | 711 +++++++++++++++++++++++++++++++++++
 static/js/journal.js     |  70 ++++
 static/js/loadCSS.js     |  79 ++++
 static/scss/journal.scss | 952 +++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 1812 insertions(+)
 create mode 100644 static/css/journal.css
 create mode 100644 static/js/journal.js
 create mode 100644 static/js/loadCSS.js
 create mode 100644 static/scss/journal.scss

(limited to 'static')

diff --git a/static/css/journal.css b/static/css/journal.css
new file mode 100644
index 0000000..94e125c
--- /dev/null
+++ b/static/css/journal.css
@@ -0,0 +1,711 @@
+::-webkit-scrollbar {
+  display: none; }
+
+body {
+  background: #fcfcfc;
+  padding: 0;
+  margin: 0;
+  font-family: "Lora", "source-han-serif-tc", serif;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
+  text-rendering: optimizeLegibility !important;
+  -webkit-font-smoothing: antialiased !important;
+  color: black; }
+
+* {
+  color: black;
+  line-height: 1.5em;
+  word-wrap: break-word; }
+
+h1 {
+  font-size: 30px; }
+
+h2 {
+  font-size: 27px; }
+
+h3 {
+  font-size: 24px; }
+
+h4 {
+  font-size: 21px; }
+
+h5 {
+  font-size: 18px; }
+
+h6 {
+  font-size: 15px; }
+
+textarea,
+select,
+input,
+button {
+  outline: none !important; }
+
+button {
+  cursor: hand;
+  cursor: pointer; }
+
+code {
+  color: #7a422c;
+  background: rgba(159, 86, 58, 0.07) !important;
+  padding: 2px 5px;
+  border-radius: 3px;
+  font-family: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro", monospace; }
+
+pre {
+  background: rgba(159, 86, 58, 0.07) !important;
+  color: #7a422c;
+  padding: 12px 15px;
+  border-radius: 5px;
+  font-family: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro", monospace; }
+  pre * {
+    background: none !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(159, 86, 58, 0.7);
+  color: #7a422c;
+  background: rgba(159, 86, 58, 0.05); }
+  blockquote p {
+    margin-bottom: 0; }
+  blockquote * {
+    color: #7a422c; }
+
+a {
+  color: #9f563a; }
+  a:hover {
+    color: #7a422c;
+    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 0.5s linear;
+  visibility: visible;
+  opacity: 1; }
+
+.invisible {
+  visibility: hidden;
+  opacity: 0; }
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.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", "Arial", "Lora", "source-han-serif-tc", serif;
+        transition: opacity 0.5s ease-in-out; }
+      .single-column-nav-container button {
+        padding: 0; }
+      .single-column-nav-container .nav-content {
+        padding: 12px 20px;
+        justify-content: flex-start;
+        max-width: unset !important; }
+      .single-column-nav-container .navbar-brand {
+        opacity: 0;
+        text-align: left;
+        padding-left: 24px !important; }
+      .single-column-nav-container .nav-dropdown-toggle {
+        display: flex;
+        align-content: center;
+        align-items: center;
+        justify-items: center;
+        justify-content: center;
+        background: none !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: white;
+        -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+        -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 1px 1px rgba(0, 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 20px;
+      transition: padding 0.5s ease-in-out, margin 0.5s ease-in-out;
+      text-align: center; }
+      .single-column-header-container * {
+        font-family: "Montserrat", "Roboto", "Source Sans Pro", "Helvetica", "Arial", "Lora", "source-han-serif-tc", serif;
+        color: black; }
+      .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 0.3s ease-in-out; }
+      .single-column-drawer-container .drawer-content {
+        background: white;
+        height: 100%;
+        width: 100%;
+        padding: 50px 0 80px 0;
+        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 8px 30px;
+            cursor: hand;
+            cursor: pointer;
+            transition: all 0.2s linear;
+            color: black; }
+            .single-column-drawer-container .drawer-content .drawer-menu .drawer-menu-item.active {
+              border-right: 2px solid #9f563a;
+              background: rgba(159, 86, 58, 0.1);
+              color: #2f1911; } }
+
+.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, 0.8);
+      z-index: 1600;
+      transition: all 0.3s ease-in-out; } }
+
+.single-column-drawer-container-active {
+  left: 0;
+  box-shadow: 0 0 8px rgba(0, 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", "Arial", "Lora", "source-han-serif-tc", serif;
+  padding: 20px 0 50px 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between; 
+  scrollbar-width: none;
+}
+  .side-container .nav-head {
+    padding: 30px 28px 30px 20px;
+    cursor: hand;
+    cursor: pointer;
+    margin-bottom: 10px;
+    transition: all 0.2s linear;
+    color: black;
+    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(159, 86, 58, 0.6);
+      background: rgba(159, 86, 58, 0.02);
+      color: #2f1911; }
+    .side-container .nav-head.active {
+      border-right: 2px solid #9f563a;
+      background: rgba(159, 86, 58, 0.03);
+      color: #542e1f; }
+  .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 0.2s linear;
+      color: black; }
+      .side-container .nav-link-list .nav-link-item:hover {
+        border-right: 2px solid rgba(159, 86, 58, 0.6);
+        background: rgba(159, 86, 58, 0.02);
+        color: #2f1911; }
+      .side-container .nav-link-list .nav-link-item.active {
+        border-right: 2px solid #9f563a;
+        background: rgba(159, 86, 58, 0.03);
+        color: #542e1f; }
+  .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;
+  height: 100vh;
+  width: 64px;
+  text-align: right;
+  font-family: "Montserrat", "Roboto", "Source Sans Pro", "Helvetica", "Arial", "Lora", "source-han-serif-tc", serif;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 30px 0; 
+  scrollbar-width: none;
+}
+  .extra-container .pagination {
+    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: 64px;
+      padding: 15px 0;
+      font-size: 12px;
+      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 0.2s linear;
+        font-size: 13px;
+        font-family: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro", monospace; }
+      .extra-container .pagination .pagination-action * {
+        transition: all 0.3s linear; }
+      .extra-container .pagination .pagination-action:hover {
+        text-decoration: none; }
+        .extra-container .pagination .pagination-action:hover * {
+          color: #7a422c; }
+  @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", "Arial", "Lora", "source-han-serif-tc", serif;
+  padding: 20px 0;
+  overflow: scroll;
+  display: flex;
+  flex-direction: column; }
+
+.stream-container {
+  padding-left: 25%;
+  padding-right: 64px;
+  width: 100%;
+  min-height: 100vh;
+  max-width: 1480px; }
+  @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 20px 0;
+    background: #ffffff;
+    box-shadow: 0 0 16px rgba(0, 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, 0.2); } }
+    .stream-container .post-list-container .post-item-wrapper,
+    .stream-container .post-list-container > * .post-item-wrapper {
+      cursor: hand;
+      cursor: pointer;
+      transition: all 0.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 0;
+            padding: 0;
+            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+            background: #ffffff; } }
+        .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 center;
+            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 0.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, 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 #9f563a;
+          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: #7a422c; }
+        @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, 0.12); }
+  @media screen and (max-width: 1020px) {
+    .stream-container .post-list-container-no-background {
+      background: none; } }
+  @media screen and (max-width: 1020px) {
+    .stream-container .post-list-container-shadow {
+      box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1); } }
+  .stream-container .post-list-footer {
+    text-align: center;
+    width: 100%;
+    opacity: 0.3;
+    color: black;
+    font-family: "Lora", "source-han-serif-tc", serif;
+    font-size: 13px;
+    padding: 15px; }
+  .stream-container .post {
+    padding: 0 0 20px 0; }
+    .stream-container .post .post-head-wrapper {
+      margin-top: -20px;
+      background: no-repeat center;
+      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: white; }
+      .stream-container .post .post-head-wrapper .post-title {
+        padding: 80px 35px 30px 35px;
+        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%);
+        /* FF3.6-15 */
+        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
+        /* Chrome10-25,Safari5.1-6 */
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
+        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#c6000000', GradientType=0);
+        /* IE6-9 */ }
+        @media screen and (max-width: 1020px) {
+          .stream-container .post .post-head-wrapper .post-title {
+            font-size: 22px;
+            padding: 80px 20px 30px 20px; } }
+        .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 35px; }
+      @media screen and (max-width: 1020px) {
+        .stream-container .post .post-head-wrapper-text-only {
+          padding: 30px 20px 0 20px; } }
+      .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-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 35px; }
+      @media screen and (max-width: 1020px) {
+        .stream-container .post .post-body-wrapper {
+          padding: 20px 20px 35px 20px; } }
+      .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-body-wrapper .post-body .toc {
+          float: right;
+          border-radius: 5px;
+          background: rgba(159, 86, 58, 0.05);
+          padding: 30px;
+          margin-left: 30px;
+          margin-bottom: 30px; }
+          .stream-container .post .post-body-wrapper .post-body .toc,
+          .stream-container .post .post-body-wrapper .post-body .toc * {
+            font-size: 16px; }
+          .stream-container .post .post-body-wrapper .post-body .toc ul {
+            list-style: decimal;
+            padding: 0 0 0 20px;
+            margin: 0; }
+          @media screen and (max-width: 1020px) {
+            .stream-container .post .post-body-wrapper .post-body .toc,
+            .stream-container .post .post-body-wrapper .post-body .toc * {
+              font-size: 14px; } }
+    .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 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 20px; } }
+  .stream-container .pagination {
+    display: none; }
+    @media screen and (max-width: 1020px) {
+      .stream-container .pagination {
+        display: flex !important;
+        flex-direction: row;
+        justify-content: space-between; }
+        .stream-container .pagination:not(.index-page) {
+          margin-top: 15px; }
+        .stream-container .pagination .pagination-indicator {
+          display: flex;
+          flex-direction: column;
+          align-content: center;
+          justify-content: center;
+          align-items: center;
+          justify-items: center;
+          width: 64px;
+          padding: 15px 0;
+          font-size: 12px;
+          font-family: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro", monospace; }
+        .stream-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; }
+          .stream-container .pagination .pagination-action :not(.pagination-action-icon) {
+            transition: all 0.2s linear;
+            font-size: 13px;
+            font-family: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro", monospace; }
+          .stream-container .pagination .pagination-action * {
+            transition: all 0.3s linear; }
+          .stream-container .pagination .pagination-action:hover {
+            text-decoration: none; }
+            .stream-container .pagination .pagination-action:hover * {
+              color: #7a422c; } }
+  .stream-container .single-column-footer {
+    display: none; }
+    @media screen and (max-width: 1020px) {
+      .stream-container .single-column-footer {
+        display: block !important;
+        text-align: center;
+        font-size: 13px;
+        font-family: "Montserrat", "Roboto", "Source Sans Pro", "Helvetica", "Arial", "Lora", "source-han-serif-tc", serif;
+        padding: 40px 20px 40px 20px; } }
diff --git a/static/js/journal.js b/static/js/journal.js
new file mode 100644
index 0000000..39c2c9a
--- /dev/null
+++ b/static/js/journal.js
@@ -0,0 +1,70 @@
+let app;
+
+app = new Vue({
+    el: '#app',
+    data: {
+        scrollY: 0,
+        navOpacity: 0,
+        isDrawerOpen: false,
+        mounted: false,
+    },
+    methods: {
+        sgn(t, x) {
+            let k = 1. / (1. - 2 * t);
+            if (x <= t) return 0;
+            else if (x >= 1 - t) return 1;
+            else {
+                return k * (x - t);
+            }
+        },
+        handleScroll() {
+            this.scrollY = window.scrollY;
+            this.navOpacity = this.sgn(.0, Math.min(1, Math.max(0, window.scrollY / (this.pageHeadHeight() - this.navBarHeight() * 0.8))));
+            const {navBar, navBackground, navTitle, extraContainer, streamContainer} = this.$refs;
+
+            if (this.navOpacity >= 1) {
+                navBackground.style.opacity = 1;
+                navTitle.style.opacity = 1;
+            } else {
+                navBackground.style.opacity = 0;
+                navTitle.style.opacity = 0;
+            }
+        },
+        handleResize() {
+            const {navBar, navBackground, navTitle, extraContainer, streamContainer} = this.$refs;
+            extraContainer.style.left = (streamContainer.offsetWidth - extraContainer.offsetWidth) + 'px';
+        },
+        navBarHeight() {
+            return this.$refs.navBar.offsetHeight;
+        },
+        pageHeadHeight() {
+            return this.$refs.pageHead.offsetHeight;
+        },
+        toggleDrawer() {
+            this.isDrawerOpen = !this.isDrawerOpen;
+            document.getElementsByTagName('html')[0].style.overflow = this.isDrawerOpen ? 'hidden' : 'unset';
+        },
+    },
+    created() {
+        window.addEventListener('scroll', this.handleScroll);
+        window.addEventListener('resize', this.handleResize);
+        window._nonDesktop = function () {
+            let check = false;
+            (function (a) {
+                if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true;
+            })(navigator.userAgent || navigator.vendor || window.opera);
+            return check;
+        };
+    },
+    mounted() {
+        this.handleScroll();
+        this.handleResize();
+        this.mounted = true;
+    },
+    destroyed() {
+        window.removeEventListener('scroll', this.handleScroll);
+        window.removeEventListener('resize', this.handleResize);
+    }
+});
+
+new SmoothScroll('a#globalBackToTop');
\ No newline at end of file
diff --git a/static/js/loadCSS.js b/static/js/loadCSS.js
new file mode 100644
index 0000000..0ba961a
--- /dev/null
+++ b/static/js/loadCSS.js
@@ -0,0 +1,79 @@
+/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
+(function(w){
+    "use strict";
+    /* exported loadCSS */
+    var loadCSS = function( href, before, media ){
+        // Arguments explained:
+        // `href` [REQUIRED] is the URL for your CSS file.
+        // `before` [OPTIONAL] is the element the script should use as a reference for injecting our stylesheet <link> before
+        // By default, loadCSS attempts to inject the link after the last stylesheet or script in the DOM. However, you might desire a more specific location in your document.
+        // `media` [OPTIONAL] is the media type or query of the stylesheet. By default it will be 'all'
+        var doc = w.document;
+        var ss = doc.createElement( "link" );
+        var ref;
+        if( before ){
+            ref = before;
+        }
+        else {
+            var refs = ( doc.body || doc.getElementsByTagName( "head" )[ 0 ] ).childNodes;
+            ref = refs[ refs.length - 1];
+        }
+
+        var sheets = doc.styleSheets;
+        ss.rel = "stylesheet";
+        ss.href = href;
+        // temporarily set media to something inapplicable to ensure it'll fetch without blocking render
+        ss.media = "only x";
+
+        // wait until body is defined before injecting link. This ensures a non-blocking load in IE11.
+        function ready( cb ){
+            if( doc.body ){
+                return cb();
+            }
+            setTimeout(function(){
+                ready( cb );
+            });
+        }
+        // Inject link
+        // Note: the ternary preserves the existing behavior of "before" argument, but we could choose to change the argument to "after" in a later release and standardize on ref.nextSibling for all refs
+        // Note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/
+        ready( function(){
+            ref.parentNode.insertBefore( ss, ( before ? ref : ref.nextSibling ) );
+        });
+        // A method (exposed on return object for external use) that mimics onload by polling document.styleSheets until it includes the new sheet.
+        var onloadcssdefined = function( cb ){
+            var resolvedHref = ss.href;
+            var i = sheets.length;
+            while( i-- ){
+                if( sheets[ i ].href === resolvedHref ){
+                    return cb();
+                }
+            }
+            setTimeout(function() {
+                onloadcssdefined( cb );
+            });
+        };
+
+        function loadCB(){
+            if( ss.addEventListener ){
+                ss.removeEventListener( "load", loadCB );
+            }
+            ss.media = media || "all";
+        }
+
+        // once loaded, set link's media back to `all` so that the stylesheet applies once it loads
+        if( ss.addEventListener ){
+            ss.addEventListener( "load", loadCB);
+        }
+        ss.onloadcssdefined = onloadcssdefined;
+        onloadcssdefined( loadCB );
+        return ss;
+    };
+    // commonjs
+    if( typeof exports !== "undefined" ){
+        exports.loadCSS = loadCSS;
+    }
+    else {
+        w.loadCSS = loadCSS;
+    }
+}( typeof global !== "undefined" ? global : this ));
\ No newline at end of file
diff --git a/static/scss/journal.scss b/static/scss/journal.scss
new file mode 100644
index 0000000..6c8d555
--- /dev/null
+++ b/static/scss/journal.scss
@@ -0,0 +1,952 @@
+$color-accent: #9f34ff;
+$back-container-background: #fcfcfc;
+$front-container-background: #ffffff;
+
+$default-font-list: "Lora", "source-han-serif-tc", serif;
+$mono-font-list: "Fira Mono", "Cousine", Monaco, Menlo, "Source Code Pro",
+  monospace;
+$sans-preferred-font-list: "Montserrat", "Roboto", "Source Sans Pro",
+  "Helvetica", "Arial", $default-font-list;
+//$default-font-list: "Cousine", Monaco, Menlo, "Source Code Pro", sans-serif;
+//$sans-preferred-font-list: "Cousine", Monaco, Menlo, "Source Code Pro", sans-serif;
+
+$side-container-width: 25%; //280px;
+$extra-container-width: 64px;
+$stream-container-max-width: 1480px;
+
+$nav-title-size: 30px;
+$nav-subtitle-size: 18px;
+$nav-link-size: 20px;
+$nav-footer-size: 12px;
+$post-title-size: 30px;
+$post-summary-size: 16px;
+$post-body-size: 16px;
+$post-meta-size: 16px;
+$tag-category-title-size: 22px;
+$toc-size: 16px;
+
+$dark-accent: darken($color-accent, 10%);
+$deep-dark-accent: darken($color-accent, 50%);
+$color-text: $deep-dark-accent;
+
+@if lightness($color-accent) <10% {
+  $dark-accent: $color-accent;
+  $deep-dark-accent: $color-accent;
+  $color-text: $deep-dark-accent;
+}
+
+$single-column-max-width: 1020px;
+$single-column-drawer-width: 260px;
+$single-column-nav-title-size: 28px;
+$single-column-nav-subtitle-size: 20px;
+$single-column-nav-link-size: 18px;
+$single-column-nav-footer-size: 13px;
+$single-column-post-title-size: 22px;
+$single-column-post-summary-size: 16px;
+$single-column-post-body-size: 16px;
+$single-column-post-meta-size: 14px;
+$single-column-tag-category-title-size: 14px;
+$single-column-toc-size: 14px;
+
+$h1: 30px;
+$h-diff: 3px;
+
+::-webkit-scrollbar {
+  display: none;
+}
+
+body {
+  background: $back-container-background;
+  padding: 0;
+  margin: 0;
+  font-family: $default-font-list;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
+  text-rendering: optimizeLegibility !important;
+  -webkit-font-smoothing: antialiased !important;
+  color: $color-text;
+}
+
+* {
+  color: $deep-dark-accent;
+  line-height: 1.5em;
+  word-wrap: break-word;
+}
+
+h1 {
+  font-size: $h1;
+}
+
+h2 {
+  font-size: $h1 - 1 * $h-diff;
+}
+
+h3 {
+  font-size: $h1 - 2 * $h-diff;
+}
+
+h4 {
+  font-size: $h1 - 3 * $h-diff;
+}
+
+h5 {
+  font-size: $h1 - 4 * $h-diff;
+}
+
+h6 {
+  font-size: $h1 - 5 * $h-diff;
+}
+
+textarea,
+select,
+input,
+button {
+  outline: none !important;
+}
+
+button {
+  cursor: hand;
+  cursor: pointer;
+}
+
+code {
+  color: $dark-accent;
+  background: rgba($color-accent, 0.07) !important;
+  padding: 2px 5px;
+  border-radius: 3px;
+  font-family: $mono-font-list;
+}
+
+pre {
+  background: rgba($color-accent, 0.07) !important;
+  color: $dark-accent;
+  padding: 12px 15px;
+  border-radius: 5px;
+  font-family: $mono-font-list;
+  * {
+    background: none !important;
+    font-family: $mono-font-list !important;
+  }
+  code {
+    padding: 0;
+  }
+}
+
+blockquote {
+  padding: 10px 20px;
+  border-left: 3px solid rgba($color-accent, 0.7);
+  color: $dark-accent;
+  background: rgba($color-accent, 0.05);
+  p {
+    margin-bottom: 0;
+  }
+  * {
+    color: $dark-accent;
+  }
+}
+
+a {
+  color: $color-accent;
+  &:hover {
+    color: darken($color-accent, 10%);
+    text-underline-position: under;
+  }
+  @media screen and (max-width: $single-column-max-width) {
+    &:hover {
+      text-decoration: none !important;
+    }
+  }
+}
+
+.a-block {
+  display: block;
+  text-decoration: none !important;
+  &:hover {
+    text-decoration: none !important;
+  }
+}
+
+.no-margin {
+  margin: 0;
+}
+
+.no-padding {
+  padding: 0;
+}
+
+.no-overflow {
+  overflow: hidden !important;
+}
+
+.animated-visibility {
+  transition: visibility 0s, opacity 0.5s linear;
+  visibility: visible;
+  opacity: 1;
+}
+
+.invisible {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+// dirty hack for livere
+#lv-container {
+  padding: 0 30px;
+
+  @media screen and (max-width: $single-column-max-width) {
+    padding: 0 15px;
+  }
+}
+
+.single-column-nav-container {
+  display: none !important;
+  @media screen and (max-width: $single-column-max-width) {
+    display: block !important;
+    padding: 0;
+    * {
+      font-family: $sans-preferred-font-list;
+      transition: opacity 0.5s ease-in-out;
+    }
+    button {
+      padding: 0;
+    }
+    .nav-content {
+      padding: 12px 20px;
+      justify-content: flex-start;
+      max-width: unset !important;
+    }
+    .navbar-brand {
+      opacity: 0;
+      text-align: left;
+      padding-left: 24px !important;
+    }
+    .nav-dropdown-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;
+      }
+    }
+    .nav-icon-group {
+      z-index: 5;
+      padding-right: 5px;
+      ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+      li {
+        display: inline;
+        margin: 0;
+        padding: 0;
+      }
+    }
+    .nav-icon {
+      padding: 8px;
+    }
+    .nav-background {
+      opacity: 0;
+      z-index: -1;
+      left: 0;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: white;
+      -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+      -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+    }
+  }
+}
+
+.single-column-header-container {
+  display: none !important;
+  @media screen and (max-width: $single-column-max-width) {
+    display: block !important;
+    padding: 50px 20px 80px 20px;
+    transition: padding 0.5s ease-in-out, margin 0.5s ease-in-out;
+    text-align: center;
+    * {
+      font-family: $sans-preferred-font-list;
+      color: $deep-dark-accent;
+    }
+    .single-column-header-title {
+      font-size: $single-column-nav-title-size;
+    }
+    .single-column-header-subtitle {
+      font-size: $single-column-nav-subtitle-size;
+    }
+  }
+}
+
+.single-column-drawer-container {
+  display: none !important;
+  @media screen and (max-width: $single-column-max-width) {
+    display: block !important;
+    position: fixed;
+    top: 0;
+    left: -$single-column-drawer-width;
+    width: $single-column-drawer-width;
+    height: 100vh;
+    z-index: 1800;
+    transition: all 0.3s ease-in-out;
+    .drawer-content {
+      background: white;
+      height: 100%;
+      width: 100%;
+      padding: 50px 0 80px 0;
+      display: flex;
+      .drawer-menu {
+        flex-grow: 1;
+        display: flex;
+        justify-items: center;
+        justify-content: center;
+        flex-direction: column;
+        $drawer-menu-item-active-background-alpha: 0.1;
+        $drawer-menu-item-active-color-darken: 30%;
+        .drawer-menu-item {
+          font-size: $single-column-nav-link-size;
+          margin-bottom: 10px;
+          border-right: 2px solid transparent;
+          padding: 8px 30px 8px 30px;
+          cursor: hand;
+          cursor: pointer;
+          transition: all 0.2s linear;
+          color: $deep-dark-accent;
+          &.active {
+            border-right: 2px solid $color-accent;
+            background: rgba(
+              $color-accent,
+              $drawer-menu-item-active-background-alpha
+            );
+            color: darken($color-accent, $drawer-menu-item-active-color-darken);
+          }
+        }
+      }
+    }
+  }
+}
+
+.single-column-drawer-mask {
+  display: none !important;
+  @media screen and (max-width: $single-column-max-width) {
+    display: block !important;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.8);
+    z-index: 1600;
+    transition: all 0.3s ease-in-out;
+  }
+}
+
+.single-column-drawer-container-active {
+  left: 0;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+}
+
+.side-container {
+  position: fixed;
+  top: 0;
+  height: 100vh;
+  width: $side-container-width;
+  text-align: right;
+  font-family: $sans-preferred-font-list;
+  padding: 20px 0 50px 0;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  $nav-item-hover-background-alpha: 0.02;
+  $nav-item-hover-indicator-alpha: 0.6;
+  $nav-item-hover-color-darken: 30%;
+  $nav-item-active-background-alpha: 0.03;
+  $nav-item-active-color-darken: 20%;
+  .nav-head {
+    padding: 30px 28px 30px 20px;
+    cursor: hand;
+    cursor: pointer;
+    margin-bottom: 10px;
+    transition: all 0.2s linear;
+    color: $deep-dark-accent;
+    .nav-title {
+      font-size: $nav-title-size;
+      line-height: $nav-title-size * 1.4;
+    }
+    border-right: 2px solid transparent;
+    .nav-subtitle {
+      margin-top: 8px;
+      font-size: $nav-subtitle-size;
+    }
+    &:hover {
+      border-right: 2px solid
+        rgba($color-accent, $nav-item-hover-indicator-alpha);
+      background: rgba($color-accent, $nav-item-hover-background-alpha);
+      color: darken($color-accent, $nav-item-hover-color-darken);
+    }
+    &.active {
+      border-right: 2px solid $color-accent;
+      background: rgba($color-accent, $nav-item-active-background-alpha);
+      color: darken($color-accent, $nav-item-active-color-darken);
+    }
+  }
+  .nav-link-list {
+    flex-grow: 1;
+    .nav-link-item {
+      font-size: $nav-link-size;
+      margin-bottom: 10px;
+      border-right: 2px solid transparent;
+      padding: 8px 28px 8px 30px;
+      cursor: hand;
+      cursor: pointer;
+      transition: all 0.2s linear;
+      color: $deep-dark-accent;
+      &:hover {
+        border-right: 2px solid
+          rgba($color-accent, $nav-item-hover-indicator-alpha);
+        background: rgba($color-accent, $nav-item-hover-background-alpha);
+        color: darken($color-accent, $nav-item-hover-color-darken);
+      }
+      &.active {
+        border-right: 2px solid $color-accent;
+        background: rgba($color-accent, $nav-item-active-background-alpha);
+        color: darken($color-accent, $nav-item-active-color-darken);
+      }
+    }
+  }
+  .nav-footer {
+    padding: 20px 30px 0 20px;
+    font-size: $nav-footer-size;
+  }
+  @media screen and (max-width: $single-column-max-width) {
+    display: none;
+  }
+}
+
+.extra-container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  width: $extra-container-width;
+  text-align: right;
+  font-family: $sans-preferred-font-list;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 30px 0;
+  .pagination {
+    display: flex;
+    flex-direction: column;
+    > :not(:last-child) {
+      // border-bottom: 1px solid rgba(128, 128, 128, 0.12);
+    }
+    .pagination-indicator {
+      display: flex;
+      flex-direction: column;
+      align-content: center;
+      justify-content: center;
+      align-items: center;
+      justify-items: center;
+      width: $extra-container-width;
+      padding: 15px 0;
+      font-size: 12px;
+      font-family: $mono-font-list;
+    }
+    .pagination-action {
+      display: flex;
+      flex-direction: column;
+      align-content: center;
+      justify-content: center;
+      align-items: center;
+      justify-items: center;
+      width: $extra-container-width;
+      cursor: hand;
+      cursor: pointer;
+      padding: 15px 0;
+      :not(.pagination-action-icon) {
+        transition: all 0.2s linear;
+        font-size: 13px;
+        font-family: $mono-font-list;
+      }
+      .pagination-action-icon {
+        // margin-right: 4px;
+      }
+      * {
+        transition: all 0.3s linear;
+      }
+      &:hover {
+        text-decoration: none;
+        * {
+          color: $dark-accent;
+        }
+      }
+    }
+  }
+  @media screen and (max-width: $single-column-max-width) {
+    display: none;
+  }
+}
+
+.pagination-bar-container {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  width: $side-container-width;
+  text-align: right;
+  font-family: $sans-preferred-font-list;
+  padding: 20px 0;
+  overflow: scroll;
+  display: flex;
+  flex-direction: column;
+}
+
+.stream-container {
+  padding-left: $side-container-width;
+  padding-right: $extra-container-width;
+  width: 100%;
+  min-height: 100vh;
+  max-width: $stream-container-max-width;
+
+  @media screen and (max-width: $single-column-max-width) {
+    padding: 0;
+    min-height: unset;
+  }
+
+  .post-list-container {
+    width: 100%;
+    min-height: 100vh;
+    padding: 20px 0 20px 0;
+    background: $front-container-background;
+    box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
+
+    @media screen and (max-width: $single-column-max-width) {
+      min-height: unset;
+      padding: 0;
+      box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
+    }
+    &,
+    > * {
+      .post-item-wrapper {
+        cursor: hand;
+        cursor: pointer;
+        .post-item {
+          margin: 0 28px 0 35px;
+          padding: 30px 0;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+
+          @media screen and (max-width: $single-column-max-width) {
+            flex-direction: column-reverse;
+            margin: 0 0 15px 0;
+            padding: 0;
+            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+            background: $front-container-background;
+          }
+          .post-item-info-wrapper {
+            flex-grow: 1;
+
+            @media screen and (max-width: $single-column-max-width) {
+              width: 100%;
+              padding: 15px 20px;
+            }
+            .post-item-title {
+              font-size: $post-title-size;
+              font-weight: 600;
+              font-style: normal;
+              margin-bottom: 10px;
+              line-height: 1.5em;
+
+              @media screen and (max-width: $single-column-max-width) {
+                font-size: $single-column-post-title-size;
+                margin-bottom: 5px;
+              }
+            }
+
+            .post-item-title-small {
+              font-size: $tag-category-title-size;
+              margin-bottom: 0;
+
+              @media screen and (max-width: $single-column-max-width) {
+                font-size: $single-column-tag-category-title-size;
+              }
+            }
+
+            .post-item-summary {
+              font-size: $post-summary-size;
+              line-height: 1.5em;
+              margin-bottom: 10px;
+
+              @media screen and (max-width: $single-column-max-width) {
+                font-size: $single-column-post-summary-size;
+                margin-bottom: 5px;
+              }
+            }
+            .post-item-meta {
+              font-size: $post-meta-size;
+
+              @media screen and (max-width: $single-column-max-width) {
+                font-size: $single-column-post-meta-size;
+              }
+            }
+          }
+          .post-item-image-wrapper {
+            margin-left: 20px;
+            @media screen and (max-width: $single-column-max-width) {
+              width: 100%;
+              margin-left: 0;
+            }
+            .post-item-image {
+              width: 230px;
+              height: 120px;
+              background: no-repeat center;
+              background-size: cover;
+              border-radius: 5px;
+              overflow: hidden;
+
+              @media screen and (max-width: $single-column-max-width) {
+                width: 100%;
+                height: 180px;
+                border-radius: 0;
+              }
+            }
+          }
+        }
+        @media screen and (max-width: $single-column-max-width) {
+          .post-item-no-divider {
+            border-bottom: none !important;
+          }
+          .post-item-no-gaps {
+            margin: 0;
+            box-shadow: none;
+          }
+        }
+
+        transition: all 0.2s linear;
+        * {
+          transition: all 0.2s linear;
+        }
+        &:not(.post-item-wrapper-no-hover):hover {
+          text-decoration: none;
+          background: rgba(0, 0, 0, 0.03);
+          .post-item-title {
+            text-decoration: underline;
+            text-decoration-style: 2px solid $color-accent;
+            text-underline-position: under;
+          }
+          * {
+            color: $dark-accent;
+          }
+
+          @media screen and (max-width: $single-column-max-width) {
+            .post-item-title {
+              text-decoration: none !important;
+            }
+          }
+        }
+      }
+
+      .post-item-wrapper-no-hover {
+        cursor: unset;
+      }
+
+      &:not(:last-child) {
+        .post-item {
+          border-bottom: 1px solid rgba(128, 128, 128, 0.12);
+
+          @media screen and (max-width: $single-column-max-width) {
+            //border-bottom: none !important;
+          }
+        }
+      }
+    }
+  }
+  .post-list-container-no-background {
+    @media screen and (max-width: $single-column-max-width) {
+      background: none;
+    }
+  }
+  .post-list-container-shadow {
+    @media screen and (max-width: $single-column-max-width) {
+      // box-shadow: 0 -6px 8px -4px rgba(0, 0, 0, 0.1);
+      box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1);
+    }
+  }
+  .post-list-footer {
+    text-align: center;
+    width: 100%;
+    opacity: 0.3;
+    color: $deep-dark-accent;
+    font-family: $default-font-list;
+    font-size: 13px;
+    padding: 15px;
+  }
+  .post {
+    padding: 0 0 20px 0;
+    .post-head-wrapper {
+      margin-top: -20px;
+      background: no-repeat center;
+      background-size: cover;
+      position: relative;
+      padding-top: 140px;
+
+      @media screen and (max-width: $single-column-max-width) {
+        padding-top: 120px;
+      }
+      * {
+        color: white;
+      }
+      .post-title {
+        padding: 80px 35px 30px 35px;
+        font-size: $post-title-size;
+        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%
+        ); /* FF3.6-15 */
+        background: -webkit-linear-gradient(
+          top,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 0.75) 100%
+        ); /* Chrome10-25,Safari5.1-6 */
+        background: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 0.75) 100%
+        ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#c6000000', GradientType=0); /* IE6-9 */
+
+        @media screen and (max-width: $single-column-max-width) {
+          font-size: $single-column-post-title-size;
+          padding: 80px 20px 30px 20px;
+        }
+        .post-meta {
+          margin: 0;
+          &,
+          * {
+            font-size: 16px;
+          }
+          .material-icons {
+            vertical-align: middle;
+            margin-bottom: 3px;
+          }
+
+          @media screen and (max-width: $single-column-max-width) {
+            &,
+            * {
+              font-size: $single-column-post-meta-size;
+            }
+          }
+        }
+      }
+    }
+
+    .post-head-wrapper-text-only {
+      padding: 30px 35px 0 35px;
+
+      @media screen and (max-width: $single-column-max-width) {
+        padding: 30px 20px 0 20px;
+      }
+      .post-title {
+        font-size: $post-title-size;
+        font-weight: 600;
+        font-style: normal;
+        line-height: 1.5em;
+        .post-meta {
+          margin: 0;
+          &,
+          * {
+            font-size: 16px;
+          }
+          .material-icons {
+            vertical-align: middle;
+            margin-bottom: 3px;
+          }
+
+          @media screen and (max-width: $single-column-max-width) {
+            &,
+            * {
+              font-size: $single-column-post-meta-size;
+            }
+          }
+        }
+
+        @media screen and (max-width: $single-column-max-width) {
+          font-size: $single-column-post-title-size;
+        }
+      }
+    }
+
+    .post-body-wrapper {
+      padding: 30px 35px 35px 35px;
+
+      @media screen and (max-width: $single-column-max-width) {
+        padding: 20px 20px 35px 20px;
+      }
+      .post-body {
+        font-size: $post-body-size;
+        line-height: 1.5em;
+        * {
+          word-wrap: break-word;
+        }
+        img {
+          max-width: 100%;
+          border-radius: 5px;
+          overflow: hidden;
+        }
+        @media screen and (max-width: $single-column-max-width) {
+          font-size: $single-column-post-body-size;
+        }
+        .toc {
+          float: right;
+          border-radius: 5px;
+          background: rgba($color-accent, 0.05);
+          padding: 30px;
+          margin-left: 30px;
+          margin-bottom: 30px;
+          &,
+          * {
+            font-size: $toc-size;
+          }
+          ul {
+            list-style: decimal;
+            padding: 0 0 0 20px;
+            margin: 0;
+          }
+          @media screen and (max-width: $single-column-max-width) {
+            &,
+            * {
+              font-size: $single-column-toc-size;
+            }
+          }
+        }
+      }
+    }
+
+    .post-pagination {
+      padding: 20px 35px;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+
+      .newer-posts {
+        padding-right: 5px;
+        text-align: left;
+        width: 50%;
+      }
+
+      .older-posts {
+        padding-left: 5px;
+        text-align: right;
+        width: 50%;
+      }
+
+      @media screen and (max-width: $single-column-max-width) {
+        padding: 20px 20px;
+      }
+    }
+
+    .post-comment-wrapper {
+      iframe {
+        // Yay a dirty hack
+        overflow: hidden !important;
+      }
+      padding: 20px 35px;
+
+      @media screen and (max-width: $single-column-max-width) {
+        padding: 20px 20px;
+      }
+    }
+  }
+
+  .pagination {
+    display: none;
+
+    @media screen and (max-width: $single-column-max-width) {
+      display: flex !important;
+      flex-direction: row;
+      justify-content: space-between;
+      &:not(.index-page) {
+        margin-top: 15px;
+      }
+      .pagination-indicator {
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+        justify-content: center;
+        align-items: center;
+        justify-items: center;
+        width: $extra-container-width;
+        padding: 15px 0;
+        font-size: 12px;
+        font-family: $mono-font-list;
+      }
+      .pagination-action {
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+        justify-content: center;
+        align-items: center;
+        justify-items: center;
+        width: $extra-container-width;
+        cursor: hand;
+        cursor: pointer;
+        padding: 15px 0;
+        :not(.pagination-action-icon) {
+          transition: all 0.2s linear;
+          font-size: 13px;
+          font-family: $mono-font-list;
+        }
+        .pagination-action-icon {
+          // margin-right: 4px;
+        }
+        * {
+          transition: all 0.3s linear;
+        }
+        &:hover {
+          text-decoration: none;
+          * {
+            color: $dark-accent;
+          }
+        }
+      }
+    }
+  }
+
+  .single-column-footer {
+    display: none;
+
+    @media screen and (max-width: $single-column-max-width) {
+      display: block !important;
+      text-align: center;
+      font-size: $single-column-nav-footer-size;
+      font-family: $sans-preferred-font-list;
+      padding: 40px 20px 40px 20px;
+    }
+  }
+}
-- 
cgit v1.2.3