Skip to content

Commit fa9e007

Browse files
matthew-on-gitclaude
matthew-on-git
and
claude
committed
feat(theme): dark terminal/hacker theme for devrail.dev
Replace default blue Docsy theme with dark terminal aesthetic: - Near-black backgrounds (#0d0d1a, #111122) - Terminal green (#00e5a0) primary accent with cyan secondary - JetBrains Mono monospace font throughout - Monokai syntax highlighting - Blinking cursor on hero title - Custom scrollbar, selection highlight, and glow effects Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent e36ade8 commit fa9e007

3 files changed

Lines changed: 309 additions & 3 deletions

File tree

‎assets/scss/_styles_project.scss‎

Lines changed: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,275 @@
1+
// DevRail — Dark Terminal Custom Styles
2+
3+
// --- Global ---
4+
body {
5+
background-color: #0d0d1a;
6+
color: #c8d6e5;
7+
}
8+
9+
// --- Navbar ---
10+
.td-navbar {
11+
background: rgba(13, 13, 26, 0.95) !important;
12+
backdrop-filter: blur(10px);
13+
border-bottom: 1px solid rgba(0, 229, 160, 0.15);
14+
15+
.navbar-brand {
16+
color: #00e5a0 !important;
17+
text-transform: uppercase;
18+
letter-spacing: 0.15em;
19+
font-weight: 700;
20+
}
21+
22+
.nav-link {
23+
color: #c8d6e5 !important;
24+
text-transform: uppercase;
25+
letter-spacing: 0.08em;
26+
font-size: 0.85rem;
27+
28+
&:hover,
29+
&.active {
30+
color: #00e5a0 !important;
31+
}
32+
}
33+
}
34+
35+
// --- Hero cover ---
36+
.td-cover-block {
37+
background: linear-gradient(
38+
135deg,
39+
#0d0d1a 0%,
40+
#111122 40%,
41+
#0a1628 100%
42+
) !important;
43+
border-bottom: 1px solid rgba(0, 229, 160, 0.2);
44+
45+
.display-1,
46+
.display-2,
47+
.display-3,
48+
h1 {
49+
color: #00e5a0 !important;
50+
text-shadow: 0 0 30px rgba(0, 229, 160, 0.3);
51+
}
52+
53+
p,
54+
.lead {
55+
color: #c8d6e5 !important;
56+
}
57+
}
58+
59+
// --- Content sections ---
60+
.td-box {
61+
background-color: #0d0d1a;
62+
color: #c8d6e5;
63+
64+
h2,
65+
h3,
66+
h4 {
67+
color: #00e5a0;
68+
}
69+
70+
a {
71+
color: #00e5a0;
72+
73+
&:hover {
74+
color: #0ff;
75+
}
76+
}
77+
}
78+
79+
// Alternate sections
80+
.td-box--primary,
81+
.td-box--dark {
82+
background-color: #111122 !important;
83+
color: #c8d6e5 !important;
84+
}
85+
86+
.td-box--light,
87+
.td-box--white,
88+
.td-box--0,
89+
.td-box--4 {
90+
background-color: #0d0d1a !important;
91+
color: #c8d6e5 !important;
92+
}
93+
94+
.td-box--secondary,
95+
.td-box--1 {
96+
background-color: #111122 !important;
97+
color: #c8d6e5 !important;
98+
}
99+
100+
// --- Code blocks ---
101+
pre {
102+
background-color: #111122 !important;
103+
border: 1px solid rgba(0, 229, 160, 0.15);
104+
border-radius: 4px;
105+
color: #c8d6e5;
106+
107+
code {
108+
color: #c8d6e5;
109+
}
110+
}
111+
112+
code {
113+
color: #00e5a0;
114+
background-color: rgba(0, 229, 160, 0.08);
115+
padding: 0.15em 0.35em;
116+
border-radius: 3px;
117+
}
118+
119+
pre code {
120+
background-color: transparent;
121+
padding: 0;
122+
}
123+
124+
// --- Blockquotes (used for agent prompts) ---
125+
blockquote {
126+
border-left: 3px solid #00e5a0;
127+
background-color: rgba(0, 229, 160, 0.05);
128+
padding: 1rem 1.5rem;
129+
margin: 1rem 0;
130+
color: #c8d6e5;
131+
132+
p {
133+
margin-bottom: 0.5rem;
134+
}
135+
}
136+
137+
// --- Tables ---
138+
table {
139+
color: #c8d6e5;
140+
141+
th {
142+
background-color: #111122;
143+
color: #00e5a0;
144+
border-color: rgba(0, 229, 160, 0.2);
145+
}
146+
147+
td {
148+
border-color: rgba(200, 214, 229, 0.1);
149+
}
150+
151+
tr:hover td {
152+
background-color: rgba(0, 229, 160, 0.03);
153+
}
154+
}
155+
156+
// --- Sidebar ---
157+
.td-sidebar-nav {
158+
.td-sidebar-link {
159+
color: #8892a0;
160+
161+
&:hover,
162+
&.active {
163+
color: #00e5a0 !important;
164+
}
165+
166+
&.td-sidebar-link__page {
167+
color: #8892a0;
168+
}
169+
}
170+
}
171+
172+
.td-sidebar {
173+
border-right: 1px solid rgba(0, 229, 160, 0.1);
174+
}
175+
176+
// --- Feature blocks (homepage) ---
177+
.td-box .feature-icon {
178+
color: #00e5a0;
179+
}
180+
181+
.td-box [class*="fa-"] {
182+
color: #00e5a0;
183+
}
184+
185+
// --- Footer ---
186+
footer {
187+
background-color: #0a0a16 !important;
188+
border-top: 1px solid rgba(0, 229, 160, 0.15);
189+
color: #6b7280;
190+
191+
a {
192+
color: #00e5a0;
193+
194+
&:hover {
195+
color: #0ff;
196+
}
197+
}
198+
}
199+
200+
// --- TOC (table of contents) ---
201+
.td-toc {
202+
border-left: 1px solid rgba(0, 229, 160, 0.1);
203+
204+
a {
205+
color: #8892a0;
206+
207+
&:hover {
208+
color: #00e5a0;
209+
}
210+
}
211+
212+
.td-heading-self-link {
213+
color: rgba(0, 229, 160, 0.4);
214+
}
215+
}
216+
217+
// --- Breadcrumbs ---
218+
.breadcrumb-item {
219+
color: #6b7280;
220+
221+
a {
222+
color: #8892a0;
223+
224+
&:hover {
225+
color: #00e5a0;
226+
}
227+
}
228+
229+
&.active {
230+
color: #c8d6e5;
231+
}
232+
}
233+
234+
// --- Scrollbar (subtle) ---
235+
::-webkit-scrollbar {
236+
width: 8px;
237+
height: 8px;
238+
}
239+
240+
::-webkit-scrollbar-track {
241+
background: #0d0d1a;
242+
}
243+
244+
::-webkit-scrollbar-thumb {
245+
background: #1e1e2e;
246+
border-radius: 4px;
247+
248+
&:hover {
249+
background: #2a2a3e;
250+
}
251+
}
252+
253+
// --- Selection highlight ---
254+
::selection {
255+
background-color: rgba(0, 229, 160, 0.3);
256+
color: #fff;
257+
}
258+
259+
// --- Terminal cursor blink on hero title ---
260+
.td-cover-block h1::after {
261+
content: "_";
262+
animation: blink 1s step-end infinite;
263+
color: #00e5a0;
264+
}
265+
266+
@keyframes blink {
267+
50% {
268+
opacity: 0;
269+
}
270+
}
271+
272+
// --- Link-down arrow ---
273+
.td-cover-block .td-arrow-down::before {
274+
color: #00e5a0;
275+
}

‎assets/scss/_variables_project.scss‎

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,33 @@
1-
// DevRail custom SCSS variables
2-
// Override Docsy theme defaults here if needed
1+
// DevRail — Dark Terminal Theme
2+
// Override Docsy defaults for a hacker/terminal aesthetic
3+
4+
// --- Color palette ---
5+
$primary: #00e5a0; // Terminal green (main accent)
6+
$secondary: #0ff; // Cyan (secondary accent)
7+
$success: #00e5a0; // Green
8+
$info: #1a1a2e; // Deep navy (backgrounds)
9+
$warning: #f5a623; // Amber
10+
$danger: #ff3e3e; // Red
11+
$light: #1e1e2e; // Dark surface
12+
$dark: #0d0d1a; // Near-black
13+
14+
$code-color: #00e5a0;
15+
$link-color: #00e5a0;
16+
$link-shade-percentage: 20%;
17+
18+
// Override Bootstrap body colors for dark-first
19+
$body-bg: #0d0d1a;
20+
$body-color: #c8d6e5;
21+
22+
// --- Docsy box colors (homepage sections) ---
23+
$td-box-colors: #0d0d1a, #111122, #0d0d1a, #111122, #0d0d1a, #111122,
24+
#0d0d1a, #111122, #0d0d1a, #111122, #0d0d1a, #111122, #0d0d1a;
25+
26+
// --- Typography ---
27+
$td-enable-google-fonts: true;
28+
$google_font_name: "JetBrains Mono";
29+
$google_font_family: "JetBrains+Mono:300,400,500,700";
30+
31+
// Use monospace for everything — terminal aesthetic
32+
$font-family-base: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas,
33+
"Liberation Mono", "Courier New", monospace;

‎hugo.toml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ languageCode = "en-us"
2929
[markup.goldmark.renderer]
3030
unsafe = true
3131
[markup.highlight]
32-
style = "tango"
32+
style = "monokai"
3333
guessSyntax = false
3434
lineNumbersInTable = true
3535

0 commit comments

Comments
 (0)