Skip to content

Commit 1865c48

Browse files
brunoborgesCopilot
brunoborges
and
Copilot
committed
Extract inline CSS from step.html into step.css
Move all inline <style> block content to a separate step.css file and replace with a <link> tag. Also convert static inline style attributes to CSS classes. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 5770412 commit 1865c48

2 files changed

Lines changed: 204 additions & 205 deletions

File tree

‎docs/step.css‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
:root {
2+
--bg-dark: #0a0a0f;
3+
--bg-card: #12121a;
4+
--bg-code: #1a1a2e;
5+
--neon-cyan: #00f5ff;
6+
--neon-magenta: #ff00ff;
7+
--neon-purple: #b366ff;
8+
--text-primary: #ffffff;
9+
--text-secondary: #a0a0b0;
10+
--border-color: #2a2a3a;
11+
--success-green: #4ec9b0;
12+
--warning-yellow: #dcdcaa;
13+
}
14+
15+
* { margin: 0; padding: 0; box-sizing: border-box; }
16+
17+
body {
18+
font-family: 'Space Grotesk', sans-serif;
19+
background: var(--bg-dark);
20+
color: var(--text-primary);
21+
line-height: 1.7;
22+
min-height: 100vh;
23+
}
24+
25+
body::before {
26+
content: '';
27+
position: fixed;
28+
top: 0; left: 0; width: 100%; height: 100%;
29+
background:
30+
linear-gradient(90deg, rgba(0,245,255,0.03) 1px, transparent 1px),
31+
linear-gradient(rgba(0,245,255,0.03) 1px, transparent 1px);
32+
background-size: 50px 50px;
33+
pointer-events: none;
34+
z-index: -1;
35+
}
36+
37+
.header {
38+
background: var(--bg-card);
39+
border-bottom: 1px solid var(--border-color);
40+
padding: 1rem 2rem;
41+
position: sticky;
42+
top: 0;
43+
z-index: 100;
44+
}
45+
.header-content {
46+
max-width: 1200px; margin: 0 auto;
47+
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
48+
}
49+
.header-brand {
50+
display: flex; align-items: center; gap: 1rem;
51+
text-decoration: none; color: var(--text-primary);
52+
}
53+
.header-brand:hover { color: var(--neon-cyan); }
54+
.header-title {
55+
font-size: 1.25rem; font-weight: 600;
56+
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
57+
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
58+
}
59+
.header-nav { display: flex; gap: 0.5rem; }
60+
.nav-btn {
61+
display: inline-flex; align-items: center; gap: 0.5rem;
62+
padding: 0.5rem 1rem; background: transparent;
63+
border: 1px solid var(--border-color); border-radius: 6px;
64+
color: var(--text-secondary); text-decoration: none;
65+
font-size: 0.875rem; transition: all 0.2s ease;
66+
cursor: pointer; font-family: inherit;
67+
}
68+
.nav-btn:hover:not(:disabled) { border-color: var(--neon-cyan); color: var(--neon-cyan); }
69+
.nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
70+
71+
.layout { display: flex; max-width: 1400px; margin: 0 auto; }
72+
73+
.sidebar {
74+
width: 280px; background: var(--bg-card);
75+
border-right: 1px solid var(--border-color);
76+
height: calc(100vh - 65px); position: sticky; top: 65px;
77+
overflow-y: auto; flex-shrink: 0;
78+
}
79+
.sidebar-section { padding: 1rem; }
80+
.sidebar-title {
81+
font-size: 0.75rem; text-transform: uppercase;
82+
letter-spacing: 0.1em; color: var(--text-secondary);
83+
margin-bottom: 0.75rem; padding: 0 0.5rem;
84+
}
85+
.step-link {
86+
display: flex; align-items: center; gap: 0.75rem;
87+
padding: 0.625rem 0.75rem; border-radius: 6px;
88+
text-decoration: none; color: var(--text-secondary);
89+
font-size: 0.875rem; transition: all 0.2s ease;
90+
margin-bottom: 0.25rem;
91+
}
92+
.step-link:hover { background: rgba(0,245,255,0.1); color: var(--text-primary); }
93+
.step-link.active {
94+
background: linear-gradient(135deg, rgba(0,245,255,0.2), rgba(255,0,255,0.2));
95+
color: var(--text-primary); border-left: 3px solid var(--neon-cyan);
96+
}
97+
.step-number {
98+
width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
99+
background: var(--border-color); border-radius: 6px;
100+
font-size: 0.75rem; font-weight: 600;
101+
font-family: 'JetBrains Mono', monospace; flex-shrink: 0;
102+
}
103+
.step-link.active .step-number {
104+
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
105+
color: var(--bg-dark);
106+
}
107+
108+
.main { flex: 1; min-width: 0; padding: 2rem 3rem; }
109+
.content { max-width: 800px; margin: 0 auto; }
110+
111+
.loading {
112+
display: flex; align-items: center; justify-content: center;
113+
height: 300px; color: var(--text-secondary);
114+
}
115+
.loading::after {
116+
content: ''; width: 32px; height: 32px;
117+
border: 3px solid var(--border-color);
118+
border-top-color: var(--neon-cyan); border-radius: 50%;
119+
animation: spin 0.8s linear infinite; margin-left: 1rem;
120+
}
121+
@keyframes spin { to { transform: rotate(360deg); } }
122+
123+
.markdown h1 {
124+
font-size: 2.25rem; font-weight: 700; margin-bottom: 1.5rem;
125+
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
126+
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
127+
background-clip: text; line-height: 1.3;
128+
}
129+
.markdown h2 {
130+
font-size: 1.5rem; font-weight: 600; margin: 2.5rem 0 1rem;
131+
color: var(--neon-cyan); border-bottom: 1px solid var(--border-color);
132+
padding-bottom: 0.5rem;
133+
}
134+
.markdown h3 { font-size: 1.25rem; font-weight: 600; margin: 2rem 0 0.75rem; color: var(--neon-magenta); }
135+
.markdown h4 { font-size: 1.1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; color: var(--text-primary); }
136+
.markdown p { margin-bottom: 1rem; color: var(--text-secondary); }
137+
.markdown a { color: var(--neon-cyan); text-decoration: none; }
138+
.markdown a:hover { text-decoration: underline; }
139+
.markdown strong { color: var(--text-primary); font-weight: 600; }
140+
.markdown ul, .markdown ol { margin: 1rem 0 1.5rem 1.5rem; color: var(--text-secondary); }
141+
.markdown li { margin-bottom: 0.5rem; }
142+
.markdown li::marker { color: var(--neon-cyan); }
143+
144+
.markdown input[type="checkbox"] {
145+
appearance: none; width: 18px; height: 18px;
146+
border: 2px solid var(--border-color); border-radius: 4px;
147+
margin-right: 0.5rem; vertical-align: middle;
148+
position: relative; cursor: pointer;
149+
}
150+
.markdown input[type="checkbox"]:checked { background: var(--neon-cyan); border-color: var(--neon-cyan); }
151+
.markdown input[type="checkbox"]:checked::after {
152+
content: '✓'; position: absolute; color: var(--bg-dark);
153+
font-size: 12px; top: 50%; left: 50%; transform: translate(-50%, -50%);
154+
}
155+
156+
.markdown code { font-family: 'JetBrains Mono', monospace; font-size: 0.875em; }
157+
.markdown :not(pre) > code {
158+
background: var(--bg-code); padding: 0.2em 0.4em;
159+
border-radius: 4px; color: var(--warning-yellow);
160+
}
161+
.markdown pre {
162+
background: var(--bg-code); border: 1px solid var(--border-color);
163+
border-radius: 8px; padding: 1.25rem; overflow-x: auto; margin: 1.5rem 0;
164+
}
165+
.markdown pre code { color: var(--text-primary); background: none; padding: 0; }
166+
167+
.markdown blockquote {
168+
background: var(--bg-card); border-left: 4px solid var(--neon-cyan);
169+
border-radius: 0 8px 8px 0; padding: 1rem 1.25rem; margin: 1.5rem 0;
170+
}
171+
.markdown blockquote p { margin: 0; color: var(--text-secondary); }
172+
.markdown blockquote p:first-child { font-weight: 600; color: var(--neon-cyan); }
173+
174+
.markdown img { max-width: 100%; border-radius: 8px; border: 1px solid var(--border-color); margin: 1.5rem 0; }
175+
176+
.markdown table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
177+
.markdown th, .markdown td { padding: 0.75rem 1rem; border: 1px solid var(--border-color); text-align: left; }
178+
.markdown th { background: var(--bg-card); color: var(--text-primary); font-weight: 600; }
179+
.markdown td { color: var(--text-secondary); }
180+
.markdown tr:hover td { background: rgba(0,245,255,0.05); }
181+
182+
.markdown hr { border: none; border-top: 1px solid var(--border-color); margin: 2.5rem 0; }
183+
184+
.nav-footer {
185+
display: flex; justify-content: space-between;
186+
margin-top: 3rem; padding-top: 2rem;
187+
border-top: 1px solid var(--border-color);
188+
}
189+
.nav-footer-btn {
190+
display: inline-flex; align-items: center; gap: 0.5rem;
191+
padding: 0.75rem 1.5rem; background: var(--bg-card);
192+
border: 1px solid var(--border-color); border-radius: 8px;
193+
color: var(--text-primary); text-decoration: none;
194+
font-weight: 500; transition: all 0.2s ease;
195+
}
196+
.nav-footer-btn:hover { border-color: var(--neon-cyan); transform: translateY(-2px); }
197+
.nav-footer-btn.disabled { opacity: 0.4; pointer-events: none; }
198+
199+
@media (max-width: 900px) {
200+
.sidebar { display: none; }
201+
.main { padding: 1.5rem; }
202+
.header-title { display: none; }
203+
}

0 commit comments

Comments
 (0)