Skip to content

Commit 06ea945

Browse files
web-flowweb-flow
committed
feat: modern UI — system fonts, gradient hero, rounded cards, hover effects; fix head_custom.html name
1 parent ba25583 commit 06ea945

3 files changed

Lines changed: 313 additions & 0 deletions

File tree

_includes/head-custom.html renamed to _includes/head_custom.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,6 @@
2828

2929
<!-- Favicon -->
3030
<link rel="icon" href="{{ '/assets/images/favicon.svg' | relative_url }}" type="image/svg+xml">
31+
32+
<!-- Modern UI overrides -->
33+
<link rel="stylesheet" href="{{ '/assets/css/custom.css' | relative_url }}">

‎_sass/color_schemes/disttopic-dark.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,12 @@ $ctp-base: #1e1e2e;
3131
$ctp-mantle: #181825;
3232
$ctp-crust: #11111b;
3333

34+
// Typography
35+
$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
36+
$mono-font-family: "SF Mono", ui-monospace, "Cascadia Code", SFMono-Regular, Menlo, Consolas, monospace;
37+
$root-font-size: 16px;
38+
$body-line-height: 1.75;
39+
3440
// just-the-docs color scheme override
3541
$body-background-color: $ctp-base;
3642
$sidebar-color: $ctp-mantle;

‎assets/css/custom.css‎

