Skip to content

Commit 5f82b56

Browse files
DevLabStudyDevLabStudy
authored
Update default.html
1 parent bef9dd3 commit 5f82b56

1 file changed

Lines changed: 83 additions & 45 deletions

File tree

‎_layouts/default.html‎

Lines changed: 83 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -63,53 +63,71 @@
6363
display: flex;
6464
align-items: center;
6565
gap: 10px;
66+
font-family: 'JetBrains Mono', monospace;
6667
}
6768
.nav-brand svg { width: 22px; height: 22px; stroke: var(--accent-contrast); }
6869

70+
/* EFEKT MIGAJĄCEGO KURSORA TERMINALA */
71+
.terminal-cursor {
72+
display: inline-block;
73+
width: 9px;
74+
height: 18px;
75+
background-color: var(--accent-contrast);
76+
margin-left: 2px;
77+
vertical-align: -2px;
78+
animation: terminalBlink 1s infinite steps(1);
79+
}
80+
@keyframes terminalBlink {
81+
0%, 50% { opacity: 1; }
82+
50.1%, 100% { opacity: 0; }
83+
}
84+
85+
/* PŁYWAJĄCY CONTAINER NAWIGACJI */
6986
.nav-center {
7087
display: flex;
7188
justify-content: flex-end;
7289
align-items: center;
73-
gap: 35px;
90+
gap: 10px;
91+
position: relative;
7492
}
75-
.nav-center a {
93+
94+
.nav-center a, .nav-center .dropbtn {
7695
text-decoration: none;
7796
color: var(--text-muted);
7897
font-weight: 600;
7998
font-size: 0.9rem;
80-
transition: 0.3s;
81-
position: relative;
99+
transition: color 0.3s;
100+
padding: 8px 16px;
101+
border-radius: 6px;
102+
z-index: 2;
103+
background: transparent;
104+
border: none;
105+
cursor: pointer;
106+
font-family: 'Inter', sans-serif;
107+
display: flex;
108+
align-items: center;
109+
gap: 5px;
82110
}
83-
.nav-center a:hover, .nav-center a.active { color: var(--accent-blue); }
84-
85-
.nav-center a.active::after {
86-
content: '';
111+
112+
.nav-center a:hover, .nav-center .dropbtn:hover, .nav-center .dropdown:hover .dropbtn {
113+
color: var(--accent-blue);
114+
}
115+
116+
/* DYNAMICZNY PŁYWAJĄCY SLIDER (PILL) */
117+
.nav-indicator {
87118
position: absolute;
88-
bottom: -6px;
119+
bottom: 0;
89120
left: 0;
90-
width: 100%;
91-
height: 2px;
121+
height: 3px;
92122
background: var(--accent-blue);
93-
border-radius: 2px;
123+
border-radius: 3px;
124+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
125+
z-index: 1;
126+
box-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
94127
}
95128

96129
/* DROPDOWN APPS */
97130
.dropdown { position: relative; display: inline-block; }
98-
.dropbtn {
99-
background: none;
100-
border: none;
101-
color: var(--text-muted);
102-
font-family: 'Inter', sans-serif;
103-
font-weight: 600;
104-
font-size: 0.9rem;
105-
cursor: pointer;
106-
padding: 0;
107-
transition: 0.3s;
108-
display: flex;
109-
align-items: center;
110-
gap: 5px;
111-
}
112-
.dropbtn:hover, .dropdown:hover .dropbtn { color: var(--accent-blue); }
113131

114132
.dropdown-content { position: absolute; right: 0; top: 100%; padding-top: 12px; min-width: 220px; opacity: 0; visibility: hidden; transition: 0.25s ease; z-index: 1001; }
115133
.dropdown-links-wrapper { background: rgba(10, 15, 25, 0.98); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); overflow: hidden; backdrop-filter: blur(10px); }
@@ -161,8 +179,8 @@
161179
}
162180
.section-tag::before { content: '///'; color: var(--accent-blue); }
163181

