refactor: main.scss and scss folder structure

closes #52

BREAKING CHANGE: scss folder structure is changed

assets/scss/_common/base.scss → assets/scss/base/_base.scss

@@ -5,7 +5,7 @@ html, body {
 }
 
 body {
-    font-size: $fontSize;
+    font-size: var(--font-size);
     tab-size: $tabSize;
     color: var(--color-contrast-high);
     background-color: var(--color-bg);
@@ -81,8 +81,8 @@ a {
 }
 
 ::-webkit-scrollbar {
-    width: $fontSize * 0.4;
-    height: $fontSize * 0.2;
+    width: calc(var(--font-size) * 0.4);
+    height: calc(var(--font-size) * 0.2);
 }
 ::-webkit-scrollbar-track {
     background-color: var(--color-bg);
@@ -95,4 +95,4 @@ a {
     &:active {
         background-color: alpha(var(--color-primary), 0.75);
     }
-}
+}

assets/scss/_common/data-attributes.scss → assets/scss/base/_data-attributes.scss

@@ -32,4 +32,4 @@
         display: table;
         margin: 0 auto;
     }
-}
+}

assets/scss/_common/emphasis-point.scss → assets/scss/base/_emphasis-point.scss

@@ -6,4 +6,4 @@
     text-emphasis-position: under;
     -webkit-text-emphasis-position: under;
     -moz-text-emphasis-position: under;
-}
+}

assets/scss/base/_glyph-correction.scss

@@ -0,0 +1,18 @@
+@font-face {
+    font-family: 'glyph-correction';
+    font-display: swap;
+    font-weight: inherit;
+    font-style: inherit;
+    src: url('/fonts/glyph-correction.woff2') format('woff2'),
+         url('/fonts/glyph-correction.woff') format('woff'),
+         url('/fonts/glyph-correction.ttf') format('truetype'),
+         url('/fonts/glyph-correction.eot') format('embedded-opentype');
+    unicode-range: U+00B7, U+2014, U+2022, U+2026;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.drop-cap {
+    margin-top: var(--font-size) !important;
+}

assets/scss/_common/indent.scss → assets/scss/base/_indent.scss

@@ -23,7 +23,7 @@
             margin: 1em 0;
         }
         pre, .highlight {
-            margin: $fontSize 0;
+            margin: var(--font-size) 0;
         }
         h1, h2, h3, h4, h5, h6 {
             text-align: center;
@@ -57,4 +57,4 @@
             }
         }
     }
-}
+}

assets/scss/base/_max-width.scss

@@ -0,0 +1 @@
+$maxWidth: $fontSize * (strip-unit($greaterWidth) + 5);

assets/scss/base/_responsive.scss

@@ -0,0 +1,18 @@
+@media (max-width: $maxWidth) {
+    .main-inner {
+        width: auto !important;
+    }
+    .anchor-link {
+        position: relative;
+        transform: none;
+        float: right;
+    }
+    .menu {
+        display: flex;
+        justify-content: space-around;
+        word-break: break-all;
+    }
+    .menu-item {
+        margin: 0;
+    }
+}

assets/scss/_common/back-to-top.scss → assets/scss/components/_back-to-top.scss

@@ -24,4 +24,4 @@
     .back-to-top {
         bottom: 0;
     }
-}
+}

assets/scss/_common/comments.scss → assets/scss/components/_comments.scss

@@ -13,4 +13,4 @@
     &:hover {
         background-color: alpha(var(--color-primary), 0.3);
     }
-}
+}

assets/scss/components/_dark-mode.scss

@@ -0,0 +1,11 @@
+#theme-toggle {
+    padding: 1em;
+    cursor: pointer;
+    float: right;
+    position: relative;
+    z-index: 4;
+}
+
+[data-theme="dark"] img {
+    filter: brightness(50%);
+}

assets/scss/_common/highlight.scss → assets/scss/components/_highlight.scss

