media query changed

assets/js/zzo.js

@@ -127,26 +127,6 @@ $(document).ready(function() {
     position = scroll;
   });
   
-  // media query
-  enquire.register("screen and (max-width: 769px)", {
-    match: function () {
-      $('main').removeClass('main-main').removeClass('main').addClass('main');
-      $('aside').removeClass('main-side').removeClass('hide').addClass('hide');
-    },
-    unmatch: function () {      
-      if ($('aside').length > 0) {
-        $('main').removeClass('main-main').removeClass('main').addClass('main-main');
-        $('aside').removeClass('main-side').removeClass('hide').addClass('main-side');        
-      }
-      $('.navbar__burger').removeClass('is-active');
-      $('.navbar__menu').removeClass('is-active');
-      $('.mobile-search').hide(200);
-    },
-    setup: function () { },
-    deferSetup: true,
-    destroy: function () { },
-  });
-
   // navbar
   $('.navbar__burger').click(function() {
     if ($(this).hasClass('is-active')) {

assets/sass/abstracts/_mixins.scss

@@ -17,26 +17,6 @@
   }
 }
 
-@mixin respond-to($breakpoint) {
-  // If the key exists in the map
-  @if map-has-key($breakpoints, $breakpoint) {
-    // Prints a media query based on the value
-    @media (max-width: map-get($breakpoints, $breakpoint)) {
-      @content;
-    }
-  }
-}
-
-@mixin respond-up($breakpoint) {
-  // If the key exists in the map
-  @if map-has-key($breakpoints, $breakpoint) {
-    // Prints a media query based on the value
-    @media (min-width: map-get($breakpoints, $breakpoint)) {
-      @content;
-    }
-  }
-}
-
 @mixin pseudo($display: block, $pos: absolute, $content: "") {
   content: $content;
   display: $display;

assets/sass/abstracts/_variables.scss

@@ -3,7 +3,7 @@
 $text-font-stack: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
 $code-font-stack: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace !default;
 
-$z-indexes: ("modal", "navbar", "dropdown", "header", "clipboard", "grid", "search-btn", "search", "content", "footer", "taxo", "toc", "gallery-mask");
+$z-indexes: ("modal", "navbar", "dropdown", "header", "gtt", "clipboard", "grid", "search-btn", "search", "content", "footer", "taxo", "toc", "gallery-mask");
 
 $breakpoints: (
   'xs': 0,

assets/sass/components/_donation.scss

@@ -3,7 +3,7 @@
   @include align-items(center);
   @include justify-content(center);
   
-  @include respond-to(sm) {
+  @media only screen and (max-width: 769px) {
     @include flex-direction(column);
   }
 
@@ -60,10 +60,11 @@
       margin-bottom: 0.25rem;
       border-radius: 0.25rem;
 
-      @include respond-to(sm) {
+      @media only screen and (max-width: 769px) {
         left: 50%;
         transform: translate(-50%);
       }
+
       @include themify($themes) {
         background-color: themed('dropdown-content-background-color');
       }

assets/sass/components/_gtt.scss

@@ -6,6 +6,7 @@
   height: 40px;
   border-radius: 0.25rem;
   cursor: pointer;
+  z-index: z('gtt');
 
   @include flexbox();
   @include align-items(center);
@@ -19,7 +20,8 @@
       background-color: themed('gtt-hover-background-color');
     }
   }
-  @include respond-to(sm) {
+
+  @media only screen and (max-width: 769px) {
     position: fixed;
   }
 }

assets/sass/components/_search.scss

@@ -193,18 +193,18 @@
     z-index: z('search-btn');
 
     @include animation('slide-in-down .5s .25s 1 ease both');
-    @include respond-to(sm) {
-      @include flexbox();
-      @include align-items(center);
-      @include justify-content(center);
-    }
-    
     @include themify($themes) {
       color: themed('burger-menu-color');  
       @include on-event {
         color: themed('link-hover');   
       }
     }
+
+    @media only screen and (max-width: 769px) {
+      @include flexbox();
+      @include align-items(center);
+      @include justify-content(center);
+    }
   }
 
   &__content {    

assets/sass/components/_whoami.scss

@@ -5,7 +5,7 @@
   width: 100%;
 
   @include flexbox();
-  @include respond-to(sm) {
+  @media only screen and (max-width: 769px) {
     @include align-items(center);
     @include flex-direction(column);
   }
@@ -13,7 +13,7 @@
   &__contents {    
     margin-top: 0.5rem;
 
-    @include respond-to(sm) {
+    @media only screen and (max-width: 769px) {
       @include flexbox();
       @include flex-direction(column);
       @include justify-content(center);
@@ -54,7 +54,7 @@
     font-size: 1rem;
     padding-left: 0.25rem;
 
-    @include respond-to(sm) {
+    @media only screen and (max-width: 769px) {
       width: 75%;
     }
   }

assets/sass/layout/_grid.scss

@@ -11,7 +11,8 @@ $grid_column_gap: $grid_column_gap_width + $grid_column_gap_unit;
     grid-template-rows: $grid_navbar_height auto 1fr auto;
     grid-column-gap: $grid_column_gap;
     grid-row-gap: $grid_row_gap;
-    @include respond-to(sm) {
+
+    @media only screen and (max-width: 769px) {
         grid-template-columns: minmax(0, $grid_main_main) minmax(0, $grid_main_side);
     }
 }

assets/sass/layout/_navigation.scss

@@ -26,7 +26,7 @@
   }
 
   &__slide-down {
-    @include respond-up(sm) {
+    @media only screen and (min-width: 769px) {
       @for $i from 1 through 8 {
         &:nth-child(#{$i}) {
           @include animation('slide-in-down .25s #{$i * .1}s 1 ease both');
@@ -48,7 +48,7 @@
     position: relative;
 
     @include animation('slide-in-down .5s .0s 1 ease both');
-    @include respond-to(sm) {
+    @media only screen and (max-width: 769px) {
       cursor: pointer;
       margin-left: auto;
       position: relative;
@@ -150,7 +150,7 @@
     @include justify-content(flex-end);
     height: $grid_navbar_height;
 
-    @include respond-to(sm) {
+    @media only screen and (max-width: 769px) {
       display: none;
     }    
 
@@ -172,7 +172,7 @@
           background-color: themed('navbar-menu-hover-background-color');
           text-decoration: none;
           border-bottom: 1px solid themed('navbar-border-bottom-color');
-          @include respond-to(sm) {
+          @media only screen and (max-width: 769px) {
             border-bottom: none;
           }
         }
@@ -181,7 +181,7 @@
         }
       }
 
-      @include respond-to(sm) {
+      @media only screen and (max-width: 769px) {
         @include justify-content(flex-start);
         width: 100%;
         padding: 0 0.75rem;
@@ -212,7 +212,7 @@
   &__dropdown {
     display: inline-block;
     height: $grid_navbar_height;
-    @include respond-to(sm) {
+    @media only screen and (max-width: 769px) {
       width: 100%;
       height: auto;
     }
@@ -230,7 +230,8 @@
         border-top: 4px solid themed("dropdown-border-top-color");
         background-color: themed("dropdown-content-background-color");
       }
-      @include respond-to(sm) {
+
+      @media only screen and (max-width: 769px) {
         position: relative;
         display: block;
         box-shadow: none;
@@ -267,7 +268,7 @@
         }
       }
 
-      @include respond-to(sm) {
+      @media only screen and (max-width: 769px) {
         padding-left: 2.5rem;
         min-width: 100%;
         max-width: 100%;
@@ -285,7 +286,8 @@
   @include align-items(center);
   @include justify-content(flex-end);
   @include animation('slide-in-down .5s .0s 1 ease both');  
-  @include respond-to(sm) {
+
+  @media only screen and (max-width: 769px) {
     display: none;
   }
 
@@ -389,7 +391,8 @@
       border-bottom: none;
     }      
   }
-  @include respond-to(sm) {
+
+  @media only screen and (max-width: 769px) {
     @include flexbox();
     @include align-items(center);
     @include justify-content(flex-end);

assets/sass/pages/_archive.scss

@@ -24,11 +24,12 @@
       }
     }
 
-    @include respond-to(sm) {
+    @media only screen and (max-width: 769px) {
       &::before {
         content: none;
       }
     }
+
   }
 
   &__li {
@@ -39,7 +40,8 @@
     @include transition(margin-left, 0.1s, ease);
     @include flexbox();
     @include align-items(center);
-    @include respond-to(sm) {
+
+    @media only screen and (max-width: 769px) {
       margin-left: 0;
       position: relative;
     }   
@@ -93,7 +95,7 @@
       color: themed('archive-type-color');
       background-color: themed('archive-type-background-color');
 
-      @include respond-to(sm) {
+      @media only screen and (max-width: 769px) {
         border-right: 2px solid themed('toc-vertical-line');
       }
     }
@@ -112,7 +114,7 @@
       color: themed('archive-meta-color');
       background-color: themed('archive-type-background-color');
 
-      @include respond-to(sm) {
+      @media only screen and (max-width: 769px) {
         border-left: 2px solid themed('toc-vertical-line');
       }
     }
@@ -135,7 +137,7 @@
           background-color: themed('archive-hover-line-color');
         }
 
-        @include respond-to(sm) {
+        @media only screen and (max-width: 769px) {
           top: 50%;
           @include translateY(-50%);
         }

assets/sass/pages/_single.scss

@@ -23,14 +23,14 @@
     @include align-items(center);
     @include flex-wrap(wrap);
     @include flex-grow(1);    
-    @include respond-to(sm) {
+    @include themify($themes) {
+      color: themed('meta-color');
+    }
+    @media only screen and (max-width: 769px) {
       @include flexbox();
       @include flex-direction(column);
       @include align-items(flex-start);
     }
-    @include themify($themes) {
-      color: themed('meta-color');
-    }    
   }
 
   &__infos {

i18n/zh.toml

@@ -23,7 +23,7 @@ other = "2006年 01月 02日"
 other = "相关内容"
 
 [single-writtenBy]
-other = "撰写者"
+other = "作者"
 
 [toc-label]
 other = "目录"

layouts/_default/baseof.html

@@ -16,10 +16,11 @@
 <body id="root" class="theme__{{ index .Site.Params.themeOptions 0 }}">
     <script>
         var localTheme = localStorage.getItem('theme');
-            if (localTheme) {
-                document.getElementById('root').className = `theme__${localTheme}`;
-            }
+        if (localTheme) {
+            document.getElementById('root').className = `theme__${localTheme}`;
+        }        
     </script>    
+    
     <div id="body">
         {{ partial "body/custom-wrapper" . }}
         <div class="container wrapper">

layouts/_default/list.html

@@ -1,4 +1,8 @@
 {{ define "main" }}
+
+{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
+<script src="{{ $enquire.RelPermalink }}"></script>
+
 <main class="{{ if $.Param "enableSidebar" }}main-main{{ else }}main{{ end }}">
     {{ partial "body/breadcrumb" . }}
     <article class="list">
@@ -26,5 +30,31 @@
         {{ partial "sidebar/sidebar-list" . }}
     </aside>
 {{ end }}
+<script>
+    enquire.register("screen and (max-width: 769px)", {
+        match: function () {
+            if (document.getElementsByTagName('main')[0]) {
+                document.getElementsByTagName('main')[0].className = "main";
+            }
+            if (document.getElementsByTagName('aside')[0]) {
+                document.getElementsByTagName('aside')[0].className = "hide";
+            }
+        },
+        unmatch: function () {
+            if (document.getElementsByTagName('main')[0]) {
+                document.getElementsByTagName('main')[0].className = "main-main";
+            }
+            if (document.getElementsByTagName('aside')[0]) {
+                document.getElementsByTagName('aside')[0].className = "main-side";
+            }
+            document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
+            document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
+            document.getElementsByClassName('mobile-search')[0].classList.add('hide');
+        },
+        setup: function () { },
+        deferSetup: true,
+        destroy: function () { },
+    });
+</script>
 {{ partial "script/list-script" . }}
 {{ end }}

layouts/_default/single.html

@@ -1,4 +1,8 @@
 {{ define "main" }}
+
+{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
+<script src="{{ $enquire.RelPermalink }}"></script>
+
 <main class="{{ if $.Param "enableSidebar" }}main-main{{ else }}main{{ end }}">
   {{ if eq .Site.Params.enableBreadcrumb true }}
   {{ partial "body/breadcrumb" . }}
@@ -30,5 +34,31 @@
   {{ partial "sidebar/sidebar-single" . }}
 </aside>
 {{ end }}
+<script>
+  enquire.register("screen and (max-width: 769px)", {
+    match: function () {
+      if (document.getElementsByTagName('main')[0]) {
+        document.getElementsByTagName('main')[0].className = "main";
+      }
+      if (document.getElementsByTagName('aside')[0]) {
+        document.getElementsByTagName('aside')[0].className = "hide";
+      }
+    },
+    unmatch: function () {
+      if (document.getElementsByTagName('main')[0]) {
+        document.getElementsByTagName('main')[0].className = "main-main";
+      }
+      if (document.getElementsByTagName('aside')[0]) {
+        document.getElementsByTagName('aside')[0].className = "main-side";
+      }
+      document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
+      document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
+      document.getElementsByClassName('mobile-search')[0].classList.add('hide');
+    },
+    setup: function () { },
+    deferSetup: true,
+    destroy: function () { },
+  });
+</script>
 {{ partial "script/single-script" . }}
 {{ end }}

layouts/_default/taxonomy.html

@@ -1,4 +1,8 @@
 {{ define "main" }}
+
+{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
+<script src="{{ $enquire.RelPermalink }}"></script>
+
 <main class="main-main">
   {{ partial "body/breadcrumb" . }}
   <article class="list">
@@ -21,5 +25,31 @@
 <aside class="main-side">
   {{ partial "sidebar/sidebar-list" . }}
 </aside>
+<script>
+  enquire.register("screen and (max-width: 769px)", {
+    match: function () {
+      if (document.getElementsByTagName('main')[0]) {
+        document.getElementsByTagName('main')[0].className = "main";
+      }
+      if (document.getElementsByTagName('aside')[0]) {
+        document.getElementsByTagName('aside')[0].className = "hide";
+      }
+    },
+    unmatch: function () {
+      if (document.getElementsByTagName('main')[0]) {
+        document.getElementsByTagName('main')[0].className = "main-main";
+      }
+      if (document.getElementsByTagName('aside')[0]) {
+        document.getElementsByTagName('aside')[0].className = "main-side";
+      }
+      document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
+      document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
+      document.getElementsByClassName('mobile-search')[0].classList.add('hide');
+    },
+    setup: function () { },
+    deferSetup: true,
+    destroy: function () { },
+  });
+</script>
 {{ partial "script/taxo-script" . }}
 {{ end }}

layouts/index.html

@@ -1,6 +1,10 @@
 {{ define "title" }}{{ .Site.Title }}{{ end }}
 
 {{ define "main" }}
+
+{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
+<script src="{{ $enquire.RelPermalink }}"></script>
+
 <main class="{{ if $.Param "enableSidebar" }}main-main{{ else }}main{{ end }}">
     <article class="{{ with .Section }}section-{{ . | urlize }} {{ end }}single-view">
         <div class="content">
@@ -21,5 +25,31 @@
         {{ partial "sidebar/sidebar-home" . }}
     </aside>
 {{ end }}
+<script>
+    enquire.register("screen and (max-width: 769px)", {
+        match: function () {
+            if (document.getElementsByTagName('main')[0]) {
+                document.getElementsByTagName('main')[0].className = "main";
+            }
+            if (document.getElementsByTagName('aside')[0]) {
+                document.getElementsByTagName('aside')[0].className = "hide";
+            }
+        },
+        unmatch: function () {
+            if (document.getElementsByTagName('main')[0]) {
+                document.getElementsByTagName('main')[0].className = "main-main";
+            }
+            if (document.getElementsByTagName('aside')[0]) {
+                document.getElementsByTagName('aside')[0].className = "main-side";
+            }
+            document.getElementsByClassName('navbar__burger')[0].classList.remove('is-active');
+            document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
+            document.getElementsByClassName('mobile-search')[0].classList.add('hide');
+        },
+        setup: function () { },
+        deferSetup: true,
+        destroy: function () { },
+    });
+</script>
 {{ partial "script/home-script" . }}
 {{ end }}

layouts/partials/head/scripts.html

@@ -9,8 +9,8 @@
 {{ end }}
 
 <script>
+  // search
   var runSearch = function() {    
-    // search
     {{ $searchLanguages := .Site.Params.searchLanguages }}
     var searchLanguages = JSON.parse({{ $searchLanguages | jsonify }});
     {{ if .Site.IsMultiLingual }}

layouts/partials/script/gallery-script.html

@@ -1,11 +1,11 @@
 {{ $jquery := resources.Get "js/jquery.min.js" | resources.Fingerprint }}
 <script defer src="{{ $jquery.RelPermalink }}"></script>
+{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
+<script defer src="{{ $enquire.RelPermalink }}"></script>
 {{ $masonry := resources.Get "js/masonry.pkgd.min.js" | resources.Fingerprint }}
 <script defer src="{{ $masonry.RelPermalink }}"></script>
 {{ $imagesloaded := resources.Get "js/imagesloaded.pkgd.min.js" | resources.Fingerprint }}
 <script defer src="{{ $imagesloaded.RelPermalink }}"></script>
-{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
-<script defer src="{{ $enquire.RelPermalink }}"></script>
 {{ $zzo := resources.Get "js/zzo.js" | resources.Minify | resources.Fingerprint }}
 <script defer src="{{ $zzo.RelPermalink }}"></script>
 {{ $lazysizes := resources.Get "js/lazysizes.min.js" | resources.Fingerprint }}

layouts/partials/script/home-script.html

@@ -1,7 +1,5 @@
 {{ $jquery := resources.Get "js/jquery.min.js" | resources.Fingerprint }}
 <script defer src="{{ $jquery.RelPermalink }}"></script>
-{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
-<script defer src="{{ $enquire.RelPermalink }}"></script>
 {{ $lazysizes := resources.Get "js/lazysizes.min.js" | resources.Fingerprint }}
 <script defer src="{{ $lazysizes.RelPermalink }}"></script>
 {{ $zzo := resources.Get "js/zzo.js" | resources.Minify | resources.Fingerprint }}

layouts/partials/script/list-script.html

@@ -1,7 +1,7 @@
 {{ $jquery := resources.Get "js/jquery.min.js" | resources.Fingerprint }}
 <script defer src="{{ $jquery.RelPermalink }}"></script>
 {{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
-<script defer src="{{ $enquire.RelPermalink }}"></script>
+<script src="{{ $enquire.RelPermalink }}"></script>
 {{ $lazysizes := resources.Get "js/lazysizes.min.js" | resources.Fingerprint }}
 <script defer src="{{ $lazysizes.RelPermalink }}"></script>
 {{ $zzo := resources.Get "js/zzo.js" | resources.Minify | resources.Fingerprint }}

layouts/partials/script/single-script.html

@@ -3,10 +3,10 @@
 
 {{ $jquery := resources.Get "js/jquery.min.js" | resources.Fingerprint }}
 <script defer src="{{ $jquery.RelPermalink }}"></script>
-{{ $clipboard := resources.Get "js/clipboard.min.js" | resources.Fingerprint }}
-<script defer src="{{ $clipboard.RelPermalink }}"></script>
 {{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
 <script defer src="{{ $enquire.RelPermalink }}"></script>
+{{ $clipboard := resources.Get "js/clipboard.min.js" | resources.Fingerprint }}
+<script defer src="{{ $clipboard.RelPermalink }}"></script>
 {{ $lazysizes := resources.Get "js/lazysizes.min.js" | resources.Fingerprint }}
 <script defer src="{{ $lazysizes.RelPermalink }}"></script>
 {{ $zzo := resources.Get "js/zzo.js" | resources.Minify | resources.Fingerprint }}