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