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/article.scss
+22 -37
View File
@@ -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 {