@@ -1,6 +1,6 @@
 .highlight {
     font-size: 0.8em;
-    margin: ($fontSize * 2) 0;
+    margin: calc(var(--font-size) * 2) 0;
     pre {
         margin: 0 !important;
         overflow: auto hidden;
@@ -22,4 +22,9 @@ span.lnt {
     margin-right: -1em !important;
     padding: 0 !important;
     text-align: right;
-}
+}
+
+.chroma, .chroma-dark {
+    color: var(--color-contrast-high);
+    background-color: alpha(var(--color-contrast-lower), 0.5);
+}

assets/scss/_common/minimal-footer-about.scss → assets/scss/components/_minimal-footer-about.scss

@@ -1,6 +1,6 @@
 .minimal-footer-about {
     font-size: 80%;
-    margin-top: ($fontSize * 5);
+    margin-top: calc(var(--font-size) * 5);
     display: flex;
     justify-content: space-between;
     align-items: baseline;

assets/scss/_common/minimal-footer.scss → assets/scss/components/_minimal-footer.scss

@@ -1,6 +1,6 @@
 .minimal-footer {
     font-size: 80%;
-    margin-top: ($fontSize * 5);
+    margin-top: calc(var(--font-size) * 5);
     display: flex;
     justify-content: space-between;
     align-items: baseline;
@@ -24,4 +24,4 @@
 
 .post-tag-link, .post-category-link, .post-category {
     color: alpha(var(--color-contrast-medium), 0.9);
-}
+}

assets/scss/_common/multilingual.scss → assets/scss/components/_multilingual.scss

@@ -10,4 +10,4 @@
     padding: 0;
     list-style: none;
     display: none;
-}
+}

assets/scss/_common/post-gitinfo.scss → assets/scss/components/_post-gitinfo.scss

@@ -1,6 +1,6 @@
 .post-gitinfo {
     font-size: 70%;
-    margin-top: ($fontSize * 5);
+    margin-top: calc(var(--font-size) * 5);
     display: flex;
     justify-content: space-between;
     color: alpha(var(--color-contrast-medium), 0.8);
@@ -31,4 +31,4 @@
 
 .git-icon, .msg-icon, .feedback-icon, .edit-icon {
     margin: 0 0.3em 0.3em 0;
-}
+}

assets/scss/_common/post-meta.scss → assets/scss/components/_post-meta.scss

@@ -2,7 +2,7 @@
     color: var(--color-contrast-medium);
     font-size: 80%;
     text-align: center;
-    margin: $fontSize 0;
+    margin: var(--font-size) 0;
     a {
         color: var(--color-contrast-medium);
         &:hover {
@@ -13,7 +13,7 @@
 
 .home {
     .post-meta {
-        margin: $fontSize 0;
+        margin: var(--font-size) 0;
     }
 }
 
@@ -25,4 +25,4 @@
 .post-meta-icon {
     fill: alpha(var(--color-contrast-medium), 0.5);
     margin-bottom: 0.3em;
-}
+}

assets/scss/_common/post-nav.scss → assets/scss/components/_post-nav.scss

@@ -16,4 +16,4 @@
     margin-left: auto;
     text-align: right;
     max-width: 42%;
-}
+}

assets/scss/_common/post-share.scss → assets/scss/components/_post-share.scss

@@ -1,5 +1,5 @@
 .post-share {
-    margin-top: ($fontSize * 5);
+    margin-top: calc(var(--font-size) * 5);
     color: alpha(var(--color-contrast-medium), 0.8);
     a {
         color: alpha(var(--color-contrast-medium), 0.8);
@@ -107,4 +107,4 @@
             }
         }
     }
-}
+}

assets/scss/_common/post-tags.scss → assets/scss/components/_post-tags.scss

@@ -1,5 +1,5 @@
 .post-tags {
-    margin-top: ($fontSize * 5);
+    margin-top: calc(var(--font-size) * 5);
     text-align: center;
     font-size: 90%;
 }
@@ -14,4 +14,4 @@
 .tag-icon {
     margin-right: 0.3em;
     font-size: 80%;
-}
+}

assets/scss/_common/related-posts.scss → assets/scss/components/_related-posts.scss

@@ -24,4 +24,4 @@
 .related-link {
     line-height: 1.5;
     display: inline-block;
-}
+}

assets/scss/_common/updated-badge.scss → assets/scss/components/_updated-badge.scss

@@ -9,4 +9,4 @@
 
 .updated-badge-right {
     fill: alpha(var(--color-primary), 0.5);
-}
+}

assets/scss/layout/_footer.scss

@@ -0,0 +1,45 @@
+.footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    font-size: 90%;
+    color: var(--color-contrast-medium);
+    a {
+        color: var(--color-contrast-medium);
+        &:hover {
+            color: var(--color-primary);
+        }
+    }
+}
+
+.footer-inner {
+    padding: 1em;
+    text-align: center;
+}
+
+.footer-icon {
+    margin: 0 0.25em 0.3em;
+}
+
+@if variable-exists("iconColor") {
+    .footer-icon {
+        fill: $iconColor;
+    }
+}
+
+@if ($iconAnimation) {
+    @keyframes heartbeat {
+        0%, 100% {
+            transform: scale(1);
+        }
+        10%, 30% {
+            transform: scale(0.9);
+        }
+        20%, 40%, 50%, 60%, 70%, 80% {
+            transform: scale(1.1);
+        }
+    }
+    .footer-icon {
+        animation: heartbeat 1.33s ease-in-out infinite;
+    }
+}