Sass structure full rebuild

25 files changed, 376 insertions, 421 deletions

diff --git a/assets/sass/_class.scss b/assets/sass/_class.scss
new file mode 100644
index 0000000..f0fb73b
--- /dev/null
+++ b/assets/sass/_class.scss
@@ -0,0 +1,85 @@
+body {
+    a {
+        color: $color-primary;
+    }
+
+    a:hover {
+        color: $color-secondary;
+        text-decoration: none;
+    }
+}
+
+// main title style
+.main-title {
+    font-family: 'Product Sans', -apple-system, BlinkMacSystemFont, Arial, monospace;
+    font-weight: 700;
+    font-size: $font-size-logo;
+    white-space: nowrap;
+    display: block;
+}
+
+.link-alter {
+    a {
+        color: $color-secondary;
+    }
+
+    a:hover {
+        color: $color-primary-dark;
+        text-decoration: none;
+    }
+}
+
+.markdown-body {
+    a {
+        color: $color-secondary;
+    }
+
+    a:hover {
+        color: $color-primary-dark;
+        text-decoration: none;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        color: $color-primary;
+    }
+
+    h1 {
+        font-size: $font-size-l1;
+        border-bottom: $spliter;
+        margin-top: 1.5rem;
+    }
+
+    h2 {
+        font-size: $font-size-l2;
+        border-bottom: $spliter;
+        margin-top: 1.25rem;
+    }
+
+    h3 {
+        font-size: $font-size-l3;
+    }
+
+    h4,
+    h5,
+    h6 {
+        font-size: $font-size-l4;
+    }
+
+    hr {
+        background-color: $color-spliter;
+    }
+
+    ul {
+        list-style-type: circle;
+    }
+
+    img {
+        border: 2px solid $color-secondary;
+        border-radius: 1px;
+    }
+}
\ No newline at end of file
diff --git a/assets/sass/_content.scss b/assets/sass/_content.scss
deleted file mode 100644
index 00fc162..0000000
--- a/assets/sass/_content.scss
+++ /dev/null
@@ -1,137 +0,0 @@
-#content {
-    padding: 0 1em 0 1em;
-
-    // different padding when screen size below width-md(768px)
-    @media screen and (max-width: $width-md) {
-        padding: 0 1.5em 0 1.5em;
-    }
-}
-
-#post {
-    padding: 1.5em 0 1.5em 0;
-}
-
-// different padding of first & last child in archives page
-#post-archive {
-    &:not(:first-child):not(:last-child) {
-        padding: 0.5em 0 0.5em 0;
-    }
-
-    &:first-child {
-        padding: 1.5em 0 0.5em 0;
-    }
-
-    &:last-child {
-        padding: 0.5em 0 1.5em 0;
-    }
-}
-
-// spliter between two posts
-#post+#post,
-#post-archive+#post-archive {
-    border-top: $spliter;
-}
-
-// post title font & color
-#post-title {
-    font-size: $font-size-l1;
-
-    @include link-primary();
-}
-
-#post-title-archive {
-    font-size: $font-size-l2;
-
-    @include link-primary();
-}
-
-// post meta data style
-#post-meta {
-    color: $color-mute;
-    padding: 0.5em 0 1em 0;
-    white-space: nowrap;
-    overflow-x: scroll;
-
-    &::-webkit-scrollbar {
-        display: none; // WebKit
-    }
-
-    scrollbar-width: none; // Firefox
-    -ms-overflow-style: none; // Microsoft
-
-    @include link-secondary();
-}
-
-#post-meta-archive {
-    color: $color-mute;
-    padding: 0;
-    white-space: nowrap;
-    overflow-x: scroll;
-
-    &::-webkit-scrollbar {
-        display: none; // WebKit
-    }
-
-    scrollbar-width: none; // Firefox
-    -ms-overflow-style: none; // Microsoft
-
-    @include link-secondary();
-}
-
-#post-aplayer {
-    font-family: inherit;
-    margin: 0 2px 1.5em 2px;
-}
-
-// read more link style
-#post-exlink {
-    margin: 0.5em 0 0 0;
-
-    @include link-secondary();
-}
-
-// current tag indicator style in tags page
-#page-info {
-    padding: 1.5em 0 1.5em 0;
-    font-size: $font-size-l3;
-    border-bottom: $spliter;
-}
-
-// markdown article style
-article {
-    padding-top: 1.5em;
-    padding-bottom: 1.5em;
-}
-
-// in-post license style
-#license {
-    @include link-secondary();
-
-    margin-bottom: 1.5em;
-}
-
-// comment loading indicator style
-#post-loading {
-    border-top: $spliter;
-    margin: 0 0 1.5em 0;
-    padding-top: 1.5em;
-    text-align: center;
-
-    i {
-        font-size: 1.5em;
-        color: $color-primary;
-    }
-
-    p {
-        margin: 0.5em 0 0 0;
-    }
-}
-
-// spliter between comment & post will not show while iframe not loaded
-#post-comment .utterances-frame {
-    border-top: $spliter;
-}
-
-#post-comment #disqus_thread {
-    border-top: $spliter;
-}
\ No newline at end of file
diff --git a/assets/sass/_header.scss b/assets/sass/_header.scss
deleted file mode 100644
index 08b279e..0000000
--- a/assets/sass/_header.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-header {
-    padding: 1em 0 1em 0;
-
-    #main-title {
-        @include pdsans-title();
-
-        &:hover {
-            text-decoration: none;
-            color: $color-secondary;
-        }
-    }
-
-    #sub-title {
-        font-size: $font-size-l3;
-        display: block;
-        color: $color-mute;
-    }
-
-    border-bottom: $spliter;
-}
\ No newline at end of file
diff --git a/assets/sass/_markdown.scss b/assets/sass/_markdown.scss
deleted file mode 100644
index 4241caf..0000000
--- a/assets/sass/_markdown.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-// primer CSS markdown color remap
-@mixin markdown-remap {
-    h1, h2, h3, h4, h5, h6 {
-        color: $color-primary;
-    }
-
-    h1 {
-        font-size: $font-size-l1;
-        border-bottom: $spliter;
-    }
-
-    h2 {
-        font-size: $font-size-l2;
-        border-bottom: $spliter;
-    }
-
-    h3 {
-        font-size: $font-size-l3;
-    }
-
-    h4, h5, h6 {
-        font-size: $font-size-l4;
-    }
-
-    hr {
-        background-color: $color-spliter;
-    }
-
-    ul {
-        list-style-type: circle;
-    }
-
-    @include link-secondary();
-
-    img {
-        border: 2px solid $color-secondary;
-        border-radius: 1px;
-    }
-}
-
-#post-content {
-    &.markdown-body {
-        @include markdown-remap();
-    }
-}
-
-#post-summary {
-    &.markdown-body {
-        @include markdown-remap();
-
-        // do not show heads in summary
-        h1, h2, h3, h4, h5, h6 {
-            display: none;
-        }
-    }
-}
\ No newline at end of file
diff --git a/assets/sass/_primer.scss b/assets/sass/_primer.scss
index cfea983..de96f52 100644
--- a/assets/sass/_primer.scss
+++ b/assets/sass/_primer.scss
@@ -1,21 +1,3 @@
-@font-face {
-    font-family: "Product Sans";
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: local("Product Sans Bold"), local("ProductSans-Bold"),
-        url("https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.0.0/product-sans/product-sans-bold.woff2") format("woff2");
-}
-
-@font-face {
-    font-family: "Cascadia Code";
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: local("Cascadia Code"), local("Cascadia Mono"),
-        url("https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.0.0/cascadia-code/cascadia.woff2") format("woff2"),
-}
-
 // @primer/css/support/variables/layout.scss
 // fixed-width container variables
 $container-width: 900px !default;
