update switcher (#37)

Author: nguyenvanduocit

.gitignore

@@ -1,3 +1,4 @@
 public/
 .env
-node_modules/
+node_modules/
+\.idea/

resources/_gen/assets/js/js/app.js_d11fe7b62c27961c87ecd0f2490357b9.content

@@ -1,11 +1,9 @@
-WebFont.load({google:{families:['Roboto+Mono:400,700']}});const switchThemeItem=document.querySelectorAll('.switch-theme-item')
+WebFont.load({google:{families:['Roboto+Mono:400,700']}})
 const body=document.querySelector('body')
 const themes=['light','dark']
 let theme=localStorage.getItem('theme')
 if(themes.indexOf(theme)===-1){theme='light'}
-window.addEventListener('DOMContentLoaded',()=>{body.className=theme})
-switchThemeItem.forEach(item=>{item.addEventListener('click',(e)=>{e.preventDefault()
-let target=e.currentTarget
-let theme=target.dataset.theme
-localStorage.setItem('theme',theme)
+window.addEventListener('DOMContentLoaded',()=>{body.className=theme
+document.getElementById('switch-theme').addEventListener('click',(e)=>{e.preventDefault()
+theme=theme==='dark'?'light':'dark';localStorage.setItem('theme',theme)
 body.className=theme})})

resources/_gen/assets/js/js/app.js_d11fe7b62c27961c87ecd0f2490357b9.json

@@ -1 +1 @@
-{"Target":"js/app.min.072e74a136b32554764fe8bdda72e79f7de89d4d0720ef51c63240ba493a1eed.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-By50oTazJVR2T+i92nLnn33onU0HIO9RxjJAukk6Hu0="}}
+{"Target":"js/app.min.6337372839d07af2f4ccced3924fe858e1e2b16f859e85da2cdc3c95f9c7e641.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-Yzc3KDnQevL0zM7Tkk/oWOHisW+FnoXaLNw8lfnH5kE="}}

resources/_gen/assets/scss/scss/style.scss_48b060fe05b0a273d182ef83c0605941.content

@@ -1,3 +1,3 @@
 .light{--bg: #fff;--color: #222831;--linkColor: rgba(34,40,49, .5);--linkColorHover: #222831;--siteHeaderColor: #222831;--titleColor: #222831;--codeBg: rgba(44,44,44,.08);--newTabIcon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' class='i-external' viewBox='0 0 32 32' width='14' height='14' fill='none' stroke='#ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='9.38%'><path d='M14 9 L3 9 3 29 23 29 23 18 M18 4 L28 4 28 14 M28 4 L14 18'/></svg>")
 }.dark{--bg: #222831;--color: #ccc;--linkColor: #ccc;--linkColorHover: #fff;--siteHeaderColor: #ccc;--titleColor: #ccc;--codeBg: rgba(255, 255, 255, 0.1);--newTabIcon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' class='i-external' viewBox='0 0 32 32' width='14' height='14' fill='none' stroke='#ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='9.38%'><path d='M14 9 L3 9 3 29 23 29 23 18 M18 4 L28 4 28 14 M28 4 L14 18'/></svg>")
-}body{font-family:roboto mono,sans-serif;font-size:18px;line-height:1.6;font-weight:400;font-display:auto;background-color:var(--bg);color:var(--color)}@media(min-width:768px){body{font-size:16px}}h1,h2,h3,h4,h5,h6{font-family:roboto mono,sans-serif;font-weight:700}a{text-decoration:none;color:var(--linkColor)}a:hover{color:var(--linkColorHover)}a[target=_blank]:after{content:var(--newTabIcon);margin-left:5px;position:relative;top:-2px}.heart{color:red}#wrap{max-width:750px;margin:0 auto;position:relative;padding-left:15px;padding-right:15px}@media(min-width:768px){#wrap{padding-left:25px;padding-right:25px}}.site-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;flex-flow:column}@media(min-width:768px){.site-header{padding:2rem 0;flex-flow:row}}.site-header .site-title{font-size:28.8px;font-size:1.8rem;margin:10px 0}@media(min-width:768px){.site-header .site-title{margin:0}}.site-header .site-title a{color:var(--siteHeaderColor)}.site-header .site-desc{font-weight:400}.site-header .site-navigation ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:center}.site-header .site-navigation ul a{display:block}.site-header .site-navigation__item{padding-left:20px}.site-header .site-navigation__item:first-child{padding-left:0}.site-header .site-navigation .cta{border:2px solid #1c9963;color:#1c9963;border-radius:4px;padding:5px 15px;font-weight:700}.site-header .site-navigation .cta:hover{color:#fff;background-color:#1c9963}.article{margin:3rem 0}.article:first-child{margin-top:0}.article__title{font-size:24px;font-size:1.5rem;margin-bottom:10px;font-weight:400}.article__title a{color:var(--titleColor)}.article__intro{color:rgba(34,40,49,.5)}.article__content p{margin:1rem 0}.article__content ol li,.article__content ul li{margin-bottom:10px;position:relative}.article__content ol{list-style:numeric;padding-left:30px}.article__content ul{list-style:none;padding:0}.article__content ul li{padding-left:15px}.article__content ul li:before{content:'-';position:absolute;left:0}.article__content strong{font-weight:700}.article__content em{font-style:italic}.article__content code,.article__content pre{font-family:roboto mono,monospace;font-size:14px;background-color:var(--codeBg);padding:0 10px 3px;border-radius:4px;white-space:nowrap}.article__content a{color:#1c9963}.article__content a:hover{background-color:#1c9963;color:#fff}.article__content h1:before,.article__content h2:before{color:rgba(34,40,49,.5);margin-right:5px}.article__content h1:before{content:'#'}.article__content h2:before{content:'##'}.article__content img{max-width:100%;height:auto}.article--til .article__content ul,.article--til .article__content ol{list-style:none;padding:0}.article--til .article__content ul li,.article--til .article__content ol li{position:relative}.article--til .article__content ul li:before,.article--til .article__content ol li:before{content:'-';position:absolute;left:0}.site-content--pages .article__title{font-size:32px;font-size:2rem}.site-content--pages .article__title:before{content:'#';margin-right:10px;color:rgba(34,40,49,.5)}#colophon{padding:2rem 0;margin-top:4rem;font-family:roboto mono,sans-serif;border-top:1px solid rgba(34,40,49,.5);text-align:center}#colophon p{margin:0}#colophon .main-domain{color:#1c9963;font-weight:700}.pagination{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:center}.pagination .page-item a{padding:10px}.pagination .page-item.active{border:2px solid #1c9963;border-radius:4px}.pagination .page-item.active a{color:#1c9963;font-weight:700}#algolia{margin-bottom:2.5rem}#search-box .ais-search-box{width:100%;max-width:100%}#search-box .ais-search-box--input{border-radius:50px;border:2px solid rgba(34,40,49,.15);padding:10px 15px 10px 45px;outline:0;box-shadow:none}#search-box .ais-search-box--input:focus{border-color:#1c9963}#search-box .ais-search-box--reset{top:15px;right:15px}#search-box .ais-search-box--magnifier{top:10px;left:18px}#search-box .ais-search-box--magnifier svg{height:22px;width:22px;fill:rgba(34,40,49,.15)}#hits{background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,0,0,.1);border-radius:4px;overflow:hidden}#hits .algolia-logo{padding:20px;float:right}#hits .na{padding:20px;display:block}.ais-hits--item:first-child a{border-radius:4px 4px 0 0}.ais-hits--item:last-child a{border-bottom:0}.ais-hits--item a{color:#222831;display:block;padding:15px;border-bottom:1px solid rgba(34,40,49,.05)}.ais-hits--item a:hover{background:rgba(28,153,99,.1)}.ais-hits--item h3{font-weight:400;margin-top:0;margin-bottom:10px}.ais-hits--item p{margin:0;font-size:.9rem}.ais-hits--item p em{background-color:rgba(28,153,99,.3);font-style:normal;font-weight:700}.switch-theme,.list-theme li a{display:block;width:30px;height:30px;border-radius:50%;border:2px solid #1c9963}.site-header .site-navigation .list-theme{display:none;justify-content:space-between;position:absolute;background-color:#1c9963;padding:10px 15px;border-radius:5px;width:100px;top:calc(100% + 7px);left:50%;margin-left:-50px}.site-header .site-navigation .list-theme:before{content:'';position:absolute;top:-6px;left:50%;margin-left:-6px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #1c9963}.site-header .site-navigation .list-theme .light{background-color:#fff}.site-header .site-navigation .list-theme .dark{background-color:#222831}.switch-theme-wrap{position:relative}.switch-theme-wrap:hover .list-theme{display:flex}
+}body{font-family:roboto mono,sans-serif;font-size:18px;line-height:1.6;font-weight:400;font-display:auto;background-color:var(--bg);color:var(--color);transition:background-color .2s ease-in-out,color .2s ease-in-out}@media(min-width:768px){body{font-size:16px}}h1,h2,h3,h4,h5,h6{font-family:roboto mono,sans-serif;font-weight:700}a{text-decoration:none;color:var(--linkColor);transition:color .2s ease-in-out}a:hover{color:var(--linkColorHover)}a[target=_blank]:after{content:var(--newTabIcon);margin-left:5px;position:relative;top:-2px}.heart{color:red}#wrap{max-width:750px;margin:0 auto;position:relative;padding-left:15px;padding-right:15px}@media(min-width:768px){#wrap{padding-left:25px;padding-right:25px}}.site-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;flex-flow:column}@media(min-width:768px){.site-header{padding:2rem 0;flex-flow:row}}.site-header .site-title{font-size:28.8px;font-size:1.8rem;margin:10px 0}@media(min-width:768px){.site-header .site-title{margin:0}}.site-header .site-title a{color:var(--siteHeaderColor)}.site-header .site-desc{font-weight:400}.site-header .site-navigation ul{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:center}.site-header .site-navigation ul a{display:block}.site-header .site-navigation__item{padding-left:20px}.site-header .site-navigation__item:first-child{padding-left:0}.site-header .site-navigation .cta{border:2px solid #1c9963;color:#1c9963;border-radius:4px;padding:5px 15px;font-weight:700}.site-header .site-navigation .cta:hover{color:#fff;background-color:#1c9963}.article{margin:3rem 0}.article:first-child{margin-top:0}.article__title{font-size:24px;font-size:1.5rem;margin-bottom:10px;font-weight:400}.article__title a{color:var(--titleColor)}.article__intro{color:rgba(34,40,49,.5)}.article__content p{margin:1rem 0}.article__content ol li,.article__content ul li{margin-bottom:10px;position:relative}.article__content ol{list-style:numeric;padding-left:30px}.article__content ul{list-style:none;padding:0}.article__content ul li{padding-left:15px}.article__content ul li:before{content:'-';position:absolute;left:0}.article__content strong{font-weight:700}.article__content em{font-style:italic}.article__content code,.article__content pre{font-family:roboto mono,monospace;font-size:14px;background-color:var(--codeBg);padding:0 10px 3px;border-radius:4px;white-space:nowrap}.article__content a{color:#1c9963}.article__content a:hover{background-color:#1c9963;color:#fff}.article__content h1:before,.article__content h2:before{color:rgba(34,40,49,.5);margin-right:5px}.article__content h1:before{content:'#'}.article__content h2:before{content:'##'}.article__content img{max-width:100%;height:auto}.article--til .article__content ul,.article--til .article__content ol{list-style:none;padding:0}.article--til .article__content ul li,.article--til .article__content ol li{position:relative}.article--til .article__content ul li:before,.article--til .article__content ol li:before{content:'-';position:absolute;left:0}.site-content--pages .article__title{font-size:32px;font-size:2rem}.site-content--pages .article__title:before{content:'#';margin-right:10px;color:rgba(34,40,49,.5)}#colophon{padding:2rem 0;margin-top:4rem;font-family:roboto mono,sans-serif;border-top:1px solid rgba(34,40,49,.5);text-align:center}#colophon p{margin:0}#colophon .main-domain{color:#1c9963;font-weight:700}.pagination{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:center}.pagination .page-item a{padding:10px}.pagination .page-item.active{border:2px solid #1c9963;border-radius:4px}.pagination .page-item.active a{color:#1c9963;font-weight:700}#algolia{margin-bottom:2.5rem}#search-box .ais-search-box{width:100%;max-width:100%}#search-box .ais-search-box--input{border-radius:50px;border:2px solid rgba(34,40,49,.15);padding:10px 15px 10px 45px;outline:0;box-shadow:none}#search-box .ais-search-box--input:focus{border-color:#1c9963}#search-box .ais-search-box--reset{top:15px;right:15px}#search-box .ais-search-box--magnifier{top:10px;left:18px}#search-box .ais-search-box--magnifier svg{height:22px;width:22px;fill:rgba(34,40,49,.15)}#hits{background-color:#fff;box-shadow:0 2px 4px 0 rgba(0,0,0,.1);border-radius:4px;overflow:hidden}#hits .algolia-logo{padding:20px;float:right}#hits .na{padding:20px;display:block}.ais-hits--item:first-child a{border-radius:4px 4px 0 0}.ais-hits--item:last-child a{border-bottom:0}.ais-hits--item a{color:#222831;display:block;padding:15px;border-bottom:1px solid rgba(34,40,49,.05)}.ais-hits--item a:hover{background:rgba(28,153,99,.1)}.ais-hits--item h3{font-weight:400;margin-top:0;margin-bottom:10px}.ais-hits--item p{margin:0;font-size:.9rem}.ais-hits--item p em{background-color:rgba(28,153,99,.3);font-style:normal;font-weight:700}.switch-theme{display:block;width:30px;height:30px;border-radius:50%;border:2px solid #1c9963;background-color:var(--color)}.site-header .site-navigation .list-theme{display:none;justify-content:space-between;position:absolute;background-color:#1c9963;padding:10px 15px;border-radius:5px;width:100px;top:calc(100% + 7px);left:50%;margin-left:-50px}.site-header .site-navigation .list-theme:before{content:'';position:absolute;top:-6px;left:50%;margin-left:-6px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #1c9963}.site-header .site-navigation .list-theme .light{background-color:#fff}.site-header .site-navigation .list-theme .dark{background-color:#222831}

resources/_gen/assets/scss/scss/style.scss_48b060fe05b0a273d182ef83c0605941.json

@@ -1 +1 @@
-{"Target":"scss/style.min.2c60bfd902855886b59a8903a46e99bb41fc9640178818284238fa105a3b4582.css","MediaType":"text/css","Data":{"Integrity":"sha256-LGC/2QKFWIa1mokDpG6Zu0H8lkAXiBgoQjj6EFo7RYI="}}
+{"Target":"scss/style.min.afa8885546212dd9ae33d58f045b5ce3a29221d311a10e97b81927cca4fa2409.css","MediaType":"text/css","Data":{"Integrity":"sha256-r6iIVUYhLdmuM9WPBFtc46KSIdMRoQ6XuBknzKT6JAk="}}

themes/til/assets/js/app.js

@@ -3,10 +3,9 @@ WebFont.load({
   google: {
     families: ['Roboto+Mono:400,700']
   }
-});
+})
 
 // Switch Theme
