Skip to content

Commit 41135f0

Browse files
DevLabStudyDevLabStudy
authored
Update index.html
1 parent 6c86254 commit 41135f0

1 file changed

Lines changed: 119 additions & 104 deletions

File tree

‎index.html‎

Lines changed: 119 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -13,176 +13,188 @@
1313
:root {
1414
--bg-body: #050505;
1515
--bg-nav: #050505;
16-
--bg-card: #0e0e0e;
1716
--text-main: #f0f0f0;
1817
--text-muted: #64748b;
1918
--border-color: rgba(255, 255, 255, 0.08);
2019
--accent-blue: #3b82f6;
21-
--accent-green: #4ade80;
2220
}
2321

2422
body {
25-
font-family: 'Inter', sans-serif; /* Główny tekst jak na blogu */
23+
font-family: 'Inter', sans-serif;
2624
background: var(--bg-body);
2725
color: var(--text-main);
2826
margin: 0;
2927
overflow-x: hidden;
28+
background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.015) 1px, transparent 0);
29+
background-size: 32px 32px;
3030
}
3131

32-
/* Navbar - IDEALNE ODWZOROWANIE */
32+
/* ------------------------------------ */
33+
/* NAVBAR - IDEALNY UKŁAD Z OBRAZKA */
34+
/* ------------------------------------ */
3335
.navbar {
3436
background: var(--bg-nav);
3537
border-bottom: 1px solid var(--border-color);
3638
padding: 15px 40px;
37-
display: flex;
39+
display: grid;
40+
grid-template-columns: 1fr auto 1fr; /* Lewo, Środek, Prawo */
3841
align-items: center;
39-
justify-content: space-between;
42+
position: sticky;
43+
top: 0;
44+
z-index: 1000;
45+
}
46+
47+
/* LEWA STRONA (Logo) */
48+
.nav-left {
49+
display: flex;
50+
justify-content: flex-start;
4051
}
4152
.nav-brand {
42-
font-size: 1.3rem;
53+
font-size: 1.4rem;
4354
font-weight: 900;
4455
text-decoration: none;
4556
color: #fff;
46-
letter-spacing: -0.5px;
57+
letter-spacing: 1px;
58+
font-family: 'JetBrains Mono', monospace; /* Techniczny font logotypu */
59+
}
60+
61+
/* ŚRODEK (Menu z kreskami) */
62+
.nav-center {
63+
display: flex;
64+
justify-content: center;
65+
align-items: center;
66+
gap: 15px;
67+
font-family: 'JetBrains Mono', monospace;
4768
}
48-
.nav-right { display: flex; align-items: center; gap: 25px; }
49-
.nav-links { display: flex; gap: 20px; }
50-
.nav-links a {
69+
.nav-center a {
5170
text-decoration: none;
52-
color: var(--text-muted);
53-
font-weight: 600;
54-
font-size: 0.9rem;
71+
color: var(--text-main);
72+
font-weight: 400;
73+
font-size: 0.95rem;
5574
transition: 0.3s;
75+
text-transform: uppercase;
5676
}
57-
.nav-links a:hover, .nav-links a.active { color: var(--accent-blue); }
77+
.nav-center a:hover, .nav-center a.active { color: var(--accent-blue); }
78+
.nav-separator { color: var(--text-muted); font-weight: 300; }
5879

59-
/* Community Button - SZARY STYL */
80+
/* PRAWA STRONA (Community) */
81+
.nav-right {
82+
display: flex;
83+
justify-content: flex-end;
84+
}
6085
.dropdown { position: relative; display: inline-block; }
6186
.dropbtn {
62-
background: #1a1a1a;
87+
background: transparent;
6388
color: #fff;
64-
padding: 8px 16px;
65-
border-radius: 8px;
66-
border: 1px solid var(--border-color);
89+
padding: 6px 12px;
90+
border-radius: 6px;
91+
border: 1px solid rgba(255, 255, 255, 0.2);
6792
cursor: pointer;
68-
font-family: inherit;
69-
font-weight: 700;
70-
font-size: 0.85rem;
93+
font-family: 'JetBrains Mono', monospace;
94+
font-weight: 400;
95+
font-size: 0.9rem;
7196
}
97+
7298
.dropdown-content {
7399
display: none;
74100
position: absolute;
75-
right: 0;
76-
background: #0e0e0e;
101+
right: 0; /* Rozwija się do lewej, żeby nie uciekło za ekran */
102+
top: 120%;
103+
background: #0a0a0a;
77104
min-width: 180px;
78-
border: 1px solid var(--border-color);
79-
border-radius: 10px;
80-
z-index: 1001;
81-
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
105+
border: 1px solid rgba(255, 255, 255, 0.2);
106+
border-radius: 6px;
107+
box-shadow: 0 10px 30px rgba(0,0,0,0.8);
108+
font-family: 'JetBrains Mono', monospace;
82109
}
83110
.dropdown-content a {
84-
color: #ccc;
85-
padding: 12px 16px;
111+
display: flex;
112+
justify-content: space-between;
113+
align-items: center;
114+
color: #fff;
115+
padding: 10px 15px;
86116
text-decoration: none;
87-
display: block;
88117
font-size: 0.85rem;
89-
border-bottom: 1px solid rgba(255,255,255,0.05);
118+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
90119
}
91-
.dropdown-content a:hover { background: rgba(255,255,255,0.05); color: var(--accent-blue); }
120+
.dropdown-content a:last-child { border-bottom: none; }
121+
.dropdown-content a:hover { background: #1a1a1a; color: var(--accent-blue); }
92122
.dropdown:hover .dropdown-content { display: block; }
93123

94-
/* Sekcja HERO */
95-
.hero-header {
96-
max-width: 1000px;
97-
margin: 80px auto 50px auto;
98-
text-align: center;
99-
padding: 0 20px;
100-
}
101-
.hero-title { font-size: 3.8rem; font-weight: 900; margin: 0; letter-spacing: -2px; line-height: 1; }
124+
/* ------------------------------------ */
125+
/* HERO & DASHBOARD */
126+
/* ------------------------------------ */
127+
.hero-header { max-width: 1000px; margin: 60px auto 40px auto; text-align: center; padding: 0 20px; }
128+
.hero-title { font-size: 3.5rem; font-weight: 900; margin: 0; letter-spacing: -2px; line-height: 1; color: #fff; }
102129
.hero-title span { color: var(--accent-blue); }
103-
.hero-subtitle {
104-
font-size: 1.1rem;
105-
color: var(--text-muted);
106-
margin-top: 20px;
107-
max-width: 750px;
108-
margin-left: auto;
109-
margin-right: auto;
110-
line-height: 1.6;
111-
}
130+
.hero-subtitle { font-size: 1.05rem; color: var(--text-muted); margin-top: 15px; max-width: 700px; margin-left: auto; margin-right: auto; line-height: 1.5; }
112131

113-
/* Dashboard */
114132
.dashboard { max-width: 1300px; margin: 0 auto 60px auto; padding: 0 20px; }
115-
.grid-container { display: grid; grid-template-columns: 1.6fr 1fr; gap: 30px; }
133+
.grid-container { display: grid; grid-template-columns: 1.8fr 1fr; gap: 25px; }
116134

117135
.card {
118-
background: rgba(15, 15, 15, 0.6);
136+
background: rgba(10, 10, 10, 0.7);
119137
border: 1px solid var(--border-color);
120-
padding: 30px;
121-
border-radius: 16px;
138+
padding: 25px;
139+
border-radius: 12px;
122140
backdrop-filter: blur(10px);
123141
}
124142

125143
.hero-project {
126-
height: 450px;
144+
height: 480px;
127145
background: url('/assets/images/IMG_20260304_153435_hdr.jpg') center/cover;
128146
display: flex;
129147
align-items: flex-end;
130-
border-radius: 16px;
148+
border-radius: 12px;
131149
border: 1px solid var(--border-color);
132150
}
133-
.hero-overlay { width: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.95)); padding: 40px; border-radius: 0 0 16px 16px; }
151+
.hero-overlay { width: 100%; background: linear-gradient(transparent, rgba(0,0,0,0.95)); padding: 40px; border-radius: 0 0 12px 12px; }
134152

135153
.btn-blue {
136-
display: inline-block;
137-
background: var(--accent-blue);
138-
color: #fff;
139-
padding: 14px 30px;
140-
border-radius: 10px;
141-
text-decoration: none;
142-
font-weight: 800;
143-
font-size: 0.95rem;
144-
transition: 0.3s;
154+
display: inline-block; background: var(--accent-blue); color: #fff;
155+
padding: 12px 28px; border-radius: 8px; text-decoration: none;
156+
font-weight: 800; font-size: 0.95rem; transition: 0.3s;
145157
}
146-
.btn-blue:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3); }
158+
.btn-blue:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3); }
147159

