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,46 +1,48 @@
 {{ define "main" }}
-    <h3 class="section-title">
+    <header>
-        {{ if eq .Parent (.GetPage "/") }}
+        <h3 class="section-title">
-            {{ T "list.section" }}
+            {{ if eq .Parent (.GetPage "/") }}
-        {{ else }}
+                {{ T "list.section" }}
-            {{ .Parent.Title }}
+            {{ else }}
-        {{ end }}
+                {{ .Parent.Title }}
-    </h3>
-
-    <div class="section-card">
-        <div class="section-details">
-            <h3 class="section-count">{{ T "list.page" (len .Pages) }}</h3>
-            <h1 class="section-term">{{ .Title }}</h1>
-            {{ with .Params.description }}
-                <h2 class="section-description">{{ . }}</h2>
             {{ end }}
-        </div>
+        </h3>
 
-        {{- $image := partialCached "helper/image" (dict "Context" . "Type" "section") .RelPermalink "section" -}}
+        <div class="section-card">
-        {{ if $image.exists }}
+            <div class="section-details">
-            <div class="section-image">
+                <h3 class="section-count">{{ T "list.page" (len .Pages) }}</h3>
-                {{ if $image.resource }}
+                <h1 class="section-term">{{ .Title }}</h1>
-                    {{- $Permalink := $image.resource.RelPermalink -}}
+                {{ with .Params.description }}
-                    {{- $Width := $image.resource.Width -}}
+                    <h2 class="section-description">{{ . }}</h2>
-                    {{- $Height := $image.resource.Height -}}
-
-                    {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
-                        {{- $thumbnail := $image.resource.Fill "120x120" -}}
-                        {{- $Permalink = $thumbnail.RelPermalink -}}
-                        {{- $Width = $thumbnail.Width -}}
-                        {{- $Height = $thumbnail.Height -}}
-                    {{- end -}}
-                    
-                    <img src="{{ $Permalink }}" 
-                        width="{{ $Width }}"
-                        height="{{ $Height }}" 
-                        loading="lazy">
-                {{ else }}
-                    <img src="{{ $image.permalink }}" loading="lazy" />
                 {{ end }}
             </div>
-        {{ end }}
+    
-    </div>
+            {{- $image := partialCached "helper/image" (dict "Context" . "Type" "section") .RelPermalink "section" -}}
+            {{ if $image.exists }}
+                <div class="section-image">
+                    {{ if $image.resource }}
+                        {{- $Permalink := $image.resource.RelPermalink -}}
+                        {{- $Width := $image.resource.Width -}}
+                        {{- $Height := $image.resource.Height -}}
+    
+                        {{- if (default true .Page.Site.Params.imageProcessing.cover.enabled) -}}
+                            {{- $thumbnail := $image.resource.Fill "120x120" -}}
+                            {{- $Permalink = $thumbnail.RelPermalink -}}
+                            {{- $Width = $thumbnail.Width -}}
+                            {{- $Height = $thumbnail.Height -}}
+                        {{- end -}}
+                        
+                        <img src="{{ $Permalink }}" 
+                            width="{{ $Width }}"
+                            height="{{ $Height }}" 
+                            loading="lazy">
+                    {{ else }}
+                        <img src="{{ $image.permalink }}" loading="lazy" />
+                    {{ end }}
+                </div>
+            {{ end }}
+        </div>
+    </header>
 
     {{- $subsections := .Sections -}}
     {{- $pages := .Pages | complement $subsections -}}
@@ -53,14 +55,16 @@
     {{- end -}}
 
     {{- with $subsections -}}
-        <h2 class="section-title">{{ T "list.subsection" (len $subsections) }}</h2>
+        <aside>
-        <div class="subsection-list">
+            <h2 class="section-title">{{ T "list.subsection" (len $subsections) }}</h2>
-            <div class="article-list--tile">
+            <div class="subsection-list">
-                {{ range . }}
+                <div class="article-list--tile">
-                    {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "section") }}
+                    {{ range . }}
-                {{ end }}
+                        {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "section") }}
+                    {{ end }}
+                </div>
             </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` }}"