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:
| M | assets/content.scss | | | 137 | ++++++++++++++++++++++++++++++++++++++++++++++--------------------------------- |
| M | assets/styles.scss | | | 88 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------ |
| M | assets/variables.scss | | | 23 | ++++++++++++++++++----- |
| M | layouts/_default/baseof.html | | | 6 | +++++- |
| M | layouts/partials/header/header.html | | | 37 | ++++++++++++++++++++++--------------- |
| M | static/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