77 < link rel ="icon " type ="image/png " href ="/qr-code.png ">
88 < style >
99 : root {
10- --bg-body : # 0f172a ; --bg-nav : rgba (15 , 23 , 42 , 0.85 ); --bg-card : # 1e293b ;
11- --text-main : # f8fafc ; --text-muted : # 94a3b8 ; --border-color : # 334155 ;
12- --accent-purple : # 8b5cf6 ; --accent-blue : # 3b82f6 ;
10+ --bg-body : # 050505 ; --bg-nav : rgba (5 , 5 , 5 , 0.7 ); --bg-card : # 111 ;
11+ --text-main : # f8fafc ; --text-muted : # 94a3b8 ; --border-color : rgba ( 255 , 255 , 255 , 0.1 ) ;
12+ --accent-purple : # 8b5cf6 ;
1313 }
1414 body { font-family : 'Inter' , sans-serif; background : var (--bg-body ); color : var (--text-main ); margin : 0 ; line-height : 1.6 ; }
1515
16- /* --- UNIWERSALNY NAVBAR --- */
17- .navbar { background : var (--bg-nav ); backdrop-filter : blur (12px ); border-bottom : 1px solid var (--border-color ); padding : 15px 40px ; display : flex; align-items : center; position : sticky; top : 0 ; z-index : 100 ; }
18- .nav-brand { font-size : 1.5rem ; font-weight : 800 ; text-decoration : none; color : var (--text-main ); letter-spacing : -0.5px ; margin-right : 40px ; }
19- .nav-center { display : flex; gap : 25px ; align-items : center; }
16+ /* PERFEKCYJNY NAVBAR */
17+ .navbar { background : var (--bg-nav ); backdrop-filter : blur (15px ); border-bottom : 1px solid var (--border-color ); padding : 15px 40px ; display : flex; align-items : center; justify-content : space-between; position : sticky; top : 0 ; z-index : 100 ; }
18+ .nav-left { flex : 1 ; display : flex; justify-content : flex-start; }
19+ .nav-brand { font-size : 1.5rem ; font-weight : 800 ; text-decoration : none; color : var (--text-main ); letter-spacing : -0.5px ; }
20+ .nav-center { flex : 2 ; display : flex; justify-content : center; gap : 30px ; }
2021 .nav-center a { text-decoration : none; color : var (--text-muted ); font-weight : 600 ; font-size : 0.95rem ; transition : color 0.3s ; }
2122 .nav-center a : hover , .nav-center a .active { color : var (--accent-purple ); }
22-
23+ . nav-right { flex : 1 ; display : flex; justify-content : flex-end; }
2324 .dropdown { position : relative; display : inline-block; padding : 10px 0 ; }
2425 .dropbtn { color : var (--text-muted ); font-weight : 600 ; font-size : 0.95rem ; transition : 0.3s ; cursor : pointer; }
25- .dropdown : hover .dropbtn { color : var (--accent-purple ); }
26- .dropdown-content { display : none; position : absolute; left : 0 ; top : 100% ; background-color : var ( --bg-card ) ; min-width : 180px ; box-shadow : 0 10px 30 px rgba (0 , 0 , 0 , 0.5 ); border-radius : 12px ; border : 1px solid var (--border-color ); overflow : hidden; z-index : 1 ; opacity : 0 ; transform : translateY (-10px ); transition : all 0.3s ease; }
26+ .dropdown : hover .dropbtn { color : var (--text-main ); }
27+ .dropdown-content { display : none; position : absolute; right : 0 ; top : 100% ; background-color : # 111 ; min-width : 180px ; box-shadow : 0 10px 40 px rgba (0 , 0 , 0 , 0.8 ); border-radius : 12px ; border : 1px solid var (--border-color ); overflow : hidden; z-index : 1 ; opacity : 0 ; transform : translateY (-10px ); transition : all 0.3s ease; }
2728 .dropdown : hover .dropdown-content { display : block; opacity : 1 ; transform : translateY (0 ); }
2829 .dropdown-content a { color : var (--text-main ) !important ; padding : 12px 20px ; text-decoration : none; display : flex; justify-content : space-between; font-size : 0.9rem ; font-weight : 600 ; border-bottom : 1px solid var (--border-color ); transition : background 0.2s ; }
2930 .dropdown-content a : last-child { border-bottom : none; }
4243 .btn-github { display : inline-block; background : var (--accent-purple ); color : white; text-decoration : none; padding : 15px 30px ; border-radius : 12px ; font-weight : 700 ; margin-top : 30px ; transition : 0.3s ; box-shadow : 0 4px 15px rgba (139 , 92 , 246 , 0.4 ); text-align : center; font-size : 1.1rem ; }
4344 .btn-github : hover { transform : translateY (-3px ); box-shadow : 0 8px 25px rgba (139 , 92 , 246 , 0.6 ); }
4445
45- @media (max-width : 768px ) { .navbar { flex-direction : column; padding : 15px ; gap : 15px ; } .nav-brand { margin -right: 0 ; } .nav-center { flex-wrap : wrap; justify-content : center ; } }
46+ @media (max-width : 768px ) { .navbar { flex-direction : column; padding : 15px ; gap : 15px ; } .nav-left , . nav-center , . nav -right { justify-content : center; width : 100 % ; } .nav-center { flex-wrap : wrap; } }
4647 </ style >
4748</ head >
4849< body >
4950 < nav class ="navbar ">
50- < a href ="/ " class ="nav-brand "> DevLabStudy</ a >
51+ < div class =" nav-left " > < a href ="/ " class ="nav-brand "> DevLabStudy</ a > </ div >
5152 < div class ="nav-center ">
5253 < a href ="/ "> Hub</ a >
54+ < a href ="/blog "> Blog</ a >
55+ < a href ="/homelab "> HomeLab</ a >
56+ < a href ="/orbit " class ="active "> Orbit™</ a >
57+ </ div >
58+ < div class ="nav-right ">
5359 < div class ="dropdown ">
5460 < span class ="dropbtn "> Community</ span >
5561 < div class ="dropdown-content ">
6066 < a href ="https://www.reddit.com/user/devlabstudy "> Reddit < span > ↗</ span > </ a >
6167 </ div >
6268 </ div >
63- < a href ="/blog "> Blog</ a >
64- < a href ="/homelab "> HomeLab</ a >
65- < a href ="/orbit " class ="active "> Orbit™</ a >
6669 </ div >
6770 </ nav >
6871
@@ -77,22 +80,6 @@ <h2>Project Repository</h2>
7780 < p style ="color: var(--text-muted); "> The entire source code, scripts, and documentation for Orbit™ are openly available on GitHub. Feel free to explore, clone, or contribute!</ p >
7881 < a href ="https://github.com/DevLabStudy/orbit " class ="btn-github "> View Orbit™ Repository on GitHub</ a >
7982 </ div >
80-
81- < div class ="card ">
82- < h2 > The Mission</ h2 >
83- < p > Orbit is designed to run modern, complex workloads on "forgotten" hardware. By combining ultra-optimized Docker images, a custom Python communication layer, and a minimal Redis bus, it turns old laptops and cheap VPS instances into a powerful, unified cluster.</ p >
84- </ div >
85-
86- < div class ="card ">
87- < h2 > Core Technologies</ h2 >
88- < div class ="tech-stack ">
89- < span class ="tech-tag "> 🐋 Docker Engine</ span >
90- < span class ="tech-tag "> 🐍 Python Core v3.12+</ span >
91- < span class ="tech-tag "> 📊 Redis Bus</ span >
92- < span class ="tech-tag "> 🐧 Ubuntu Server / Mint</ span >
93- < span class ="tech-tag "> 🔒 WireGuard VPN</ span >
94- </ div >
95- </ div >
96- </ main >
83+ </ main >
9784</ body >
9885</ html >
0 commit comments