From 2fa2eaea4ed88b50822950dd382fc2f3c7897959 Mon Sep 17 00:00:00 2001
From: Jimmy Cai <github@jimmycai.com>
Date: Thu, 3 Mar 2022 20:17:39 +0000
Subject: [PATCH] Add gap property to sidebar and main container

---
 assets/scss/grid.scss                     |  6 +-
 assets/scss/partials/article.scss         |  9 +--
 assets/scss/partials/footer.scss          |  1 -
 assets/scss/partials/layout/archives.scss |  3 -
 assets/scss/partials/layout/article.scss  |  8 --
 assets/scss/partials/layout/list.scss     |  2 -
 assets/scss/partials/layout/search.scss   |  1 -
 assets/scss/partials/pagination.scss      |  1 -
 assets/scss/partials/sidebar.scss         | 17 +---
 assets/scss/partials/widgets.scss         |  3 +
 assets/scss/style.scss                    |  1 -
 assets/scss/variables.scss                |  1 +
 layouts/_default/list.html                | 94 ++++++++++++-----------
 layouts/page/search.html                  |  6 +-
 14 files changed, 65 insertions(+), 88 deletions(-)
 delete mode 100644 assets/scss/partials/layout/archives.scss

diff --git a/assets/scss/grid.scss b/assets/scss/grid.scss
index b2db9cb..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;
         }
     }
 
@@ -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);
     }
diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss
index 0d3efba..f65a0f5 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%;
@@ -151,10 +148,6 @@
         --image-size: 60px;
     }
 
-    & + .pagination {
-        margin-top: var(--section-separation);
-    }
-
     article {
         & > a {
             display: flex;
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..ba3ff4e 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 {
@@ -211,10 +207,6 @@
     }
 }
 
-.related-contents--wrapper {
-    margin-bottom: var(--section-separation);
-}
-
 .related-contents {
     overflow-x: auto;
     padding-bottom: 15px;
diff --git a/assets/scss/partials/layout/list.scss b/assets/scss/partials/layout/list.scss
index 1a0e346..1093eb9 100644
--- a/assets/scss/partials/layout/list.scss
+++ b/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 {
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/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 bed2140..fde6bce 100644
--- a/assets/scss/partials/sidebar.scss
+++ b/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);
diff --git a/assets/scss/partials/widgets.scss b/assets/scss/partials/widgets.scss
index 33a02dd..c732c53 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;
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 24780ec..afddb80 100644
--- a/assets/scss/variables.scss
+++ b/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);
 }
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 49a5c12..9bc618d 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,46 +1,48 @@
 {{ define "main" }}
-    <h3 class="section-title">
-        {{ if eq .Parent (.GetPage "/") }}
-            {{ T "list.section" }}
-        {{ else }}
-            {{ .Parent.Title }}
-        {{ end }}
-    </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>
+    <header>
+        <h3 class="section-title">
+            {{ if eq .Parent (.GetPage "/") }}
+                {{ T "list.section" }}
+            {{ else }}
+                {{ .Parent.Title }}
             {{ end }}
-        </div>
+        </h3>
 
-        {{- $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" />
+        <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>
-        {{ 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>
-        <div class="subsection-list">
-            <div class="article-list--tile">
-                {{ range . }}
-                    {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "section") }}
-                {{ end }}
+        <aside>
+            <h2 class="section-title">{{ T "list.subsection" (len $subsections) }}</h2>
+            <div class="subsection-list">
+                <div class="article-list--tile">
+                    {{ range . }}
+                        {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "section") }}
+                    {{ end }}
+                </div>
             </div>
-        </div>
+        </aside>
     {{- end -}}
     
     {{/* List only pages that are not a subsection */}}
diff --git a/layouts/page/search.html b/layouts/page/search.html
index 935b384..7c424a6 100644
--- a/layouts/page/search.html
+++ b/layouts/page/search.html
@@ -16,8 +16,10 @@
     </button>
 </form>
 
-<h3 class="search-result--title section-title"></h3>
-<div class="search-result--list article-list--compact"></div>
+<div class="search-result">
+    <h3 class="search-result--title section-title"></h3>
+    <div class="search-result--list article-list--compact"></div>
+</div>
 
 <script>
     window.searchResultTitleTemplate = "{{ T `search.resultTitle` }}"