Skip to content

Commit 4b152c5

Browse files
HDauvenHDauven
committed
Polish Dusk docs visual system
1 parent 716df98 commit 4b152c5

1 file changed

Lines changed: 273 additions & 4 deletions

File tree

‎src/styles/custom.css‎

Lines changed: 273 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,17 @@
66
:root {
77
--sl-font: "Soehne";
88
--sl-font-mono: "Soehne Mono";
9+
10+
--dusk-surface-radius: 0.5rem;
11+
--dusk-surface-radius-sm: 0.375rem;
12+
--dusk-border: rgba(16, 16, 16, 0.12);
13+
--dusk-border-strong: rgba(16, 16, 16, 0.22);
14+
--dusk-surface: #ffffff;
15+
--dusk-surface-raised: #fbfafc;
16+
--dusk-text-muted: #636167;
17+
--dusk-shadow-soft: 0 8px 24px rgba(16, 16, 16, 0.08);
18+
--dusk-nav-active-bg: rgba(113, 177, 255, 0.16);
19+
--dusk-nav-active-fg: #101010;
920
}
1021

1122
/* Sidebar/menu: avoid faux-bold artifacts (we only ship Soehne 400/500). */
@@ -31,6 +42,7 @@
3142
/* Header brand: make the logo + "DOCUMENTATION" less dominant. */
3243
.site-title {
3344
font-size: var(--sl-text-sm);
45+
font-weight: 500;
3446
}
3547

3648
.site-title img {
@@ -62,6 +74,15 @@
6274
--sl-color-bg-nav: #f6f5fa;
6375
--sl-color-bg-sidebar: #f6f5fa;
6476
--sl-color-bg-inline-code: rgba(0, 0, 0, 0.06);
77+
78+
--dusk-border: rgba(16, 16, 16, 0.12);
79+
--dusk-border-strong: rgba(16, 16, 16, 0.24);
80+
--dusk-surface: #ffffff;
81+
--dusk-surface-raised: #fbfafc;
82+
--dusk-text-muted: #636167;
83+
--dusk-shadow-soft: 0 8px 24px rgba(16, 16, 16, 0.08);
84+
--dusk-nav-active-bg: rgba(113, 177, 255, 0.16);
85+
--dusk-nav-active-fg: #101010;
6586
}
6687

6788
/* Dark theme */
@@ -82,15 +103,68 @@
82103
/* Tame pure white in headings/UI */
83104
--sl-color-white: #e2dfe9;
84105
--sl-color-black: #101010;
106+
107+
--dusk-border: rgba(226, 223, 233, 0.1);
108+
--dusk-border-strong: rgba(226, 223, 233, 0.2);
109+
--dusk-surface: #151518;
110+
--dusk-surface-raised: #1b1b1e;
111+
--dusk-text-muted: #a8a5af;
112+
--dusk-shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.28);
113+
--dusk-nav-active-bg: rgba(113, 177, 255, 0.12);
114+
--dusk-nav-active-fg: #e2dfe9;
115+
}
116+
117+
.sidebar-pane a[aria-current="page"],
118+
.sidebar-pane a[aria-current="page"]:hover,
119+
.sidebar-pane a[aria-current="page"]:focus {
120+
background: var(--dusk-nav-active-bg);
121+
box-shadow: inset 3px 0 0 var(--sl-color-accent);
122+
color: var(--dusk-nav-active-fg);
85123
}
86124

87-
/* Dusk-style rounding for cards and primary actions without changing layout behavior. */
125+
/* Dusk-style surfaces without changing Starlight layout behavior. */
88126
.sl-link-card {
89-
border-radius: 1.25rem !important;
127+
border-color: var(--dusk-border) !important;
128+
border-radius: var(--dusk-surface-radius) !important;
129+
background: var(--dusk-surface);
130+
box-shadow: none !important;
131+
transition:
132+
background 160ms ease,
133+
border-color 160ms ease,
134+
transform 120ms ease,
135+
box-shadow 160ms ease;
90136
}
91137

