ybbond

My site. The main domain
Log | Files | Refs | README | LICENSE | CC-LICENSE

commit 36f20f0a4b88d9344a8c234c932fcd7c86836337
parent b3886beb578bf010eea9dd342058c28405a40c21
Author: Yohanes Bandung <bandungpenting@gmail.com>
Date:   Tue, 28 Apr 2020 23:46:05 +0700

style & refactor: dark 🌛 or light 🌞

Diffstat:
Massets/content.scss | 137++++++++++++++++++++++++++++++++++++++++++++++---------------------------------
Massets/styles.scss | 88+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------
Massets/variables.scss | 23++++++++++++++++++-----
Mlayouts/_default/baseof.html | 6+++++-
Mlayouts/partials/header/header.html | 37++++++++++++++++++++++---------------
Mstatic/darkToggler.js | 21+++++++++++++++++++--

6 files changed, 219 insertions(+), 93 deletions(-)

diff --git a/assets/content.scss b/assets/content.scss
@@ -1,72 +1,95 @@
 @import "fonts";
 @import "variables";
 
-.content {
-  font-family: $font-text;
-  width: 100%;
-  pre {
-    overflow: auto;
-    padding: 0.5em;
-  }
-  code {
-    padding: 0.1em;
-    font-family: $font-mono;
-    font-size: 0.9em;
-  }
-  table {
-    display: block;
-    overflow-x: auto;
-    border-collapse: collapse;
-    td, th {
-      border: 1px solid #ddd;
-    }
-    td {
-      padding: 0.5em 1em;
+@mixin themify($themes: $themes) {
+  @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;
     }
-    th {
-      padding: 1em 2em;
-      background-color: #333;
-      color: $color-text;
+
+  }
+}
+
+@function themed($key) {
+  @return map-get($theme-map, $key);
+}
+
+.content {
+  @include themify($themes) {
+    font-family: $font-text;
+    width: 100%;
+    pre {
+      overflow: auto;
+      padding: 0.5em;
     }
-    tr:nth-child(even) {
-      background-color: #333;
+    code {
+      padding: 0.1em;
+      font-family: $font-mono;
+      font-size: 0.9em;
     }
-    tr:hover {
-      background-color: #303030;
+    table {
+      display: block;
+      overflow-x: auto;
+      border-collapse: collapse;
+      td, th {
+        border: 1px solid #ddd;
+      }
+      td {
+        padding: 0.5em 1em;
+      }
+      th {
+        padding: 1em 2em;
+        background-color: #333;
+        color: themed('color-text');
+      }
+      tr:nth-child(even) {
+        background-color: #333;
+      }
+      tr:hover {
+        background-color: #303030;
+      }
     }
-  }
-  ul {
-    padding: 0;
-    li {
-      position: relative;
-      list-style: none;
-      padding-left: 20px;
-      margin-bottom: 10px;
-      &:before {
-        display: inline-block;
-        content: "- ";
-        position: absolute;
-        width: 20px;
-        color: $color-red;
-        left: 0;
+    ul {
+      padding: 0;
+      li {
+        position: relative;
+        list-style: none;
+        padding-left: 20px;
+        margin-bottom: 10px;
+        &:before {
+          display: inline-block;
+          content: "- ";
+          position: absolute;
+          width: 20px;
+          color: themed('color-red');
+          left: 0;
+        }
       }
     }
   }
-}
 
-.notes {
-  & > p {
-    margin-top: 5px;
-  }
-  margin-bottom: 2em;
-  @media (max-width: 599px) {
-    &__title {
-      margin: 10px 0 0;
-      &__separator {
-        display: none;
+  .notes {
+    & > p {
+      margin-top: 5px;
+    }
+    margin-bottom: 2em;
+    @media (max-width: 599px) {
+      &__title {
+        margin: 10px 0 0;
+        &__separator {
+          display: none;
+        }
+        display: flex;
+        flex-direction: column;
       }
-      display: flex;
-      flex-direction: column;
     }
   }
 } 
\ No newline at end of file
diff --git a/assets/styles.scss b/assets/styles.scss
@@ -2,15 +2,42 @@
 @import "fonts";
 @import "content";
 
+@mixin themify($themes: $themes) {
+  @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 themed($key) {
+  @return map-get($theme-map, $key);
+}
+
 html {
-  background-color: $color-background;
-  color: $color-text;
+  @include themify($themes) {
+    background-color: themed('color-background');
+    color: themed('color-text');
+  }
   font-family: $font-text;
   line-height: 1.6;
   font-size: 16px;
 }
 
 body {
+  @include themify($themes) {
+    background-color: themed('color-background');
+    color: themed('color-text');
+  }
   max-width: 600px;
   margin: 0 auto;
 }
@@ -29,7 +56,9 @@ body {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  color: $color-green;
+  @include themify($themes) {
+    color: themed('color-green');
+  }
   font-family: $font-mono;
 }
 
@@ -43,12 +72,14 @@ h1, h2, h3 {
 
 a {
   text-decoration: none;
-  color: $color-blue;
-  &:hover {
-    color: $color-red;
-  }
-  .link-white {
-    color: $color-text;
+  @include themify($themes) {
+    color: themed('color-blue');
+    &:hover {
+      color: themed('color-red');
+    }
+    .link-white {
+      color: themed('color-text');
+    }
   }
   &.button {
     display: inline-block;     
@@ -56,7 +87,9 @@ a {
     z-index: 1;     
     padding: 0.3em 0.7em;
     &:hover {
-      background-color: #303030;
+      @include themify($themes) {
+        background-color: themed('color-background-hover');
+      }
     }
     &:first-child:not(.header__menu__list__item) {
       margin-left: -0.5em;
@@ -73,14 +106,19 @@ blockquote {
   margin: inherit auto;
   margin-left: 0;
   padding: 0 1em;
-  border-left: 2px solid $color-red;
+  border-left: 2px solid;
+  @include themify($themes) {
+    border-color: themed('color-red');
+  }
   p {
     font-size: 0.9em;
   }
 }
 
 time {
-  color: $color-red;
+  @include themify($themes) {
+    color: themed('color-red');
+  }
   font-family: $font-mono;
 }
 
@@ -106,14 +144,38 @@ time {
       display: flex;
       flex-grow: 1;
       flex-wrap: nowrap;
+      @media (max-width: 599px) {
+        justify-content: space-between;
+      }
       &__item {
         &:first-child {
           margin-left: 0;
         }
-        margin: 0 10px;
+        margin: 0 5px;
         border-style: solid;
         border-width: 1px;
       }
+      &__toggler {
+        &__off {
+          display: none;
+        }
+        font-size: 1.75em;
+        padding: 0 0.3em;
+        background-color: transparent;
+        background-repeat: no-repeat;
+        border: none;
+        cursor: pointer;
+        overflow: hidden;
+        outline: none;
+        @media (min-width: 600px) {
+          margin-left: 20px;
+        }
+        &:hover {
+          @include themify($themes) {
+            background-color: themed('color-background-hover');
+          }
+        }
+      }
     }
   }
 }
diff --git a/assets/variables.scss b/assets/variables.scss
@@ -1,8 +1,21 @@
-$color-text: #E3E0D7;
-$color-background: #242424;
-$color-red: #F9690E;
-$color-blue: #8DBFFF;
-$color-green: #79D688;
+$themes: (
+  light: (
+    color-text: #242424,
+    color-background: #E3E0D7,
+    color-background-hover: #D4D1C7,
+    color-red: #C31B00,
+    color-blue: #2585FF,
+    color-green: #257933,
+  ),
+  dark: (
+    color-text: #E3E0D7,
+    color-background: #242424,
+    color-background-hover: #303030,
+    color-red: #F9690E,
+    color-blue: #8DBFFF,
+    color-green: #79D688,
+  ),
+);
 
 $font-mono: 'iA Writer Duospace', monospace;
 $font-text: 'iA Writer Quattro S', Arial, Helvetica, sans-serif;
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,5 +1,9 @@
 <!DOCTYPE html>
-<html ⚡ lang="{{ .Site.LanguageCode | default "en-us" }}">
+<html ⚡
+  lang="{{ .Site.LanguageCode | default "en-us" }}"
+  class="theme-dark"
+  id="main-theme"
+>
   <head>
     {{ partial "head/head.html" . }}
   </head>
diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html
@@ -1,21 +1,29 @@
 {{ if .IsHome }}
-  <h1 class="header__title">Yohanes Bandung Bondowoso<span class="dark-toggler"></span></h1>
+  <h1 class="header__title">Yohanes Bandung Bondowoso</h1>
 {{ else }}
   <h2 class="header__title">Yohanes Bandung Bondowoso</h2>
 {{ end }}
 <nav class="header__menu">
   <div class="header__menu__list">
-    {{ $baseURL := .Site.BaseURL }}
-    {{ range .Site.Menus.main }}
-      {{ $url := trim .URL "/" | absURL }}
-        <a
-          href={{ $url }}
-          data-rel="prefetch"
-          role="button"
-          class="header__menu__list__item button"
-        >
-          {{ .Pre }}<span>{{ .Name }}</span>
-        </a>
-    {{ end }}
+    <span>
+      {{ $baseURL := .Site.BaseURL }}
+      {{ range .Site.Menus.main }}
+        {{ $url := trim .URL "/" | absURL }}
+          <a
+            href={{ $url }}
+            data-rel="prefetch"
+            role="button"
+            class="header__menu__list__item button"
+          >
+            {{ .Pre }}<span>{{ .Name }}</span>
+          </a>
+      {{ end }}
+    </span>
+    <button
+      class="header__menu__list__toggler__off"
+      id="dark-toggler"
+    >
+      🌛
+    </button>
   </div>
-</nav>-
\ No newline at end of file
+</nav>
diff --git a/static/darkToggler.js b/static/darkToggler.js
@@ -1,4 +1,21 @@
 (function() {
-  let toggler = document.getElementsByClassName("dark-toggler");
-  toggler.innerHTML = "🌛";
+  window.onload = function() {
+    console.log("Nice! You have the privilege of toggling the dark mode :D");
+    console.log("Just press the 🌞 or 🌛 logo on the top of page!");
+    const toggler = document.getElementById("dark-toggler");
+    const mainWrapper = document.getElementById("main-theme");
+
+    if (toggler && mainWrapper) {
+      toggler.className = "header__menu__list__toggler";
+      toggler.onclick = function() {
+        if (mainWrapper.className === "theme-light") {
+          mainWrapper.className = "theme-dark";
+          toggler.innerText = "🌛";
+        } else if (mainWrapper.className === "theme-dark") {
+          mainWrapper.className = "theme-light";
+          toggler.innerText = "🌞";
+        }
+      };
+    }
+  }
 })() 
\ No newline at end of file