refactor: Use flexbox gap (#520)

13 files changed, 62 insertions, 100 deletions

diff --git a/assets/scss/grid.scss b/assets/scss/grid.scss
index a0eddca..84967ef 100644
--- a/assets/scss/grid.scss
+++ b/assets/scss/grid.scss
@@ -11,7 +11,7 @@
 
         /// Display right sidebar when min-width: lg
         @include respond(lg) {
-            display: block;
+            display: flex;
         }
     }
 
@@ -67,24 +67,6 @@
         }
     }
 
-    &.align-items--flex-start {
-        align-items: flex-start;
-    }
-
-    .grow {
-        flex-grow: 1;
-    }
-
-    .do-not-shrink {
-        flex-shrink: 0;
-    }
-
-    .do-not-overflow {
-        min-width: 0;
-        flex-shrink: 1;
-        max-width: 100%;
-    }
-
     .full-width {
         width: 100%;
     }
@@ -94,15 +76,22 @@ main.main {
     min-width: 0;
     max-width: 100%;
     flex-grow: 1;
-    padding-top: var(--main-top-padding);
+    display: flex;
+    flex-direction: column;
+    gap: var(--section-separation);
+
+    @include respond(md) {
+        padding-top: var(--main-top-padding);
+    }
 }
 
 .main-container {
     min-height: 100vh;
     align-items: flex-start;
     padding: 0 15px;
-    column-gap: var(--section-separation);
-
+    gap: var(--section-separation);
+    padding-top: var(--main-top-padding);
+    
     @include respond(md) {
         padding: 0 20px;
     }
diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss
index 0d3efba..c9444d4 100644
--- a/assets/scss/partials/article.scss
+++ b/assets/scss/partials/article.scss
@@ -2,6 +2,7 @@
 .article-list {
     display: flex;
     flex-direction: column;
+    gap: var(--section-separation);
 
     article {
         display: flex;
@@ -17,10 +18,6 @@
             box-shadow: var(--shadow-l2);
         }
 
-        &:not(:last-of-type) {
-            margin-bottom: var(--section-separation);
-        }
-
         .article-image {
             img {
                 width: 100%;
@@ -122,6 +119,9 @@
 
 .article-category,
 .article-tags {
+    display: flex;
+    gap: 10px;
+
     a {
         color: var(--accent-color-text);
         background-color: var(--accent-color);
@@ -129,8 +129,6 @@
         border-radius: var(--tag-border-radius);
         display: inline-block;
         font-size: 1.4rem;
-        margin-right: 10px;
-        margin-bottom: 10px;
         transition: background-color 0.5s ease;
 
         &:hover {
@@ -151,15 +149,12 @@
         --image-size: 60px;
     }
 
-    & + .pagination {
-        margin-top: var(--section-separation);
-    }
-
     article {
         & > a {
             display: flex;
             align-items: center;
             padding: var(--small-card-padding);
+            gap: 15px;
         }
 
         &:not(:last-of-type) {
@@ -169,7 +164,6 @@
         .article-details {
             flex-grow: 1;
             padding: 0;
-            padding-right: 15px;
             min-height: var(--image-size);
         }
 
diff --git a/assets/scss/partials/footer.scss b/assets/scss/partials/footer.scss
index 1c60dc7..ccb7394 100644
--- a/assets/scss/partials/footer.scss
+++ b/assets/scss/partials/footer.scss
@@ -2,7 +2,6 @@ footer.site-footer {
     padding: 20px 0 var(--section-separation) 0;
     font-size: 1.4rem;
     line-height: 1.75;
-    margin-top: var(--section-separation);
 
     &:before {
         content: "";
diff --git a/assets/scss/partials/layout/archives.scss b/assets/scss/partials/layout/archives.scss
deleted file mode 100644
index 34e5f62..0000000
--- a/assets/scss/partials/layout/archives.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.archives-group {
-    margin-bottom: var(--section-separation);
-}
\ No newline at end of file
diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss
index 92e1167..ef35ba9 100644
--- a/assets/scss/partials/layout/article.scss
+++ b/assets/scss/partials/layout/article.scss
@@ -13,10 +13,6 @@
         box-shadow: var(--shadow-l1);
         overflow: hidden;
 
-        &.main-article {
-            margin-bottom: var(--section-separation);
-        }
-
         .article-header {
             .article-image {
                 img {
@@ -57,11 +53,11 @@
                 display: flex;
                 align-items: center;
                 font-size: 1.4rem;
+                gap: 15px;
 
                 svg {
                     width: 20px;
                     height: 20px;
-                    margin-right: 15px;
                     stroke-width: 1.33;
                 }
             }
@@ -211,10 +207,6 @@
     }
 }
 
-.related-contents--wrapper {
-    margin-bottom: var(--section-separation);
-}
-
 .related-contents {
     overflow-x: auto;
     padding-bottom: 15px;
@@ -305,13 +297,10 @@
         flex-direction: row;
         justify-content: center;
         margin: 1.5em 0;
+        gap: 10px;
 
         figure {
             margin: 0;
-
-            & + figure {
-                margin-left: 10px;
-            }
         }
     }
 
diff --git a/assets/scss/partials/layout/list.scss b/assets/scss/partials/layout/list.scss
index 1a0e346..d7815ca 100644
--- a/assets/scss/partials/layout/list.scss
+++ b/assets/scss/partials/layout/list.scss
@@ -3,21 +3,16 @@
     background-color: var(--card-background);
     padding: var(--small-card-padding);
     box-shadow: var(--shadow-l1);
-    margin-bottom: var(--section-separation);
     display: flex;
     align-items: center;
+    gap: 20px;
 
     --separation: 15px;
 
     .section-term {
         font-size: 2.2rem;
         margin: 0;
-        margin-top: calc(var(--separation) / 2);
         color: var(--card-text-color-main);
-
-        & + .section-description {
-            margin-top: var(--separation);
-        }
     }
 
     .section-description {
@@ -29,7 +24,9 @@
 
     .section-details {
         flex-grow: 1;
-        margin-right: 20px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
     }
 
     .section-image {
@@ -49,7 +46,6 @@
 }
 
 .subsection-list {
-    margin-bottom: var(--section-separation);
     overflow-x: auto;
 
     .article-list--tile {
diff --git a/assets/scss/partials/layout/search.scss b/assets/scss/partials/layout/search.scss
index b390a7b..f2cc7be 100644
--- a/assets/scss/partials/layout/search.scss
+++ b/assets/scss/partials/layout/search.scss
@@ -1,5 +1,4 @@
 .search-form {
-    margin-bottom: var(--section-separation);
     position: relative;
     --button-size: 80px;
 
diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss
index 257eedb..16adb80 100644
--- a/assets/scss/partials/menu.scss
+++ b/assets/scss/partials/menu.scss
@@ -101,11 +101,16 @@
     background: none;
     border: none;
     position: absolute;
-    right: 30px;
-    top: 30px;
+    right: 0;
+    top: 0;
     z-index: 2;
     cursor: pointer;
 
+    [dir="rtl"] & {
+        left: 0;
+        right: auto;
+    }
+
     @include respond(md) {
         display: none;
     }
@@ -135,13 +140,12 @@
     box-shadow: var(--shadow-l1);
     display: none;
 
-    margin: 0 -15px;
+    margin: 0 calc(var(--container-padding) * -1);
 
     &,
     .menu-bottom-section {
         gap: 15px;
         @include respond(xl) {
-            margin-top: 30px;
             gap: 20px;
         }
     }
@@ -157,11 +161,6 @@
         padding: 0;
         box-shadow: none;
         margin: 0;
-        margin-top: var(--sidebar-element-separation);
-    }
-
-    @include respond(xl) {
-        margin-top: 30px;
     }
 
     li {
@@ -176,7 +175,6 @@
 
         svg {
             stroke-width: 1.33;
-            margin-right: 40px;
 
             width: 20px;
             height: 20px;
@@ -187,6 +185,7 @@
             display: inline-flex;
             align-items: center;
             color: var(--body-text-color);
+            gap: var(--menu-icon-separation);
         }
 
         span {
@@ -211,7 +210,8 @@
 
 .social-menu {
     list-style: none;
-    padding: 0%;
+    padding: 0;
+    margin: 0;
     display: flex;
     flex-direction: row;
     gap: 10px;
diff --git a/assets/scss/partials/pagination.scss b/assets/scss/partials/pagination.scss
index a6c6882..ca46780 100644
--- a/assets/scss/partials/pagination.scss
+++ b/assets/scss/partials/pagination.scss
@@ -5,7 +5,6 @@
     border-radius: var(--card-border-radius);
     overflow: hidden;
     flex-wrap: wrap;
-    margin: var(--section-separation) 0;
 
     .page-link {
         padding: 16px 32px;
diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss
index 4d320a8..09bcc33 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/assets/scss/partials/sidebar.scss
@@ -11,11 +11,13 @@
     flex-direction: column;
     flex-shrink: 0;
     align-self: stretch;
+    gap: var(--sidebar-element-separation);
 
     width: 100%;
-    padding: 30px 0 15px 0;
     max-width: none;
 
+    position: relative;
+
     --sidebar-avatar-size: 120px;
     --sidebar-element-separation: 20px;
 
@@ -39,6 +41,8 @@
 .right-sidebar {
     width: 100%;
     display: none;
+    flex-direction: column;
+    gap: var(--widget-separation);
 
     &.sticky {
         top: 0;
@@ -49,11 +53,12 @@
     }
 }
 
-.site-info {
+.sidebar header {
     z-index: 1;
     transition: box-shadow 0.5s ease;
-
-    padding: 15px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--sidebar-element-separation);
 
     @include respond(md) {
         padding: 0;
@@ -65,8 +70,6 @@
         width: var(--sidebar-avatar-size);
         height: var(--sidebar-avatar-size);
 
-        margin-bottom: var(--sidebar-element-separation);
-
         .site-logo {
             width: 100%;
             height: 100%;
@@ -95,6 +98,12 @@
         }
     }
 
+    .site-meta {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
     .site-name {
         color: var(--accent-color);
         margin: 0;
@@ -108,7 +117,7 @@
     .site-description {
         color: var(--body-text-color);
         font-weight: normal;
-        margin: 10px 0;
+        margin: 0;
         font-size: 1.6rem;
 
         @include respond(2xl) {
@@ -117,21 +126,6 @@
     }
 }
 
-.sidebar {
-    .widget {
-        margin-bottom: var(--section-separation);
-
-        &:not(:last-of-type):after {
-            content: "";
-            width: 100px;
-            height: 2px;
-            background-color: var(--body-text-color);
-            display: block;
-            margin-top: var(--section-separation);
-        }
-    }
-}
-
 [data-scheme="dark"] {
     #dark-mode-toggle {
         color: var(--accent-color);
@@ -153,6 +147,7 @@
     display: flex;
     align-items: center;
     cursor: pointer;
+    gap: var(--menu-icon-separation);
 
     .icon-tabler-toggle-right {
         display: none;
@@ -163,6 +158,7 @@
     color: var(--body-text-color);
     display: inline-flex;
     align-content: center;
+    gap: var(--menu-icon-separation);
 
     select {
         border: 0;
diff --git a/assets/scss/partials/widgets.scss b/assets/scss/partials/widgets.scss
index 33a02dd..42cfcc2 100644
--- a/assets/scss/partials/widgets.scss
+++ b/assets/scss/partials/widgets.scss
@@ -1,4 +1,7 @@
 .widget {
+    display: flex;
+    flex-direction: column;
+
     .widget-icon {
         svg {
             width: 32px;
@@ -14,16 +17,14 @@
     .tagCloud-tags {
         display: flex;
         flex-wrap: wrap;
+        gap: 10px;
 
         a {
             background: var(--card-background);
             box-shadow: var(--shadow-l1);
             border-radius: var(--tag-border-radius);
             padding: 8px 20px;
-
             color: var(--card-text-color-main);
-            margin-bottom: 10px;
-            margin-right: 5px;
             font-size: 1.4rem;
             transition: box-shadow 0.3s ease;
 
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 2f5aac9..43e95a5 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -19,7 +19,6 @@
 @import "partials/pagination.scss";
 @import "partials/sidebar.scss";
 @import "partials/base.scss";
-@import "partials/layout/archives.scss";
 @import "partials/layout/article.scss";
 @import "partials/layout/list.scss";
 @import "partials/layout/404.scss";
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index f7d45b4..afddb80 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -5,9 +5,7 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 *   Global style
 */
 :root {
-    @include respond(md) {
-        --main-top-padding: 35px;
-    }
+    --main-top-padding: 35px;
 
     @include respond(xl) {
         --main-top-padding: 50px;
@@ -159,3 +157,9 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
     --pre-background-color: #272822;
     @import "partials/highlight/dark.scss";
 }
+
+:root {
+    --menu-icon-separation: 40px;
+    --container-padding: 15px;
+    --widget-separation: var(--section-separation);
+}