kushidou/hugo-theme-stack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: add standardized spacing variables and more style cleanup (#1287)

Browse Source 
* 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.
This commit is contained in:
Jimmy
2026-03-05 12:29:48 +01:00
committed by GitHub
parent 88468ad84e
commit 0ad02c5c0f
14 changed files with 157 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/scss/general.scss
+1 -1
View File
@@ -19,7 +19,7 @@ a {
.section-title { .section-title {
text-transform: uppercase; text-transform: uppercase;
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: var(--spacing-sm);
display: block; display: block;
font-size: 1.6rem; font-size: 1.6rem;
font-weight: bold; font-weight: bold;
assets/scss/grid.scss
+3 -3
View File
@@ -89,11 +89,11 @@ main.main {
.main-container { .main-container {
min-height: 100vh; min-height: 100vh;
align-items: flex-start; align-items: flex-start;
padding: 0 15px; padding: 0 var(--container-padding);
gap: var(--section-separation); gap: var(--section-separation);
padding-top: var(--main-top-padding); padding-top: var(--main-top-padding);
@include respond(md) { @include respond(md) {
padding: 0 20px; padding-top: 0;
} }
} }
assets/scss/partials/article.scss
+22 -37
View File
@@ -19,16 +19,8 @@
.article-image { .article-image {
img { img {
width: 100%; width: 100%;
height: 150px; height: var(--article-image-height);
object-fit: cover; object-fit: cover;
@include respond(md) {
height: 200px;
}
@include respond(xl) {
height: 250px;
}
} }
} }
} }
@@ -39,7 +31,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: var(--card-padding); padding: var(--card-padding);
gap: 15px; gap: var(--spacing-md);
} }
.article-title { .article-title {
@@ -84,7 +76,7 @@
.article-header-tags { .article-header-tags {
display: flex; display: flex;
color: var(--card-text-color-tertiary); color: var(--card-text-color-tertiary);
gap: 15px; gap: var(--spacing-md);
svg { svg {
vertical-align: middle; vertical-align: middle;
@@ -103,7 +95,7 @@
& > div { & > div {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 15px; gap: var(--spacing-md);
} }
} }
@@ -121,7 +113,7 @@
.article-category, .article-category,
.article-tags { .article-tags {
display: flex; display: flex;
gap: 10px; gap: var(--spacing-sm);
flex-wrap: wrap; flex-wrap: wrap;
a { a {
@@ -143,18 +135,14 @@
/* Compact style article list */ /* Compact style article list */
.article-list--compact { .article-list--compact {
@include card-style; @include card-style;
--image-size: 50px; --image-size: var(--article-compact-image-size);
@include respond(md) {
--image-size: 60px;
}
article { article {
& > a { & > a {
display: flex; display: flex;
align-items: center; align-items: center;
padding: var(--small-card-padding); padding: var(--small-card-padding);
gap: 15px; gap: var(--spacing-md);
} }
&:not(:last-of-type) { &:not(:last-of-type) {
@@ -165,7 +153,7 @@
flex-grow: 1; flex-grow: 1;
padding: 0; padding: 0;
min-height: var(--image-size); min-height: var(--image-size);
gap: 10px; gap: var(--spacing-sm);
} }
.article-title { .article-title {
@@ -201,8 +189,8 @@
.article-list--tile { .article-list--tile {
article { article {
position: relative; position: relative;
width: 250px; width: var(--article-tile-width);
height: 150px; height: var(--article-tile-height);
@include card-style; @include card-style;
overflow: hidden; overflow: hidden;
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
@@ -213,11 +201,11 @@
&.has-image { &.has-image {
.article-details { .article-details {
background-color: rgba(#000, 0.25); background-color: var(--article-tile-overlay-bg);
} }
.article-title { .article-title {
color: #fff; color: var(--article-tile-text-color);
} }
} }
@@ -322,19 +310,19 @@
button { button {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.95); background: var(--mermaid-toolbar-btn-bg);
border: 2px solid #333; border: 2px solid var(--mermaid-toolbar-btn-text);
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
color: #333; color: var(--mermaid-toolbar-btn-text);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
transition: all 0.2s; transition: all 0.2s;
&:hover { &:hover {
background: #333; background: var(--mermaid-toolbar-btn-text);
color: #fff; color: var(--card-background);
transform: scale(1.05); transform: scale(1.05);
} }
} }
@@ -348,7 +336,7 @@
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background: rgba(0, 0, 0, 0.95); background: var(--mermaid-modal-bg);
z-index: 9999; z-index: 9999;
&.active { &.active {
@@ -373,14 +361,15 @@
.mermaid-modal-controls button, .mermaid-modal-controls button,
.mermaid-modal-close { .mermaid-modal-close {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background: #fff; background: var(--mermaid-modal-btn-bg);
border: none; border: none;
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
font-size: 0.9rem; font-size: 0.9rem;
color: var(--card-text-color-main);
&:hover { &:hover {
background: #ddd; background: var(--mermaid-modal-btn-hover);
} }
} }
@@ -398,11 +387,7 @@
bottom: 1rem; bottom: 1rem;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
background: #fff; background: var(--mermaid-modal-content-bg);
[data-scheme="dark"] & {
background: #1e1e1e;
}
} }
.mermaid-panzoom-container { .mermaid-panzoom-container {
assets/scss/partials/cookies.scss
+10 -10
View File
@@ -20,13 +20,13 @@
padding: var(--card-padding); padding: var(--card-padding);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px; gap: var(--spacing-md);
@include respond(md) { @include respond(md) {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
gap: 20px; gap: var(--spacing-lg);
} }
} }
@@ -38,7 +38,7 @@
display: block; display: block;
color: var(--card-text-color-main); color: var(--card-text-color-main);
font-size: 1.6rem; font-size: 1.6rem;
margin-bottom: 5px; margin-bottom: var(--spacing-xs);
} }
p { p {
@@ -51,7 +51,7 @@
.cookie-banner__actions { .cookie-banner__actions {
display: flex; display: flex;
gap: 10px; gap: var(--spacing-sm);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -116,19 +116,19 @@
h3 { h3 {
color: var(--card-text-color-main); color: var(--card-text-color-main);
font-size: 1.6rem; font-size: 1.6rem;
margin: 0 0 15px 0; margin: 0 0 var(--spacing-md) 0;
} }
&__actions { &__actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 10px; gap: var(--spacing-sm);
margin-top: 20px; margin-top: var(--spacing-lg);
} }
} }
.cookie-category { .cookie-category {
padding: 15px 0; padding: var(--spacing-md) 0;
border-bottom: 1px solid var(--card-separator-color); border-bottom: 1px solid var(--card-separator-color);
&:last-of-type { &:last-of-type {
@@ -138,7 +138,7 @@
label { label {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: var(--spacing-sm);
cursor: pointer; cursor: pointer;
input[type="checkbox"] { input[type="checkbox"] {
@@ -192,6 +192,6 @@
font-size: 1.4rem; font-size: 1.4rem;
p { p {
margin: 0 0 15px 0; margin: 0 0 var(--spacing-md) 0;
} }
} }
assets/scss/partials/footer.scss
+3 -3
View File
@@ -1,5 +1,5 @@
footer.site-footer { footer.site-footer {
padding: 20px 0 var(--section-separation) 0; padding: var(--spacing-lg) 0 var(--section-separation) 0;
font-size: 1.4rem; font-size: 1.4rem;
line-height: 1.75; line-height: 1.75;
@@ -9,13 +9,13 @@ footer.site-footer {
height: 3px; height: 3px;
width: 50px; width: 50px;
background: var(--body-text-color); background: var(--body-text-color);
margin-bottom: 20px; margin-bottom: var(--spacing-lg);
} }
.copyright { .copyright {
color: var(--accent-color); color: var(--accent-color);
font-weight: bold; font-weight: bold;
margin-bottom: 5px; margin-bottom: var(--spacing-xs);
} }
.powerby { .powerby {
assets/scss/partials/layout/article.scss
+10 -37
View File
@@ -111,14 +111,14 @@
} }
li { li {
margin: 15px 0 15px 20px; margin: var(--spacing-md) 0 var(--spacing-md) var(--spacing-lg);
padding: 5px; padding: var(--spacing-xs);
&>ol, &>ol,
&>ul { &>ul {
margin-top: 10px; margin-top: var(--spacing-sm);
padding-left: 10px; padding-left: var(--spacing-sm);
margin-bottom: -5px; margin-bottom: calc(var(--spacing-xs) * -1);
&>li:last-child { &>li:last-child {
margin-bottom: 0; margin-bottom: 0;
@@ -182,7 +182,7 @@
.article-toc { .article-toc {
padding: 0 var(--card-padding); padding: 0 var(--card-padding);
margin-top: 20px; margin-top: var(--spacing-lg);
@include respond(lg) { @include respond(lg) {
display: none; display: none;
@@ -203,7 +203,7 @@
summary { summary {
list-style: none; list-style: none;
padding: 15px 20px; padding: var(--spacing-md) var(--spacing-lg);
cursor: pointer; cursor: pointer;
&::-webkit-details-marker { &::-webkit-details-marker {
@@ -213,7 +213,7 @@
.article-toc-title { .article-toc-title {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: var(--spacing-sm);
text-transform: uppercase; text-transform: uppercase;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: bold; 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 { .article-content {
font-family: var(--article-font-family); font-family: var(--article-font-family);
font-size: var(--article-font-size); font-size: var(--article-font-size);
@@ -313,7 +286,7 @@
position: relative; position: relative;
margin: 1.5em 0; margin: 1.5em 0;
border-inline-start: var(--blockquote-border-size) solid var(--card-separator-color); 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); background-color: var(--blockquote-background-color);
.cite { .cite {
@@ -383,7 +356,7 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
margin: 1.5em 0; margin: 1.5em 0;
gap: 10px; gap: var(--spacing-sm);
figure { figure {
margin: 0; margin: 0;
assets/scss/partials/layout/list.scss
+15 -9
View File
@@ -1,11 +1,9 @@
.section-card { .section-card {
border-radius: var(--card-border-radius); @include card-style;
background-color: var(--card-background);
padding: var(--small-card-padding); padding: var(--small-card-padding);
box-shadow: var(--shadow-l1);
display: flex; display: flex;
align-items: center; align-items: center;
gap: 20px; gap: var(--spacing-lg);
--separation: 15px; --separation: 15px;
@@ -47,16 +45,24 @@
} }
.subsection-list { .subsection-list {
overflow-x: auto; --shadow-overlap-x: calc(var(--shadow-l2-blur) + 4px);
margin-left: -24px; --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 { .article-list--tile {
display: flex; 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; width: max-content;
gap: var(--spacing-lg);
article { article {
margin-right: 20px;
flex-shrink: 0; flex-shrink: 0;
.article-title { .article-title {
@@ -65,7 +71,7 @@
} }
.article-details { .article-details {
padding: 20px; padding: var(--spacing-lg);
} }
} }
} }
assets/scss/partials/layout/search.scss
+6 -7
View File
@@ -7,12 +7,12 @@
label { label {
font-size: 1.3rem; font-size: 1.3rem;
top: 10px; top: var(--spacing-sm);
} }
input { input {
font-size: 1.5rem; 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 { label {
position: absolute; position: absolute;
top: 15px; top: var(--spacing-md);
inset-inline-start: 20px; inset-inline-start: var(--spacing-lg);
font-size: 1.4rem; font-size: 1.4rem;
color: var(--card-text-color-tertiary); color: var(--card-text-color-tertiary);
} }
input { input {
padding: 40px 20px 20px; padding: 40px 20px 20px;
border-radius: var(--card-border-radius); @include card-style;
background-color: var(--card-background);
box-shadow: var(--shadow-l1);
color: var(--card-text-color-main); color: var(--card-text-color-main);
width: 100%; width: 100%;
border: 0; border: 0;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none;
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
assets/scss/partials/menu.scss
+5 -5
View File
@@ -7,7 +7,7 @@
*/ */
.hamburger { .hamburger {
padding-top: 10px; padding-top: var(--spacing-sm);
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
transition-property: opacity, filter; transition-property: opacity, filter;
@@ -139,7 +139,7 @@
display: none; display: none;
margin: 0 calc(var(--container-padding) * -1); margin: 0 calc(var(--container-padding) * -1);
padding: 30px 30px; padding: var(--spacing-2xl);
@include respond(xl) { @include respond(xl) {
padding: 15px 0; padding: 15px 0;
@@ -148,10 +148,10 @@
&, &,
.menu-bottom-section ol { .menu-bottom-section ol {
flex-direction: column; flex-direction: column;
gap: 30px; gap: var(--spacing-2xl);
@include respond(xl) { @include respond(xl) {
gap: 25px; gap: var(--spacing-xl);
} }
} }
@@ -220,7 +220,7 @@
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 10px; gap: var(--spacing-sm);
svg { svg {
width: 24px; width: 24px;
assets/scss/partials/pagination.scss
+1 -3
View File
@@ -1,8 +1,6 @@
.pagination { .pagination {
display: flex; display: flex;
background-color: var(--card-background); @include card-style;
box-shadow: var(--shadow-l1);
border-radius: var(--card-border-radius);
overflow: hidden; overflow: hidden;
.page-link { .page-link {
assets/scss/partials/sidebar.scss
+4 -4
View File
@@ -35,7 +35,7 @@
position: relative; position: relative;
--sidebar-avatar-size: 100px; --sidebar-avatar-size: 100px;
--sidebar-element-separation: 20px; --sidebar-element-separation: var(--spacing-lg);
--emoji-size: 40px; --emoji-size: 40px;
--emoji-font-size: 20px; --emoji-font-size: 20px;
@@ -48,7 +48,7 @@
@include respond(2xl) { @include respond(2xl) {
--sidebar-avatar-size: 120px; --sidebar-avatar-size: 120px;
--sidebar-element-separation: 25px; --sidebar-element-separation: var(--spacing-xl);
--emoji-size: 40px; --emoji-size: 40px;
} }
@@ -67,7 +67,7 @@
} }
.site-meta { .site-meta {
gap: 5px; gap: var(--spacing-xs);
} }
.site-name { .site-name {
@@ -144,7 +144,7 @@
.site-meta { .site-meta {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: var(--spacing-sm);
justify-content: center; justify-content: center;
} }
assets/scss/partials/widgets.scss
+5 -8
View File
@@ -4,8 +4,8 @@
.widget-icon { .widget-icon {
svg { svg {
width: 32px; width: var(--widget-icon-size);
height: 32px; height: var(--widget-icon-size);
stroke-width: 1.6; stroke-width: 1.6;
color: var(--body-text-color); color: var(--body-text-color);
} }
@@ -17,11 +17,10 @@
.tagCloud-tags { .tagCloud-tags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 10px; gap: var(--spacing-sm);
a { a {
background: var(--card-background); @include card-style;
box-shadow: var(--shadow-l1);
border-radius: var(--tag-border-radius); border-radius: var(--tag-border-radius);
padding: 8px 20px; padding: 8px 20px;
color: var(--card-text-color-main); color: var(--card-text-color-main);
@@ -38,9 +37,7 @@
/* Archives widget */ /* Archives widget */
.widget.archives { .widget.archives {
.widget-archive--list { .widget-archive--list {
border-radius: var(--card-border-radius); @include card-style;
box-shadow: var(--shadow-l1);
background-color: var(--card-background);
} }
.archives-year { .archives-year {
assets/scss/variables.scss
+69 -3
View File
@@ -144,8 +144,13 @@
* Thanks to https://www.figma.com/community/plugin/744987207861965946/Shadow-picker * Thanks to https://www.figma.com/community/plugin/744987207861965946/Shadow-picker
*/ */
:root { :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-l1-y: 4px;
--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-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"] { [data-scheme="light"] {
@@ -163,5 +168,66 @@
:root { :root {
--menu-icon-separation: 40px; --menu-icon-separation: 40px;
--container-padding: 15px; --container-padding: 15px;
@include respond(md) {
--container-padding: 20px;
}
--widget-separation: var(--section-separation); --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);
}
}
layouts/_partials/article/components/related-content.html
+3 -3
View File
@@ -1,9 +1,9 @@
{{ $related := (.Site.RegularPages.Related .) | first 5 }} {{ $related := (.Site.RegularPages.Related .) | first 5 }}
{{ with $related }} {{ with $related }}
<aside class="related-content--wrapper"> <aside>
<h2 class="section-title">{{ T "article.relatedContent" }}</h2> <h2 class="section-title">{{ T "article.relatedContent" }}</h2>
<div class="related-content"> <div class="subsection-list">
<div class="flex article-list--tile"> <div class="article-list--tile">
{{ range . }} {{ range . }}
{{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "articleList") }} {{ partial "article-list/tile" (dict "context" . "size" "250x150" "Type" "articleList") }}
{{ end }} {{ end }}