From 0ad02c5c0f76a2558ebd44dcfafb4dc590c96470 Mon Sep 17 00:00:00 2001 From: Jimmy Date: Thu, 5 Mar 2026 12:29:48 +0100 Subject: [PATCH] refactor: add standardized spacing variables and more style cleanup (#1287) * refactor: add standardized spacing variables and more style cleanup * refactor: rename `spacing-xxl` to `spacing-2xl` and introduce `spacing-3xl` for consistent spacing variables. * refactor: Migrate related content styling to use the `subsection-list` component with updated layout adjustments. * style: adjust padding values for article list tiles. * refactor: Introduce shadow variables and dynamic spacing to prevent shadow cutoff in list layouts. * refactor: relocate dark scheme Mermaid variables within the root scope. --- assets/scss/general.scss | 2 +- assets/scss/grid.scss | 6 +- assets/scss/partials/article.scss | 59 ++++++--------- assets/scss/partials/cookies.scss | 20 +++--- assets/scss/partials/footer.scss | 6 +- assets/scss/partials/layout/article.scss | 47 +++--------- assets/scss/partials/layout/list.scss | 24 ++++--- assets/scss/partials/layout/search.scss | 13 ++-- assets/scss/partials/menu.scss | 10 +-- assets/scss/partials/pagination.scss | 4 +- assets/scss/partials/sidebar.scss | 8 +-- assets/scss/partials/widgets.scss | 13 ++-- assets/scss/variables.scss | 72 ++++++++++++++++++- .../article/components/related-content.html | 6 +- 14 files changed, 157 insertions(+), 133 deletions(-) diff --git a/assets/scss/general.scss b/assets/scss/general.scss index e12bb0e..c362594 100644 --- a/assets/scss/general.scss +++ b/assets/scss/general.scss @@ -19,7 +19,7 @@ a { .section-title { text-transform: uppercase; margin-top: 0; - margin-bottom: 10px; + margin-bottom: var(--spacing-sm); display: block; font-size: 1.6rem; font-weight: bold; diff --git a/assets/scss/grid.scss b/assets/scss/grid.scss index 44b0b48..a27e6f8 100644 --- a/assets/scss/grid.scss +++ b/assets/scss/grid.scss @@ -89,11 +89,11 @@ main.main { .main-container { min-height: 100vh; align-items: flex-start; - padding: 0 15px; + padding: 0 var(--container-padding); gap: var(--section-separation); padding-top: var(--main-top-padding); - + @include respond(md) { - padding: 0 20px; + padding-top: 0; } } diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss index b256ed0..41a6d94 100644 --- a/assets/scss/partials/article.scss +++ b/assets/scss/partials/article.scss @@ -19,16 +19,8 @@ .article-image { img { width: 100%; - height: 150px; + height: var(--article-image-height); object-fit: cover; - - @include respond(md) { - height: 200px; - } - - @include respond(xl) { - height: 250px; - } } } } @@ -39,7 +31,7 @@ flex-direction: column; justify-content: center; padding: var(--card-padding); - gap: 15px; + gap: var(--spacing-md); } .article-title { @@ -84,7 +76,7 @@ .article-header-tags { display: flex; color: var(--card-text-color-tertiary); - gap: 15px; + gap: var(--spacing-md); svg { vertical-align: middle; @@ -103,7 +95,7 @@ & > div { display: inline-flex; align-items: center; - gap: 15px; + gap: var(--spacing-md); } } @@ -121,7 +113,7 @@ .article-category, .article-tags { display: flex; - gap: 10px; + gap: var(--spacing-sm); flex-wrap: wrap; a { @@ -143,18 +135,14 @@ /* Compact style article list */ .article-list--compact { @include card-style; - --image-size: 50px; - - @include respond(md) { - --image-size: 60px; - } + --image-size: var(--article-compact-image-size); article { & > a { display: flex; align-items: center; padding: var(--small-card-padding); - gap: 15px; + gap: var(--spacing-md); } &:not(:last-of-type) { @@ -165,7 +153,7 @@ flex-grow: 1; padding: 0; min-height: var(--image-size); - gap: 10px; + gap: var(--spacing-sm); } .article-title { @@ -201,8 +189,8 @@ .article-list--tile { article { position: relative; - width: 250px; - height: 150px; + width: var(--article-tile-width); + height: var(--article-tile-height); @include card-style; overflow: hidden; transition: box-shadow 0.3s ease; @@ -213,11 +201,11 @@ &.has-image { .article-details { - background-color: rgba(#000, 0.25); + background-color: var(--article-tile-overlay-bg); } .article-title { - color: #fff; + color: var(--article-tile-text-color); } } @@ -322,19 +310,19 @@ button { padding: 0.5rem 1rem; - background: rgba(255, 255, 255, 0.95); - border: 2px solid #333; + background: var(--mermaid-toolbar-btn-bg); + border: 2px solid var(--mermaid-toolbar-btn-text); border-radius: 6px; cursor: pointer; font-size: 1rem; font-weight: 600; - color: #333; + color: var(--mermaid-toolbar-btn-text); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); transition: all 0.2s; &:hover { - background: #333; - color: #fff; + background: var(--mermaid-toolbar-btn-text); + color: var(--card-background); transform: scale(1.05); } } @@ -348,7 +336,7 @@ left: 0; width: 100vw; height: 100vh; - background: rgba(0, 0, 0, 0.95); + background: var(--mermaid-modal-bg); z-index: 9999; &.active { @@ -373,14 +361,15 @@ .mermaid-modal-controls button, .mermaid-modal-close { padding: 0.5rem 1rem; - background: #fff; + background: var(--mermaid-modal-btn-bg); border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; + color: var(--card-text-color-main); &:hover { - background: #ddd; + background: var(--mermaid-modal-btn-hover); } } @@ -398,11 +387,7 @@ bottom: 1rem; border-radius: 8px; overflow: hidden; - background: #fff; - - [data-scheme="dark"] & { - background: #1e1e1e; - } + background: var(--mermaid-modal-content-bg); } .mermaid-panzoom-container { diff --git a/assets/scss/partials/cookies.scss b/assets/scss/partials/cookies.scss index 4a5a7c5..37ad4f0 100644 --- a/assets/scss/partials/cookies.scss +++ b/assets/scss/partials/cookies.scss @@ -20,13 +20,13 @@ padding: var(--card-padding); display: flex; flex-direction: column; - gap: 15px; + gap: var(--spacing-md); @include respond(md) { flex-direction: row; flex-wrap: wrap; align-items: center; - gap: 20px; + gap: var(--spacing-lg); } } @@ -38,7 +38,7 @@ display: block; color: var(--card-text-color-main); font-size: 1.6rem; - margin-bottom: 5px; + margin-bottom: var(--spacing-xs); } p { @@ -51,7 +51,7 @@ .cookie-banner__actions { display: flex; - gap: 10px; + gap: var(--spacing-sm); flex-shrink: 0; } @@ -116,19 +116,19 @@ h3 { color: var(--card-text-color-main); font-size: 1.6rem; - margin: 0 0 15px 0; + margin: 0 0 var(--spacing-md) 0; } &__actions { display: flex; justify-content: flex-end; - gap: 10px; - margin-top: 20px; + gap: var(--spacing-sm); + margin-top: var(--spacing-lg); } } .cookie-category { - padding: 15px 0; + padding: var(--spacing-md) 0; border-bottom: 1px solid var(--card-separator-color); &:last-of-type { @@ -138,7 +138,7 @@ label { display: flex; align-items: center; - gap: 10px; + gap: var(--spacing-sm); cursor: pointer; input[type="checkbox"] { @@ -192,6 +192,6 @@ font-size: 1.4rem; p { - margin: 0 0 15px 0; + margin: 0 0 var(--spacing-md) 0; } } \ No newline at end of file diff --git a/assets/scss/partials/footer.scss b/assets/scss/partials/footer.scss index ccb7394..4d1b9c7 100644 --- a/assets/scss/partials/footer.scss +++ b/assets/scss/partials/footer.scss @@ -1,5 +1,5 @@ footer.site-footer { - padding: 20px 0 var(--section-separation) 0; + padding: var(--spacing-lg) 0 var(--section-separation) 0; font-size: 1.4rem; line-height: 1.75; @@ -9,13 +9,13 @@ footer.site-footer { height: 3px; width: 50px; background: var(--body-text-color); - margin-bottom: 20px; + margin-bottom: var(--spacing-lg); } .copyright { color: var(--accent-color); font-weight: bold; - margin-bottom: 5px; + margin-bottom: var(--spacing-xs); } .powerby { diff --git a/assets/scss/partials/layout/article.scss b/assets/scss/partials/layout/article.scss index cd3fc03..0a6c863 100644 --- a/assets/scss/partials/layout/article.scss +++ b/assets/scss/partials/layout/article.scss @@ -111,14 +111,14 @@ } li { - margin: 15px 0 15px 20px; - padding: 5px; + margin: var(--spacing-md) 0 var(--spacing-md) var(--spacing-lg); + padding: var(--spacing-xs); &>ol, &>ul { - margin-top: 10px; - padding-left: 10px; - margin-bottom: -5px; + margin-top: var(--spacing-sm); + padding-left: var(--spacing-sm); + margin-bottom: calc(var(--spacing-xs) * -1); &>li:last-child { margin-bottom: 0; @@ -182,7 +182,7 @@ .article-toc { padding: 0 var(--card-padding); - margin-top: 20px; + margin-top: var(--spacing-lg); @include respond(lg) { display: none; @@ -203,7 +203,7 @@ summary { list-style: none; - padding: 15px 20px; + padding: var(--spacing-md) var(--spacing-lg); cursor: pointer; &::-webkit-details-marker { @@ -213,7 +213,7 @@ .article-toc-title { display: flex; align-items: center; - gap: 10px; + gap: var(--spacing-sm); text-transform: uppercase; font-size: 1.4rem; font-weight: bold; @@ -230,33 +230,6 @@ } } -.related-content { - overflow-x: auto; - padding-bottom: 15px; - - &>.flex { - float: left; - } - - article { - margin-right: 15px; - flex-shrink: 0; - overflow: hidden; - - .article-title { - font-size: 1.8rem; - margin: 0; - } - - &.has-image { - .article-details { - padding: 20px; - background: linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.75) 100%); - } - } - } -} - .article-content { font-family: var(--article-font-family); font-size: var(--article-font-size); @@ -313,7 +286,7 @@ position: relative; margin: 1.5em 0; border-inline-start: var(--blockquote-border-size) solid var(--card-separator-color); - padding: 15px calc(var(--card-padding) - var(--blockquote-border-size)); + padding: var(--spacing-md) calc(var(--card-padding) - var(--blockquote-border-size)); background-color: var(--blockquote-background-color); .cite { @@ -383,7 +356,7 @@ flex-direction: row; justify-content: center; margin: 1.5em 0; - gap: 10px; + gap: var(--spacing-sm); figure { margin: 0; diff --git a/assets/scss/partials/layout/list.scss b/assets/scss/partials/layout/list.scss index b29f230..06e7b0f 100644 --- a/assets/scss/partials/layout/list.scss +++ b/assets/scss/partials/layout/list.scss @@ -1,11 +1,9 @@ .section-card { - border-radius: var(--card-border-radius); - background-color: var(--card-background); + @include card-style; padding: var(--small-card-padding); - box-shadow: var(--shadow-l1); display: flex; align-items: center; - gap: 20px; + gap: var(--spacing-lg); --separation: 15px; @@ -47,16 +45,24 @@ } .subsection-list { - overflow-x: auto; - margin-left: -24px; + --shadow-overlap-x: calc(var(--shadow-l2-blur) + 4px); + --shadow-overlap-y: calc(var(--shadow-l2-blur) + var(--shadow-l2-y) + 4px); + overflow-x: auto; + + /// These values are computed from the shadow of the article-list--tile (which uses shadow-l1 and shadow-l2) + /// so that the shadow is not cut off + margin-left: calc(var(--shadow-overlap-x) * -1); + margin-right: calc(var(--shadow-overlap-x) * -1); + margin-bottom: calc(var(--shadow-overlap-y) * -1); + .article-list--tile { display: flex; - padding: 8px 0 34px 24px; + padding: var(--spacing-xs) var(--shadow-overlap-x) var(--shadow-overlap-y) var(--shadow-overlap-x); width: max-content; + gap: var(--spacing-lg); article { - margin-right: 20px; flex-shrink: 0; .article-title { @@ -65,7 +71,7 @@ } .article-details { - padding: 20px; + padding: var(--spacing-lg); } } } diff --git a/assets/scss/partials/layout/search.scss b/assets/scss/partials/layout/search.scss index 89cdcef..8cd9d61 100644 --- a/assets/scss/partials/layout/search.scss +++ b/assets/scss/partials/layout/search.scss @@ -7,12 +7,12 @@ label { font-size: 1.3rem; - top: 10px; + top: var(--spacing-sm); } input { font-size: 1.5rem; - padding: 30px 20px 15px 20px; + padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-md) var(--spacing-lg); } } @@ -23,21 +23,20 @@ label { position: absolute; - top: 15px; - inset-inline-start: 20px; + top: var(--spacing-md); + inset-inline-start: var(--spacing-lg); font-size: 1.4rem; color: var(--card-text-color-tertiary); } input { padding: 40px 20px 20px; - border-radius: var(--card-border-radius); - background-color: var(--card-background); - box-shadow: var(--shadow-l1); + @include card-style; color: var(--card-text-color-main); width: 100%; border: 0; -webkit-appearance: none; + appearance: none; transition: box-shadow 0.3s ease; diff --git a/assets/scss/partials/menu.scss b/assets/scss/partials/menu.scss index c1474ad..6ac9752 100644 --- a/assets/scss/partials/menu.scss +++ b/assets/scss/partials/menu.scss @@ -7,7 +7,7 @@ */ .hamburger { - padding-top: 10px; + padding-top: var(--spacing-sm); display: inline-block; cursor: pointer; transition-property: opacity, filter; @@ -139,7 +139,7 @@ display: none; margin: 0 calc(var(--container-padding) * -1); - padding: 30px 30px; + padding: var(--spacing-2xl); @include respond(xl) { padding: 15px 0; @@ -148,10 +148,10 @@ &, .menu-bottom-section ol { flex-direction: column; - gap: 30px; + gap: var(--spacing-2xl); @include respond(xl) { - gap: 25px; + gap: var(--spacing-xl); } } @@ -220,7 +220,7 @@ margin: 0; display: flex; flex-direction: row; - gap: 10px; + gap: var(--spacing-sm); svg { width: 24px; diff --git a/assets/scss/partials/pagination.scss b/assets/scss/partials/pagination.scss index 32fc9bb..b2fffa4 100644 --- a/assets/scss/partials/pagination.scss +++ b/assets/scss/partials/pagination.scss @@ -1,8 +1,6 @@ .pagination { display: flex; - background-color: var(--card-background); - box-shadow: var(--shadow-l1); - border-radius: var(--card-border-radius); + @include card-style; overflow: hidden; .page-link { diff --git a/assets/scss/partials/sidebar.scss b/assets/scss/partials/sidebar.scss index c771df9..58794b7 100644 --- a/assets/scss/partials/sidebar.scss +++ b/assets/scss/partials/sidebar.scss @@ -35,7 +35,7 @@ position: relative; --sidebar-avatar-size: 100px; - --sidebar-element-separation: 20px; + --sidebar-element-separation: var(--spacing-lg); --emoji-size: 40px; --emoji-font-size: 20px; @@ -48,7 +48,7 @@ @include respond(2xl) { --sidebar-avatar-size: 120px; - --sidebar-element-separation: 25px; + --sidebar-element-separation: var(--spacing-xl); --emoji-size: 40px; } @@ -67,7 +67,7 @@ } .site-meta { - gap: 5px; + gap: var(--spacing-xs); } .site-name { @@ -144,7 +144,7 @@ .site-meta { display: flex; flex-direction: column; - gap: 10px; + gap: var(--spacing-sm); justify-content: center; } diff --git a/assets/scss/partials/widgets.scss b/assets/scss/partials/widgets.scss index 42cfcc2..c29fbbb 100644 --- a/assets/scss/partials/widgets.scss +++ b/assets/scss/partials/widgets.scss @@ -4,8 +4,8 @@ .widget-icon { svg { - width: 32px; - height: 32px; + width: var(--widget-icon-size); + height: var(--widget-icon-size); stroke-width: 1.6; color: var(--body-text-color); } @@ -17,11 +17,10 @@ .tagCloud-tags { display: flex; flex-wrap: wrap; - gap: 10px; + gap: var(--spacing-sm); a { - background: var(--card-background); - box-shadow: var(--shadow-l1); + @include card-style; border-radius: var(--tag-border-radius); padding: 8px 20px; color: var(--card-text-color-main); @@ -38,9 +37,7 @@ /* Archives widget */ .widget.archives { .widget-archive--list { - border-radius: var(--card-border-radius); - box-shadow: var(--shadow-l1); - background-color: var(--card-background); + @include card-style; } .archives-year { diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss index 21ec4cd..994474f 100644 --- a/assets/scss/variables.scss +++ b/assets/scss/variables.scss @@ -144,8 +144,13 @@ * Thanks to https://www.figma.com/community/plugin/744987207861965946/Shadow-picker */ :root { - --shadow-l1: 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04); - --shadow-l2: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04); + --shadow-l1-y: 4px; + --shadow-l1-blur: 8px; + --shadow-l2-y: 10px; + --shadow-l2-blur: 20px; + + --shadow-l1: 0px var(--shadow-l1-y) var(--shadow-l1-blur) rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04); + --shadow-l2: 0px var(--shadow-l2-y) var(--shadow-l2-blur) rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04); } [data-scheme="light"] { @@ -163,5 +168,66 @@ :root { --menu-icon-separation: 40px; --container-padding: 15px; + + @include respond(md) { + --container-padding: 20px; + } + --widget-separation: var(--section-separation); -} + + /* Spacing tokens */ + --spacing-xs: 5px; + --spacing-sm: 10px; + --spacing-md: 15px; + --spacing-lg: 20px; + --spacing-xl: 25px; + --spacing-2xl: 30px; + --spacing-3xl: 40px; + + /* Article image height variables */ + --article-image-height: 150px; + + @include respond(md) { + --article-image-height: 200px; + } + + @include respond(xl) { + --article-image-height: 250px; + } + + /* Mermaid component variables */ + --mermaid-toolbar-btn-bg: rgba(255, 255, 255, 0.95); + --mermaid-toolbar-btn-text: #333; + --mermaid-modal-bg: rgba(0, 0, 0, 0.95); + --mermaid-modal-content-bg: #fff; + --mermaid-modal-btn-bg: #fff; + --mermaid-modal-btn-hover: #ddd; + + &[data-scheme="dark"] { + --mermaid-toolbar-btn-bg: rgba(0, 0, 0, 0.85); + --mermaid-toolbar-btn-text: #eee; + --mermaid-modal-content-bg: #1e1e1e; + --mermaid-modal-btn-bg: #333; + --mermaid-modal-btn-hover: #444; + } + + /* Article compact image size */ + --article-compact-image-size: 50px; + + @include respond(md) { + --article-compact-image-size: 60px; + } + + /* Widget icon size */ + --widget-icon-size: 32px; + + /* Article list tile variables */ + --article-tile-width: 250px; + --article-tile-height: 150px; + --article-tile-overlay-bg: rgba(0, 0, 0, 0.25); + --article-tile-text-color: #fff; + + &[data-scheme="dark"] { + --article-tile-overlay-bg: rgba(0, 0, 0, 0.45); + } +} \ No newline at end of file diff --git a/layouts/_partials/article/components/related-content.html b/layouts/_partials/article/components/related-content.html index f3094eb..294c8c4 100644 --- a/layouts/_partials/article/components/related-content.html +++ b/layouts/_partials/article/components/related-content.html @@ -1,9 +1,9 @@ {{ $related := (.Site.RegularPages.Related .) | first 5 }} {{ with $related }} -