148160
.support-btn {
149-
display: block;
150-
text-decoration: none;
151-
padding: 15px;
152-
border-radius: 10px;
153-
font-weight: 800;
154-
font-size: 0.9rem;
155-
text-align: center;
156-
margin-top: 12px;
157-
transition: 0.3s;
161+
display: block; text-decoration: none; padding: 14px; border-radius: 8px;
162+
font-weight: 800; font-size: 0.85rem; text-align: center; margin-top: 10px; transition: 0.3s;
158163
}
159164

160165
@media (max-width: 1024px) {
161-
.navbar { padding: 15px 20px; }
166+
.navbar { display: flex; flex-direction: column; gap: 15px; align-items: center; padding: 15px; }
162167
.grid-container { grid-template-columns: 1fr; }
163-
.hero-title { font-size: 2.8rem; }
168+
.hero-title { font-size: 2.5rem; }
164169
}
165170
</style>
166171
</head>
167172
<body>
168173

169174
<nav class="navbar">
170-
<a href="/" class="nav-brand">DevLabStudy</a>
175+
<div class="nav-left">
176+
<a href="/" class="nav-brand">DEVLABSTUDY</a>
177+
</div>
178+
179+
<div class="nav-center">
180+
<a href="/" class="active">HUB</a>
181+
<span class="nav-separator">|</span>
182+
<a href="/blog">BLOG</a>
183+
<span class="nav-separator">|</span>
184+
<a href="/homelab">HOMELAB</a>
185+
<span class="nav-separator">|</span>
186+
<a href="/orbit">ORBIT</a>
187+
</div>
188+
171189
<div class="nav-right">
172-
<div class="nav-links">
173-
<a href="/" class="active">Hub</a>
174-
<a href="/blog">Blog</a>
175-
<a href="/homelab">HomeLab</a>
176-
<a href="/orbit">Orbit™</a>
177-
</div>
178190
<div class="dropdown">
179191
<button class="dropbtn">Community ▾</button>
180192
<div class="dropdown-content">
181-
<a href="https://github.com/DevLabStudy" target="_blank">GitHub</a>
182-
<a href="https://www.youtube.com/@devlabstudy" target="_blank">YouTube</a>
183-
<a href="https://www.tiktok.com/@devlabstudy" target="_blank">TikTok</a>
184-
<a href="https://x.com/DevLabStudy" target="_blank">X / Twitter</a>
185-
<a href="https://www.reddit.com/user/devlabstudy" target="_blank">Reddit</a>
193+
<a href="https://www.tiktok.com/@devlabstudy" target="_blank"><span>Tik Tok</span> <span>&#x2197;</span></a>
194+
<a href="https://www.youtube.com/@devlabstudy" target="_blank"><span>You Tube</span> <span>&#x2197;</span></a>
195+
<a href="https://github.com/DevLabStudy" target="_blank"><span>GitHub</span> <span>&#x2197;</span></a>
196+
<a href="https://patreon.com/DevLabStudy" target="_blank"><span>Patreon</span> <span>&#x2197;</span></a>
197+
<a href="https://www.reddit.com/user/devlabstudy" target="_blank"><span>Reddit</span> <span>&#x2197;</span></a>
186198
</div>
187199
</div>
188200
</div>
@@ -198,27 +210,30 @@ <h1 class="hero-title">DevLab <span>Environment</span></h1>
198210
<section>
199211
<div class="hero-project">
200212
<div class="hero-overlay">
201-
<h2 style="font-size: 2rem; margin: 0 0 10px 0; font-weight: 900; color: #fff;">Serwerownia na Drzewie</h2>
202-
<p style="color: #94a3b8; margin: 0 0 25px 0; max-width: 500px; line-height: 1.5;">Budowa bazy IT 5 metrów nad ziemią. Testy stabilności i zasięgu w ekstremalnych warunkach.</p>
203-
<a href="/blog" class="btn-blue">Eksploruj Logi →</a>
213+
<div style="color: var(--accent-blue); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; margin-bottom: 10px; font-family: 'JetBrains Mono', monospace;">> ACTIVE_MISSION</div>
214+
<h2 style="font-size: 2.2rem; margin: 0 0 10px 0; font-weight: 900; color: #fff;">Serwerownia na Drzewie</h2>
215+
<p style="color: #94a3b8; margin: 0 0 25px 0; max-width: 500px; line-height: 1.5;">Budowa infrastruktury IT 5 metrów nad ziemią. Pełna integracja Proxmoxa w ekstremalnych warunkach.</p>
216+
<a href="/blog" class="btn-blue">ACCESS LOGS →</a>
204217
</div>
205218
</div>
206219
</section>
207220

