Skip to content

Commit f3083e2

Browse files
brunoborgesCopilot
brunoborges
and
Copilot
committed
Extract inline CSS to separate stylesheet
Moved inline <style> block from docs/index.html to docs/styles.css and replaced it with a <link> tag for better maintainability. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 7447fcc commit f3083e2

File tree

2 files changed

+340
-341
lines changed

2 files changed

+340
-341
lines changed

‎docs/index.html‎

Lines changed: 1 addition & 341 deletions
Original file line numberDiff line numberDiff line change
@@ -7,347 +7,7 @@
77
<link rel="preconnect" href="https://fonts.googleapis.com">
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
99
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
10-
<style>
11-
:root {
12-
--bg-dark: #0a0a0f;
13-
--bg-card: #12121a;
14-
--neon-cyan: #00f5ff;
15-
--neon-magenta: #ff00ff;
16-
--neon-purple: #b366ff;
17-
--text-primary: #ffffff;
18-
--text-secondary: #a0a0b0;
19-
--border-color: #2a2a3a;
20-
}
21-
22-
* {
23-
margin: 0;
24-
padding: 0;
25-
box-sizing: border-box;
26-
}
27-
28-
body {
29-
font-family: 'Space Grotesk', sans-serif;
30-
background: var(--bg-dark);
31-
color: var(--text-primary);
32-
line-height: 1.6;
33-
min-height: 100vh;
34-
}
35-
36-
/* Animated grid background */
37-
body::before {
38-
content: '';
39-
position: fixed;
40-
top: 0;
41-
left: 0;
42-
width: 100%;
43-
height: 100%;
44-
background:
45-
linear-gradient(90deg, rgba(0,245,255,0.03) 1px, transparent 1px),
46-
linear-gradient(rgba(0,245,255,0.03) 1px, transparent 1px);
47-
background-size: 50px 50px;
48-
pointer-events: none;
49-
z-index: -1;
50-
}
51-
52-
.container {
53-
max-width: 1200px;
54-
margin: 0 auto;
55-
padding: 0 2rem;
56-
}
57-
58-
/* Hero Section */
59-
.hero {
60-
padding: 6rem 0 4rem;
61-
text-align: center;
62-
position: relative;
63-
}
64-
65-
.hero-badge {
66-
display: inline-block;
67-
padding: 0.5rem 1rem;
68-
background: rgba(0,245,255,0.1);
69-
border: 1px solid var(--neon-cyan);
70-
border-radius: 50px;
71-
font-size: 0.875rem;
72-
color: var(--neon-cyan);
73-
margin-bottom: 2rem;
74-
font-family: 'JetBrains Mono', monospace;
75-
}
76-
77-
.hero h1 {
78-
font-size: clamp(2.5rem, 6vw, 4rem);
79-
font-weight: 700;
80-
margin-bottom: 1rem;
81-
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
82-
-webkit-background-clip: text;
83-
-webkit-text-fill-color: transparent;
84-
background-clip: text;
85-
}
86-
87-
.hero-subtitle {
88-
font-size: 1.25rem;
89-
color: var(--text-secondary);
90-
max-width: 600px;
91-
margin: 0 auto 2rem;
92-
}
93-
94-
.hero-cta {
95-
display: flex;
96-
gap: 1rem;
97-
justify-content: center;
98-
flex-wrap: wrap;
99-
}
100-
101-
.btn {
102-
display: inline-flex;
103-
align-items: center;
104-
gap: 0.5rem;
105-
padding: 1rem 2rem;
106-
border-radius: 8px;
107-
font-weight: 600;
108-
text-decoration: none;
109-
transition: all 0.3s ease;
110-
font-size: 1rem;
111-
}
112-
113-
.btn-primary {
114-
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
115-
color: var(--bg-dark);
116-
}
117-
118-
.btn-primary:hover {
119-
transform: translateY(-2px);
120-
box-shadow: 0 10px 40px rgba(0,245,255,0.3);
121-
}
122-
123-
.btn-secondary {
124-
background: transparent;
125-
border: 2px solid var(--border-color);
126-
color: var(--text-primary);
127-
}
128-
129-
.btn-secondary:hover {
130-
border-color: var(--neon-cyan);
131-
color: var(--neon-cyan);
132-
}
133-
134-
/* Stats */
135-
.stats {
136-
display: flex;
137-
justify-content: center;
138-
gap: 3rem;
139-
margin-top: 4rem;
140-
flex-wrap: wrap;
141-
}
142-
143-
.stat {
144-
text-align: center;
145-
}
146-
147-
.stat-value {
148-
font-size: 2rem;
149-
font-weight: 700;
150-
color: var(--neon-cyan);
151-
font-family: 'JetBrains Mono', monospace;
152-
}
153-
154-
.stat-label {
155-
font-size: 0.875rem;
156-
color: var(--text-secondary);
157-
margin-top: 0.25rem;
158-
}
159-
160-
/* Features Section */
161-
.features {
162-
padding: 4rem 0;
163-
}
164-
165-
.section-title {
166-
font-size: 2rem;
167-
text-align: center;
168-
margin-bottom: 3rem;
169-
}
170-
171-
.features-grid {
172-
display: grid;
173-
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
174-
gap: 1.5rem;
175-
}
176-
177-
.feature-card {
178-
background: var(--bg-card);
179-
border: 1px solid var(--border-color);
180-
border-radius: 12px;
181-
padding: 2rem;
182-
transition: all 0.3s ease;
183-
}
184-
185-
.feature-card:hover {
186-
border-color: var(--neon-cyan);
187-
transform: translateY(-4px);
188-
}
189-
190-
.feature-icon {
191-
font-size: 2.5rem;
192-
margin-bottom: 1rem;
193-
}
194-
195-
.feature-card h3 {
196-
font-size: 1.25rem;
197-
margin-bottom: 0.5rem;
198-
}
199-
200-
.feature-card p {
201-
color: var(--text-secondary);
202-
font-size: 0.95rem;
203-
}
204-
205-
/* Workshop Parts */
206-
.workshop {
207-
padding: 4rem 0;
208-
}
209-
210-
.parts-list {
211-
display: flex;
212-
flex-direction: column;
213-
gap: 1rem;
214-
max-width: 800px;
215-
margin: 0 auto;
216-
}
217-
218-
.part-card {
219-
display: flex;
220-
align-items: center;
221-
gap: 1.5rem;
222-
background: var(--bg-card);
223-
border: 1px solid var(--border-color);
224-
border-radius: 12px;
225-
padding: 1.5rem;
226-
text-decoration: none;
227-
color: inherit;
228-
transition: all 0.3s ease;
229-
}
230-
231-
.part-card:hover {
232-
border-color: var(--neon-magenta);
233-
background: rgba(255,0,255,0.05);
234-
}
235-
236-
.part-number {
237-
width: 50px;
238-
height: 50px;
239-
display: flex;
240-
align-items: center;
241-
justify-content: center;
242-
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
243-
border-radius: 12px;
244-
font-weight: 700;
245-
font-size: 1.25rem;
246-
color: var(--bg-dark);
247-
flex-shrink: 0;
248-
}
249-
250-
.part-content {
251-
flex: 1;
252-
}
253-
254-
.part-content h3 {
255-
font-size: 1.1rem;
256-
margin-bottom: 0.25rem;
257-
}
258-
259-
.part-content p {
260-
color: var(--text-secondary);
261-
font-size: 0.9rem;
262-
}
263-
264-
.part-time {
265-
font-family: 'JetBrains Mono', monospace;
266-
font-size: 0.875rem;
267-
color: var(--neon-cyan);
268-
padding: 0.25rem 0.75rem;
269-
background: rgba(0,245,255,0.1);
270-
border-radius: 50px;
271-
}
272-
273-
/* Prerequisites */
274-
.prereqs {
275-
padding: 4rem 0;
276-
background: var(--bg-card);
277-
}
278-
279-
.prereqs-grid {
280-
display: grid;
281-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
282-
gap: 1rem;
283-
max-width: 800px;
284-
margin: 0 auto;
285-
}
286-
287-
.prereq-item {
288-
display: flex;
289-
align-items: center;
290-
gap: 0.75rem;
291-
padding: 1rem;
292-
background: var(--bg-dark);
293-
border-radius: 8px;
294-
}
295-
296-
.prereq-check {
297-
color: var(--neon-cyan);
298-
font-size: 1.25rem;
299-
}
300-
301-
/* Footer */
302-
footer {
303-
padding: 3rem 0;
304-
text-align: center;
305-
border-top: 1px solid var(--border-color);
306-
}
307-
308-
.footer-links {
309-
display: flex;
310-
justify-content: center;
311-
gap: 2rem;
312-
margin-bottom: 1rem;
313-
flex-wrap: wrap;
314-
}
315-
316-
.footer-links a {
317-
color: var(--text-secondary);
318-
text-decoration: none;
319-
transition: color 0.3s ease;
320-
}
321-
322-
.footer-links a:hover {
323-
color: var(--neon-cyan);
324-
}
325-
326-
.footer-credit {
327-
color: var(--text-secondary);
328-
font-size: 0.875rem;
329-
}
330-
331-
/* Responsive */
332-
@media (max-width: 768px) {
333-
.hero {
334-
padding: 4rem 0 3rem;
335-
}
336-
337-
.stats {
338-
gap: 2rem;
339-
}
340-
341-
.part-card {
342-
flex-direction: column;
343-
text-align: center;
344-
}
345-
346-
.part-time {
347-
margin-top: 0.5rem;
348-
}
349-
}
350-
</style>
10+
<link rel="stylesheet" href="styles.css">
35111
</head>
35212
<body>
35313
<div class="container">

0 commit comments

Comments
 (0)