138+
.sl-link-card:hover {
139+
border-color: var(--dusk-border-strong) !important;
140+
background: var(--dusk-surface-raised) !important;
141+
box-shadow: var(--dusk-shadow-soft) !important;
142+
transform: translateY(-1px);
143+
}
144+
145+
.sl-link-card .title {
146+
font-weight: 500 !important;
147+
}
148+
149+
.sl-link-card .description {
150+
color: var(--dusk-text-muted) !important;
151+
}
152+
153+
.sl-link-button,
92154
.action {
93-
border-radius: 1.25rem !important;
155+
border-radius: var(--dusk-surface-radius) !important;
156+
font-weight: 500;
157+
letter-spacing: 0;
158+
transition:
159+
background 160ms ease,
160+
border-color 160ms ease,
161+
color 160ms ease,
162+
transform 120ms ease;
163+
}
164+
165+
.sl-link-button:hover,
166+
.action:hover {
167+
transform: translateY(-1px);
94168
}
95169

96170
/* Light-mode primary buttons: cornflower background needs dark text for contrast. */
@@ -99,7 +173,202 @@
99173
color: var(--sl-color-text-invert);
100174
}
101175

102-
/* Keep callouts readable on the neutral dark surface. */
176+
/* Docs-specific Dusk treatment for technical reading surfaces. */
177+
.sl-markdown-content :is(h2, h3):not(:where(.not-content *)) {
178+
letter-spacing: 0;
179+
}
180+
181+
.sl-markdown-content h2:not(:where(.not-content *)) {
182+
padding-top: 0.25rem;
183+
}
184+
185+
.sl-markdown-content code:not(:where(.not-content *, pre *)) {
186+
border: 1px solid var(--dusk-border);
187+
border-radius: var(--dusk-surface-radius-sm);
188+
padding: 0.12em 0.34em;
189+
}
190+
191+
.expressive-code {
192+
--ec-brdRad: var(--dusk-surface-radius);
193+
--ec-frm-edActTabBg: var(--dusk-surface-raised);
194+
--ec-frm-edTabBarBrdCol: var(--dusk-border);
195+
}
196+
197+
.expressive-code figure.frame {
198+
border: 1px solid var(--dusk-border);
199+
border-radius: var(--dusk-surface-radius);
200+
box-shadow: none;
201+
overflow: hidden;
202+
}
203+
204+
.expressive-code .frame.has-title:not(.is-terminal) .header,
205+
.expressive-code .frame.is-terminal .header {
206+
border-bottom-color: var(--dusk-border);
207+
}
208+
209+
.expressive-code pre {
210+
background: var(--dusk-surface) !important;
211+
}
212+
213+
.sl-markdown-content table:not(:where(.not-content *)) {
214+
border: 1px solid var(--dusk-border);
215+
border-radius: var(--dusk-surface-radius);
216+
background: var(--dusk-surface);
217+
box-shadow: none;
218+
}
219+
220+
.sl-markdown-content :is(th, td):not(:where(.not-content *)) {
221+
border-bottom-color: var(--dusk-border);
222+
padding: 0.7rem 0.9rem;
223+
}
224+
225+
.sl-markdown-content :is(th:first-child, td:first-child):not(:where(.not-content *)) {
226+
padding-inline-start: 0.9rem;
227+
}
228+
229+
.sl-markdown-content :is(th:last-child, td:last-child):not(:where(.not-content *)) {
230+
padding-inline-end: 0.9rem;
231+
}
232+
233+
.sl-markdown-content th:not(:where(.not-content *)) {
234+
background: var(--dusk-surface-raised);
235+
font-weight: 500;
236+
}
237+
238+
.sl-markdown-content tr:last-child td:not(:where(.not-content *)) {
239+
border-bottom: 0;
240+
}
241+
242+
.sl-markdown-content img:not(:where(.not-content *)) {
243+
border: 1px solid var(--dusk-border);
244+
border-radius: var(--dusk-surface-radius);
245+
background: var(--dusk-surface);
246+
box-shadow: none;
247+
}
248+
249+
.sl-markdown-content details:not(:where(.not-content *)) {
250+
border: 1px solid var(--dusk-border);
251+
border-radius: var(--dusk-surface-radius);
252+
background: var(--dusk-surface);
253+
overflow: hidden;
254+
}
255+
256+
.sl-markdown-content details:not(:where(.not-content *))[open] {
257+
background: var(--dusk-surface-raised);
258+
}
259+
260+
.sl-markdown-content summary:not(:where(.not-content *)) {
261+
padding: 0.9rem 1rem;
262+
color: var(--sl-color-white);
263+
cursor: pointer;
264+
font-weight: 500;
265+
}
266+
267+
.sl-markdown-content details:not(:where(.not-content *)) > :not(summary) {
268+
margin-inline: 1rem;
269+
}
270+
271+
.sl-markdown-content details:not(:where(.not-content *)) > :last-child {
272+
margin-bottom: 1rem;
273+
}
274+
275+
.starlight-aside {
276+
border: 1px solid var(--dusk-border);
277+
border-inline-start-width: 3px;
278+
border-radius: var(--dusk-surface-radius);
279+
box-shadow: none;
280+
}
281+
282+
.starlight-aside__title {
283+
font-size: var(--sl-text-sm) !important;
284+
font-weight: 500 !important;
285+
letter-spacing: 0.04em;
286+
text-transform: uppercase;
287+
}
288+
289+
:root[data-theme="light"] .starlight-aside--note,
290+
:root[data-theme="light"] .starlight-aside--tip {
291+
background-color: rgba(113, 177, 255, 0.1);
292+
}
293+
294+
:root[data-theme="dark"] .starlight-aside--note,
295+
:root[data-theme="dark"] .starlight-aside--tip {
296+
background-color: rgba(113, 177, 255, 0.1);
297+
}
298+
103299
:root[data-theme="dark"] .starlight-aside--caution {
104300
background-color: rgba(255, 164, 35, 0.22);
105301
}
302+
303+
.pagination-links a {
304+
border-color: var(--dusk-border) !important;
305+
border-radius: var(--dusk-surface-radius) !important;
306+
background: var(--dusk-surface);
307+
box-shadow: none !important;
308+
transition:
309+
background 160ms ease,
310+
border-color 160ms ease,
311+
transform 120ms ease;
312+
}
313+
314+
.pagination-links a:hover {
315+
border-color: var(--dusk-border-strong) !important;
316+
background: var(--dusk-surface-raised);
317+
transform: translateY(-1px);
318+
}
319+
320+
.pagination-links .link-title {
321+
font-size: var(--sl-text-xl) !important;
322+
font-weight: 500;
323+
}
324+
325+
header button[aria-label="Search"],
326+
header button[aria-label="Menu"] {
327+
border-color: var(--dusk-border) !important;
328+
border-radius: var(--dusk-surface-radius) !important;
329+
background: var(--dusk-surface) !important;
330+
box-shadow: none !important;
331+
transition:
332+
background 160ms ease,
333+
border-color 160ms ease,
334+
transform 120ms ease;
335+
}
336+
337+
header button[aria-label="Search"]:hover,
338+
header button[aria-label="Menu"]:hover {
339+
border-color: var(--dusk-border-strong) !important;
340+
background: var(--dusk-surface-raised) !important;
341+
transform: translateY(-1px);
342+
}
343+
344+
dialog[aria-label="Search"] {
345+
border: 1px solid var(--dusk-border) !important;
346+
border-radius: var(--dusk-surface-radius) !important;
347+
background: var(--dusk-surface) !important;
348+
box-shadow: var(--dusk-shadow-soft) !important;
349+
}
350+
351+
dialog[aria-label="Search"]::backdrop {
352+
background: rgba(0, 0, 0, 0.62);
353+
backdrop-filter: blur(10px);
354+
}
355+
356+
@media (prefers-reduced-motion: reduce) {
357+
.sl-link-card,
358+
.sl-link-button,
359+
.action,
360+
.pagination-links a,
361+
header button[aria-label="Search"],
362+
header button[aria-label="Menu"] {
363+
transition: none;
364+
}
365+
366+
.sl-link-card:hover,
367+
.sl-link-button:hover,
368+
.action:hover,
369+
.pagination-links a:hover,
370+
header button[aria-label="Search"]:hover,
371+
header button[aria-label="Menu"]:hover {
372+
transform: none;
373+
}
374+
}

0 commit comments

Comments
 (0)