Skip to content

Commit facf9a9

Browse files
captjtcaptjt
committed
docs: retro
1 parent b2dd56e commit facf9a9

1 file changed

Lines changed: 318 additions & 9 deletions

File tree

‎docs/src/styles/custom.css‎

Lines changed: 318 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,321 @@
1-
/* Custom styles for DevProc docs */
2-
:root {
3-
--sl-color-accent-low: #1a365d;
4-
--sl-color-accent: #3182ce;
5-
--sl-color-accent-high: #90cdf4;
1+
/* Custom styles for DevProc docs - 90s Retro Video Game Vibes */
2+
/* Dark mode only - the retro CRT aesthetic requires darkness */
3+
4+
/* Import a retro pixel font */
5+
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap");
6+
7+
/* Force dark mode always */
8+
:root,
9+
:root[data-theme="light"],
10+
:root[data-theme="dark"] {
11+
color-scheme: dark;
12+
13+
/* Neon arcade colors */
14+
--sl-color-accent-low: #1a0a2e;
15+
--sl-color-accent: #ff00ff;
16+
--sl-color-accent-high: #00ffff;
17+
18+
/* Dark CRT-style background */
19+
--sl-color-bg: #0a0a0a;
20+
--sl-color-bg-nav: #0d0d1a;
21+
--sl-color-bg-sidebar: #0d0d1a;
22+
--sl-color-bg-inline-code: #1a1a2e;
23+
24+
/* Retro text colors */
25+
--sl-color-text: #00ff00;
26+
--sl-color-text-accent: #ff00ff;
27+
28+
/* Neon borders */
29+
--sl-color-hairline: #ff00ff;
30+
--sl-color-hairline-light: #00ffff33;
31+
32+
/* Force dark theme colors */
33+
--sl-color-white: #00ffff;
34+
--sl-color-gray-1: #e0e0e0;
35+
--sl-color-gray-2: #c0c0c0;
36+
--sl-color-gray-3: #808080;
37+
--sl-color-gray-4: #404040;
38+
--sl-color-gray-5: #202020;
39+
--sl-color-gray-6: #101010;
40+
--sl-color-black: #0a0a0a;
41+
}
42+
43+
/* Hide the theme toggle since we only support dark */
44+
starlight-theme-select,
45+
[data-select-theme] {
46+
display: none !important;
47+
}
48+
49+
/* Retro pixel font for headings */
50+
h1,
51+
h2,
52+
h3,
53+
h4,
54+
h5,
55+
h6,
56+
.site-title {
57+
font-family: "Press Start 2P", monospace !important;
58+
text-transform: uppercase;
59+
letter-spacing: 2px;
60+
text-shadow:
61+
3px 3px 0px #ff00ff,
62+
-1px -1px 0px #00ffff;
63+
}
64+
65+
/* VT323 for body text - readable but retro */
66+
body,
67+
p,
68+
li,
69+
a,
70+
span,
71+
.sl-markdown-content {
72+
font-family: "VT323", monospace !important;
73+
font-size: 1.2rem;
74+
letter-spacing: 0.5px;
75+
}
76+
77+
/* Scanline effect overlay */
78+
body::before {
79+
content: "";
80+
position: fixed;
81+
top: 0;
82+
left: 0;
83+
width: 100%;
84+
height: 100%;
85+
pointer-events: none;
86+
background: repeating-linear-gradient(
87+
0deg,
88+
rgba(0, 0, 0, 0.15),
89+
rgba(0, 0, 0, 0.15) 1px,
90+
transparent 1px,
91+
transparent 2px
92+
);
93+
z-index: 9999;
94+
}
95+
96+
/* CRT screen glow effect */
97+
body::after {
98+
content: "";
99+
position: fixed;
100+
top: 0;
101+
left: 0;
102+
width: 100%;
103+
height: 100%;
104+
pointer-events: none;
105+
background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
106+
z-index: 9998;
107+
}
108+
109+
/* Neon glow on links */
110+
a {
111+
color: #00ffff !important;
112+
text-decoration: none;
113+
transition: all 0.3s ease;
114+
}
115+
116+
a:hover {
117+
color: #ff00ff !important;
118+
text-shadow:
119+
0 0 5px #ff00ff,
120+
0 0 10px #ff00ff,
121+
0 0 20px #ff00ff;
122+
}
123+
124+
/* Retro button styles */
125+
button,
126+
.sl-button,
127+
[data-scope="button"] {
128+
font-family: "Press Start 2P", monospace !important;
129+
font-size: 0.7rem;
130+
background: linear-gradient(180deg, #ff00ff 0%, #6b0080 100%);
131+
border: 3px solid #00ffff;
132+
box-shadow:
133+
4px 4px 0px #000,
134+
0 0 10px #ff00ff;
135+
text-transform: uppercase;
136+
transition: all 0.1s ease;
137+
}
138+
139+
button:hover,
140+
.sl-button:hover {
141+
transform: translate(2px, 2px);
142+
box-shadow:
143+
2px 2px 0px #000,
144+
0 0 20px #00ffff;
145+
}
146+
147+
/* Code blocks with retro terminal feel */
148+
pre,
149+
code {
150+
font-family: "VT323", monospace !important;
151+
font-size: 1.3rem !important;
152+
line-height: 1.5 !important;
153+
background: #0a0a0a !important;
154+
border: 2px solid #00ff00 !important;
155+
box-shadow:
156+
inset 0 0 10px rgba(0, 255, 0, 0.2),
157+
0 0 5px rgba(0, 255, 0, 0.3);
158+
}
159+
160+
code {
161+
color: #00ff00 !important;
162+
}
163+
164+
/* Pixelated borders for cards/panels - exclude tables and their wrappers */
165+
.card,
166+
article {
167+
border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='2' height='2' fill='%23ff00ff'/%3E%3Crect x='2' width='2' height='2' fill='%2300ffff'/%3E%3Crect x='4' width='2' height='2' fill='%23ff00ff'/%3E%3Crect y='2' width='2' height='2' fill='%2300ffff'/%3E%3Crect x='2' y='2' width='2' height='2' fill='transparent'/%3E%3Crect x='4' y='2' width='2' height='2' fill='%2300ffff'/%3E%3Crect y='4' width='2' height='2' fill='%23ff00ff'/%3E%3Crect x='2' y='4' width='2' height='2' fill='%2300ffff'/%3E%3Crect x='4' y='4' width='2' height='2' fill='%23ff00ff'/%3E%3C/svg%3E")
168+
2 round;
169+
}
170+
171+
/* Sidebar styling */
172+
nav.sidebar {
173+
border-right: 3px solid #ff00ff;
174+
box-shadow: 2px 0 10px rgba(255, 0, 255, 0.3);
175+
}
176+
177+
/* Selection highlight */
178+
::selection {
179+
background: #ff00ff;
180+
color: #000;
181+
}
182+
183+
/* Animated title glow */
184+
.site-title {
185+
animation: neonPulse 2s ease-in-out infinite alternate;
186+
}
187+
188+
@keyframes neonPulse {
189+
from {
190+
text-shadow:
191+
0 0 5px #ff00ff,
192+
0 0 10px #ff00ff,
193+
0 0 20px #ff00ff,
194+
3px 3px 0px #00ffff;
195+
}
196+
to {
197+
text-shadow:
198+
0 0 10px #00ffff,
199+
0 0 20px #00ffff,
200+
0 0 40px #00ffff,
201+
3px 3px 0px #ff00ff;
202+
}
203+
}
204+
205+
/* Blinking cursor effect for headings */
206+
h1::after {
207+
content: "_";
208+
animation: blink 1s step-end infinite;
209+
}
210+
211+
@keyframes blink {
212+
50% {
213+
opacity: 0;
214+
}
215+
}
216+
217+
/* Star field background */
218+
.main-frame,
219+
main {
220+
background:
221+
radial-gradient(white 1px, transparent 1px), radial-gradient(white 1px, transparent 1px),
222+
linear-gradient(180deg, #0a0a1a 0%, #1a0a2e 100%);
223+
background-size:
224+
100px 100px,
225+
50px 50px,
226+
100% 100%;
227+
background-position:
228+
0 0,
229+
25px 25px,
230+
0 0;
231+
}
232+
233+
/* Retro scrollbar */
234+
::-webkit-scrollbar {
235+
width: 12px;
236+
background: #0a0a0a;
237+
}
238+
239+
::-webkit-scrollbar-track {
240+
background: #1a1a2e;
241+
border: 2px solid #ff00ff;
242+
}
243+
244+
::-webkit-scrollbar-thumb {
245+
background: linear-gradient(180deg, #ff00ff, #00ffff);
246+
border: 2px solid #000;
247+
}
248+
249+
::-webkit-scrollbar-thumb:hover {
250+
background: linear-gradient(180deg, #00ffff, #ff00ff);
251+
}
252+
253+
/* Table styling */
254+
table {
255+
border: 3px solid #00ffff !important;
256+
border-collapse: collapse !important;
257+
border-image: none !important;
258+
box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
259+
width: 100% !important;
260+
margin: 1.5rem 0 !important;
261+
display: table !important;
262+
table-layout: auto !important;
263+
}
264+
265+
/* Reset any wrapper div issues */
266+
.sl-markdown-content > div:has(table),
267+
.sl-markdown-content table {
268+
width: 100% !important;
269+
max-width: 100% !important;
270+
overflow-x: auto !important;
271+
border-image: none !important;
272+
}
273+
274+
th {
275+
background: linear-gradient(180deg, #ff00ff, #6b0080) !important;
276+
font-family: "VT323", monospace !important;
277+
font-size: 1.2rem !important;
278+
text-transform: uppercase;
279+
padding: 0.75rem 1rem !important;
280+
text-align: left !important;
281+
color: #fff !important;
282+
border-bottom: 2px solid #00ffff !important;
283+
}
284+
285+
td {
286+
font-family: "VT323", monospace !important;
287+
font-size: 1.2rem !important;
288+
padding: 0.6rem 1rem !important;
289+
border-bottom: 1px solid #ff00ff44 !important;
290+
color: #00ff00 !important;
291+
}
292+
293+
/* Inline code in tables */
294+
td code {
295+
background: #1a1a2e !important;
296+
border: 1px solid #00ffff !important;
297+
padding: 0.15rem 0.4rem !important;
298+
font-size: 1.1rem !important;
299+
color: #00ffff !important;
300+
}
301+
302+
tr:hover {
303+
background: rgba(255, 0, 255, 0.15) !important;
304+
}
305+
306+
tr:last-child td {
307+
border-bottom: none !important;
308+
}
309+
310+
/* Search input styling */
311+
input,
312+
[type="search"] {
313+
background: #0a0a0a !important;
314+
color: #00ff00 !important;
315+
border: 2px solid #00ffff !important;
316+
font-family: "VT323", monospace !important;
6317
}
7318

8-
:root[data-theme="light"] {
9-
--sl-color-accent-low: #bee3f8;
10-
--sl-color-accent: #3182ce;
11-
--sl-color-accent-high: #1a365d;
319+
input::placeholder {
320+
color: #00ff0088 !important;
12321
}

0 commit comments

Comments
 (0)