From fe27dbac37cf3301ac78c0ce6422eda748649447 Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Sat, 12 Feb 2022 18:09:48 +0000
Subject: [PATCH] refactor: added back basic dark mode

---
 assets/scss/partials/vendors/contactform.scss        |  122 ++++++-------
 layouts/_default/baseof.html                         |    2 
 assets/scss/main.scss                                |    1 
 assets/scss/partials/components/_archive.scss        |   16 +
 assets/scss/partials/components/_footer.scss         |    4 
 assets/scss/partials/components/_category.scss       |    8 
 assets/scss/modules/_variables.scss                  |   23 +
 assets/scss/partials/components/_navbarburger.scss   |    4 
 assets/scss/partials/layout/_header.scss             |   10 
 assets/scss/modules/_color_theme.scss                |   43 ++++
 assets/scss/partials/_hugo.scss                      |   14 +
 assets/scss/partials/components/_pagination.scss     |    4 
 assets/scss/partials/components/_sidebar.scss        |    5 
 assets/scss/partials/vendors/mediumzoom.scss         |   68 +++---
 assets/scss/modules/_config.scss                     |    1 
 assets/scss/partials/components/_alert.scss          |   41 ++--
 assets/scss/partials/components/_portfolio.scss      |   35 ++-
 assets/scss/partials/vendors/tableofcontents.scss    |   24 +-
 assets/scss/partials/components/_page404.scss        |    6 
 assets/js/anatole-theme-switcher.js                  |   18 +
 assets/scss/partials/components/_post.scss           |   12 +
 assets/scss/partials/layout/_nav.scss                |   17 +
 assets/scss/partials/components/_languageswitch.scss |   20 +
 assets/scss/partials/layout/_body.scss               |   11 +
 24 files changed, 321 insertions(+), 188 deletions(-)

diff --git a/assets/js/anatole-theme-switcher.js b/assets/js/anatole-theme-switcher.js
index 054c3e0..ae81039 100644
--- a/assets/js/anatole-theme-switcher.js
+++ b/assets/js/anatole-theme-switcher.js
@@ -6,6 +6,7 @@
 function setTheme(style) {
   document.documentElement.setAttribute('data-theme', style);
   localStorage.setItem('theme', style);
+  setCssClass(style);
 }
 
 function init() {
@@ -26,12 +27,25 @@
     // load a stored theme
     if (theme === 'light') {
       document.documentElement.setAttribute('data-theme', 'light');
+      setCssClass('light');
     } else {
       document.documentElement.setAttribute('data-theme', 'dark');
+      setCssClass('dark');
     }
   }
 }
 