diff --git a/assets/sass/_sidebar.scss b/assets/sass/_sidebar.scss
deleted file mode 100644
index 9cadddf..0000000
--- a/assets/sass/_sidebar.scss
+++ /dev/null
@@ -1,70 +0,0 @@
-#sidebar {
-    ul {
-        list-style-type: none;
-    }
-
-    padding: 1.5em 1em 1.5em 1em;
-
-    // different padding when screen size below width-md(768px)
-    @media screen and (max-width: $width-md) {
-        border-top: $spliter;
-        padding: 1.5em 1.5em 1.5em 1.5em;
-    }
-
-    h5 {
-        font-size: $font-size-l3;
-    }
-
-    @include link-secondary();
-
-    #widget-toc,
-    #widget-pages,
-    #widget-tags,
-    #widget-links {
-
-        div,
-        ul {
-            margin: 0.5em 0em 0.5em 0em;
-        }
-    }
-
-    #widget-bgm img {
-        margin: 0.5em 0em 0.5em 0em;
-        width: 100%;
-        border-radius: 2px;
-        filter: grayscale(50%);
-
-        @media screen and (max-width: $width-md) {
-            width: 50%;
-        }
-    }
-}
-
-#aplayer {
-    font-family: inherit;
-}
-
-#scroll-top {
-    cursor: pointer;
-    position: fixed;
-    width: 2.5em;
-    height: 2.5em;
-    right: 1em;
-    bottom: 1em;
-    color: $color-primary;
-    background-color: $color-spliter;
-    border-radius: 100%;
-    line-height: 2.5em;
-    text-align: center;
-    vertical-align: middle;
-    display: inline-block;
-
-    &:hover {
-        color: $color-secondary;
-    }
-
-    i {
-        font-size: 1.5em;
-        line-height: inherit;
-    }
-}
\ No newline at end of file
diff --git a/assets/sass/_var.scss b/assets/sass/_var.scss
index a7a792f..5164e82 100644
--- a/assets/sass/_var.scss
+++ b/assets/sass/_var.scss
@@ -6,44 +6,29 @@ $color-mute: #9EA1A3 !default; // https://irocore.com/suzu-iro/
 $color-spliter: #E5E2E4 !default; // https://irocore.com/komachinezu/
 
 // font size list
