Skip to content

Commit bca1f90

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 0398cdc commit bca1f90

2 files changed

Lines changed: 125 additions & 126 deletions

File tree

‎docs/index.html‎

Lines changed: 1 addition & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -7,132 +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-
* { margin: 0; padding: 0; box-sizing: border-box; }
23-
24-
body {
25-
font-family: 'Space Grotesk', sans-serif;
26-
background: var(--bg-dark);
27-
color: var(--text-primary);
28-
line-height: 1.6;
29-
min-height: 100vh;
30-
}
31-
32-
body::before {
33-
content: '';
34-
position: fixed;
35-
top: 0; left: 0; width: 100%; height: 100%;
36-
background:
37-
linear-gradient(90deg, rgba(0,245,255,0.03) 1px, transparent 1px),
38-
linear-gradient(rgba(0,245,255,0.03) 1px, transparent 1px);
39-
background-size: 50px 50px;
40-
pointer-events: none;
41-
z-index: -1;
42-
}
43-
44-
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
45-
46-
.hero { padding: 6rem 0 4rem; text-align: center; }
47-
.hero-badge {
48-
display: inline-block; padding: 0.5rem 1rem;
49-
background: rgba(0,245,255,0.1); border: 1px solid var(--neon-cyan);
50-
border-radius: 50px; font-size: 0.875rem; color: var(--neon-cyan);
51-
margin-bottom: 2rem; font-family: 'JetBrains Mono', monospace;
52-
}
53-
.hero h1 {
54-
font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; margin-bottom: 1rem;
55-
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
56-
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
57-
}
58-
.hero-subtitle { font-size: 1.25rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto 2rem; }
59-
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
60-
61-
.btn {
62-
display: inline-flex; align-items: center; gap: 0.5rem;
63-
padding: 1rem 2rem; border-radius: 8px; font-weight: 600;
64-
text-decoration: none; transition: all 0.3s ease; font-size: 1rem;
65-
}
66-
.btn-primary {
67-
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
68-
color: var(--bg-dark);
69-
}
70-
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(0,245,255,0.3); }
71-
.btn-secondary { background: transparent; border: 2px solid var(--border-color); color: var(--text-primary); }
72-
.btn-secondary:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
73-
74-
.stats { display: flex; justify-content: center; gap: 3rem; margin-top: 4rem; flex-wrap: wrap; }
75-
.stat { text-align: center; }
76-
.stat-value { font-size: 2rem; font-weight: 700; color: var(--neon-cyan); font-family: 'JetBrains Mono', monospace; }
77-
.stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem; }
78-
79-
.features { padding: 4rem 0; }
80-
.section-title { font-size: 2rem; text-align: center; margin-bottom: 3rem; }
81-
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
82-
.feature-card {
83-
background: var(--bg-card); border: 1px solid var(--border-color);
84-
border-radius: 12px; padding: 2rem; transition: all 0.3s ease;
85-
}
86-
.feature-card:hover { border-color: var(--neon-cyan); transform: translateY(-4px); }
87-
.feature-icon { font-size: 2.5rem; margin-bottom: 1rem; }
88-
.feature-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
89-
.feature-card p { color: var(--text-secondary); font-size: 0.95rem; }
90-
91-
.workshop { padding: 4rem 0; }
92-
.parts-list { display: flex; flex-direction: column; gap: 1rem; max-width: 800px; margin: 0 auto; }
93-
.part-card {
94-
display: flex; align-items: center; gap: 1.5rem;
95-
background: var(--bg-card); border: 1px solid var(--border-color);
96-
border-radius: 12px; padding: 1.5rem; text-decoration: none;
97-
color: inherit; transition: all 0.3s ease;
98-
}
99-
.part-card:hover { border-color: var(--neon-magenta); background: rgba(255,0,255,0.05); }
100-
.part-number {
101-
width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
102-
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
103-
border-radius: 12px; font-weight: 700; font-size: 1.25rem;
104-
color: var(--bg-dark); flex-shrink: 0;
105-
}
106-
.part-content { flex: 1; }
107-
.part-content h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
108-
.part-content p { color: var(--text-secondary); font-size: 0.9rem; }
109-
.part-time {
110-
font-family: 'JetBrains Mono', monospace; font-size: 0.875rem;
111-
color: var(--neon-cyan); padding: 0.25rem 0.75rem;
112-
background: rgba(0,245,255,0.1); border-radius: 50px;
113-
}
114-
115-
.prereqs { padding: 4rem 0; background: var(--bg-card); }
116-
.prereqs-grid {
117-
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
118-
gap: 1rem; max-width: 800px; margin: 0 auto;
119-
}
120-
.prereq-item { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: var(--bg-dark); border-radius: 8px; }
121-
.prereq-check { color: var(--neon-cyan); font-size: 1.25rem; }
122-
123-
footer { padding: 3rem 0; text-align: center; border-top: 1px solid var(--border-color); }
124-
.footer-links { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; flex-wrap: wrap; }
125-
.footer-links a { color: var(--text-secondary); text-decoration: none; transition: color 0.3s ease; }
126-
.footer-links a:hover { color: var(--neon-cyan); }
127-
.footer-credit { color: var(--text-secondary); font-size: 0.875rem; }
128-
129-
@media (max-width: 768px) {
130-
.hero { padding: 4rem 0 3rem; }
131-
.stats { gap: 2rem; }
132-
.part-card { flex-direction: column; text-align: center; }
133-
.part-time { margin-top: 0.5rem; }
134-
}
135-
</style>
10+
<link rel="stylesheet" href="styles.css">
13611
</head>
13712
<body>
13813
<div class="container">

