Skip to content

Commit b33c9c4

Browse files
fabriziosalmifabriziosalmi
committed
Refactor index.html and add main.css for improved layout and styling
1 parent 673d5a1 commit b33c9c4

2 files changed

Lines changed: 315 additions & 220 deletions

File tree

‎css/main.css‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
:root {
2+
--bg-color: #050505;
3+
--text-color: #e0e0e0;
4+
--accent-color: #ccff00; /* Acid Green/Yellow */
5+
--accent-dim: #668000;
6+
--font-main: 'Pixelify Sans', display;
7+
--font-mono: 'Courier New', Courier, monospace;
8+
}
9+
10+
body {
11+
background-color: var(--bg-color);
12+
color: var(--text-color);
13+
font-family: var(--font-mono);
14+
margin: 0;
15+
padding: 0;
16+
line-height: 1.4;
17+
background-image:
18+
linear-gradient(rgba(20, 20, 20, 0.5) 1px, transparent 1px),
19+
linear-gradient(90deg, rgba(20, 20, 20, 0.5) 1px, transparent 1px);
20+
background-size: 20px 20px;
21+
}
22+
23+
/* Scanline effect */
24+
body::after {
25+
content: "";
26+
position: fixed;
27+
top: 0;
28+
left: 0;
29+
width: 100vw;
30+
height: 100vh;
31+
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
32+
background-size: 100% 2px, 3px 100%;
33+
pointer-events: none;
34+
z-index: 10;
35+
}
36+
37+
a {
38+
color: var(--text-color);
39+
text-decoration: none;
40+
transition: all 0.3s ease;
41+
}
42+
43+
a:hover {
44+
color: var(--accent-color);
45+
text-shadow: 0 0 8px var(--accent-color);
46+
}
47+
48+
.container {
49+
max-width: 1200px;
50+
margin: 0 auto;
51+
padding: 20px;
52+
position: relative;
53+
z-index: 20;
54+
display: flex;
55+
flex-direction: column;
56+
}
57+
58+
/* Desktop: Full Height, No Scroll on Body */
59+
@media (min-width: 900px) {
60+
body {
61+
height: 100vh;
62+
overflow: hidden; /* Prevent body scroll on desktop */
63+
}
64+
.container {
65+
height: 100vh;
66+
box-sizing: border-box;
67+
}
68+
header {
69+
flex: 0 0 auto;
70+
display: flex;
71+
align-items: center;
72+
text-align: left;
73+
padding: 10px 0;
74+
margin-bottom: 10px;
75+
border-bottom: 1px solid #222;
76+
}
77+
.logo-container {
78+
margin-right: 30px;
79+
margin-bottom: 0;
80+
flex-shrink: 0;
81+
}
82+
.logo-container img {
83+
width: 100px;
84+
height: 100px;
85+
}
86+
.header-text {
87+
flex-grow: 1;
88+
}
89+
h1 {
90+
margin: 0 0 5px 0;
91+
font-size: 2.5rem;
92+
}
93+
.subtitle {
94+
margin: 0;
95+
font-size: 1rem;
96+
}
97+
main {
98+
flex: 1 1 auto;
99+
overflow-y: auto; /* Internal scroll if screen is too short, but keeps layout fixed */
100+
display: flex;
101+
flex-direction: column;
102+
justify-content: center; /* Center grid vertically */
103+
padding: 10px 0;
104+
}
105+
/* Custom Scrollbar for Main */
106+
main::-webkit-scrollbar { width: 8px; }
107+
main::-webkit-scrollbar-track { background: #000; }
108+
main::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
109+
main::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }
110+
111+
.section-title {
112+
display: none; /* Hide redundant title on desktop to save space */
113+
}
114+
.channel-grid {
115+
display: grid;
116+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
117+
gap: 10px;
118+
align-content: center;
119+
}
120+
.channel-link {
121+
padding: 10px;
122+
font-size: 0.9rem;
123+
}
124+
footer {
125+
flex: 0 0 auto;
126+
margin-top: 10px;
127+
padding-top: 10px;
128+
}
129+
}
130+
131+
/* Mobile: Default Block Layout */
132+
@media (max-width: 899px) {
133+
body {
134+
overflow-y: auto;
135+
}
136+
header {
137+
text-align: center;
138+
padding: 40px 0;
139+
border-bottom: 1px solid #222;
140+
margin-bottom: 30px;
141+
}
142+
.logo-container {
143+
display: inline-block;
144+
margin-bottom: 20px;
145+
}
146+
.logo-container img {
147+
width: 150px;
148+
height: 150px;
149+
}
150+
h1 {
151+
font-size: 2.5rem;
152+
margin-bottom: 15px;
153+
}
154+
.channel-grid {
155+
display: grid;
156+
grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); /* Full width on mobile */
157+
gap: 15px;
158+
}
159+
.channel-link {
160+
padding: 15px;
161+
font-size: 1.1rem;
162+
}
163+
footer {
164+
margin-top: 40px;
165+
padding: 20px 0;
166+
}
167+
}
168+
169+
/* Shared Styles */
170+
.logo-container img {
171+
border-radius: 50%;
172+
filter: grayscale(100%) contrast(1.2);
173+
transition: all 0.5s ease;
174+
border: 2px solid #333;
175+
}
176+
.logo-container:hover img {
177+
filter: grayscale(0%) contrast(1);
178+
border-color: var(--accent-color);
179+
box-shadow: 0 0 20px var(--accent-dim);
180+
}
181+
182+
h1, h2, h3 {
183+
font-family: var(--font-main);
184+
text-transform: uppercase;
185+
font-weight: 400;
186+
letter-spacing: 2px;
187+
color: var(--accent-color);
188+
text-shadow: 0 0 10px rgba(204, 255, 0, 0.3);
189+
}
190+
191+
.subtitle {
192+
font-size: 1.1rem;
193+
color: #888;
194+
}
195+
196+
.section-title {
197+
border-bottom: 1px solid #333;
198+
padding-bottom: 10px;
199+
margin-bottom: 20px;
200+
color: #fff;
201+
}
202+
203+
.channel-link {
204+
display: block;
205+
background: #0a0a0a;
206+
border: 1px solid #222;
207+
text-align: center;
208+
font-family: var(--font-main);
209+
transition: all 0.2s;
210+
letter-spacing: 1px;
211+
white-space: nowrap;
212+
overflow: hidden;
213+
text-overflow: ellipsis;
214+
}
215+
216+
.channel-link:hover {
217+
border-color: var(--accent-color);
218+
background: #111;
219+
transform: translateY(-2px);
220+
box-shadow: 0 4px 10px rgba(0,0,0,0.5);
221+
z-index: 5;
222+
position: relative;
223+
white-space: normal; /* Expand on hover if needed, or keep clipped */
224+
}
225+
226+
footer {
227+
border-top: 1px solid #222;
228+
text-align: center;
229+
font-size: 0.8rem;
230+
color: #666;
231+
}
232+
233+
footer nav ul {
234+
list-style: none;
235+
padding: 0;
236+
margin: 0 0 10px 0;
237+
}
238+
239+
footer nav ul li {
240+
display: inline-block;
241+
margin: 0 15px;
242+
}
243+
244+
footer nav a {
245+
font-family: var(--font-main);
246+
font-size: 1rem;
247+
text-transform: uppercase;
248+
}
249+
250+
.highlight {
251+
color: var(--accent-color);
252+
}

0 commit comments

Comments
 (0)