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/partials/layout/list.scss
+15 -9
View File
@@ -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);
}
}
}