Lines changed: 304 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,304 @@
1+
/* ================================================================
2+
DistTopic — Modern UI Overrides
3+
Applied on top of Just the Docs (theme: just-the-docs)
4+
Color palette: Catppuccin Mocha
5+
================================================================ */
6+
7+
/* ── CSS Custom Properties ──────────────────────────────────────── */
8+
:root {
9+
--dt-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable",
10+
"Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
11+
--dt-font-mono: "SF Mono", ui-monospace, "Cascadia Code", "Fira Code",
12+
SFMono-Regular, Menlo, Consolas, monospace;
13+
14+
/* Catppuccin Mocha */
15+
--ctp-base: #1e1e2e;
16+
--ctp-mantle: #181825;
17+
--ctp-crust: #11111b;
18+
--ctp-surface0: #313244;
19+
--ctp-surface1: #45475a;
20+
--ctp-surface2: #585b70;
21+
--ctp-overlay0: #6c7086;
22+
--ctp-overlay1: #7f849c;
23+
--ctp-text: #cdd6f4;
24+
--ctp-subtext0: #a6adc8;
25+
--ctp-subtext1: #bac2de;
26+
--ctp-blue: #89b4fa;
27+
--ctp-lavender: #b4befe;
28+
--ctp-mauve: #cba6f7;
29+
--ctp-green: #a6e3a1;
30+
--ctp-teal: #94e2d5;
31+
--ctp-sky: #89dceb;
32+
--ctp-peach: #fab387;
33+
--ctp-red: #f38ba8;
34+
--ctp-yellow: #f9e2af;
35+
}
36+
37+
/* ── Base ─────────────────────────────────────────────────────── */
38+
html { scroll-behavior: smooth; }
39+
40+
body {
41+
font-family: var(--dt-font-sans);
42+
font-size: 16px;
43+
line-height: 1.75;
44+
-webkit-font-smoothing: antialiased;
45+
-moz-osx-font-smoothing: grayscale;
46+
text-rendering: optimizeLegibility;
47+
}
48+
49+
/* ── Typography ──────────────────────────────────────────────── */
50+
h1, h2, h3, h4, h5, h6 {
51+
font-family: var(--dt-font-sans);
52+
font-weight: 700;
53+
letter-spacing: -0.025em;
54+
line-height: 1.3;
55+
}
56+
57+
/* Hero gradient heading (fs-9 on homepage) */
58+
.fs-9 {
59+
font-size: clamp(2rem, 5vw, 3.25rem) !important;
60+
font-weight: 800 !important;
61+
letter-spacing: -0.04em !important;
62+
line-height: 1.1 !important;
63+
background: linear-gradient(
64+
135deg,
65+
var(--ctp-lavender) 0%,
66+
var(--ctp-blue) 50%,
67+
var(--ctp-teal) 100%
68+
);
69+
-webkit-background-clip: text;
70+
-webkit-text-fill-color: transparent;
71+
background-clip: text;
72+
margin-bottom: 0.25rem !important;
73+
}
74+
75+
.fs-6.fw-300 {
76+
font-size: 1.15rem !important;
77+
font-weight: 400 !important;
78+
color: var(--ctp-subtext1) !important;
79+
line-height: 1.6 !important;
80+
margin-top: 0.75rem !important;
81+
margin-bottom: 1.5rem !important;
82+
}
83+
84+
/* ── Links ────────────────────────────────────────────────────── */
85+
a {
86+
transition: color 0.15s ease, opacity 0.15s ease;
87+
text-decoration-thickness: 1px;
88+
text-underline-offset: 3px;
89+
}
90+
.main-content a:hover { opacity: 0.8; }
91+
92+
/* ── Code & Monospace ─────────────────────────────────────────── */
93+
code, pre, kbd, samp {
94+
font-family: var(--dt-font-mono) !important;
95+
font-size: 0.875em;
96+
}
97+
98+
/* Code blocks — rounded card look */
99+
div.highlighter-rouge,
100+
figure.highlight {
101+
border-radius: 10px !important;
102+
border: 1px solid var(--ctp-surface1) !important;
103+
overflow: hidden;
104+
margin: 1.25rem 0 !important;
105+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
106+
}
107+
108+
pre.highlight {
109+
padding: 1.25rem 1.5rem !important;
110+
border-radius: 0 !important;
111+
border: none !important;
112+
margin: 0 !important;
113+
line-height: 1.6;
114+
}
115+
116+
/* Inline code */
117+
p code.highlighter-rouge,
118+
li code.highlighter-rouge,
119+
td code.highlighter-rouge,
120+
h1 code, h2 code, h3 code {
121+
border-radius: 5px !important;
122+
padding: 0.15em 0.45em !important;
123+
font-size: 0.82em !important;
124+
border: 1px solid var(--ctp-surface1) !important;
125+
}
126+
127+
/* ── Tables ───────────────────────────────────────────────────── */
128+
.main-content table {
129+
border-radius: 10px;
130+
overflow: hidden;
131+
border: 1px solid var(--ctp-surface1) !important;
132+
border-collapse: separate !important;
133+
border-spacing: 0 !important;
134+
width: 100%;
135+
margin: 1.5rem 0;
136+
font-size: 0.9rem;
137+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
138+
}
139+
140+
.main-content th {
141+
background: var(--ctp-mantle) !important;
142+
font-weight: 700;
143+
font-size: 0.73rem !important;
144+
text-transform: uppercase !important;
145+
letter-spacing: 0.07em !important;
146+
padding: 0.75rem 1.1rem !important;
147+
color: var(--ctp-subtext1) !important;
148+
border-bottom: 1px solid var(--ctp-surface1) !important;
149+
}
150+
151+
.main-content td {
152+
padding: 0.7rem 1.1rem !important;
153+
border-bottom: 1px solid var(--ctp-surface0) !important;
154+
vertical-align: middle;
155+
}
156+
157+
.main-content tr:last-child td { border-bottom: none !important; }
158+
159+
.main-content tbody tr {
160+
transition: background-color 0.1s ease;
161+
}
162+
.main-content tbody tr:hover td {
163+
background: rgba(137, 180, 250, 0.05) !important;
164+
}
165+
166+
/* ── Buttons ──────────────────────────────────────────────────── */
167+
.btn {
168+
border-radius: 8px !important;
169+
font-family: var(--dt-font-sans) !important;
170+
font-weight: 600 !important;
171+
font-size: 0.875rem !important;
172+
letter-spacing: 0.01em;
173+
padding: 0.5rem 1.1rem !important;
174+
transition: all 0.15s ease !important;
175+
}
176+
177+
.btn-primary {
178+
background: linear-gradient(
179+
135deg,
180+
var(--ctp-mauve) 0%,
181+
var(--ctp-blue) 100%
182+
) !important;
183+
border-color: transparent !important;
184+
color: var(--ctp-crust) !important;
185+
}
186+
187+
.btn-primary:hover {
188+
transform: translateY(-2px) !important;
189+
box-shadow: 0 6px 20px rgba(137, 180, 250, 0.35) !important;
190+
opacity: 1 !important;
191+
}
192+
193+
.btn:not(.btn-primary):hover {
194+
border-color: var(--ctp-blue) !important;
195+
color: var(--ctp-blue) !important;
196+
transform: translateY(-1px) !important;
197+
}
198+
199+
/* ── Navigation ───────────────────────────────────────────────── */
200+
.nav-list .nav-list-item .nav-list-link {
201+
border-radius: 6px !important;
202+
font-size: 0.875rem;
203+
transition: background-color 0.1s ease, color 0.1s ease;
204+
padding: 0.3rem 0.6rem !important;
205+
}
206+
207+
/* ── Sidebar ──────────────────────────────────────────────────── */
208+
.side-bar {
209+
border-right: 1px solid var(--ctp-surface0) !important;
210+
}
211+
212+
.site-title {
213+
font-weight: 800 !important;
214+
font-size: 1.05rem !important;
215+
letter-spacing: -0.025em !important;
216+
}
217+
218+
/* ── Main content ─────────────────────────────────────────────── */
219+
.main-content h1 { margin-top: 0; }
220+
221+
.main-content h2 {
222+
padding-top: 1.5rem;
223+
border-top: 1px solid var(--ctp-surface0);
224+
margin-top: 2.5rem;
225+
}
226+
227+
/* ── HR ───────────────────────────────────────────────────────── */
228+
.main-content hr {
229+
border: none !important;
230+
border-top: 1px solid var(--ctp-surface1) !important;
231+
margin: 2.5rem 0 !important;
232+
}
233+
234+
/* ── Blockquotes / Callouts ───────────────────────────────────── */
235+
.main-content blockquote {
236+
border-radius: 8px;
237+
border-left: 3px solid var(--ctp-blue);
238+
background: rgba(137, 180, 250, 0.07);
239+
padding: 0.9rem 1.25rem;
240+
margin: 1.5rem 0;
241+
color: var(--ctp-subtext1);
242+
}
243+
244+
/* just-the-docs callout modifiers */
245+
.main-content blockquote.note { border-left-color: var(--ctp-blue); background: rgba(137,180,250,0.07); }
246+
.main-content blockquote.warning { border-left-color: var(--ctp-yellow); background: rgba(249,226,175,0.07); }
247+
.main-content blockquote.important{ border-left-color: var(--ctp-mauve); background: rgba(203,166,247,0.07); }
248+
249+
/* ── Labels ───────────────────────────────────────────────────── */
250+
.label, .label-green, .label-yellow, .label-red, .label-blue, .label-purple {
251+
border-radius: 5px !important;
252+
font-size: 0.7rem !important;
253+
font-weight: 700 !important;
254+
letter-spacing: 0.06em !important;
255+
padding: 0.2em 0.6em !important;
256+
text-transform: uppercase !important;
257+
}
258+
259+
/* ── Search ───────────────────────────────────────────────────── */
260+
.search-input {
261+
border-radius: 8px !important;
262+
font-family: var(--dt-font-sans) !important;
263+
font-size: 0.9rem;
264+
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
265+
}
266+
267+
.search-input:focus {
268+
border-color: var(--ctp-blue) !important;
269+
box-shadow: 0 0 0 3px rgba(137, 180, 250, 0.15) !important;
270+
outline: none !important;
271+
}
272+
273+
/* ── Breadcrumbs ──────────────────────────────────────────────── */
274+
.breadcrumb-nav-list-item {
275+
font-size: 0.8rem !important;
276+
}
277+
278+
/* ── Footer ───────────────────────────────────────────────────── */
279+
.site-footer {
280+
border-top: 1px solid var(--ctp-surface0) !important;
281+
font-size: 0.825rem !important;
282+
color: var(--ctp-overlay1) !important;
283+
}
284+
285+
.site-footer a {
286+
color: var(--ctp-blue) !important;
287+
}
288+
289+
/* ── Top nav bar ──────────────────────────────────────────────── */
290+
.main-header {
291+
border-bottom: 1px solid var(--ctp-surface0) !important;
292+
box-shadow: 0 1px 0 var(--ctp-surface0) !important;
293+
}
294+
295+
/* ── Badges/images ────────────────────────────────────────────── */
296+
.main-content img {
297+
border-radius: 4px;
298+
}
299+
300+
/* ── Page content spacing ─────────────────────────────────────── */
301+
.main-content {
302+
font-size: 1rem;
303+
padding-top: 1.5rem;
304+
}

0 commit comments

Comments
 (0)