Skip to content

Commit 96a11ce

Browse files
Kasper Jungeclaude
authored and
Kasper Junge
committed
docs: add custom CSS to brand the docs site with violet-to-orange gradient
The docs site used the bare Material theme defaults with no visual customization. This adds custom CSS that creates a cohesive branded experience matching the CLI's violet-to-orange color scheme: gradient header bar, hover-lift card effects, branded link colors, polished CTA buttons, and dark mode support throughout. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 25ac98f commit 96a11ce

2 files changed

Lines changed: 174 additions & 0 deletions

File tree

‎docs/stylesheets/extra.css‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
/* Ralphify docs — custom styles
2+
Brand gradient: violet (#8B6CF0) → orange (#E06030)
3+
Matches the CLI banner colors */
4+
5+
/* ── Landing page hero ─────────────────────────────────────── */
6+
7+
/* Full-width gradient banner behind the hero text on the home page */
8+
.md-content[data-md-component="content"] .md-typeset > p:first-of-type {
9+
font-size: 1.15em;
10+
line-height: 1.6;
11+
}
12+
13+
/* Style the CTA buttons row */
14+
.md-typeset .md-button--primary {
15+
background: linear-gradient(135deg, #8B6CF0 0%, #A78BF5 100%);
16+
border-color: #8B6CF0;
17+
font-weight: 600;
18+
transition: transform 0.15s ease, box-shadow 0.15s ease;
19+
}
20+
21+
.md-typeset .md-button--primary:hover {
22+
background: linear-gradient(135deg, #7c5ce0 0%, #9878e5 100%);
23+
border-color: #7c5ce0;
24+
transform: translateY(-1px);
25+
box-shadow: 0 4px 12px rgba(139, 108, 240, 0.35);
26+
}
27+
28+
.md-typeset .md-button:not(.md-button--primary) {
29+
border-color: #8B6CF0;
30+
color: #8B6CF0;
31+
font-weight: 600;
32+
transition: transform 0.15s ease, background-color 0.15s ease;
33+
}
34+
35+
.md-typeset .md-button:not(.md-button--primary):hover {
36+
background-color: rgba(139, 108, 240, 0.08);
37+
transform: translateY(-1px);
38+
}
39+
40+
/* ── Feature cards ─────────────────────────────────────────── */
41+
42+
/* Lift cards on hover with a subtle shadow */
43+
.md-typeset .grid.cards > ul > li {
44+
transition: transform 0.2s ease, box-shadow 0.2s ease;
45+
border-radius: 8px;
46+
}
47+
48+
.md-typeset .grid.cards > ul > li:hover {
49+
transform: translateY(-3px);
50+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
51+
}
52+
53+
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li:hover {
54+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
55+
}
56+
57+
/* Give card icons a branded tint */
58+
.md-typeset .grid.cards .twemoji,
59+
.md-typeset .grid.cards .middle {
60+
color: #8B6CF0;
61+
}
62+
63+
[data-md-color-scheme="slate"] .md-typeset .grid.cards .twemoji,
64+
[data-md-color-scheme="slate"] .md-typeset .grid.cards .middle {
65+
color: #A78BF5;
66+
}
67+
68+
/* ── Code blocks ───────────────────────────────────────────── */
69+
70+
/* Softer border radius on code blocks */
71+
.md-typeset pre > code {
72+
border-radius: 6px;
73+
}
74+
75+
/* Terminal-style output blocks — distinguish from editable code */
76+
.md-typeset .highlight pre {
77+
border-radius: 6px;
78+
}
79+
80+
/* ── Admonitions ───────────────────────────────────────────── */
81+
82+
/* Slightly softer border radius */
83+
.md-typeset .admonition,
84+
.md-typeset details {
85+
border-radius: 6px;
86+
}
87+
88+
/* ── Header ────────────────────────────────────────────────── */
89+
90+
/* Subtle gradient on the header bar */
91+
.md-header {
92+
background: linear-gradient(90deg,
93+
rgba(139, 108, 240, 0.95) 0%,
94+
rgba(124, 77, 255, 0.95) 100%
95+
);
96+
}
97+
98+
/* ── Navigation tabs ───────────────────────────────────────── */
99+
100+
/* Active tab indicator matches the brand purple */
101+
.md-tabs__link--active {
102+
font-weight: 600;
103+
}
104+
105+
/* ── Content links ─────────────────────────────────────────── */
106+
107+
/* Branded link color */
108+
.md-typeset a:not(.md-button):not(.md-nav__link):not(.md-source):not(.headerlink) {
109+
color: #7c5ce0;
110+
}
111+
112+
[data-md-color-scheme="slate"] .md-typeset a:not(.md-button):not(.md-nav__link):not(.md-source):not(.headerlink) {
113+
color: #A78BF5;
114+
}
115+
116+
/* ── Landing page specifics ────────────────────────────────── */
117+
118+
/* Banner image on the home page */
119+
.md-typeset > p:first-child img {
120+
max-width: 420px;
121+
margin: 1.5rem auto 0;
122+
display: block;
123+
}
124+
125+
/* Home page tagline */
126+
.md-typeset > p:nth-of-type(1) strong code {
127+
background: linear-gradient(135deg, #8B6CF0 0%, #E87B4A 100%);
128+
-webkit-background-clip: text;
129+
background-clip: text;
130+
-webkit-text-fill-color: transparent;
131+
font-weight: 700;
132+
}
133+
134+
/* ── Horizontal rules as section dividers ──────────────────── */
135+
136+
.md-typeset hr {
137+
border-top: 2px solid rgba(139, 108, 240, 0.15);
138+
margin: 2.5rem 0;
139+
}
140+
141+
[data-md-color-scheme="slate"] .md-typeset hr {
142+
border-top: 2px solid rgba(167, 139, 245, 0.2);
143+
}
144+
145+
/* ── Footer ────────────────────────────────────────────────── */
146+
147+
.md-footer {
148+
background: linear-gradient(90deg,
149+
rgba(139, 108, 240, 0.08) 0%,
150+
rgba(232, 123, 74, 0.06) 100%
151+
);
152+
}
153+
154+
[data-md-color-scheme="slate"] .md-footer {
155+
background: rgba(0, 0, 0, 0.3);
156+
}
157+
158+
/* ── Scrollbar (Webkit) ────────────────────────────────────── */
159+
160+
::-webkit-scrollbar {
161+
width: 8px;
162+
}
163+
164+
::-webkit-scrollbar-thumb {
165+
background: rgba(139, 108, 240, 0.3);
166+
border-radius: 4px;
167+
}
168+
169+
::-webkit-scrollbar-thumb:hover {
170+
background: rgba(139, 108, 240, 0.5);
171+
}

‎mkdocs.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,9 @@ plugins:
6969
separator: '[\s\-\.]+'
7070
lang: en
7171

72+
extra_css:
73+
- stylesheets/extra.css
74+
7275
extra:
7376
social:
7477
- icon: fontawesome/brands/github

0 commit comments

Comments
 (0)