+function setCssClass(style) {
+  var body = document.body;
+  if (style === 'light') {
+    body.classList.remove('theme--dark');
+    body.classList.add('theme--light');
+  } else if (style === 'dark') {
+    body.classList.remove('theme--light');
+    body.classList.add('theme--dark');
+  }
+}
+
 // switch themes
 function switchTheme() {
   const theme = getTheme();
@@ -55,4 +69,6 @@
 // Automatic Switching
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', switchTheme, false);
 
-init();
+document.addEventListener('DOMContentLoaded', function () {
+  init();
+});
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index a2a5fe9..ff403f3 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -1,5 +1,6 @@
 @import './modules/variables';
 @import './modules/config';
+@import './modules/color_theme';
 @import './partials/hugo';
 @import './partials/base';
 @import './partials/layout/html';
diff --git a/assets/scss/modules/_color_theme.scss b/assets/scss/modules/_color_theme.scss
new file mode 100644
index 0000000..4350782
--- /dev/null
+++ b/assets/scss/modules/_color_theme.scss
@@ -0,0 +1,43 @@
+$themes: (
+  light: (
+    accent: $accent--lightmode,
+    primary: $primary--lightmode,
+    primary-light: $primary-light--lightmode,
+    primary-lighter: $primary-lighter--lightmode,
+    info: $info,
+    shadow: $shadow--lightmode,
+    border: 1px solid $primary-lighter--lightmode
+  ),
+  dark: (
+    accent: $accent--darkmode,
+    primary: $primary--darkmode,
+    primary-light: $primary-light--darkmode,
+    primary-lighter: $primary-lighter--darkmode,
+    info: $info,
+    shadow: $shadow--darkmode,
+    border: 1px solid $primary-lighter--darkmode
+  ),
+);
+
+@mixin themed() {
+  @each $theme, $map in $themes {
+    .theme--#{$theme} & {
+      $theme-map: () !global;
+      @each $key, $submap in $map {
+        $value: map-get(map-get($themes, $theme), '#{$key}');
+        $theme-map: map-merge(
+          $theme-map,
+          (
+            $key: $value,
+          )
+        ) !global;
+      }
+      @content;
+      $theme-map: null !global;
+    }
+  }
+}
+
+@function t($key) {
+  @return map-get($theme-map, $key);
+}
diff --git a/assets/scss/modules/_config.scss b/assets/scss/modules/_config.scss
index 46505a6..2839379 100644
--- a/assets/scss/modules/_config.scss
+++ b/assets/scss/modules/_config.scss
@@ -1,4 +1,3 @@
-
 @mixin desktop {
   @media screen and (min-width: 961px) {
     @content;
diff --git a/assets/scss/modules/_variables.scss b/assets/scss/modules/_variables.scss
index c40ffe5..5a03b37 100644
--- a/assets/scss/modules/_variables.scss
+++ b/assets/scss/modules/_variables.scss
@@ -1,12 +1,21 @@
-/* Newly defined variables */
-$accent: #fff;
+/* Strings used for mapping variables */
 $primary: #464646;
-$primary-light: #9f9f9f;
-$primary-lighter: #eeeeee;
-$info: #0366d7;
-$shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
-$border: 1px solid rgba(0, 0, 0, 0.15);
+
+/* Newly defined variables */
+$accent--lightmode: #fff;
+$primary--lightmode: #464646;
+$primary-light--lightmode: #9f9f9f;
+$primary-lighter--lightmode: #eeeeee;
+$shadow--lightmode: 0 8px 16px rgba(10, 10, 10, 0.1);
+
+$accent--darkmode: #152028;
+$primary--darkmode: #eeeeee;
+$primary-light--darkmode: #9f9f9f;
+$primary-lighter--darkmode: #464646;
+$shadow--darkmode: 0 8px 16px rgba(10, 10, 10, 0.1);
+
 $alert: #ffc107;
+$info: #0366d7;
 
 /* Former variables*/
 $secondary-bg-color: #eeeeee;
diff --git a/assets/scss/partials/_hugo.scss b/assets/scss/partials/_hugo.scss
index 920b51f..70dfac8 100644
--- a/assets/scss/partials/_hugo.scss
+++ b/assets/scss/partials/_hugo.scss
@@ -1,16 +1,22 @@
 a {
   text-decoration: none;
-  color: $primary;
+  @include themed() {
+    color: t('primary');
+  }
 
   &:hover {
-    color: $info;
+    @include themed() {
+      color: t('info');
+    }
   }
 }
 
 blockquote {
+  @include themed() {
+    color: t('primary');
+    border-left: t('border');
+  }
   padding: 0 1em;
-  border-left: 0.25em solid $primary;
-  color: $primary;
 }
 
 p {
diff --git a/assets/scss/partials/components/_alert.scss b/assets/scss/partials/components/_alert.scss
index faa0d86..2a88c55 100644
--- a/assets/scss/partials/components/_alert.scss
+++ b/assets/scss/partials/components/_alert.scss
@@ -1,21 +1,24 @@
 .alert {
-    padding: 1rem;
-    border-style: solid;
-    border-color:$alert;
-    border-radius: 0.25rem;
-    border-width: 2px;
-
-    &__indicator {
-        background-color: $alert;
-        display: inline-block;
-        border-radius: 9999px;
-        padding: 0.5rem;
-        width: 2.5rem;
-        height: 2.5rem;
-        text-align: center;
-        color: $accent;
-        font-weight: 800;
-        margin-right: 0.75rem;
-      }
+  @include themed() {
+    border-color: t('alert');
   }
-  
+  padding: 1rem;
+  border-style: solid;
+  border-radius: 0.25rem;
+  border-width: 2px;
+
+  &__indicator {
+    @include themed() {
+      color: t('accent');
+      background-color: t('alert');
+    }
+    display: inline-block;
+    border-radius: 9999px;
+    padding: 0.5rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    text-align: center;
+    font-weight: 800;
+    margin-right: 0.75rem;
+  }
+}
diff --git a/assets/scss/partials/components/_archive.scss b/assets/scss/partials/components/_archive.scss
index 68200d2..1c928ee 100644
--- a/assets/scss/partials/components/_archive.scss
+++ b/assets/scss/partials/components/_archive.scss
@@ -15,23 +15,31 @@
     }
 
     &-date {
+      @include themed() {
+        color: t('primary-light');
+      }
       float: right;
       max-width: 10%;
       text-align: right;
-      color: $primary-light;
     }
     &-title {
-      color: $primary;
+      @include themed() {
+        color: t('primary');
+      }
       width: 90%;
       display: inline-block;
       &:hover {
-        color: $info;
+        @include themed() {
+          color: t('info');
+        }
       }
     }
 
     &-heading {
+      @include themed() {
+        color: t('primary');
+      }
       font-size: 2.4rem;
-      color: $primary;
       font-weight: 600;
       line-height: 2.2em;
     }
diff --git a/assets/scss/partials/components/_category.scss b/assets/scss/partials/components/_category.scss
index 7a09467..9d8c0d7 100644
--- a/assets/scss/partials/components/_category.scss
+++ b/assets/scss/partials/components/_category.scss
@@ -1,9 +1,11 @@
 .category {
+  @include themed() {
+    border: t('border');
+    background-color: t('primary-lighter');
+    color: t('primary') !important;
+  }
   padding: 4px 6px;
   border-radius: 3px;
-  color: $tag-color !important;
-  background-color: $primary-lighter;
-  border: 1px solid $primary-light;
   display: inline-block;
   font-size: 1.5rem;
   line-height: 1;
diff --git a/assets/scss/partials/components/_footer.scss b/assets/scss/partials/components/_footer.scss
index 1c03581..8768b7c 100644
--- a/assets/scss/partials/components/_footer.scss
+++ b/assets/scss/partials/components/_footer.scss
@@ -23,13 +23,13 @@
 
   &__sidebar {
     display: none;
-    @include desktop_and_print{
+    @include desktop_and_print {
       display: inline-block;
     }
   }
 
   &__base {
-    @include desktop_and_print{
+    @include desktop_and_print {
       display: none;
     }
   }
diff --git a/assets/scss/partials/components/_languageswitch.scss b/assets/scss/partials/components/_languageswitch.scss
index 0bb36ed..c6d30bb 100644
--- a/assets/scss/partials/components/_languageswitch.scss
+++ b/assets/scss/partials/components/_languageswitch.scss
@@ -13,17 +13,21 @@
     position: relative;
 
     @include desktop {
-      background: $accent;
-      border-color: $primary;
+      @include themed() {
+        background: t(accent);
+        border-color: t(primary);
+        box-shadow: t(shadow);
+      }
       border-radius: 5px;
-      box-shadow: $shadow;
       position: absolute;
       top: 40px;
     }
 
     &-item {
+      @include themed() {
+        color: t('primary');
+      }
       background: transparent;
-      color: $primary;
       display: block;
       line-height: 1;
       padding: 0.5rem 0.75rem 0.5rem 0;
@@ -40,10 +44,12 @@
     display: none;
 
     &::before {
+      @include themed() {
+        background: t('accent');
+        box-shadow: t('shadow');
+        border-color: t('primary');
+      }
       content: '';
-      background: $accent;
-      box-shadow: $shadow;
-      border-color: $primary;
       border-radius: 2px 0px 0px 0px;
       height: 14px;
       bottom: 0px;
diff --git a/assets/scss/partials/components/_navbarburger.scss b/assets/scss/partials/components/_navbarburger.scss
index e61cd6e..ab3e7c1 100644
--- a/assets/scss/partials/components/_navbarburger.scss
+++ b/assets/scss/partials/components/_navbarburger.scss
@@ -7,7 +7,9 @@
   margin-left: auto;
 
   &__line {
-    background-color: $primary;
+    @include themed() {
+      background-color: t('primary');
+    }
     display: block;
     height: 1px;
     left: calc(50% - 8px);
diff --git a/assets/scss/partials/components/_page404.scss b/assets/scss/partials/components/_page404.scss
index d608e96..7f38ac2 100644
--- a/assets/scss/partials/components/_page404.scss
+++ b/assets/scss/partials/components/_page404.scss
@@ -1,4 +1,4 @@
 .page_404 {
-    text-align: center;
-    padding-top: 50px;
-}
\ No newline at end of file
+  text-align: center;
+  padding-top: 50px;
+}
diff --git a/assets/scss/partials/components/_pagination.scss b/assets/scss/partials/components/_pagination.scss
index 90311b5..4372d86 100644
--- a/assets/scss/partials/components/_pagination.scss
+++ b/assets/scss/partials/components/_pagination.scss
@@ -9,11 +9,13 @@
     padding: 0;
     height: 13px;
     &-item {
+      @include themed() {
+        color: t('primary');
+      }
       margin: 0 2px 0 2px;
       display: inline;
       line-height: 1;
       text-decoration: none;
-      color: $primary;
     }
   }
 }
diff --git a/assets/scss/partials/components/_portfolio.scss b/assets/scss/partials/components/_portfolio.scss
index 789e72a..ab87c02 100644
--- a/assets/scss/partials/components/_portfolio.scss
+++ b/assets/scss/partials/components/_portfolio.scss
@@ -11,7 +11,9 @@
   }
 
   &::before {
-    border: $border;
+    @include themed() {
+      border: t('border');
+    }
     content: '';
     z-index: -1;
     position: absolute;
@@ -50,10 +52,12 @@
 
       &--right,
       &--left {
+        @include themed() {
+          background-color: t('accent');
+        }
         margin-right: auto;
         margin-left: auto;
         width: calc(100% - 64px);
-        background-color: $accent;
         z-index: -1;
         padding: 32px 32px 0px 32px;
         max-width: inherit;
@@ -87,26 +91,33 @@
   }
 
   &__description {
-    background-color: $accent;
+    @include themed() {
+      background-color: t('accent');
+    }
     padding: 32px;
     @include desktop_and_print {
+      @include themed() {
+        box-shadow: t('shadow');
+      }
       padding: 48px;
-      box-shadow: $shadow;
-      background-color: $accent;
       border-radius: 0.5em;
     }
 
     &--left,
     &--right {
+      @include themed() {
+        border-bottom: t('border');
+      }
       margin-top: -24px;
-      border-bottom: $border;
 
       @include desktop_and_print {
+        @include themed() {
+          background: t('primary-lighter');
+        }
         border-bottom: 0px;
         width: 60%;
         margin-top: -48px;
         z-index: 3;
-        background: $primary-lighter;
       }
     }
 
@@ -118,23 +129,28 @@
   }
 
   &__button {
+    @include themed() {
+      border: 1px solid t('primary-light');
+      color: t('info');
+    }
     font-weight: 400;
     display: inline-block;
     position: relative;
     outline: 0;
-    color: $info;
     background: transparent;
     font-size: 1.4rem;
     text-align: center;
     text-decoration: none;
     cursor: pointer;
-    border: 1px solid $primary-light;
     white-space: nowrap;
     font-style: normal;
     border-radius: 999em;
     padding: 10px;
 
     &:hover {
+      @include themed() {
+        border: 1px solid t('primary');
+      }
       display: inline-block;
       position: relative;
       outline: 0px;
@@ -143,7 +159,6 @@
       text-align: center;
       text-decoration: none;
       cursor: pointer;
-      border: 1px solid $primary;
       white-space: nowrap;
       font-weight: 400;
       font-style: normal;
diff --git a/assets/scss/partials/components/_post.scss b/assets/scss/partials/components/_post.scss
index c247435..05bf23e 100644
--- a/assets/scss/partials/components/_post.scss
+++ b/assets/scss/partials/components/_post.scss
@@ -1,5 +1,7 @@
 .post {
-  background-color: $accent;
+  @include themed() {
+    background-color: t('accent');
+  }
   margin: 30px;
 
   &__more {
@@ -13,10 +15,12 @@
     display: block;
 
     &-wrapper {
+      @include themed() {
+        box-shadow: t('shadow');
+      }
       border-radius: 0.5em;
       width: 100%;
       margin-bottom: 1em;
-      box-shadow: $shadow;
       overflow: hidden;
       transition: box-shadow 0.3s ease;
     }
@@ -89,7 +93,9 @@
   }
 
   &__footer {
-    border-bottom: $border;
+    @include themed() {
+      border-bottom: t('border');
+    }
     font-size: 1.2rem;
     padding: 12px 0;
 
diff --git a/assets/scss/partials/components/_sidebar.scss b/assets/scss/partials/components/_sidebar.scss
index abaf0df..6a017c2 100644
--- a/assets/scss/partials/components/_sidebar.scss
+++ b/assets/scss/partials/components/_sidebar.scss
@@ -4,7 +4,10 @@
   background-color: var(--bg-color);
 
   @include desktop_and_print {
-    border-right: 1px solid $primary-lighter;
+    @include themed() {
+      border-right: 1px solid t('primary-lighter');
+    }
+
     z-index: 3;
     height: 100vh;
     position: fixed;
diff --git a/assets/scss/partials/layout/_body.scss b/assets/scss/partials/layout/_body.scss
index 128340e..654bb2b 100644
--- a/assets/scss/partials/layout/_body.scss
+++ b/assets/scss/partials/layout/_body.scss
@@ -1,6 +1,13 @@
 .body {
-  color: $body-color;
   width: 100%;
   margin: 0 auto;
-  background-color: $accent;
+  // work around to style body
+  &.theme--dark {
+    color: $primary--darkmode;
+    background-color: $accent--darkmode;
+  }
+  &.theme--light {
+    color: $primary--lightmode;
+    background-color: $accent--lightmode;
+  }
 }
diff --git a/assets/scss/partials/layout/_header.scss b/assets/scss/partials/layout/_header.scss
index 8de1747..51d28dc 100644
--- a/assets/scss/partials/layout/_header.scss
+++ b/assets/scss/partials/layout/_header.scss
@@ -1,16 +1,20 @@
 .header {
+  @include themed() {
+    background-color: t('accent');
+  }
   width: 100%;
   position: fixed;
   right: 0;
   z-index: 3;
-  background-color: $accent;
 
   @include desktop {
-    border-bottom: $border;
+    @include themed() {
+      border-bottom: t('border');
+    }
     width: $content-width;
   }
 
   @include print {
     display: none;
   }
-}
\ No newline at end of file
+}
diff --git a/assets/scss/partials/layout/_nav.scss b/assets/scss/partials/layout/_nav.scss
index b6e1ac1..792748b 100644
--- a/assets/scss/partials/layout/_nav.scss
+++ b/assets/scss/partials/layout/_nav.scss
@@ -1,11 +1,15 @@
 .nav {
+  @include themed() {
+    box-shadow: t('shadow');
+  }
   display: none;
-  box-shadow: $shadow;
 
   &__list {
+    @include themed() {
+      background-color: t('primary-lighter');
+    }
     margin: 0;
     list-style: none;
-    background-color: $primary-lighter;
     width: 100%;
 
     &-item {
@@ -23,7 +27,10 @@
   &__link {
     &--active {
       @include desktop {
-        border-bottom: 1px solid $primary;
+        @include themed() {
+          border-bottom: 1px solid t('primary');
+        }
+
         padding-bottom: 22px;
       }
     }
@@ -42,8 +49,10 @@
     box-shadow: none;
 
     &__list {
+      @include themed() {
+        background-color: t('accent');
+      }
       display: flex;
-      background-color: $accent;
 
       &-item {
         &:not(:last-child) {
diff --git a/assets/scss/partials/vendors/contactform.scss b/assets/scss/partials/vendors/contactform.scss
index 9ed1de7..1ec2148 100644
--- a/assets/scss/partials/vendors/contactform.scss
+++ b/assets/scss/partials/vendors/contactform.scss
@@ -1,70 +1,60 @@
 /* (CONTACT) FORM */
 
 .contact-form {
-    margin-top: 30px;
+  margin-top: 30px;
+}
+.form-style {
+  width: 100%;
+}
+.form-style ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.form-style ul li {
+  display: block;
+  margin-bottom: 10px;
+  min-height: 35px;
+  @include themed() {
+    background-color: t('accent');
+    color: t('primary');
+    broder: t('border');
   }
-  .form-style {
-    width: 100%;
-  }
-  .form-style ul {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-  .form-style ul li {
-    display: block;
-    margin-bottom: 10px;
-    min-height: 35px;
-  }
-  .form-style ul li .field-style {
-    box-sizing: border-box;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    font-size: 1.4rem;
-    padding: 8px;
-    outline: none;
-    background-color: $accent;
-    border: 1px solid $primary-light;
-    color: $body-color;
-    font-family: inherit;
-  }
-  .form-style ul li .field-style:focus {
-    box-shadow: 0 0 5px;
-    border: 1px solid;
-  }
-  .form-style ul li .field-split {
-    width: 49%;
-  }
-  .form-style ul li .field-full {
-    width: 100%;
-  }
-  .form-style ul li input.align-left {
-    float: left;
-  }
-  .form-style ul li input.align-right {
-    float: right;
-  }
-  .form-style ul li textarea {
-    background-color: $accent;
-    border: 1px solid $primary-light;
-    color: $body-color;
-    width: 100%;
-    height: auto;
-  }
-  .form-style ul li input[type='button'],
-  .form-style ul li input[type='submit'] {
-    background-color: $accent;
-    border: 1px solid $primary-light;
-    display: inline-block;
-    cursor: pointer;
-    color: $body-color;
-    text-decoration: none;
-    width: 100%;
-  }
-  .form-style ul li input[type='button']:hover,
-  .form-style ul li input[type='submit']:hover {
-    background-color: $accent;
-    border: 1px solid $primary-light;
-  }
-  
-  /* (CONTACT) FORM END */
\ No newline at end of file
+}
+.form-style ul li .field-style {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  font-size: 1.4rem;
+  padding: 8px;
+  outline: none;
+  font-family: inherit;
+}
+.form-style ul li .field-style:focus {
+  box-shadow: 0 0 5px;
+  border: 1px solid;
+}
+.form-style ul li .field-split {
+  width: 49%;
+}
+.form-style ul li .field-full {
+  width: 100%;
+}
+.form-style ul li input.align-left {
+  float: left;
+}
+.form-style ul li input.align-right {
+  float: right;
+}
+.form-style ul li textarea {
+  width: 100%;
+  height: auto;
+}
+.form-style ul li input[type='button'],
+.form-style ul li input[type='submit'] {
+  display: inline-block;
+  cursor: pointer;
+  text-decoration: none;
+  width: 100%;
+}
+/* (CONTACT) FORM END */
diff --git a/assets/scss/partials/vendors/mediumzoom.scss b/assets/scss/partials/vendors/mediumzoom.scss
index 54b8983..527e5c4 100644
--- a/assets/scss/partials/vendors/mediumzoom.scss
+++ b/assets/scss/partials/vendors/mediumzoom.scss
@@ -1,35 +1,37 @@
 .medium-zoom-overlay {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    opacity: 0;
-    transition: opacity 300ms;
-    will-change: opacity;
-    background: $accent;
+  @include themed() {
+    background: t('accent');
   }
-  
-  .medium-zoom--opened .medium-zoom-overlay {
-    cursor: pointer;
-    cursor: zoom-out;
-    opacity: 1;
-  }
-  
-  .medium-zoom-image {
-    cursor: pointer;
-    cursor: zoom-in;
-    transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
-    z-index: 100;
-  }
-  
-  .medium-zoom-image--hidden {
-    visibility: hidden;
-  }
-  
-  .medium-zoom-image--opened {
-    position: relative;
-    cursor: pointer;
-    cursor: zoom-out;
-    will-change: transform;
-  }
\ No newline at end of file
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity 300ms;
+  will-change: opacity;
+}
+
+.medium-zoom--opened .medium-zoom-overlay {
+  cursor: pointer;
+  cursor: zoom-out;
+  opacity: 1;
+}
+
+.medium-zoom-image {
+  cursor: pointer;
+  cursor: zoom-in;
+  transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
+  z-index: 100;
+}
+
+.medium-zoom-image--hidden {
+  visibility: hidden;
+}
+
+.medium-zoom-image--opened {
+  position: relative;
+  cursor: pointer;
+  cursor: zoom-out;
+  will-change: transform;
+}
diff --git a/assets/scss/partials/vendors/tableofcontents.scss b/assets/scss/partials/vendors/tableofcontents.scss
index 4d9592a..6b1da60 100644
--- a/assets/scss/partials/vendors/tableofcontents.scss
+++ b/assets/scss/partials/vendors/tableofcontents.scss
@@ -1,23 +1,23 @@
 #TableOfContents {
-    display: block;
-    background: transparent;
-  }
-  
+  display: block;
+  background: transparent;
+}
+
 #TableOfContents ul {
-list-style: none;
-line-height: 1.9em;
-margin: 0;
+  list-style: none;
+  line-height: 1.9em;
+  margin: 0;
 }
 
 #TableOfContents > ul {
-padding-left: 0;
+  padding-left: 0;
 }
 
 #TableOfContents li a {
-display: inherit;
-color: var(--link-color);
+  display: inherit;
+  color: var(--link-color);
 }
 
 #TableOfContents li a:hover {
-display: inherit;
-}
\ No newline at end of file
+  display: inherit;
+}
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 418e6c2..a6d7f98 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -6,7 +6,7 @@
   class="html"
 >
   {{- partial "head.html" . -}}
-  <body class="body">
+  <body class="body theme--light">
     <header class="header">{{ partial "navbar.html" . }}</header>
     <div class="wrapper">
       <aside class="wrapper__sidebar">

--
Gitblit v1.10.0