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.
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
+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;