‎docs/styles.css‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
:root {
2+
--bg-dark: #0a0a0f;
3+
--bg-card: #12121a;
4+
--neon-cyan: #00f5ff;
5+
--neon-magenta: #ff00ff;
6+
--neon-purple: #b366ff;
7+
--text-primary: #ffffff;
8+
--text-secondary: #a0a0b0;
9+
--border-color: #2a2a3a;
10+
}
11+
12+
* { margin: 0; padding: 0; box-sizing: border-box; }
13+
14+
body {
15+
font-family: 'Space Grotesk', sans-serif;
16+
background: var(--bg-dark);
17+
color: var(--text-primary);
18+
line-height: 1.6;
19+
min-height: 100vh;
20+
}
21+
22+
body::before {
23+
content: '';
24+
position: fixed;
25+
top: 0; left: 0; width: 100%; height: 100%;
26+
background:
27+
linear-gradient(90deg, rgba(0,245,255,0.03) 1px, transparent 1px),
28+
linear-gradient(rgba(0,245,255,0.03) 1px, transparent 1px);
29+
background-size: 50px 50px;
30+
pointer-events: none;
31+
z-index: -1;
32+
}
33+
34+
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
35+
36+
.hero { padding: 6rem 0 4rem; text-align: center; }
37+
.hero-badge {
38+
display: inline-block; padding: 0.5rem 1rem;
39+
background: rgba(0,245,255,0.1); border: 1px solid var(--neon-cyan);
40+
border-radius: 50px; font-size: 0.875rem; color: var(--neon-cyan);
41+
margin-bottom: 2rem; font-family: 'JetBrains Mono', monospace;
42+
}
43+
.hero h1 {
44+
font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; margin-bottom: 1rem;
45+
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
46+
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
47+
}
48+
.hero-subtitle { font-size: 1.25rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto 2rem; }
49+
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
50+
51+
.btn {
52+
display: inline-flex; align-items: center; gap: 0.5rem;
53+
padding: 1rem 2rem; border-radius: 8px; font-weight: 600;
54+
text-decoration: none; transition: all 0.3s ease; font-size: 1rem;
55+
}
56+
.btn-primary {
57+
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
58+
color: var(--bg-dark);
59+
}
60+
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(0,245,255,0.3); }
61+
.btn-secondary { background: transparent; border: 2px solid var(--border-color); color: var(--text-primary); }
62+
.btn-secondary:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
63+
64+
.stats { display: flex; justify-content: center; gap: 3rem; margin-top: 4rem; flex-wrap: wrap; }
65+
.stat { text-align: center; }
66+
.stat-value { font-size: 2rem; font-weight: 700; color: var(--neon-cyan); font-family: 'JetBrains Mono', monospace; }
67+
.stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem; }
68+
69+
.features { padding: 4rem 0; }
70+
.section-title { font-size: 2rem; text-align: center; margin-bottom: 3rem; }
71+
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
72+
.feature-card {
73+
background: var(--bg-card); border: 1px solid var(--border-color);
74+
border-radius: 12px; padding: 2rem; transition: all 0.3s ease;
75+
}
76+
.feature-card:hover { border-color: var(--neon-cyan); transform: translateY(-4px); }
77+
.feature-icon { font-size: 2.5rem; margin-bottom: 1rem; }
78+
.feature-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
79+
.feature-card p { color: var(--text-secondary); font-size: 0.95rem; }
80+
81+
.workshop { padding: 4rem 0; }
82+
.parts-list { display: flex; flex-direction: column; gap: 1rem; max-width: 800px; margin: 0 auto; }
83+
.part-card {
84+
display: flex; align-items: center; gap: 1.5rem;
85+
background: var(--bg-card); border: 1px solid var(--border-color);
86+
border-radius: 12px; padding: 1.5rem; text-decoration: none;
87+
color: inherit; transition: all 0.3s ease;
88+
}
89+
.part-card:hover { border-color: var(--neon-magenta); background: rgba(255,0,255,0.05); }
90+
.part-number {
91+
width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
92+
background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
93+
border-radius: 12px; font-weight: 700; font-size: 1.25rem;
94+
color: var(--bg-dark); flex-shrink: 0;
95+
}
96+
.part-content { flex: 1; }
97+
.part-content h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
98+
.part-content p { color: var(--text-secondary); font-size: 0.9rem; }
99+
.part-time {
100+
font-family: 'JetBrains Mono', monospace; font-size: 0.875rem;
101+
color: var(--neon-cyan); padding: 0.25rem 0.75rem;
102+
background: rgba(0,245,255,0.1); border-radius: 50px;
103+
}
104+
105+
.prereqs { padding: 4rem 0; background: var(--bg-card); }
106+
.prereqs-grid {
107+
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
108+
gap: 1rem; max-width: 800px; margin: 0 auto;
109+
}
110+
.prereq-item { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: var(--bg-dark); border-radius: 8px; }
111+
.prereq-check { color: var(--neon-cyan); font-size: 1.25rem; }
112+
113+
footer { padding: 3rem 0; text-align: center; border-top: 1px solid var(--border-color); }
114+
.footer-links { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; flex-wrap: wrap; }
115+
.footer-links a { color: var(--text-secondary); text-decoration: none; transition: color 0.3s ease; }
116+
.footer-links a:hover { color: var(--neon-cyan); }
117+
.footer-credit { color: var(--text-secondary); font-size: 0.875rem; }
118+
119+
@media (max-width: 768px) {
120+
.hero { padding: 4rem 0 3rem; }
121+
.stats { gap: 2rem; }
122+
.part-card { flex-direction: column; text-align: center; }
123+
.part-time { margin-top: 0.5rem; }
124+
}

0 commit comments

Comments
 (0)