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 {
text-transform: uppercase;
margin-top: 0;
margin-bottom: 10px;
margin-bottom: var(--spacing-sm);
display: block;
font-size: 1.6rem;
font-weight: bold;
assets/scss/grid.scss
+3 -3
View File
@@ -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;
}
}
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 {
assets/scss/partials/cookies.scss
+10 -10
View File
@@ -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;
}
}
assets/scss/partials/footer.scss
+3 -3
View File
@@ -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 {
assets/scss/partials/layout/article.scss
+10 -37
View File
@@ -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;
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);
}
}
}
assets/scss/partials/layout/search.scss
+6 -7
View File
@@ -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;
assets/scss/partials/menu.scss
+5 -5
View File
@@ -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;
assets/scss/partials/pagination.scss
+1 -3
View File
@@ -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 {
assets/scss/partials/sidebar.scss
+4 -4
View File
@@ -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;
}
assets/scss/partials/widgets.scss
+5 -8
View File
@@ -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 {
assets/scss/variables.scss
+69 -3
View File
@@ -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);
}
}