-$font-size-logo: 2.5em !default; // Logo Only
-$font-size-l1: 1.75em !default; // Primer CSS H1
-$font-size-l2: 1.5em !default; // Primer CSS H2
-$font-size-l3: 1.25em !default; // Primer CSS H3
-$font-size-l4: 1em !default; // Primer CSS H4 & Normal Text
+$font-size-logo: 2.5rem !default; // Logo Only
+$font-size-l1: 1.75rem !default; // Primer CSS H1
+$font-size-l2: 1.5rem !default; // Primer CSS H2
+$font-size-l3: 1.25rem !default; // Primer CSS H3
+$font-size-l4: 1rem !default; // Primer CSS H4 & Normal Text
 
 // divider css
 $spliter: 1px solid $color-spliter !default;
 
-// link color mixin
-@mixin link-primary {
-    a {
-        color: $color-primary;
-    }
-
-    a:hover {
-        color: $color-secondary;
-        text-decoration: none;
-    }
-}
-
-@mixin link-secondary {
-    a {
-        color: $color-secondary;
-    }
-
-    a:hover {
-        color: $color-primary-dark;
-        text-decoration: none;
-    }
+@font-face {
+    font-family: "Product Sans";
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+    src: local("Product Sans Bold"), local("ProductSans-Bold"),
+        url("https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.0.0/product-sans/product-sans-bold.woff2") format("woff2");
 }
 
-// title css which also used in 404
-@mixin pdsans-title {
-    font-family: 'Product Sans', -apple-system, BlinkMacSystemFont, Arial, monospace;
-    font-weight: 700;
-    font-size: $font-size-logo;
-    white-space: nowrap;
-    display: block;
-    color: $color-primary;
+@font-face {
+    font-family: "Cascadia Code";
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: local("Cascadia Code"), local("Cascadia Mono"),
+        url("https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.0.0/cascadia-code/cascadia.woff2") format("woff2"),
 }
\ No newline at end of file
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index 8a6120d..95154d0 100644
--- a/assets/sass/main.scss
+++ b/assets/sass/main.scss
@@ -1,12 +1,10 @@
 // custom variables
 @import "custom";
-
-//variables
+// variables
 @import "_var";
 
 // cover primer variables
 @import "_primer.scss";
-
 // include only used part of @primer/css/core
 @import "@primer/css/base/index.scss";
 @import "@primer/css/layout/index.scss";
@@ -14,23 +12,13 @@
 // utilities always go last so that they can override components
 @import "@primer/css/utilities/index.scss";
 
-@import "_header";
-
-// list page & single page content part style
-@import "_content";
-
-// sidebar, progress indicator and global aplayer style
-@import "_sidebar";
-
-// markdown style cover in summary & in-post content
-@import "_markdown";
-
-@import "_pagination";
-
-@import "_footer";
+// global classes
+@import "_class";
 
-// for 404 page
-#not-found {
-    @include pdsans-title();
-    padding-top: 1em;
-}
\ No newline at end of file
+@import "modules/_header";
+@import "modules/_content";
+@import "modules/_archive";
+@import "modules/_sidebar";
+@import "modules/_component";
+@import "modules/_footer";
+@import "modules/_pagination";
\ No newline at end of file
diff --git a/assets/sass/modules/_archive.scss b/assets/sass/modules/_archive.scss
new file mode 100644
index 0000000..88b2993
--- /dev/null
+++ b/assets/sass/modules/_archive.scss
@@ -0,0 +1,31 @@
+.post-archive {
+    &:not(:last-child) {
+        padding: 0.5rem 0;
+    }
+
+    &:last-child {
+        padding: 0.5rem 0 1rem 0;
+    }
+}
+
+.post-archive+.post-archive {
+    border-top: $spliter;
+}
+
+.post-title-archive {
+    font-size: $font-size-l2;
+}
+
+.post-meta-archive {
+    color: $color-mute;
+    padding: 0;
+    white-space: nowrap;
+    overflow-x: scroll;
+
+    &::-webkit-scrollbar {
+        display: none; // WebKit
+    }
+
+    scrollbar-width: none; // Firefox
+    -ms-overflow-style: none; // Microsoft
+}
\ No newline at end of file
diff --git a/assets/sass/modules/_component.scss b/assets/sass/modules/_component.scss
new file mode 100644
index 0000000..9e64add
--- /dev/null
+++ b/assets/sass/modules/_component.scss
@@ -0,0 +1,28 @@
+#aplayer {
+    font-family: inherit;
+}
+
+#scroll-top {
+    cursor: pointer;
+    position: fixed;
+    width: 2.5rem;
+    height: 2.5rem;
+    right: 1rem;
+    bottom: 1rem;
+    color: $color-primary;
+    background-color: $color-spliter;
+    border-radius: 100%;
+    line-height: 2.5rem;
+    text-align: center;
+    vertical-align: middle;
+    display: inline-block;
+
+    &:hover {
+        color: $color-secondary;
+    }
+
+    i {
+        font-size: 1.5rem;
+        line-height: inherit;
+    }
+}
\ No newline at end of file
diff --git a/assets/sass/modules/_content.scss b/assets/sass/modules/_content.scss
new file mode 100644
index 0000000..a88671c
--- /dev/null
+++ b/assets/sass/modules/_content.scss
@@ -0,0 +1,90 @@
+#content {
+    padding: 0 1rem;
+
+    // different padding when screen size below width-md(768px)
+    @media screen and (max-width: $width-md) {
+        padding: 0 1.5rem;
+    }
+}
+
+article {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+}
+
+.post {
+    padding: 1.25rem 0 1.5rem 0;
+}
+
+.post+.post {
+    border-top: $spliter;
+}
+
+.post-title {
+    font-size: $font-size-l1;
+}
+
+.post-meta {
+    color: $color-mute;
+    padding: 0.5rem 0 1rem 0;
+    white-space: nowrap;
+    overflow-x: scroll;
+
+    &::-webkit-scrollbar {
+        display: none; // WebKit
+    }
+
+    scrollbar-width: none; // Firefox
+    -ms-overflow-style: none; // Microsoft
+}
+
+.post-summary {
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        display: none;
+    }
+}
+
+#post-aplayer {
+    font-family: inherit;
+    margin: 0 2px 1.5rem 2px;
+}
+
+.license {
+    margin-bottom: 1.5rem;
+}
+
+.post-loading {
+    border-top: $spliter;
+    margin: 0 0 1.5rem 0;
+    padding-top: 1.5rem;
+    text-align: center;
+
+    i {
+        font-size: 1.5rem;
+        color: $color-primary;
+    }
+
+    p {
+        margin: 0.5rem 0 0 0;
+    }
+}
+
+.post-comment .utterances-frame {
+    border-top: $spliter;
+}
+
+.post-comment #disqus_thread {
+    border-top: $spliter;
+}
+
+.page-info {
+    padding: 1rem 0;
+    font-size: $font-size-l3;
+    border-bottom: $spliter;
+}
\ No newline at end of file
diff --git a/assets/sass/_footer.scss b/assets/sass/modules/_footer.scss
index 4be7f36..1d106dd 100644
--- a/assets/sass/_footer.scss
+++ b/assets/sass/modules/_footer.scss
@@ -3,8 +3,6 @@ footer {
     margin-top: auto;
 
     p {
-        margin: 2em 0 2em 0;
+        margin: 2rem 0;
     }
-
-    @include link-secondary();
 }
