Skip to content

Commit db4b073

Browse files
CaiJimmyCaiJimmy
committed
refactor: add standardized spacing variables and more style cleanup
1 parent 88468ad commit db4b073

13 files changed

Lines changed: 132 additions & 102 deletions

File tree

‎assets/scss/general.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ a {
1919
.section-title {
2020
text-transform: uppercase;
2121
margin-top: 0;
22-
margin-bottom: 10px;
22+
margin-bottom: var(--spacing-sm);
2323
display: block;
2424
font-size: 1.6rem;
2525
font-weight: bold;

‎assets/scss/grid.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,11 +89,11 @@ main.main {
8989
.main-container {
9090
min-height: 100vh;
9191
align-items: flex-start;
92-
padding: 0 15px;
92+
padding: 0 var(--container-padding);
9393
gap: var(--section-separation);
9494
padding-top: var(--main-top-padding);
95-
95+
9696
@include respond(md) {
97-
padding: 0 20px;
97+
padding-top: 0;
9898
}
9999
}

‎assets/scss/partials/article.scss‎

Lines changed: 22 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,8 @@
1919
.article-image {
2020
img {
2121
width: 100%;
22-
height: 150px;
22+
height: var(--article-image-height);
2323
object-fit: cover;
24-
25-
@include respond(md) {
26-
height: 200px;
27-
}
28-
29-
@include respond(xl) {
30-
height: 250px;
31-
}
3224
}
3325
}
3426
}
@@ -39,7 +31,7 @@
3931
flex-direction: column;
4032
justify-content: center;
4133
padding: var(--card-padding);
42-
gap: 15px;
34+
gap: var(--spacing-md);
4335
}
4436

4537
.article-title {
@@ -84,7 +76,7 @@
8476
.article-header-tags {
8577
display: flex;
8678
color: var(--card-text-color-tertiary);
87-
gap: 15px;
79+
gap: var(--spacing-md);
8880

8981
svg {
9082
vertical-align: middle;
@@ -103,7 +95,7 @@
10395
& > div {
10496
display: inline-flex;
10597
align-items: center;
106-
gap: 15px;
98+
gap: var(--spacing-md);
10799
}
108100
}
109101

@@ -121,7 +113,7 @@
121113
.article-category,
122114
.article-tags {
123115
display: flex;
124-
gap: 10px;
116+
gap: var(--spacing-sm);
125117
flex-wrap: wrap;
126118

127119
a {
@@ -143,18 +135,14 @@
143135
/* Compact style article list */
144136
.article-list--compact {
145137
@include card-style;
146-
--image-size: 50px;
147-
148-
@include respond(md) {
149-
--image-size: 60px;
150-
}
138+
--image-size: var(--article-compact-image-size);
151139

152140
article {
153141
& > a {
154142
display: flex;
155143
align-items: center;
156144
padding: var(--small-card-padding);
157-
gap: 15px;
145+
gap: var(--spacing-md);
158146
}
159147

160148
&:not(:last-of-type) {
@@ -165,7 +153,7 @@
165153
flex-grow: 1;
166154
padding: 0;
167155
min-height: var(--image-size);
168-
gap: 10px;
156+
gap: var(--spacing-sm);
169157
}
170158

171159
.article-title {
@@ -201,8 +189,8 @@
201189
.article-list--tile {
202190
article {
203191
position: relative;
204-
width: 250px;
205-
height: 150px;
192+
width: var(--article-tile-width);
193+
height: var(--article-tile-height);
206194
@include card-style;
207195
overflow: hidden;
208196
transition: box-shadow 0.3s ease;
@@ -213,11 +201,11 @@
213201

214202
&.has-image {
215203
.article-details {
216-
background-color: rgba(#000, 0.25);
204+
background-color: var(--article-tile-overlay-bg);
217205
}
218206

219207
.article-title {
220-
color: #fff;
208+
color: var(--article-tile-text-color);
221209
}
222210
}
223211

@@ -322,19 +310,19 @@
322310

323311
button {
324312
padding: 0.5rem 1rem;
325-
background: rgba(255, 255, 255, 0.95);
326-
border: 2px solid #333;
313+
background: var(--mermaid-toolbar-btn-bg);
314+
border: 2px solid var(--mermaid-toolbar-btn-text);
327315
border-radius: 6px;
328316
cursor: pointer;
329317
font-size: 1rem;
330318
font-weight: 600;
331-
color: #333;
319+
color: var(--mermaid-toolbar-btn-text);
332320
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
333321
transition: all 0.2s;
334322

335323
&:hover {
336-
background: #333;
337-
color: #fff;
324+
background: var(--mermaid-toolbar-btn-text);
325+
color: var(--card-background);
338326
transform: scale(1.05);
339327
}
340328
}
@@ -348,7 +336,7 @@
348336
left: 0;
349337
width: 100vw;
350338
height: 100vh;
351-
background: rgba(0, 0, 0, 0.95);
339+
background: var(--mermaid-modal-bg);
352340
z-index: 9999;
353341

354342
&.active {
@@ -373,14 +361,15 @@
373361
.mermaid-modal-controls button,
374362
.mermaid-modal-close {
375363
padding: 0.5rem 1rem;
376-
background: #fff;
364+
background: var(--mermaid-modal-btn-bg);
377365
border: none;
378366
border-radius: 4px;
379367
cursor: pointer;
380368
font-size: 0.9rem;
369+
color: var(--card-text-color-main);
381370

382371
&:hover {
383-
background: #ddd;
372+
background: var(--mermaid-modal-btn-hover);
384373
}
385374
}
386375

@@ -398,11 +387,7 @@
398387
bottom: 1rem;
399388
border-radius: 8px;
400389
overflow: hidden;
401-
background: #fff;
402-
403-
[data-scheme="dark"] & {
404-
background: #1e1e1e;
405-
}
390+
background: var(--mermaid-modal-content-bg);
406391
}
407392

408393
.mermaid-panzoom-container {

‎assets/scss/partials/cookies.scss‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@
2020
padding: var(--card-padding);
2121
display: flex;
2222
flex-direction: column;
23-
gap: 15px;
23+
gap: var(--spacing-md);
2424

2525
@include respond(md) {
2626
flex-direction: row;
2727
flex-wrap: wrap;
2828
align-items: center;
29-
gap: 20px;
29+
gap: var(--spacing-lg);
3030
}
3131
}
3232

@@ -38,7 +38,7 @@
3838
display: block;
3939
color: var(--card-text-color-main);
4040
font-size: 1.6rem;
41-
margin-bottom: 5px;
41+
margin-bottom: var(--spacing-xs);
4242
}
4343

4444
p {
@@ -51,7 +51,7 @@
5151

5252
.cookie-banner__actions {
5353
display: flex;
54-
gap: 10px;
54+
gap: var(--spacing-sm);
5555
flex-shrink: 0;
5656
}
5757

@@ -116,19 +116,19 @@
116116
h3 {
117117
color: var(--card-text-color-main);
118118
font-size: 1.6rem;
119-
margin: 0 0 15px 0;
119+
margin: 0 0 var(--spacing-md) 0;
120120
}
121121

122122
&__actions {
123123
display: flex;
124124
justify-content: flex-end;
125-
gap: 10px;
126-
margin-top: 20px;
125+
gap: var(--spacing-sm);
126+
margin-top: var(--spacing-lg);
127127
}
128128
}
129129

130130
.cookie-category {
131-
padding: 15px 0;
131+
padding: var(--spacing-md) 0;
132132
border-bottom: 1px solid var(--card-separator-color);
133133

134134
&:last-of-type {
@@ -138,7 +138,7 @@
138138
label {
139139
display: flex;
140140
align-items: center;
141-
gap: 10px;
141+
gap: var(--spacing-sm);
142142
cursor: pointer;
143143

144144
input[type="checkbox"] {
@@ -192,6 +192,6 @@
192192
font-size: 1.4rem;
193193

194194
p {
195-
margin: 0 0 15px 0;
195+
margin: 0 0 var(--spacing-md) 0;
196196
}
197197
}

‎assets/scss/partials/footer.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
footer.site-footer {
2-
padding: 20px 0 var(--section-separation) 0;
2+
padding: var(--spacing-lg) 0 var(--section-separation) 0;
33
font-size: 1.4rem;
44
line-height: 1.75;
55

@@ -9,13 +9,13 @@ footer.site-footer {
99
height: 3px;
1010
width: 50px;
1111
background: var(--body-text-color);
12-
margin-bottom: 20px;
12+
margin-bottom: var(--spacing-lg);
1313
}
1414

1515
.copyright {
1616
color: var(--accent-color);
1717
font-weight: bold;
18-
margin-bottom: 5px;
18+
margin-bottom: var(--spacing-xs);
1919
}
2020

2121
.powerby {

‎assets/scss/partials/layout/article.scss‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -111,14 +111,14 @@
111111
}
112112

113113
li {
114-
margin: 15px 0 15px 20px;
115-
padding: 5px;
114+
margin: var(--spacing-md) 0 var(--spacing-md) var(--spacing-lg);
115+
padding: var(--spacing-xs);
116116

117117
&>ol,
118118
&>ul {
119-
margin-top: 10px;
120-
padding-left: 10px;
121-
margin-bottom: -5px;
119+
margin-top: var(--spacing-sm);
120+
padding-left: var(--spacing-sm);
121+
margin-bottom: calc(var(--spacing-xs) * -1);
122122

123123
&>li:last-child {
124124
margin-bottom: 0;
@@ -182,7 +182,7 @@
182182

183183
.article-toc {
184184
padding: 0 var(--card-padding);
185-
margin-top: 20px;
185+
margin-top: var(--spacing-lg);
186186

187187
@include respond(lg) {
188188
display: none;
@@ -203,7 +203,7 @@
203203

204204
summary {
205205
list-style: none;
206-
padding: 15px 20px;
206+
padding: var(--spacing-md) var(--spacing-lg);
207207
cursor: pointer;
208208

209209
&::-webkit-details-marker {
@@ -213,7 +213,7 @@
213213
.article-toc-title {
214214
display: flex;
215215
align-items: center;
216-
gap: 10px;
216+
gap: var(--spacing-sm);
217217
text-transform: uppercase;
218218
font-size: 1.4rem;
219219
font-weight: bold;
@@ -232,14 +232,14 @@
232232

233233
.related-content {
234234
overflow-x: auto;
235-
padding-bottom: 15px;
235+
padding-bottom: var(--spacing-md);
236236

237237
&>.flex {
238238
float: left;
239239
}
240240

241241
article {
242-
margin-right: 15px;
242+
margin-right: var(--spacing-md);
243243
flex-shrink: 0;
244244
overflow: hidden;
245245

@@ -313,7 +313,7 @@
313313
position: relative;
314314
margin: 1.5em 0;
315315
border-inline-start: var(--blockquote-border-size) solid var(--card-separator-color);
316-
padding: 15px calc(var(--card-padding) - var(--blockquote-border-size));
316+
padding: var(--spacing-md) calc(var(--card-padding) - var(--blockquote-border-size));
317317
background-color: var(--blockquote-background-color);
318318

319319
.cite {
@@ -383,7 +383,7 @@
383383
flex-direction: row;
384384
justify-content: center;
385385
margin: 1.5em 0;
386-
gap: 10px;
386+
gap: var(--spacing-sm);
387387

388388
figure {
389389
margin: 0;

0 commit comments

Comments
 (0)