Add gap property to sidebar and main container

assets/scss/grid.scss

@@ -11,7 +11,7 @@
 
         /// Display right sidebar when min-width: lg
         @include respond(lg) {
-            display: block;
+            display: flex;
         }
     }
 
@@ -76,6 +76,10 @@ main.main {
     min-width: 0;
     max-width: 100%;
     flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--section-separation);
+
     @include respond(md) {
         padding-top: var(--main-top-padding);
     }

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%;
@@ -151,10 +148,6 @@
         --image-size: 60px;
     }
 
-    & + .pagination {
-        margin-top: var(--section-separation);
-    }
-
     article {
         & > a {
             display: flex;

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: "";

assets/scss/partials/layout/archives.scss

@@ -1,3 +0,0 @@
-.archives-group {
-    margin-bottom: var(--section-separation);
-}

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 {
@@ -211,10 +207,6 @@
     }
 }
 
-.related-contents--wrapper {
-    margin-bottom: var(--section-separation);
-}
-
 .related-contents {
     overflow-x: auto;
     padding-bottom: 15px;

assets/scss/partials/layout/list.scss

@@ -3,7 +3,6 @@
     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;
 
@@ -49,7 +48,6 @@
 }
 
 .subsection-list {
-    margin-bottom: var(--section-separation);
     overflow-x: auto;
 
     .article-list--tile {

assets/scss/partials/layout/search.scss

@@ -1,5 +1,4 @@
 .search-form {
-    margin-bottom: var(--section-separation);
     position: relative;
     --button-size: 80px;
 

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;

assets/scss/partials/sidebar.scss

@@ -39,6 +39,8 @@
 .right-sidebar {
     width: 100%;
     display: none;
+    flex-direction: column;
+    gap: var(--widget-separation);
 
     &.sticky {
         top: 0;
@@ -122,21 +124,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);

assets/scss/partials/widgets.scss

@@ -1,4 +1,7 @@
 .widget {
+    display: flex;
+    flex-direction: column;
+
     .widget-icon {
         svg {
             width: 32px;

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";

assets/scss/variables.scss

@@ -161,4 +161,5 @@ $defaultTagColors: #fff, #fff, #fff, #fff, #fff;
 :root {
     --menu-icon-separation: 40px;
     --container-padding: 15px;
+    --widget-separation: var(--section-separation);
 }

layouts/_default/list.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+    <header>
         <h3 class="section-title">
             {{ if eq .Parent (.GetPage "/") }}
                 {{ T "list.section" }}
@@ -41,6 +42,7 @@
                 </div>
             {{ end }}
         </div>
+    </header>
 
     {{- $subsections := .Sections -}}
     {{- $pages := .Pages | complement $subsections -}}
@@ -53,6 +55,7 @@
     {{- end -}}
 
     {{- with $subsections -}}
+        <aside>
             <h2 class="section-title">{{ T "list.subsection" (len $subsections) }}</h2>
             <div class="subsection-list">
                 <div class="article-list--tile">
@@ -61,6 +64,7 @@
                     {{ end }}
                 </div>
             </div>
+        </aside>
     {{- end -}}
     
     {{/* List only pages that are not a subsection */}}

layouts/page/search.html

@@ -16,8 +16,10 @@
     </button>
 </form>
 
-<h3 class="search-result--title section-title"></h3>
+<div class="search-result">
-<div class="search-result--list article-list--compact"></div>
+    <h3 class="search-result--title section-title"></h3>
+    <div class="search-result--list article-list--compact"></div>
+</div>
 
 <script>
     window.searchResultTitleTemplate = "{{ T `search.resultTitle` }}"