-const switchThemeItem = document.querySelectorAll('.switch-theme-item')
 const body = document.querySelector('body')
 const themes = ['light', 'dark']
 
@@ -17,14 +16,10 @@ if (themes.indexOf(theme) === -1) {
 
 window.addEventListener('DOMContentLoaded', () => {
   body.className = theme
-})
-
-switchThemeItem.forEach(item => {
-  item.addEventListener('click', (e) => {
+  document.getElementById('switch-theme').addEventListener('click', (e) => {
     e.preventDefault()
-    let target = e.currentTarget
-    let theme = target.dataset.theme
+     theme = theme === 'dark' ? 'light' : 'dark';
     localStorage.setItem('theme', theme)
     body.className = theme
   })
-})
+})

themes/til/assets/scss/style.scss

@@ -30,6 +30,7 @@ body {
   font-display: auto;
   background-color: var(--bg);
   color: var(--color);
+  transition: background-color .2s ease-in-out, color .2s ease-in-out;
   @include breakpoint(tablet) {
     font-size: 16px;
   }
@@ -48,6 +49,7 @@ h6 {
 a {
   text-decoration: none;
   color: var(--linkColor);
+  transition: color .2s ease-in-out;
   &:hover {
     color: var(--linkColorHover);
   }
@@ -374,12 +376,13 @@ a[target="_blank"] {
 }
 
 /** Switch Theme **/
-.switch-theme, .list-theme li a {
+.switch-theme{
   display: block;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: 2px solid $color-primary;
+  background-color: var(--color);
 }
 
 .site-header .site-navigation .list-theme {
@@ -412,10 +415,3 @@ a[target="_blank"] {
     background-color: $color-dark;
   }
 }
-
-.switch-theme-wrap {
-  position: relative;
-  &:hover .list-theme {
-    display: flex;
-  }
-}

themes/til/layouts/partials/header.html

@@ -81,11 +81,7 @@ <h1 class="site-title">
         <nav class="site-navigation">
           <ul>
             <li class="switch-theme-wrap">
-              <a href="#" class="switch-theme"></a>
-              <ul class="list-theme">
-                <li><a href="" class="light switch-theme-item" data-theme="light"></a></li>
-                <li><a href="" class="dark switch-theme-item" data-theme="dark"></a></li>
-              </ul>
+              <a href="#" id="switch-theme" class="switch-theme"></a>
             </li>
             {{ $currentPage := . }}
             {{ range .Site.Menus.main }}