208221
<aside style="display: flex; flex-direction: column; gap: 20px;">
209222
<div class="card">
210-
<h3 style="font-size: 0.9rem; color: var(--text-muted); margin: 0 0 20px 0; text-transform: uppercase; letter-spacing: 1px;">Ostatnie Wpisy:</h3>
211-
{% for post in site.posts limit:5 %}
212-
<a href="{{ post.url }}" style="display: flex; justify-content: space-between; text-decoration: none; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text-main);">
213-
<span style="font-size: 0.9rem;">{{ post.title }}</span>
214-
<span style="color: var(--text-muted); font-size: 0.8rem;">{{ post.date | date: "%d.%m" }}</span>
215-
</a>
216-
{% endfor %}
223+
<h3 style="font-size: 0.85rem; color: var(--text-muted); margin: 0 0 20px 0; text-transform: uppercase; letter-spacing: 1px; font-family: 'JetBrains Mono', monospace;">Recent System Logs:</h3>
224+
<div style="display: flex; flex-direction: column; gap: 12px;">
225+
{% for post in site.posts limit:5 %}
226+
<a href="{{ post.url }}" style="display: flex; justify-content: space-between; text-decoration: none; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--text-main);">
227+
<span style="font-size: 0.9rem; font-weight: 600;">{{ post.title }}</span>
228+
<span style="color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; margin-left: 15px; font-family: 'JetBrains Mono', monospace;">[{{ post.date | date: "%d.%m" }}]</span>
229+
</a>
230+
{% endfor %}
231+
</div>
217232
</div>
218233

219234
<div class="card" style="border-color: var(--accent-blue); background: rgba(59, 130, 246, 0.05);">
220-
<h3 style="font-size: 0.9rem; color: var(--accent-blue); margin: 0 0 15px 0; text-transform: uppercase;">Wsparcie:</h3>
221-
<a href="https://patreon.com/DevLabStudy" target="_blank" class="support-btn" style="background: #e11d48; color: #fff;">PATREON</a>
235+
<h3 style="font-size: 0.85rem; color: var(--accent-blue); margin: 0 0 15px 0; text-transform: uppercase; font-family: 'JetBrains Mono', monospace;">Support_Lab:</h3>
236+
<a href="https://patreon.com/DevLabStudy" target="_blank" class="support-btn" style="background: #e11d48; color: #fff;">PATREON / PATRONITE</a>
222237
<a href="https://www.buymeacoffee.com/DevLabStudy" target="_blank" class="support-btn" style="background: #FFDD00; color: #000;">BUY ME A COFFEE</a>
223238
</div>
224239
</aside>

0 commit comments

Comments
 (0)