chore: refactor code style

assets/css/_core/_base.scss

@@ -60,7 +60,6 @@ body {
 a {
   color: $global-link-color;
   text-decoration: none;
-  word-break: break-all;
   transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
 
   &:hover {

assets/css/_core/_media.scss

@@ -32,8 +32,8 @@
 }
 
 @media only screen and (max-width: 960px) {
-  .navbar {
+  header.desktop {
-    .navbar-container {
+    .header-wrapper {
       margin: 0 1rem;
     }
   }
@@ -52,11 +52,11 @@
 }
 
 @media only screen and (max-width: 560px) {
-  .navbar {
+  header.desktop {
     display: none;
   }
 
-  .navbar-mobile {
+  header.mobile {
     display: block;
   }
 

assets/css/_page/_404.scss

@@ -1,4 +1,4 @@
-.notfound {
+#content-404 {
   font-size: 1.8rem;
   line-height: 3rem;
   transform: translateY(30vh);

assets/css/_page/_archive.scss

@@ -0,0 +1,9 @@
+.archive {
+  .single-title {
+    text-align: right;
+    padding-bottom: 2rem;
+  }
+
+  @import "../_partial/_archive/terms";
+  @import "../_partial/_archive/tags";
+}

assets/css/_page/_home.scss

@@ -1,55 +1,70 @@
 /** Home **/
-.home-intro {
+@import "../_partial/_home/summary";
-  transform: translateY(25vh);
-  text-align: center;
 
-  .home-avatar {
+@mixin page-home($profile, $posts) {
-    padding: 0.6rem;
+  .home {
+    @if $profile {
+      .home-profile {
+        transform: translateY(if($posts, 0, 16vh));
+        padding: if($posts, 2rem, 0) 0;
+        text-align: center;
 
-    img {
+        .home-avatar {
-      width: 8rem;
+          padding: 0.6rem;
-      height: auto;
-      display: inline-block;
-      -webkit-border-radius: 100%;
-      border-radius: 100%;
-      -webkit-box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05);
-      box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05);
-      margin: 0 auto;
-      -webkit-transition: all ease 0.4s;
-      -moz-transition: all ease 0.4s;
-      -o-transition: all ease 0.4s;
-      transition: all ease 0.4s;
-      cursor: pointer;
 
-      &:hover {
+          img {
-        position: relative;
+            width: if($posts, 6rem, 8rem);
-        -webkit-transform: translateY(-0.75rem);
+            height: auto;
-        -moz-transform: translateY(-0.75rem);
+            display: inline-block;
-        -ms-transform: translateY(-0.75rem);
+            -webkit-border-radius: 100%;
-        -o-transform: translateY(-0.75rem);
+            border-radius: 100%;
-        transform: translateY(-0.75rem);
+            -webkit-box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05);
-        cursor: pointer;
+            box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05);
+            margin: 0 auto;
+            -webkit-transition: all ease 0.4s;
+            -moz-transition: all ease 0.4s;
+            -o-transition: all ease 0.4s;
+            transition: all ease 0.4s;
+            cursor: pointer;
+
+            &:hover {
+              position: relative;
+              -webkit-transform: translateY(-0.75rem);
+              -moz-transform: translateY(-0.75rem);
+              -ms-transform: translateY(-0.75rem);
+              -o-transform: translateY(-0.75rem);
+              transform: translateY(-0.75rem);
+              cursor: pointer;
+            }
+          }
+        }
+
+        .home-description {
+          font-size: 1rem;
+          font-weight: normal;
+          margin: 0;
+          padding: .4rem;
+        }
+
+        .home-social-links {
+          padding-top: .6rem;
+
+          i {
+            font-size: 1.45rem;
+          }
+
+          img {
+            width: 1.5rem;
+            height: 1.5rem;
+          }
+        }
       }
     }
-  }
 
-  .home-description {
+    @if $posts {
-    font-size: 1rem;
+      @include summary;
-    font-weight: normal;
-    margin: 0;
-    padding: .4rem;
-  }
-
-  .home-social-links {
-    padding-top: .6rem;
-
-    i {
-      font-size: 1.45rem;
-    }
-
-    img {
-      width: 1.5rem;
-      height: 1.5rem;
     }
   }
 }
+
+@include page-home($home-profile, $home-posts);

assets/css/_page/_index.scss

@@ -6,25 +6,8 @@
   padding-top: 6rem;
 }
 
+@import "_single";
+@import "_special";
+@import "_archive";
 @import "_home";
 @import "_404";
-
-@import "_post";
-@import "_posts";
-
-.archive {
-  .post-title {
-    text-align: right;
-    padding-bottom: 2rem;
-  }
-
-  @import "_terms";
-  @import "_tags";
-}
-
-.single {
-  .post-title {
-    text-align: right;
-    padding-bottom: 2rem;
-  }
-}

assets/css/_page/_posts.scss

@@ -1,143 +0,0 @@
-.home-intro {
-  transform: translateY(0);
-  padding: 2rem 0 2rem 0;
-
-  .home-avatar {
-    img {
-      width: 6rem;
-    }
-  }
-}
-
-.summary {
-  padding-top: 1rem;
-  padding-bottom: .8rem;
-  color: $global-font-color;
-  border-bottom: 1px dashed $global-border-color;
-
-  .dark-theme & {
-    color: $global-font-color-dark;
-    border-bottom: 1px dashed $global-border-color-dark;
-  }
-
-  .post-featured-image-preview {
-    width: 100%;
-    padding: 30% 0 0;
-    position: relative;
-    margin: 0.6rem auto;
-
-    img {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      left: 0;
-      top: 0;
-      object-fit: cover;
-    }
-  }
-
-  .post-title {
-    font-size: 1.6rem;
-  }
-
-  .post-meta {
-    font-size: .875rem !important;
-    a {
-      color: $global-font-secondary-color !important;
-
-      .dark-theme & {
-        color: $global-font-secondary-color-dark !important;
-      }
-
-      &:hover {
-        color: $global-link-hover-color !important;
-
-        .dark-theme & {
-          color: $global-link-hover-color-dark !important;
-        }
-      }
-    }
-  }
-
-  .post-content {
-    display: -moz-box;
-    display: -webkit-box;
-    -moz-box-orient: vertical;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    margin-top: .3rem;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    overflow-wrap: break-word;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p {
-    font-size: 1rem;
-    display: inline;
-
-    &::after {
-      content: "\A";
-      white-space: pre;
-    }
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 2;
-  }
-
-  .post-footer {
-    margin-top: .5rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-size: .875rem !important;
-
-    a {
-      color: $post-link-color !important;
-
-      .dark-theme & {
-        color: $post-link-color-dark !important;
-      }
-
-      &:hover {
-        color: $post-link-hover-color !important;
-
-        .dark-theme & {
-          color: $post-link-hover-color-dark !important;
-        }
-      }
-    }
-
-    .post-tags {
-      padding: 0;
-
-      a {
-        color: $global-link-color !important;
-
-        .dark-theme & {
-          color: $global-link-color-dark !important;
-        }
-
-        &:hover {
-          color: $global-link-hover-color !important;
-
-          .dark-theme & {
-            color: $global-link-hover-color-dark !important;
-          }
-        }
-      }
-    }
-  }
-}

assets/css/_page/_single.scss

@@ -1,12 +1,12 @@
-/** Post **/
+/** Single **/
-.post {
+.single {
-  .post-title {
+  .single-title {
     margin: 0;
     font-size: 1.8rem;
     line-height: 3rem;
   }
 
-  .post-meta {
+  .meta {
     font-size: .88rem;
     color: $global-font-secondary-color;
 
@@ -19,17 +19,17 @@
     }
 
     a {
-      color: $post-link-color;
+      color: $single-link-color;
 
       .dark-theme & {
-        color: $post-link-color-dark;
+        color: $single-link-color-dark;
       }
 
       &:hover {
-        color: $post-link-hover-color;
+        color: $single-link-hover-color;
 
         .dark-theme & {
-          color: $post-link-hover-color-dark;
+          color: $single-link-hover-color-dark;
         }
       }
     }
@@ -39,7 +39,7 @@
     }
   }
 
-  .post-featured-image {
+  .featured-image {
     padding-top: .6rem;
 
     img {
@@ -51,9 +51,9 @@
     }
   }
 
-  @import "../_partial/_post/toc";
+  @import "../_partial/_single/toc";
 
-  .post-content {
+  .content {
     .post-dummy-target:target {
       display: inline-block;
       position: relative;
@@ -86,10 +86,10 @@
     h2::before {
       content: "#";
       margin-right: .3125rem;
-      color: $post-link-color;
+      color: $single-link-color;
 
       .dark-theme & {
-        color: $post-link-color-dark;
+        color: $single-link-color-dark;
       }
     }
 
@@ -99,10 +99,10 @@
     h6::before {
       content: "|";
       margin-right: .3125rem;
-      color: $post-link-color;
+      color: $single-link-color;
 
       .dark-theme & {
-        color: $post-link-color-dark;
+        color: $single-link-color-dark;
       }
     }
 
@@ -112,18 +112,19 @@
     }
 
     a {
-      color: $post-link-color;
+      word-break: break-all;
+      color: $single-link-color;
 
       .dark-theme & {
-        color: $post-link-color-dark;
+        color: $single-link-color-dark;
       }
     }
 
     a:hover {
-      color: $post-link-hover-color;
+      color: $single-link-hover-color;
 
       .dark-theme &:hover {
-        color: $post-link-hover-color-dark;
+        color: $single-link-hover-color-dark;
         font-weight: bold;
       }
     }
@@ -233,11 +234,11 @@
         width: 3rem;
         height: 2rem;
         font: 6em/1.08em 'PT Sans', sans-serif;
-        color: $post-link-color;
+        color: $single-link-color;
         text-align: center;
 
         .dark-theme & {
-          color: $post-link-color-dark;
+          color: $single-link-color-dark;
         }
       }
 
@@ -246,10 +247,10 @@
         display: block;
         text-align: right;
         font-size: 0.875em;
-        color: $post-link-color;
+        color: $single-link-color;
 
         .dark-theme & {
-          color: $post-link-color-dark;
+          color: $single-link-color-dark;
         }
       }
 
@@ -266,8 +267,8 @@
       }
     }
 
-    @import "../_partial/_post/code";
+    @import "../_partial/_single/code";
-    @import "../_partial/_post/admonition";
+    @import "../_partial/_single/admonition";
 
     .mermaid {
       width: 100%;
@@ -372,6 +373,6 @@
     }
   }
 
-  @import "../_partial/_post/footer";
+  @import "../_partial/_single/footer";
-  @import "../_partial/_post/comment";
+  @import "../_partial/_single/comment";
 }

assets/css/_page/_special.scss

@@ -0,0 +1,6 @@
+.special {
+  .single-title {
+    text-align: right;
+    padding-bottom: 2rem;
+  }
+}

assets/css/_partial/_header.scss

@@ -1,78 +1,78 @@
-.navbar {
+header.desktop {
   display: block;
   position: fixed;
   width: 100%;
   z-index: 100;
   height: 4rem;
   line-height: 4rem;
-  background-color: $navbar-background-color;
+  background-color: $header-background-color;
 
   .dark-theme & {
-    background-color: $navbar-background-color-dark;
+    background-color: $header-background-color-dark;
   }
 
-  .navbar-container {
+  .header-wrapper {
     width: auto;
     text-align: center;
     margin: 0 4rem;
     display: flex;
     justify-content: space-between;
 
-    .navbar-header a {
+    .header-title a {
       padding: 0 8px;
-      font-size: 20px;
+      font-size: 1.25rem;
 
       i {
-        line-height: 2em;
+        line-height: 2rem;
       }
     }
 
-    .navbar-menu a {
+    .menu a {
       padding: 0 8px;
 
       &.active {
         font-weight: 900;
-        color: $navbar-hover-color;
+        color: $header-hover-color;
 
         .dark-theme & {
-          color: $navbar-hover-color-dark;
+          color: $header-hover-color-dark;
         }
       }
     }
   }
 }
 
-.navbar-mobile {
+header.mobile {
   display: none;
   position: fixed;
   width: 100%;
   z-index: 100;
   transition: all 0.3s ease 0s;
 
-  .navbar-container {
+  .header-wrapper {
     padding: 0;
     margin: 0;
-    height: 4.5em;
+    height: 4.5rem;
-    line-height: 4.5em;
+    line-height: 4.5rem;
     background: $global-background-color;
 
-    .navbar-header {
+    .header-container {
       display: flex;
       justify-content: space-between;
       align-items: center;
       width: 100%;
-      font-size: 18px;
+      font-size: 1.125rem;
-      padding-right: 1em;
+      padding-right: 1rem;
-      padding-left: 1em;
+      padding-left: 1rem;
       box-sizing: border-box;
 
-      .navbar-header-title {
+      .header-title {
-        font-size: 20px;
+        font-size: 1.25rem;
       }
 
       .menu-toggle {
         cursor: pointer;
-        line-height: 4.5em;
+        line-height: 4.5rem;
 
         span {
           display: block;
@@ -127,7 +127,7 @@
       }
     }
 
-    .navbar-menu {
+    .menu {
       text-align: center;
       background: $global-background-color;
       border-top: 2px solid $global-font-color;
@@ -136,7 +136,7 @@
 
       a {
         display: block;
-        line-height: 2.5em;
+        line-height: 2.5rem;
       }
 
       &.active {

assets/css/_partial/_home/_summary.scss

@@ -0,0 +1,134 @@
+@mixin summary {
+  .summary {
+    padding-top: 1rem;
+    padding-bottom: .8rem;
+    color: $global-font-color;
+    border-bottom: 1px dashed $global-border-color;
+
+    .dark-theme & {
+      color: $global-font-color-dark;
+      border-bottom: 1px dashed $global-border-color-dark;
+    }
+
+    .featured-image-preview {
+      width: 100%;
+      padding: 30% 0 0;
+      position: relative;
+      margin: 0.6rem auto;
+
+      img {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        object-fit: cover;
+      }
+    }
+
+    .single-title {
+      font-size: 1.6rem;
+    }
+
+    .meta {
+      font-size: .875rem !important;
+      a {
+        color: $global-font-secondary-color !important;
+
+        .dark-theme & {
+          color: $global-font-secondary-color-dark !important;
+        }
+
+        &:hover {
+          color: $global-link-hover-color !important;
+
+          .dark-theme & {
+            color: $global-link-hover-color-dark !important;
+          }
+        }
+      }
+    }
+
+    .content {
+      display: -moz-box;
+      display: -webkit-box;
+      -moz-box-orient: vertical;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      margin-top: .3rem;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      overflow-wrap: break-word;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+      font-size: 1rem;
+      display: inline;
+
+      &::after {
+        content: "\A";
+        white-space: pre;
+      }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      line-height: 2;
+    }
+
+    .post-footer {
+      margin-top: .5rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: .875rem !important;
+
+      a {
+        color: $single-link-color !important;
+
+        .dark-theme & {
+          color: $single-link-color-dark !important;
+        }
+
+        &:hover {
+          color: $single-link-hover-color !important;
+
+          .dark-theme & {
+            color: $single-link-hover-color-dark !important;
+          }
+        }
+      }
+
+      .post-tags {
+        padding: 0;
+
+        a {
+          color: $global-link-color !important;
+
+          .dark-theme & {
+            color: $global-link-color-dark !important;
+          }
+
+          &:hover {
+            color: $global-link-hover-color !important;
+
+            .dark-theme & {
+              color: $global-link-hover-color-dark !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}

assets/css/_partial/_pagination.scss

@@ -1,4 +1,4 @@
-  /** pagination **/
+/** pagination **/
 .pagination {
   display: flex;
   flex-direction: row;

assets/css/_partial/_single/_comment.scss

@@ -1,3 +1,3 @@
-.post-comment {
+.comment {
   padding: 4rem 0;
 }

assets/css/_partial/_single/_footer.scss

@@ -34,17 +34,17 @@
       .post-info-md
       a {
         font-size: 0.8em;
-        color: $post-link-color;
+        color: $single-link-color;
 
         .dark-theme & {
-          color: $post-link-color-dark;
+          color: $single-link-color-dark;
         }
 
         &:hover {
-          color: $post-link-hover-color;
+          color: $single-link-hover-color;
 
           .dark-theme & {
-            color: $post-link-hover-color-dark;
+            color: $single-link-hover-color-dark;
           }
         }
       }

assets/css/_partial/_single/_toc.scss

@@ -37,10 +37,10 @@
         content: "|";
         font-weight: bolder;
         margin-right: .5rem;
-        color: $post-link-color;
+        color: $single-link-color;
 
         .dark-theme & {
-          color: $post-link-color-dark;
+          color: $single-link-color-dark;
         }
       }
 
@@ -56,18 +56,18 @@
 
     .toc-link.active {
       font-weight: bold;
-      color: $post-link-hover-color;
+      color: $single-link-hover-color;
 
       .dark-theme & {
-        color: $post-link-hover-color-dark;
+        color: $single-link-hover-color-dark;
       }
 
       &::before {
         font-weight: bolder;
-        color: $post-link-hover-color;
+        color: $single-link-hover-color;
 
         .dark-theme & {
-          color: $post-link-hover-color-dark;
+          color: $single-link-hover-color-dark;
         }
       }
     }

assets/css/_variables.scss

@@ -47,24 +47,24 @@ $selection-color: rgba(38, 139, 211, 0.2) !default;
 $selection-color-dark: rgba(38, 139, 211, 0.3) !default;
 // ========== Selection ========== //
 
-// ========== Navbar ========== //
+// ========== Header ========== //
-// Color of the navbar background
+// Color of the header background
-$navbar-background-color: #fafafa !default;
+$header-background-color: #fafafa !default;
-$navbar-background-color-dark: #252627 !default;
+$header-background-color-dark: #252627 !default;
 
-// Color of the hover navbar item
+// Color of the hover header item
-$navbar-hover-color: #161209 !default;
+$header-hover-color: #161209 !default;
-$navbar-hover-color-dark: #fff !default;
+$header-hover-color-dark: #fff !default;
-// ========== Navbar ========== //
+// ========== Header ========== //
 
-// ========== Post Content ========== //
+// ========== Single Content ========== //
-// Color of the post link
+// Color of the single link
-$post-link-color: #2d96bd !default;
+$single-link-color: #2d96bd !default;
-$post-link-color-dark: #eee !default;
+$single-link-color-dark: #eee !default;
 
-// Color of the hover post link
+// Color of the hover single link
-$post-link-hover-color: #ef3982 !default;
+$single-link-hover-color: #ef3982 !default;
-$post-link-hover-color-dark: #2d96bd !default;
+$single-link-hover-color-dark: #2d96bd !default;
 
 // Color of the table background
 $table-background-color: #fff !default;
@@ -73,7 +73,7 @@ $table-background-color-dark: #272c34 !default;
 // Color of the table thead
 $table-thead-color: #ededed !default;
 $table-thead-color-dark: #20252b !default;
-// ========== Post Content ========== //
+// ========== Single Content ========== //
 
 // ========== Pagination ========== //
 // Color of the link in pagination

assets/css/custom-style.scss

@@ -1,16 +0,0 @@
-@import "_variables";
-@import "_custom";
-
-@import "_core/normalize";
-@import "_core/base";
-@import "_core/layout";
-
-@import "_page/index";
-
-@import "_partial/navbar";
-@import "_partial/footer";
-@import "_partial/pagination";
-
-@import "_core/media";
-
-@import "_custom";

assets/css/style.scss

@@ -1,13 +0,0 @@
-@import "_variables";
-
-@import "_core/normalize";
-@import "_core/base";
-@import "_core/layout";
-
-@import "_page/index";
-
-@import "_partial/navbar";
-@import "_partial/footer";
-@import "_partial/pagination";
-
-@import "_core/media";

assets/css/style.template.scss

@@ -0,0 +1,29 @@
+{{- if eq .Site.Params.home_mode "post" -}}
+  $home-profile: true;
+  $home-posts: true;
+{{- else -}}
+  $home-profile: true;
+  $home-posts: false;
+{{- end -}}
+
+@import "_variables";
+
+{{- if fileExists "config/css/_custom.scss" -}}
+  @import "_custom";
+{{- end -}}
+
+@import "_core/normalize";
+@import "_core/base";
+@import "_core/layout";
+
+@import "_page/index";
+
+@import "_partial/header";
+@import "_partial/footer";
+@import "_partial/pagination";
+
+@import "_core/media";
+
+{{- if fileExists "config/css/_custom.scss" -}}
+  @import "_custom";
+{{- end -}}

assets/js/blog.js

@@ -7,7 +7,7 @@ jQuery(function($) {
     _Blog.toggleMobileMenu = function() {
         $('#menu-toggle').on('click', () => {
             $('#menu-toggle').toggleClass('active');
-            $('#mobile-menu').toggleClass('active');
+            $('#menu-mobile').toggleClass('active');
         });
     };
 
@@ -102,7 +102,7 @@ jQuery(function($) {
     };
 
     _Blog.responsiveTable = function() {
-        const tables = document.querySelectorAll('.post-content table');
+        const tables = document.querySelectorAll('.content table');
         for (let i = 0; i < tables.length; i++) {
             const table = tables[i];
             const wrapper = document.createElement('div');
@@ -129,7 +129,7 @@ jQuery(function($) {
         for (let i = 0; i < links.length; i++) links[i].className += ' toc-link';
 
         for (let num = 1; num <= 6; num++) {
-            const headers = document.querySelectorAll('.post-content>h' + num);
+            const headers = document.querySelectorAll('.content>h' + num);
             for (let i = 0; i < headers.length; i++) {
                 const header = headers[i];
                 header.innerHTML = `<a href="#${header.id}" class="headerlink"></a>${header.innerHTML}`;

layouts/404.html

@@ -3,7 +3,7 @@
 {{- end -}}
 
 {{- define "content" -}}
-    <div class="notfound">
+    <div class="page" id="content-404">
         <h1 id="error-emoji"></h1>
         <p class="error-text">
             {{- T "pageNotFoundText" -}}&nbsp;

layouts/_default/baseof.html

@@ -7,11 +7,17 @@
 <html lang="{{ .Site.LanguageCode }}">
     <head>
         <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <meta name="robots" content="noodp" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
         <title>
             {{- block "title" . }}{{ .Site.Title }}{{ end -}}
         </title>
-        {{- partial "head.html" . -}}
+        <meta name="Description" content="{{ .Params.description | default .Site.Params.description }}">
+
+        {{- partial "head/meta.html" . -}}
+        {{- partial "head/link.html" . -}}
+        {{- partial "head/seo.html" . -}}
     </head>
     <body>
         {{- /* Check theme isDark before body rendering */ -}}

layouts/_default/section.html

@@ -5,7 +5,7 @@
 {{- define "content" -}}
     <div class="page archive">
         {{- /* Title */ -}}
-        <h2 class="post-title animated pulse faster">
+        <h2 class="single-title animated pulse faster">
             {{- T "all" | humanize}}{{ T .Section | default .Section | humanize -}}
         </h2>
 

layouts/_default/single.html

@@ -1,14 +1,14 @@
 {{- define "title" }}{{ .Title }} | {{ .Site.Title }}{{ end -}}
 
 {{- define "content" -}}
-    <div class="page single">
+    <div class="page single special">
         {{- /* Title */ -}}
-        <h1 class="post-title animated pulse faster">
+        <h1 class="single-title animated pulse faster">
             {{- .Title -}}
         </h1>
 
         {{- /* Content */ -}}
-        <div class="post-content">
+        <div class="content">
             {{- partial "hook/content.html" .Content | safeHTML -}}
         </div>
     </div>

layouts/_default/summary.html

@@ -1,19 +1,19 @@
-<article class="post summary" itemscope itemtype="http://schema.org/Article">
+<article class="single summary" itemscope itemtype="http://schema.org/Article">
     {{- /* Featured image */ -}}
     {{- with .Params.featured_image -}}
-        <div class="post-featured-image-preview">
+        <div class="featured-image-preview">
             {{- $image := $.Params.featured_image_preview | default . -}}
-            {{- partial "image" $image -}}
+            {{- partial "hook/image" $image -}}
         </div>
     {{- end -}}
 
     {{- /* Title */ -}}
-    <h1 class="post-title" itemprop="name headline">
+    <h1 class="single-title" itemprop="name headline">
         <a href="{{ .Permalink }}">{{ .Title }}</a>
     </h1>
 
     {{- /* Meta */ -}}
-    <div class="post-meta">
+    <div class="meta">
         {{- $author := .Params.author | default .Site.Author.name -}}
         {{- $author_link := .Params.author_link | default .Site.Author.link | default .Site.BaseURL -}}
         <a class="author" href="{{ $author_link }}" rel="author" target="_blank">
@@ -38,7 +38,7 @@
     </div>
 
     {{- /* Summary content */ -}}
-    <div class="post-content">
+    <div class="content">
         {{- if .Params.description_as_summary -}}
             <p>
                 {{- .Params.description -}}

layouts/index.html

@@ -1,7 +1,7 @@
 {{- define "content" -}}
-    {{- /* Home mode [post] */ -}}
+    <div class="page home">
-    {{- if eq .Site.Params.home_mode "post" -}}
+        {{- /* Home mode [post] */ -}}
-        <div class="page home">
+        {{- if eq .Site.Params.home_mode "post" -}}
             {{- /* Profile */ -}}
             {{- partial "home/profile.html" . -}}
 
@@ -17,11 +17,11 @@
                 {{- .Render "summary" -}}
             {{- end -}}
             {{- partial "paginator.html" . -}}
-        </div>
 
-    {{- /* Home mode [other] */ -}}
+        {{- /* Home mode [other] */ -}}
-    {{- else -}}
+        {{- else -}}
-        {{- /* Profile */ -}}
+            {{- /* Profile */ -}}
-        {{- partial "home/profile.html" . -}}
+            {{- partial "home/profile.html" . -}}
-    {{- end -}}
+        {{- end -}}
+    </div>
 {{- end -}}

layouts/partials/comment.html

@@ -12,13 +12,13 @@
         {{- if .Site.Params.cdn.gitalk_css -}}
             {{- .Site.Params.cdn.gitalk_css | safeHTML -}}
         {{- else -}}
-            {{- $res := resources.Get "css/lib/gitalk/gitalk.css" | resources.Minify -}}
+            {{- $res := resources.Get "css/lib/gitalk/gitalk.css" | minify -}}
             <link rel="stylesheet" href="{{ $res.RelPermalink }}">
         {{- end -}}
         {{- if .Site.Params.cdn.gitalk_js -}}
             {{ .Site.Params.cdn.gitalk_js | safeHTML -}}
         {{- else -}}
-            {{- $res := resources.Get "js/lib/gitalk/gitalk.min.js" | resources.Minify -}}
+            {{- $res := resources.Get "js/lib/gitalk/gitalk.min.js" -}}
             <script src="{{ $res.RelPermalink }}"></script>
         {{- end -}}
         <script>
@@ -43,7 +43,7 @@
         {{- if .Site.Params.cdn.valine_js -}}
             {{- .Site.Params.cdn.valine_js | safeHTML -}}
         {{- else -}}
-            {{- $res := resources.Get "js/lib/valine/Valine.min.js" | resources.Minify -}}
+            {{- $res := resources.Get "js/lib/valine/Valine.min.js" -}}
             <script src="{{ $res.RelPermalink }}"></script>
         {{- end -}}
         <script>

layouts/partials/head/link.html

@@ -1,27 +1,3 @@
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="robots" content="noodp" />
-<meta name="Description" content="{{ .Params.description | default .Site.Params.description }}">
-{{- with .Site.Params.google_verification -}}
-    <meta name="google-site-verification" content="{{ . }}" />
-{{- end -}}
-{{- with .Site.Params.bing_verification -}}
-    <meta name="msvalidate.01" content="{{ . }}" />
-{{- end -}}
-{{- with .Site.Params.yandex_verification -}}
-    <meta name="yandex-verification" content="{{ . }}" />
-{{- end -}}
-{{- with .Site.Params.pinterest_verification -}}
-    <meta name="p:domain_verify" content="{{ . }}" />
-{{- end -}}
-{{- with .Site.Params.baidu_verification -}}
-    <meta name="baidu-site-verification" content="{{ . }}" />
-{{- end -}}
-{{- if .PrevInSection -}}
-    <link rel="prev" href="{{ .PrevInSection.Permalink }}" />
-{{- end -}}
-{{- if .NextInSection -}}
-    <link rel="next" href="{{ .NextInSection.Permalink }}" />
-{{- end -}}
 <link rel="canonical" href="{{ .Permalink }}" />
 <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
@@ -29,31 +5,27 @@
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 <link rel="manifest" href="/site.webmanifest">
 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
-<meta name="msapplication-TileColor" content="#da532c">
+
-<meta name="theme-color" content="#ffffff">
+{{- if .PrevInSection -}}
+    <link rel="prev" href="{{ .PrevInSection.Permalink }}" />
+{{- end -}}
+{{- if .NextInSection -}}
+    <link rel="next" href="{{ .NextInSection.Permalink }}" />
+{{- end -}}
+
 {{- with .OutputFormats.Get "RSS" -}}
     <link rel="alternate" href="{{ .RelPermalink }}" type="application/rss+xml" title="{{ $.Site.Title }}">
     <link rel="feed" href="{{ .RelPermalink }}" type="application/rss+xml" title="{{ $.Site.Title }}">
 {{- end -}}
 
-{{- template "_internal/opengraph.html" . -}}
+{{- /* style.min.css */ -}}
-
+{{- $res := resources.Get "css/style.template.scss" -}}
-{{- $share := .Params.share.enable | default .Site.Params.share.enable | eq true -}}
-{{- if $share | and (.Params.Share.Twitter | default .Site.Params.Share.Twitter | eq true) -}}
-    {{- template "_internal/twitter_cards.html" . -}}
-{{- end -}}
-
-{{- partial "seo.html" . -}}
-
 {{- $options := dict "targetPath" "css/style.min.css" "outputStyle" "compressed" "enableSourceMap" true -}}
 {{- if fileExists "config/css/_custom.scss" -}}
     {{- $options = dict "includePaths" (slice "config/css") | merge $options -}}
-    {{- $res := resources.Get "css/custom-style.scss" | toCSS $options -}}
-    <link rel="stylesheet" href="{{ $res.RelPermalink }}">
-{{- else -}}
-    {{- $res := resources.Get "css/style.scss" | toCSS $options -}}
-    <link rel="stylesheet" href="{{ $res.RelPermalink }}">
 {{- end -}}
+{{- $res = resources.ExecuteAsTemplate "style.scss" . $res | toCSS $options -}}
+<link rel="stylesheet" href="{{ $res.RelPermalink }}">
 
 {{- /* Font Awesome https://fontawesome.com/ */ -}}
 {{- if eq (getenv "HUGO_ENV") "production" | and .Site.Params.cdn.fontawesome_free_css -}}

layouts/partials/head/meta.html

@@ -0,0 +1,21 @@
+{{- with .Site.Params.google_verification -}}
+    <meta name="google-site-verification" content="{{ . }}" />
+{{- end -}}
+{{- with .Site.Params.bing_verification -}}
+    <meta name="msvalidate.01" content="{{ . }}" />
+{{- end -}}
+{{- with .Site.Params.yandex_verification -}}
+    <meta name="yandex-verification" content="{{ . }}" />
+{{- end -}}
+{{- with .Site.Params.pinterest_verification -}}
+    <meta name="p:domain_verify" content="{{ . }}" />
+{{- end -}}
+{{- with .Site.Params.baidu_verification -}}
+    <meta name="baidu-site-verification" content="{{ . }}" />
+{{- end -}}
+
+{{- template "_internal/opengraph.html" . -}}
+{{- template "_internal/twitter_cards.html" . -}}
+
+<meta name="theme-color" content="#ffffff">
+<meta name="msapplication-TileColor" content="#da532c">

layouts/partials/header.html

@@ -1,12 +1,12 @@
-{{- /* Desktop navbar */ -}}
+{{- /* Desktop header */ -}}
-<nav class="navbar">
+<header class="desktop">
-    <div class="navbar-container">
+    <div class="header-wrapper">
-        <div class="navbar-header animated bounceIn">
+        <div class="header-title animated bounceIn">
             <a href="{{ .Site.BaseURL }}">
                 {{- .Site.Title -}}
             </a>
         </div>
-        <div class="navbar-menu">
+        <div class="menu">
             {{- $currentPage := . }}
             {{- range .Site.Menus.main -}}
                 <a class="menu-item{{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) | or (eq $currentPage.RelPermalink .URL) }} active{{ end }}" href="{{ .URL | absLangURL }}" title="{{ .Title }}">
@@ -16,13 +16,13 @@
             <a href="javascript:void(0);" class="theme-switch"><i class="fas fa-adjust fa-rotate-180 fa-fw" title="{{ T "switchTheme" }}"></i></a>
         </div>
     </div>
-</nav>
+</header>
 
-{{- /* Mobile navbar */ -}}
+{{- /* Mobile header */ -}}
-<nav class="navbar-mobile">
+<header class="mobile">
-    <div class="navbar-container">
+    <div class="header-wrapper">
-        <div class="navbar-header">
+        <div class="header-container">
-            <div class="navbar-header-title animated bounceIn">
+            <div class="header-title animated bounceIn">
                 <a href="{{ .Site.BaseURL }}">
                     {{- .Site.Title -}}
                 </a>
@@ -31,7 +31,7 @@
                 <span></span><span></span><span></span>
             </div>
         </div>
-        <div class="navbar-menu" id="mobile-menu">
+        <div class="menu" id="menu-mobile">
             {{- $currentPage := . -}}
             {{- range .Site.Menus.main -}}
                 <a class="menu-item" href="{{ .URL | absLangURL }}" title="{{ .Title }}">
@@ -41,4 +41,4 @@
             <a href="javascript:void(0);" class="theme-switch"><i class="fas fa-adjust fa-rotate-180 fa-fw" title="{{ T "switchTheme" }}"></i></a>
         </div>
     </div>
-</nav>
+</header>

layouts/partials/home/profile.html

@@ -1,4 +1,4 @@
-<div class="home-intro">
+<div class="home-profile">
     {{- $avatar := "" -}}
     {{- if .Site.Params.gravatar.email -}}
         {{- $avatar = (printf "https://www.gravatar.com/avatar/%s?s=240&d=mp" (md5 .Site.Params.gravatar.email)) -}}

layouts/posts/single.html

@@ -1,13 +1,13 @@
 {{- define "title" }}{{ .Title }} | {{ .Site.Title }}{{ end -}}
 
 {{- define "content" -}}
-    <article class="page post">
+    <article class="page single">
         {{- /* Title */ -}}
-        <h1 class="post-title animated flipInX">{{ .Title }}</h1>
+        <h1 class="single-title animated flipInX">{{ .Title }}</h1>
 
         {{- /* Meta */ -}}
-        <div class="post-meta">
+        <div class="meta">
-            <div class="post-meta-main">
+            <div class="meta-line">
                 {{- $author := .Params.author | default .Site.Author.name -}}
                 {{- $author_link := .Params.author_link | default .Site.Author.link | default .Site.BaseURL -}}
                 <a class="author" href="{{ $author_link }}" rel="author" target="_blank">
@@ -25,7 +25,7 @@
                     </span>
                 {{- end -}}
             </div>
-            <div class="post-meta-other">
+            <div class="meta-line">
                 {{- $publish_date := .PublishDate.Format (.Site.Params.dateFormatToUse | default "2006-01-02") -}}
                 <i class="far fa-calendar-alt fa-fw"></i><time datetime={{ $publish_date }}>{{ $publish_date }}</time>&nbsp;
                 <i class="fas fa-pencil-alt fa-fw"></i>{{ T "wordCount" .WordCount }}&nbsp;
@@ -40,8 +40,8 @@
 
         {{- /* Featured image */ -}}
         {{- with .Params.featured_image -}}
-            <div class="post-featured-image">
+            <div class="featured-image">
-                {{- partial "image" . -}}
+                {{- partial "hook/image" . -}}
             </div>
         {{- end -}}
 
@@ -72,7 +72,7 @@
         {{- end -}}
 
         {{- /* Content */ -}}
-        <div class="post-content">
+        <div class="content">
             {{- partial "hook/content.html" .Content | safeHTML -}}
         </div>
 
@@ -80,9 +80,9 @@
         {{- partial "post/footer.html" . -}}
 
         {{- /* Comment */ -}}
-        <div class="post-comment">
+        <div class="comment">
             {{- if ( .Params.comment | default true ) -}}
-                {{- partial "comments.html" . -}}
+                {{- partial "comment.html" . -}}
             {{- end -}}
         </div>
     </article>

layouts/taxonomy/list.html

@@ -5,7 +5,7 @@
 {{- define "content" -}}
     <div class="page archive">
         {{- /* Title */ -}}
-        <h2 class="post-title animated pulse faster">
+        <h2 class="single-title animated pulse faster">
             {{- $taxonomy := .Data.Singular -}}
             {{- if eq $taxonomy "category" -}}
                 <i class="far fa-folder-open fa-fw"></i>&nbsp;{{ humanize .Title }}

layouts/taxonomy/terms.html

@@ -9,7 +9,7 @@
 
     <div class="page archive">
         {{- /* Title */ -}}
-        <h2 class="post-title animated pulse faster">
+        <h2 class="single-title animated pulse faster">
             {{- T "all" | humanize}}{{ T $taxonomies | default $taxonomies | humanize -}}
         </h2>
 
@@ -36,7 +36,7 @@
                             {{- end -}}
                             {{- if gt (len $pages) 5 -}}
                                 <span class="more-post">
-                                    <a href="{{ .Permalink }}" class="more-post-link">{{ T "more" }} >></a>
+                                    <a href="{{ .Permalink }}" class="more-single-link">{{ T "more" }} >></a>
                                 </span>
                             {{- end -}}
                         </div>

resources/_gen/assets/scss/css/style.scss_d75fd08668b4bae707167bbce4d8ca46.json

@@ -1 +0,0 @@
-{"Target":"css/style.min.css","MediaType":"text/css","Data":{}}