Sass structure full rebuild

15 files changed, 325 insertions, 365 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