Skip to content

Commit 2042bac

Browse files
blackopsreplblackopsrepl
committed
feat: redesign site with snake-scale green theme and more modern ui
- Add gradient green sections (dark to pale) across home/about pages - Create macOS-style terminal cards for code blocks - Add dark green navbar with mint green menu items - Implement bouncing scroll arrows and triangle transitions - Add monokai syntax highlighting with dark emerald background - Swap home/about content, add feature grid to about page
1 parent f4f8a90 commit 2042bac

File tree

6 files changed

+480
-37
lines changed

6 files changed

+480
-37
lines changed

‎assets/scss/_styles_project.scss‎

Lines changed: 302 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
1+
/*
2+
Style overrides - loaded after theme styles
3+
*/
4+
5+
@import "syntax";
6+
7+
// Snake scale green shades for page sections
8+
$scale-dark: #064e3b; // darkest green
9+
$scale-medium: #047857; // medium green
10+
$scale-light: #10b981; // primary green
11+
$scale-pale: #34d399; // lighter green
12+
13+
// Cover block - darkest scale
14+
.td-cover-block {
15+
background-color: $scale-dark !important;
16+
color: #ffffff !important;
17+
}
18+
19+
// Box sections with snake scale colors (only numbered boxes)
20+
.td-box--1,
21+
.td-box--2 {
22+
background-color: $scale-medium !important;
23+
color: #ffffff !important;
24+
25+
h1, h2, h3, h4, h5, h6, p, li, td, th {
26+
color: #ffffff !important;
27+
}
28+
29+
a {
30+
color: #ffffff !important;
31+
text-decoration: underline;
32+
33+
&:hover {
34+
color: #ecfdf5 !important;
35+
}
36+
}
37+
}
38+
39+
.td-box--1 {
40+
background-color: $scale-medium !important;
41+
}
42+
43+
.td-box--2 {
44+
background-color: $scale-light !important;
45+
position: relative;
46+
}
47+
48+
.td-box--3 {
49+
background-color: $scale-pale !important;
50+
color: #064e3b !important;
51+
52+
h1, h2, h3, h4, h5, h6, p, li, td, th {
53+
color: #064e3b !important;
54+
}
55+
56+
a {
57+
color: #064e3b !important;
58+
59+
&:hover {
60+
color: #047857 !important;
61+
}
62+
}
63+
}
64+
65+
// Named box variants (used on About page)
66+
.td-box--primary {
67+
background-color: $scale-medium !important;
68+
color: #ffffff !important;
69+
70+
h1, h2, h3, h4, h5, h6, p, li, td, th {
71+
color: #ffffff !important;
72+
}
73+
74+
a:not(.td-link-down) {
75+
color: #ffffff !important;
76+
text-decoration: underline;
77+
78+
&:hover {
79+
color: #ecfdf5 !important;
80+
}
81+
}
82+
}
83+
84+
.td-box--dark {
85+
background-color: $scale-light !important;
86+
color: #ffffff !important;
87+
88+
h1, h2, h3, h4, h5, h6, p, li, td, th {
89+
color: #ffffff !important;
90+
}
91+
92+
a {
93+
color: #ffffff !important;
94+
text-decoration: underline;
95+
96+
&:hover {
97+
color: #ecfdf5 !important;
98+
}
99+
}
100+
}
101+
102+
// Arrow colors to match box backgrounds
103+
.td-cover-block .td-arrow-down::before {
104+
border-color: $scale-dark transparent transparent transparent !important;
105+
}
106+
107+
.td-box--1 .td-arrow-down::before,
108+
.td-box--primary .td-arrow-down::before {
109+
border-color: $scale-medium transparent transparent transparent !important;
110+
}
111+
112+
.td-box--2 .td-arrow-down::before,
113+
.td-box--dark .td-arrow-down::before {
114+
border-color: $scale-light transparent transparent transparent !important;
115+
}
116+
117+
.td-box--3 .td-arrow-down::before {
118+
border-color: $scale-pale transparent transparent transparent !important;
119+
}
120+
121+
// Code blocks - terminal style (dark green to match theme)
122+
pre {
123+
background-color: #022c22 !important; // Very dark emerald
124+
border-radius: 6px;
125+
padding: 1rem;
126+
margin: 1rem auto;
127+
max-width: fit-content;
128+
129+
code {
130+
font-size: 0.8rem;
131+
color: #6ee7b7; // Mint green text
132+
background-color: transparent !important;
133+
}
134+
}
135+
136+
// Inline code
137+
code {
138+
font-size: 0.85em;
139+
background-color: #022c22 !important;
140+
color: #6ee7b7 !important;
141+
padding: 0.15rem 0.4rem;
142+
border-radius: 4px;
143+
}
144+
145+
// Modern terminal card for installation (home page only)
146+
.terminal-card {
147+
background: linear-gradient(145deg, #0a0a0a 0%, #1a1a2e 100%);
148+
border-radius: 12px;
149+
box-shadow:
150+
0 25px 50px -12px rgba(0, 0, 0, 0.5),
151+
0 0 0 1px rgba(16, 185, 129, 0.1),
152+
inset 0 1px 0 rgba(255, 255, 255, 0.05);
153+
max-width: 700px;
154+
margin: 2rem auto;
155+
overflow: hidden;
156+
157+
// macOS-style window header
158+
.terminal-header {
159+
background: linear-gradient(180deg, #2d2d2d 0%, #1f1f1f 100%);
160+
padding: 12px 16px;
161+
display: flex;
162+
align-items: center;
163+
gap: 8px;
164+
border-bottom: 1px solid #333;
165+
166+
.terminal-btn {
167+
width: 12px;
168+
height: 12px;
169+
border-radius: 50%;
170+
171+
&.close { background: #ff5f56; }
172+
&.minimize { background: #ffbd2e; }
173+
&.maximize { background: #27c93f; }
174+
}
175+
176+
.terminal-title {
177+
flex: 1;
178+
text-align: center;
179+
color: #888;
180+
font-size: 0.75rem;
181+
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
182+
margin-right: 52px; // offset for buttons
183+
}
184+
}
185+
186+
.terminal-body {
187+
padding: 1.5rem;
188+
189+
pre {
190+
background: transparent !important;
191+
margin: 0;
192+
padding: 0;
193+
box-shadow: none;
194+
max-width: 100%;
195+
196+
code {
197+
font-size: 0.85rem;
198+
line-height: 1.8;
199+
color: #e2e8f0;
200+
}
201+
}
202+
203+
// Prompt styling
204+
.command-line {
205+
display: block;
206+
margin-bottom: 0.5rem;
207+
208+
&::before {
209+
content: "$ ";
210+
color: #10b981;
211+
font-weight: 600;
212+
}
213+
}
214+
215+
// Comment styling
216+
.comment {
217+
color: #64748b;
218+
font-style: italic;
219+
}
220+
}
221+
}
222+
223+
// Glow effect on hover
224+
.terminal-card:hover {
225+
box-shadow:
226+
0 25px 50px -12px rgba(0, 0, 0, 0.5),
227+
0 0 0 1px rgba(16, 185, 129, 0.2),
228+
0 0 40px rgba(16, 185, 129, 0.1),
229+
inset 0 1px 0 rgba(255, 255, 255, 0.05);
230+
transition: box-shadow 0.3s ease;
231+
}
232+
233+
// Badge styles
234+
.install-badge {
235+
display: inline-flex;
236+
align-items: center;
237+
gap: 0.5rem;
238+
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
239+
color: white;
240+
padding: 0.5rem 1rem;
241+
border-radius: 9999px;
242+
font-size: 0.875rem;
243+
font-weight: 500;
244+
margin-bottom: 1rem;
245+
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
246+
}
247+
248+
// Ensure all td-box sections have position relative for arrows
249+
.td-box {
250+
position: relative !important;
251+
}
252+
253+
// Arrow styling for standalone arrow divs - match theme's exact positioning
254+
.text-center.td-arrow-down {
255+
&::before {
256+
content: "";
257+
position: absolute;
258+
left: 50%;
259+
margin-left: -30px;
260+
bottom: -25px;
261+
border-style: solid;
262+
border-width: 25px 30px 0 30px;
263+
z-index: 3;
264+
}
265+
}
266+
267+
// Arrow colors for standalone arrows in each box
268+
.td-box--2 .text-center.td-arrow-down::before,
269+
.td-box--dark .text-center.td-arrow-down::before {
270+
border-color: $scale-light transparent transparent transparent !important;
271+
}
272+
273+
.td-box--3 .text-center.td-arrow-down::before {
274+
border-color: $scale-pale transparent transparent transparent !important;
275+
}
276+
277+
// Scroll down link button
278+
.td-link-down {
279+
display: block;
280+
margin-top: 1.5rem;
281+
font-size: 2rem;
282+
color: rgba(255, 255, 255, 0.7) !important;
283+
text-decoration: none !important;
284+
text-align: center;
285+
animation: bounce 2s infinite;
286+
287+
&:hover {
288+
color: #ffffff !important;
289+
}
290+
}
291+
292+
@keyframes bounce {
293+
0%, 20%, 50%, 80%, 100% {
294+
transform: translateY(0);
295+
}
296+
40% {
297+
transform: translateY(-10px);
298+
}
299+
60% {
300+
transform: translateY(-5px);
301+
}
302+
}

‎assets/scss/_syntax.scss‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/* Generated using: hugo gen chromastyles --style=monokai */
2+
/* Modified to use dark green background */
3+
4+
/* Background */ .bg { color:#f8f8f2;background-color:#022c22; }
5+
/* PreWrapper */ .chroma { color:#f8f8f2;background-color:#022c22; }
6+
/* Error */ .chroma .err { color:#960050;background-color:#1e0010 }
7+
/* LineLink */ .chroma .lnlinks { outline:none;text-decoration:none;color:inherit }
8+
/* LineTableTD */ .chroma .lntd { vertical-align:top;padding:0;margin:0;border:0; }
9+
/* LineTable */ .chroma .lntable { border-spacing:0;padding:0;margin:0;border:0; }
10+
/* LineHighlight */ .chroma .hl { background-color:#3c3d38 }
11+
/* LineNumbersTable */ .chroma .lnt { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
12+
/* LineNumbers */ .chroma .ln { white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f }
13+
/* Line */ .chroma .line { display:flex; }
14+
/* Keyword */ .chroma .k { color:#66d9ef }
15+
/* KeywordConstant */ .chroma .kc { color:#66d9ef }
16+
/* KeywordDeclaration */ .chroma .kd { color:#66d9ef }
17+
/* KeywordNamespace */ .chroma .kn { color:#f92672 }
18+
/* KeywordPseudo */ .chroma .kp { color:#66d9ef }
19+
/* KeywordReserved */ .chroma .kr { color:#66d9ef }
20+
/* KeywordType */ .chroma .kt { color:#66d9ef }
21+
/* NameAttribute */ .chroma .na { color:#a6e22e }
22+
/* NameClass */ .chroma .nc { color:#a6e22e }
23+
/* NameConstant */ .chroma .no { color:#66d9ef }
24+
/* NameDecorator */ .chroma .nd { color:#a6e22e }
25+
/* NameException */ .chroma .ne { color:#a6e22e }
26+
/* NameOther */ .chroma .nx { color:#a6e22e }
27+
/* NameTag */ .chroma .nt { color:#f92672 }
28+
/* NameFunction */ .chroma .nf { color:#a6e22e }
29+
/* NameFunctionMagic */ .chroma .fm { color:#a6e22e }
30+
/* Literal */ .chroma .l { color:#ae81ff }
31+
/* LiteralDate */ .chroma .ld { color:#e6db74 }
32+
/* LiteralString */ .chroma .s { color:#e6db74 }
33+
/* LiteralStringAffix */ .chroma .sa { color:#e6db74 }
34+
/* LiteralStringBacktick */ .chroma .sb { color:#e6db74 }
35+
/* LiteralStringChar */ .chroma .sc { color:#e6db74 }
36+
/* LiteralStringDelimiter */ .chroma .dl { color:#e6db74 }
37+
/* LiteralStringDoc */ .chroma .sd { color:#e6db74 }
38+
/* LiteralStringDouble */ .chroma .s2 { color:#e6db74 }
39+
/* LiteralStringEscape */ .chroma .se { color:#ae81ff }
40+
/* LiteralStringHeredoc */ .chroma .sh { color:#e6db74 }
41+
/* LiteralStringInterpol */ .chroma .si { color:#e6db74 }
42+
/* LiteralStringOther */ .chroma .sx { color:#e6db74 }
43+
/* LiteralStringRegex */ .chroma .sr { color:#e6db74 }
44+
/* LiteralStringSingle */ .chroma .s1 { color:#e6db74 }
45+
/* LiteralStringSymbol */ .chroma .ss { color:#e6db74 }
46+
/* LiteralNumber */ .chroma .m { color:#ae81ff }
47+
/* LiteralNumberBin */ .chroma .mb { color:#ae81ff }
48+
/* LiteralNumberFloat */ .chroma .mf { color:#ae81ff }
49+
/* LiteralNumberHex */ .chroma .mh { color:#ae81ff }
50+
/* LiteralNumberInteger */ .chroma .mi { color:#ae81ff }
51+
/* LiteralNumberIntegerLong */ .chroma .il { color:#ae81ff }
52+
/* LiteralNumberOct */ .chroma .mo { color:#ae81ff }
53+
/* Operator */ .chroma .o { color:#f92672 }
54+
/* OperatorWord */ .chroma .ow { color:#f92672 }
55+
/* Comment */ .chroma .c { color:#75715e }
56+
/* CommentHashbang */ .chroma .ch { color:#75715e }
57+
/* CommentMultiline */ .chroma .cm { color:#75715e }
58+
/* CommentSingle */ .chroma .c1 { color:#75715e }
59+
/* CommentSpecial */ .chroma .cs { color:#75715e }
60+
/* CommentPreproc */ .chroma .cp { color:#75715e }
61+
/* CommentPreprocFile */ .chroma .cpf { color:#75715e }
62+
/* GenericDeleted */ .chroma .gd { color:#f92672 }
63+
/* GenericEmph */ .chroma .ge { font-style:italic }
64+
/* GenericInserted */ .chroma .gi { color:#a6e22e }
65+
/* GenericStrong */ .chroma .gs { font-weight:bold }
66+
/* GenericSubheading */ .chroma .gu { color:#75715e }

0 commit comments

Comments
 (0)