Skip to content

Commit 18ddb82

Browse files
lioneltchamilioneltchami
committed
Improve Starlight portal readability
1 parent 3004e04 commit 18ddb82

1 file changed

Lines changed: 197 additions & 43 deletions

File tree

‎src/styles/portal.css‎

Lines changed: 197 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,63 @@
11
/* DevOps Projects Starlight theme */
22
/* stylelint-disable no-descending-specificity */
33

4-
:root {
5-
--sl-color-accent-low: #1e3525;
6-
--sl-color-accent: #16806f;
7-
--sl-color-accent-high: #baf3cb;
8-
--sl-color-white: #fff;
9-
--sl-color-gray-1: #f5f2e6;
10-
--sl-color-gray-2: #e5e0d1;
11-
--sl-color-gray-3: #c8c2b1;
12-
--sl-color-gray-4: #817c6f;
13-
--sl-color-gray-5: #5b5c55;
14-
--sl-color-gray-6: #25251f;
15-
--sl-color-black: #10120f;
4+
:root,
5+
:root[data-theme="light"],
6+
:root[data-theme="dark"] {
7+
color-scheme: light;
8+
--portal-ink: #12140f;
9+
--portal-text: #34382f;
10+
--portal-muted: #4d5348;
11+
--portal-soft: #6a6d62;
12+
--portal-canvas: #fbfaf4;
13+
--portal-panel: #fffef9;
14+
--portal-panel-strong: #f4eedf;
15+
--portal-sidebar: #f6f3e8;
16+
--portal-line: #bdb5a1;
17+
--portal-line-soft: #d7cfbd;
18+
--portal-accent: #087264;
19+
--portal-accent-strong: #064f47;
20+
--portal-accent-soft: #d9f5d6;
21+
--portal-warn: #8a3526;
22+
--sl-color-accent-low: #d9f5d6;
23+
--sl-color-accent: #087264;
24+
--sl-color-accent-high: #064f47;
25+
--sl-color-white: #12140f;
26+
--sl-color-gray-1: #1d211a;
27+
--sl-color-gray-2: #34382f;
28+
--sl-color-gray-3: #4d5348;
29+
--sl-color-gray-4: #6a6d62;
30+
--sl-color-gray-5: #bdb5a1;
31+
--sl-color-gray-6: #eee8d9;
32+
--sl-color-gray-7: #f8f5eb;
33+
--sl-color-black: #fffef9;
34+
--sl-color-text: #34382f;
35+
--sl-color-text-accent: #064f47;
36+
--sl-color-text-invert: #fffef9;
37+
--sl-color-bg: #fbfaf4;
38+
--sl-color-bg-nav: #fffef9;
39+
--sl-color-bg-sidebar: #f6f3e8;
40+
--sl-color-bg-inline-code: #eee8d9;
41+
--sl-color-bg-accent: #087264;
42+
--sl-color-hairline-light: #d7cfbd;
43+
--sl-color-hairline: #c8bfa9;
44+
--sl-color-hairline-shade: #bdb5a1;
45+
--sl-color-backdrop-overlay: rgb(18 20 15 / 58%);
46+
--sl-color-blue-low: #e7f0ff;
47+
--sl-color-blue: #1a67b7;
48+
--sl-color-blue-high: #164d89;
49+
--sl-color-purple-low: #f2e9ff;
50+
--sl-color-purple: #7650b7;
51+
--sl-color-purple-high: #57348e;
52+
--sl-color-orange-low: #fff0dc;
53+
--sl-color-orange: #a65016;
54+
--sl-color-orange-high: #7a350c;
55+
--sl-color-green-low: #e2f6dc;
56+
--sl-color-green: #237a2f;
57+
--sl-color-green-high: #17561f;
58+
--sl-color-red-low: #ffe7e1;
59+
--sl-color-red: #b93626;
60+
--sl-color-red-high: #8a2217;
1661
--sl-font: "Avenir Next", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
1762
--sl-font-mono: "SFMono-Regular", consolas, "Liberation Mono", monospace;
1863
--sl-content-width: 58rem;
@@ -23,20 +68,69 @@ body {
2368
background:
2469
linear-gradient(135deg, rgb(158 228 147 / 18%), transparent 34rem),
2570
linear-gradient(315deg, rgb(255 128 102 / 12%), transparent 32rem),
26-
#fbfaf4;
27-
color: #25251f;
71+
var(--portal-canvas);
72+
color: var(--portal-text);
2873
}
2974

3075
body:has(.hero-lab) {
3176
--sl-content-width: 76rem;
3277
}
3378

79+
body,
3480
.sl-markdown-content {
35-
color: #25251f;
81+
color: var(--portal-text);
3682
}
3783

3884
.sl-markdown-content :is(h1, h2, h3, h4) {
39-
color: #10120f;
85+
color: var(--portal-ink);
86+
}
87+
88+
.site-title,
89+
.header,
90+
.sidebar-pane,
91+
.sidebar-content,
92+
.top-level,
93+
.top-level :is(summary, li, span),
94+
.top-level a,
95+
.right-sidebar,
96+
.right-sidebar h2,
97+
.right-sidebar a,
98+
.pagination-links a,
99+
.social-icons a,
100+
starlight-theme-select,
101+
starlight-theme-select select {
102+
color: var(--portal-ink) !important;
103+
}
104+
105+
.header {
106+
background: var(--portal-panel) !important;
107+
border-bottom-color: var(--portal-line-soft) !important;
108+
}
109+
110+
.sidebar-pane {
111+
background: var(--portal-sidebar) !important;
112+
border-inline-end-color: var(--portal-line-soft) !important;
113+
}
114+
115+
.main-pane,
116+
.content-panel {
117+
background: transparent !important;
118+
}
119+
120+
.top-level a[aria-current="page"],
121+
.top-level a:hover,
122+
.top-level summary:hover {
123+
background: var(--portal-accent-soft) !important;
124+
color: var(--portal-ink) !important;
125+
}
126+
127+
.top-level a:not([aria-current="page"]) {
128+
color: var(--portal-muted) !important;
129+
}
130+
131+
.top-level summary .large,
132+
.top-level .group-label .large {
133+
color: var(--portal-ink) !important;
40134
}
41135

42136
.main-pane h1[id="_top"],
@@ -46,18 +140,22 @@ mobile-starlight-toc summary,
46140
mobile-starlight-toc .display-current,
47141
mobile-starlight-toc a,
48142
starlight-theme-select select {
49-
color: #10120f !important;
143+
color: var(--portal-ink) !important;
50144
}
51145

52-
.sl-markdown-content :is(p, li, td) {
53-
color: #4f514a;
146+
.sl-markdown-content :is(p, li, td, th, blockquote) {
147+
color: var(--portal-muted);
54148
}
55149

56150
.sl-markdown-content a:not(.project-card, .path-card, .portal-button) {
57-
color: #096b5d;
151+
color: var(--portal-accent-strong);
58152
font-weight: 700;
59153
}
60154

155+
.sl-markdown-content a:not(.project-card, .path-card, .portal-button):hover {
156+
color: #053f39;
157+
}
158+
61159
.sl-markdown-content :is(h1, h2, h3) {
62160
letter-spacing: 0;
63161
}
@@ -77,13 +175,13 @@ body:has(.hero-lab) .main-pane h1[id="_top"] {
77175
}
78176

79177
.right-sidebar {
80-
color: #4f514a;
178+
color: var(--portal-muted);
81179
}
82180

83181
mobile-starlight-toc .toggle,
84182
mobile-starlight-toc .dropdown {
85-
background: #fffef9 !important;
86-
border: 1px solid color-mix(in srgb, var(--sl-color-gray-3), transparent 28%);
183+
background: var(--portal-panel) !important;
184+
border: 1px solid var(--portal-line-soft);
87185
border-radius: 0.5rem;
88186
box-shadow: 0 14px 36px rgb(16 18 15 / 10%);
89187
}
@@ -113,22 +211,22 @@ mobile-starlight-toc .dropdown {
113211
.hero-copy {
114212
background:
115213
radial-gradient(circle at 12% 16%, rgb(255 209 102 / 45%), transparent 13rem),
116-
linear-gradient(145deg, #fff, #f7f4e9);
214+
linear-gradient(145deg, #fff, var(--portal-panel-strong));
117215
padding: clamp(1.5rem, 4vw, 3rem);
118216
}
119217

120218
.eyebrow,
121219
.section-kicker,
122220
.meta-label {
123-
color: #9b4637;
221+
color: var(--portal-warn);
124222
font-size: 0.75rem;
125223
font-weight: 850;
126224
letter-spacing: 0.14em;
127225
text-transform: uppercase;
128226
}
129227

130228
.hero-copy h1 {
131-
color: #10120f;
229+
color: var(--portal-ink);
132230
font-family: Georgia, "Times New Roman", serif;
133231
font-size: 4.2rem;
134232
line-height: 0.98;
@@ -138,7 +236,7 @@ mobile-starlight-toc .dropdown {
138236

139237
.hero-copy p:not(.eyebrow),
140238
.hero-lede {
141-
color: #5b5c55;
239+
color: var(--portal-muted);
142240
font-size: 1.08rem;
143241
line-height: 1.7;
144242
max-width: 42rem;
@@ -154,9 +252,9 @@ mobile-starlight-toc .dropdown {
154252

155253
.portal-button {
156254
align-items: center;
157-
border: 1px solid color-mix(in srgb, var(--sl-color-gray-3), transparent 20%);
255+
border: 1px solid var(--portal-line);
158256
border-radius: 999px;
159-
color: #10120f;
257+
color: var(--portal-ink);
160258
display: inline-flex;
161259
font-weight: 800;
162260
justify-content: center;
@@ -166,14 +264,14 @@ mobile-starlight-toc .dropdown {
166264
}
167265

168266
.portal-button.primary {
169-
background: #10120f;
170-
border-color: #10120f;
171-
color: #fff;
267+
background: var(--portal-ink);
268+
border-color: var(--portal-ink);
269+
color: var(--portal-panel);
172270
}
173271

174272
.portal-button.secondary {
175273
background: #9ee493;
176-
border-color: #9ee493;
274+
border-color: #72c76d;
177275
}
178276

179277
.hero-metrics {
@@ -253,8 +351,8 @@ mobile-starlight-toc .dropdown {
253351
.step-card,
254352
.portal-panel,
255353
.source-callout {
256-
background: #fffef9;
257-
color: var(--sl-color-black);
354+
background: var(--portal-panel);
355+
color: var(--portal-ink);
258356
padding: 1rem;
259357
}
260358

@@ -265,10 +363,21 @@ mobile-starlight-toc .dropdown {
265363
text-decoration: none;
266364
}
267365

366+
.path-card,
367+
.step-card {
368+
text-decoration: none;
369+
}
370+
371+
.project-card *,
372+
.path-card *,
373+
.step-card * {
374+
text-decoration: none;
375+
}
376+
268377
.project-card strong,
269378
.path-card strong,
270379
.step-card strong {
271-
color: #10120f;
380+
color: var(--portal-ink);
272381
display: block;
273382
font-size: 1.05rem;
274383
line-height: 1.25;
@@ -277,14 +386,14 @@ mobile-starlight-toc .dropdown {
277386
.project-card p,
278387
.path-card p,
279388
.step-card p {
280-
color: #5b5c55;
389+
color: var(--portal-muted);
281390
margin: 0;
282391
}
283392

284393
.project-card:hover,
285394
.portal-button:hover,
286395
.path-card:hover {
287-
border-color: #10120f;
396+
border-color: var(--portal-ink);
288397
transform: translateY(-2px);
289398
}
290399

@@ -296,7 +405,7 @@ mobile-starlight-toc .dropdown {
296405
}
297406

298407
.project-summary {
299-
background: linear-gradient(145deg, #fff, #f7f4e9);
408+
background: linear-gradient(145deg, #fff, var(--portal-panel-strong));
300409
display: grid;
301410
gap: 1rem;
302411
grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -309,16 +418,16 @@ mobile-starlight-toc .dropdown {
309418
}
310419

311420
.project-summary strong {
312-
color: #10120f;
421+
color: var(--portal-ink);
313422
display: block;
314423
margin-top: 0.15rem;
315424
}
316425

317426
.project-summary code {
318-
background: #f5f2e6;
319-
border: 1px solid color-mix(in srgb, var(--sl-color-gray-3), transparent 20%);
427+
background: #eee8d9;
428+
border: 1px solid var(--portal-line);
320429
border-radius: 0.25rem;
321-
color: #10120f;
430+
color: var(--portal-ink);
322431
display: inline-block;
323432
max-width: 100%;
324433
overflow-wrap: anywhere;
@@ -333,6 +442,51 @@ mobile-starlight-toc .dropdown {
333442
margin-block: 0.2rem 0;
334443
}
335444

445+
.sl-markdown-content :is(code:not(pre code), kbd) {
446+
background: #eee8d9;
447+
border: 1px solid var(--portal-line-soft);
448+
color: var(--portal-ink);
449+
}
450+
451+
.sl-markdown-content pre {
452+
background: #181a15;
453+
border: 1px solid #34382f;
454+
color: #f7f4e9;
455+
}
456+
457+
.sl-markdown-content table {
458+
background: rgb(255 254 249 / 82%);
459+
border: 1px solid var(--portal-line-soft);
460+
}
461+
462+
.sl-markdown-content :is(th, td) {
463+
border-color: var(--portal-line-soft);
464+
}
465+
466+
.sl-markdown-content th {
467+
background: #f0eadb;
468+
color: var(--portal-ink);
469+
}
470+
471+
.sl-markdown-content blockquote {
472+
border-inline-start-color: var(--portal-line);
473+
}
474+
475+
.sl-markdown-content :is(details, .starlight-aside) {
476+
color: var(--portal-text);
477+
}
478+
479+
a[href="#_top"],
480+
.sl-markdown-content .header-anchor,
481+
.right-sidebar-panel,
482+
.right-sidebar-container {
483+
color: var(--portal-muted) !important;
484+
}
485+
486+
.sl-markdown-content hr {
487+
border-color: var(--portal-line-soft);
488+
}
489+
336490
@media (width <= 1000px) {
337491
.hero-lab,
338492
.portal-grid,

0 commit comments

Comments
 (0)