164-
/* STOPKA W STYLU NASA (PEŁNA SKALA I DETALE) */
165-
footer {
182+
/* STOPKA W STYLU NASA */
183+
<footer>
166184
background: #010204;
167185
border-top: 1px solid var(--border);
168186
padding: 70px 60px 40px 60px;
@@ -186,7 +204,6 @@
186204
.footer-col ul a, .footer-col ul .disabled-footer-link { color: var(--text-muted); font-size: 0.82rem; transition: 0.2s; font-family: 'Inter', sans-serif; text-decoration: none; }
187205
.footer-col ul a:hover { color: var(--accent-blue); }
188206

189-
/* STOPKA - GARMIN HOVER */
190207
.disabled-footer-link {
191208
cursor: default;
192209
position: relative;
@@ -206,7 +223,6 @@
206223
.disabled-footer-link:hover .footer-link-text { opacity: 0; }
207224
.disabled-footer-link:hover .footer-beta-text { opacity: 1; }
208225

209-
/* IKONKI SPOŁECZNOŚCIOWE (Siatka dostosowana do większej liczby ikonek) */
210226
.social-icons-grid {
211227
display: flex;
212228
flex-wrap: wrap;
@@ -242,7 +258,6 @@
242258
border-top: 1px solid rgba(255, 255, 255, 0.08);
243259
}
244260

245-
/* GŁÓWNY PAS Z PRZEKIEROWANIAMI W STYLU NASA */
246261
.footer-sublinks-bar {
247262
width: 100%;
248263
max-width: 1550px;
@@ -262,7 +277,6 @@
262277
color: var(--accent-blue);
263278
}
264279

265-
/* DOLNY PAS SYSTEMOWY Z METADANYMI */
266280
.footer-meta-bar {
267281
width: 100%;
268282
max-width: 1550px;
@@ -283,7 +297,7 @@
283297

284298
@media (max-width: 1024px) {
285299
.navbar { grid-template-columns: 1fr; gap: 15px; padding: 20px; text-align: center; }
286-
.nav-center { justify-content: center; flex-wrap: wrap; gap: 15px; }
300+
.nav-center { justify-content: center; flex-wrap: wrap; gap: 10px; }
287301
.dashboard { padding: 30px 20px; }
288302
.footer-grid { grid-template-columns: 1fr; gap: 30px; }
289303
.footer-meta-bar { flex-direction: column; text-align: center; gap: 10px; }
@@ -300,17 +314,18 @@
300314
<polyline points="4 17 10 11 4 5"></polyline>
301315
<line x1="12" y1="19" x2="20" y2="19"></line>
302316
</svg>
303-
DEVLABSTUDY
317+
DEVLABSTUDY<span class="terminal-cursor"></span>
304318
</a>
305319
</div>
306-
<div class="nav-center">
307-
<a href="/" {% if page.url == "/" %}class="active"{% endif %}>Hub</a>
308-
<a href="/newsy" {% if page.url contains "newsy" %}class="active"{% endif %}>Newsy</a>
309-
<a href="/blog" {% if page.url contains "blog" %}class="active"{% endif %}>Blog</a>
310-
<a href="/homelab" {% if page.url contains "homelab" %}class="active"{% endif %}>HomeLab</a>
311-
<a href="/sponsors" {% if page.url contains "sponsors" %}class="active"{% endif %}>Sponsors</a>
320+
<div class="nav-center" id="navCenter">
321+
<div class="nav-indicator" id="navIndicator"></div>
322+
<a href="/" class="nav-link {% if page.url == '/' %}active-page{% endif %}">Hub</a>
323+
<a href="/newsy" class="nav-link {% if page.url contains 'newsy' %}active-page{% endif %}">Newsy</a>
324+
<a href="/blog" class="nav-link {% if page.url contains 'blog' %}active-page{% endif %}">Blog</a>
325+
<a href="/homelab" class="nav-link {% if page.url contains 'homelab' %}active-page{% endif %}">HomeLab</a>
326+
<a href="/sponsors" class="nav-link {% if page.url contains 'sponsors' %}active-page{% endif %}">Sponsors</a>
312327

313-
<div class="dropdown">
328+
<div class="dropdown nav-link">
314329
<button class="dropbtn">Apps ▾</button>
315330
<div class="dropdown-content">
316331
<div class="dropdown-links-wrapper">
@@ -325,7 +340,7 @@
325340
</div>
326341
</div>
327342

328-
<a href="/kontakt" {% if page.url contains "kontakt" %}class="active"{% endif %}>Kontakt</a>
343+
<a href="/kontakt" class="nav-link {% if page.url contains 'kontakt' %}active-page{% endif %}">Kontakt</a>
329344
</div>
330345
</nav>
331346

@@ -403,7 +418,6 @@ <h4>Follow DevLabStudy</h4>
403418

404419
<div class="footer-divider"></div>
405420

406-
<!-- DODATKOWY PAS PRZEKIEROWAŃ W STYLU NASA -->
407421
<div class="footer-sublinks-bar">
408422
<a href="/">Sitemap</a>
409423
<a href="/newsy">For Media & Press</a>
@@ -414,13 +428,37 @@ <h4>Follow DevLabStudy</h4>
414428
<a href="https://github.com/DevLabStudy" target="_blank">Source Code (GitHub)</a>
415429
</div>
416430

417-
<!-- DOLNY PAS METADANYCH -->
418431
<div class="footer-meta-bar">
419432
<div>Page Last Updated: <span>October 06, 2026</span></div>
420433
<div>Page Editor: <span>Tobiasz Kajzer</span></div>
421434
<div>Responsible System Official: <span>DevLabStudy Administrator</span></div>
422435
</div>
423436
</footer>
424437

438+
<!-- SKRYPT OBSŁUGUJĄCY PŁYWAJĄCY WSKAŹNIK W NAVBARZE -->
439+
<script>
440+
const navCenter = document.getElementById('navCenter');
441+
const indicator = document.getElementById('navIndicator');
442+
const navLinks = navCenter.querySelectorAll('.nav-link');
443+
const activeLink = navCenter.querySelector('.active-page') || navLinks[0];
444+
445+
function moveIndicator(el) {
446+
indicator.style.width = el.offsetWidth + 'px';
447+
indicator.style.left = el.offsetLeft + 'px';
448+
}
449+
450+
// Ustawienie początkowe na aktywną stronę
451+
moveIndicator(activeLink);
452+
453+
navLinks.forEach(link => {
454+
link.addEventListener('mouseenter', () => {
455+
moveIndicator(link);
456+
});
457+
});
458+
459+
navCenter.addEventListener('mouseleave', () => {
460+
moveIndicator(activeLink);
461+
});
462+
</script>
425463
</body>
426464
</html>

0 commit comments

Comments
 (0)