\ No newline at end of file
diff --git a/assets/sass/modules/_header.scss b/assets/sass/modules/_header.scss
new file mode 100644
index 0000000..b204921
--- /dev/null
+++ b/assets/sass/modules/_header.scss
@@ -0,0 +1,18 @@
+header {
+    &>div {
+        padding: 2rem 1rem;
+
+        // different padding when screen size below width-md(768px)
+        @media screen and (max-width: $width-md) {
+            padding: 2rem 1.5rem;
+        }
+    }
+
+    .sub-title {
+        font-size: $font-size-l3;
+        display: block;
+        color: $color-mute;
+    }
+
+    border-bottom: $spliter;
+}
\ No newline at end of file
diff --git a/assets/sass/_pagination.scss b/assets/sass/modules/_pagination.scss
index 992fe5a..e2e9fbf 100644
--- a/assets/sass/_pagination.scss
+++ b/assets/sass/modules/_pagination.scss
@@ -1,15 +1,14 @@
-#pagination {
+.pagination {
     text-align: center;
     // spliter between pagination and last post block
     border-top: $spliter;
-    padding: 1em 0 1em 0;
+    padding: 1rem 0;
 
     li {
         display: inline;
-        @include link-primary();
 
         &.pag-item {
-            padding: 0em 0.25em;
+            padding: 0 0.25rem;
 
             a {
                 vertical-align: middle;
@@ -23,7 +22,7 @@
     }
 
     i {
-        padding: 0em 0.25em;
+        padding: 0 0.25rem;
         vertical-align: middle;
     }
 }
\ No newline at end of file
diff --git a/assets/sass/modules/_sidebar.scss b/assets/sass/modules/_sidebar.scss
new file mode 100644
index 0000000..e7cfa49
--- /dev/null
+++ b/assets/sass/modules/_sidebar.scss
@@ -0,0 +1,39 @@
+#sidebar {
+    ul {
+        list-style-type: none;
+    }
+
+    padding: 1.5rem 1rem;
+
+    // different padding when screen size below width-md(768px)
+    @media screen and (max-width: $width-md) {
+        border-top: $spliter;
+        padding: 1.5rem;
+    }
+
+    h5 {
+        font-size: $font-size-l3;
+    }
+
+    .widget-toc,
+    .widget-pages,
+    .widget-tags,
+    .widget-links {
+
+        div,
+        ul {
+            margin: 0.5rem 0;
+        }
+    }
+
+    .widget-bgm img {
+        margin: 0.5rem 0;
+        width: 100%;
+        border-radius: 2px;
+        filter: grayscale(50%);
+
+        @media screen and (max-width: $width-md) {
+            width: 50%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/layouts/404.html b/layouts/404.html
index 6dfd73f..eec3ded 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,3 +1,5 @@
 {{ define "main" }}
-<span id="not-found">404 NOT FOUND</span>
+<div class="main-title" style="padding-top: 1.5rem;">
+    <span>404 NOT FOUND</span>
+</div>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/_default/archives.html b/layouts/_default/archives.html
index 348e6ac..cb4b911 100644
--- a/layouts/_default/archives.html
+++ b/layouts/_default/archives.html
@@ -1,36 +1,36 @@
 {{ define "main" }}
 <!-- page info section e.g. current tag & total archive pages -->
-<div id="page-info">
+<div class="page-info">
     <span>{{ i18n "archivesTotalPages" }}{{ len (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}</span>
 </div>
 <!-- archives range in all posts -->
 {{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) 50 }}
 {{ range $paginator.Pages }}
-<div id="post-archive">
-    <h2 id="post-title-archive">
+<div class="post-archive">
+    <h2 class="post-title-archive">
         <a href="{{ .Permalink }}">{{ .Title }}</a>
     </h2>
-    <div id="post-meta-archive">
+    <div class="post-meta-archive link-alter">
         {{ partial "post-meta.html" . }}
     </div>
 </div>
 {{ end }}
 
-<!-- START custom smart pagination -->
+<!-- custom smart pagination -->
 {{ $offsetLinks := 2 }}
 {{ $maxLinks := (add (mul $offsetLinks 2) 1) }}
 {{ $lowerLimit := (add $offsetLinks 1) }}
 {{ $upperLimit := (sub $paginator.TotalPages $offsetLinks) }}
 {{ if gt $paginator.TotalPages 1 }}
-<ul id="pagination">
+<ul class="pagination">
     {{ if ne $paginator.PageNumber 1 }}
     <li class="pag-first">
-        <a href="{{ $paginator.First.URL }}"><i class="fas fa-angle-double-left"></a>
+        <a href="{{ $paginator.First.URL }}"><i class="fas fa-angle-double-left"></i></a>
     </li>
     {{ end }}
     {{ if $paginator.HasPrev }}
     <li class="pag-previous">
-        <a href="{{ $paginator.Prev.URL }}"><i class="fas fa-angle-left"></a>
+        <a href="{{ $paginator.Prev.URL }}"><i class="fas fa-angle-left"></i></a>
     </li>
     {{ end }}
     {{ range $paginator.Pagers }}
@@ -70,6 +70,5 @@
     {{ end }}
 </ul>
 {{ end }}
-<!-- END custom smart pagination -->
 
 {{ end }}
\ No newline at end of file
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 7f387f6..bcefcc2 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -2,37 +2,34 @@
 <!-- homepage range in all posts -->
 {{ $paginator := .Paginate (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) }}
 {{ range $paginator.Pages }}
-<div id="post">
-    <h2 id="post-title">
+<div class="post">
+    <h2 class="post-title">
         <a href="{{ .Permalink }}">{{ .Title }}</a>
     </h2>
-    <div id="post-meta">
+    <div class="post-meta link-alter">
         {{ partial "post-meta.html" . }}
     </div>
-    <div class="markdown-body" id="post-summary">
+    <div class="post-summary markdown-body">
         {{ .Summary }}
     </div>
-    <div id="post-exlink">
-        {{ partial "post-exlink.html" . }}
-    </div>
 </div>
 {{ end }}
 
-<!-- START custom smart pagination -->
+<!-- custom smart pagination -->
 {{ $offsetLinks := 2 }}
 {{ $maxLinks := (add (mul $offsetLinks 2) 1) }}
 {{ $lowerLimit := (add $offsetLinks 1) }}
 {{ $upperLimit := (sub $paginator.TotalPages $offsetLinks) }}
 {{ if gt $paginator.TotalPages 1 }}
-<ul id="pagination">
+<ul class="pagination">
     {{ if ne $paginator.PageNumber 1 }}
     <li class="pag-first">
-        <a href="{{ $paginator.First.URL }}"><i class="fas fa-angle-double-left"></a>
+        <a href="{{ $paginator.First.URL }}"><i class="fas fa-angle-double-left"></i></a>
     </li>
     {{ end }}
     {{ if $paginator.HasPrev }}
     <li class="pag-previous">
-        <a href="{{ $paginator.Prev.URL }}"><i class="fas fa-angle-left"></a>
+        <a href="{{ $paginator.Prev.URL }}"><i class="fas fa-angle-left"></i></a>
     </li>
     {{ end }}
     {{ range $paginator.Pagers }}
@@ -72,6 +69,5 @@
     {{ end }}
 </ul>
 {{ end }}
-<!-- END custom smart pagination -->
 
 {{ end }}
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 7ee7d25..87b6d62 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,23 +1,23 @@
 {{ define "main" }}
 <article>
     <!-- post meta -->
-    <h4 id="post-title">
+    <h4 class="post-title">
         <a href="{{ .Permalink }}">{{ .Title }}</a>
     </h4>
-    <div id="post-meta">
+    <div class="post-meta link-alter">
         {{ partial "post-meta.html" . }}
     </div>
     {{ with .Params.playerURL }}
     <div id="post-aplayer"></div>
     {{ end }}
     <!-- post main content -->
-    <div class="markdown-body" id="post-content">
+    <div class="post-content markdown-body">
         {{ .Content }}
     </div>
 </article>
 <!-- post license -->
 {{ if ne .Params.noLicense true }}
-<div class="markdown-body" id="license">
+<div class="license markdown-body">
     <blockquote>
         <p>{{ i18n "postCopyrightFront" }}<a rel="license" href="{{ .Site.Params.licenseLink }}" target="_blank">{{ .Site.Params.license }}</a>{{ i18n "postCopyrightEnd" }}</p>
     </blockquote>
diff --git a/layouts/_default/tag.html b/layouts/_default/tag.html
index b2860b2..97d6ead 100644
--- a/layouts/_default/tag.html
+++ b/layouts/_default/tag.html
@@ -1,42 +1,39 @@
 {{ define "main" }}
 <!-- page info section e.g. current tag & total archive pages -->
-<div id="page-info">
+<div class="page-info">
     <span>{{ i18n "tagsCurrentTag" . }}</span>
 </div>
 <!-- tags page range in posts with current tag -->
 {{ $paginator := .Paginator }}
 {{ range $paginator.Pages }}
-<div id="post">
-    <h2 id="post-title">
+<div class="post">
+    <h2 class="post-title">
         <a href="{{ .Permalink }}">{{ .Title }}</a>
     </h2>
-    <div id="post-meta">
+    <div class="post-meta link-alter">
         {{ partial "post-meta.html" . }}
     </div>
-    <div class="markdown-body" id="post-summary">
+    <div class="post-summary markdown-body">
         {{ .Summary }}
     </div>
-    <div id="post-exlink">
-        {{ partial "post-exlink.html" . }}
-    </div>
 </div>
 {{ end }}
 
-<!-- START custom smart pagination -->
+<!-- custom smart pagination -->
 {{ $offsetLinks := 2 }}
 {{ $maxLinks := (add (mul $offsetLinks 2) 1) }}
 {{ $lowerLimit := (add $offsetLinks 1) }}
 {{ $upperLimit := (sub $paginator.TotalPages $offsetLinks) }}
 {{ if gt $paginator.TotalPages 1 }}
-<ul id="pagination">
+<ul class="pagination">
     {{ if ne $paginator.PageNumber 1 }}
     <li class="pag-first">
-        <a href="{{ $paginator.First.URL }}"><i class="fas fa-angle-double-left"></a>
+        <a href="{{ $paginator.First.URL }}"><i class="fas fa-angle-double-left"></i></a>
     </li>
     {{ end }}
     {{ if $paginator.HasPrev }}
     <li class="pag-previous">
-        <a href="{{ $paginator.Prev.URL }}"><i class="fas fa-angle-left"></a>
+        <a href="{{ $paginator.Prev.URL }}"><i class="fas fa-angle-left"></i></a>
     </li>
     {{ end }}
     {{ range $paginator.Pagers }}
@@ -76,6 +73,5 @@
     {{ end }}
 </ul>
 {{ end }}
-<!-- END custom smart pagination -->
 
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/comment-disqus.html b/layouts/partials/comment-disqus.html
index 81c9c68..539f8c7 100644
--- a/layouts/partials/comment-disqus.html
+++ b/layouts/partials/comment-disqus.html
@@ -1,5 +1,5 @@
 {{ with .Site.Params.disqusShortname }}
-<div id="post-comment">
+<div class="post-comment">
     <div id="disqus_thread"></div>
     <script>
         var disqus_config = function () {
diff --git a/layouts/partials/comment-utterances.html b/layouts/partials/comment-utterances.html
index b3edfbd..3e56201 100644
--- a/layouts/partials/comment-utterances.html
+++ b/layouts/partials/comment-utterances.html
@@ -1,9 +1,9 @@
 {{ with .Site.Params.utterancesRepo }}
-<div id="post-loading">
+<div class="post-loading">
     <i class="fas fa-circle-notch fa-spin"></i>
     <p>{{ i18n "postCommentLoading" }}</p>
 </div>
-<div id="post-comment">
+<div class="post-comment">
     <script src="https://utteranc.es/client.js" repo="{{ . }}" issue-term="{{ $.Site.Params.utterancesIssueTerm }}" theme="{{ $.Site.Params.utterancesTheme }}" crossorigin="anonymous" async></script>
 </div>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index e4fcaae..3166a36 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,8 +1,10 @@
 <header>
     <div class="container-lg clearfix">
-        <div class="col-12 p-3">
-            <a id="main-title" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
-            {{ with .Site.Params.subTitle }}<span id="sub-title">{{ . }}</span>{{ end }}
+        <div class="col-12 link-primary">
+            <a class="main-title" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
+            {{ with .Site.Params.subTitle }}
+            <span class="sub-title">{{ . }}</span>
+            {{ end }}
         </div>
     </div>
 </header>
\ No newline at end of file
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index 894d5c3..839a87a 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -7,19 +7,19 @@
         var commentCheckInterval = self.setInterval(checkUtterances, 500);
 
         function checkUtterances() {
-            commentStatus = $('#post-comment .utterances').attr('style');
+            commentStatus = $('.post-comment .utterances').attr('style');
             if (commentStatus == undefined) {
                 commentLoadingTime += 1;
                 if (commentLoadingTime > 20) {
                     clearInterval(commentCheckInterval);
-                    $('#post-comment').hide();
-                    $('#post-loading p').text('{{ i18n "postCommentLoadingFailed" }}');
-                    $('#post-loading i').attr('class', 'far fa-times-circle');
+                    $('.post-comment').hide();
+                    $('.post-loading p').text('{{ i18n "postCommentLoadingFailed" }}');
+                    $('.post-loading i').attr('class', 'far fa-times-circle');
                 }
                 return;
             } else {
                 clearInterval(commentCheckInterval);
-                $('#post-loading').hide();
+                $('.post-loading').hide();
             }
         }
     });
@@ -29,7 +29,7 @@
 <!-- toc smooth scroll & APlayer cjk html anchor fix -->
 {{ if in .Site.Params.mainSections .Type }}
 <script>
-    $('#widget-toc a').click(function () {
+    $('.widget-toc a').click(function () {
         $('html, body').animate({
             scrollTop: $($(this).attr('href')).offset().top
         });
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index 1f6ce45..aa375f4 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -1,12 +1,12 @@
 <!-- in-post toc -->
 {{ if in .Site.Params.mainSections .Type }}
-<div id="widget-toc">
+<div class="widget-toc link-alter">
     <h5>{{ i18n "sidebarToc" }}</h5>
     {{.TableOfContents}}
 </div>
 {{ end }}
 <!-- pages -->
-<div id="widget-pages">
+<div class="widget-pages link-alter">
     <h5>{{ i18n "sidebarPages" }}</h5>
     <ul>
         {{ $currentPage := . }}
@@ -18,7 +18,7 @@
     </ul>
 </div>
 <!-- tags -->
-<div id="widget-tags">
+<div class="widget-tags link-alter">
     <h5>{{ i18n "sidebarTags" }}</h5>
     <div>
         {{ range .Site.Taxonomies.tags }}
@@ -29,7 +29,7 @@
     </div>
 </div>
 <!-- links -->
-<div id="widget-links">
+<div class="widget-links link-alter">
     <h5>{{ i18n "sidebarLinks" }}</h5>
     <ul>
         {{ range .Site.Menus.link }}
@@ -41,7 +41,7 @@
 </div>
 <!-- bgm.tv image chart -->
 {{ with .Site.Params.bgmImageChart }}
-<div id="widget-bgm">
+<div class="widget-bgm">
     <h5>{{ i18n "sidebarBangumiChart" }}</h5>
     <img class="lazyload" src="{{ $.Site.Params.lazyPlaceholder }}" data-src="https://bgm.tv/chart/img/{{ . }}" />
 </div>