Update index.html

Author: DevLabStudy

index.html

@@ -9,6 +9,29 @@
         padding-right: 60px !important;
     }
 
+    /* ESTETYCZNE NAGŁÓWKI SEKCJI */
+    .section-tag {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        font-family: 'JetBrains Mono', monospace;
+        font-size: 0.8rem;
+        font-weight: 800;
+        color: var(--accent-blue);
+        background: rgba(0, 210, 255, 0.08);
+        border: 1px solid rgba(0, 210, 255, 0.2);
+        padding: 6px 14px;
+        border-radius: 6px;
+        text-transform: uppercase;
+        letter-spacing: 1.5px;
+        margin-top: 55px;
+        margin-bottom: 20px;
+    }
+    .section-tag::before {
+        content: '#';
+        color: var(--accent-contrast);
+    }
+
     .hero {
         margin-top: 20px;
         margin-bottom: 60px;
@@ -83,7 +106,7 @@
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 25px;
-        margin-bottom: 60px;
+        margin-bottom: 20px;
     }
 
     .stat-card {
@@ -133,12 +156,12 @@
     .stat-external { color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; transition: 0.2s; }
     .stat-card:hover .stat-external { color: var(--accent-blue); transform: translateX(3px); }
 
-    /* SEKCJA NEWSÓW NA STRONIE GŁÓWNEJ */
+    /* SEKCJA NEWSÓW NA STRONIE GŁÓWNEJ – 4 W POZIOMIE */
     .newsy-home-grid {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-        gap: 25px;
-        margin-bottom: 60px;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 20px;
+        margin-bottom: 20px;
     }
 
     .home-news-card {
@@ -157,7 +180,7 @@
         box-shadow: 0 10px 30px rgba(0,210,255,0.15);
     }
     .home-news-content {
-        padding: 20px;
+        padding: 16px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
@@ -167,7 +190,7 @@
     /* MINIATURKA / IKONA NEWSA */
     .news-thumb {
         width: 100%;
-        height: 230px;
+        height: 160px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -176,27 +199,20 @@
         overflow: hidden;
     }
     .news-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
-    .news-thumb-img.is-icon {
-        width: 96px; height: 96px;
-        object-fit: cover;
-        border-radius: 18px;
-        border: 1px solid rgba(0, 210, 255, 0.25);
-        background: rgba(0, 210, 255, 0.08);
-    }
     .news-thumb-fallback {
-        font-size: 3.2rem;
-        width: 96px; height: 96px;
+        font-size: 2.5rem;
+        width: 70px; height: 70px;
         display: flex; align-items: center; justify-content: center;
         background: rgba(0, 210, 255, 0.08);
         border: 1px solid rgba(0, 210, 255, 0.25);
-        border-radius: 18px;
+        border-radius: 14px;
     }
 
     .sponsors-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
         gap: 25px;
-        margin-bottom: 60px;
+        margin-bottom: 20px;
     }
 
     .sponsor-card {
@@ -238,7 +254,7 @@
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
         gap: 25px;
-        margin-bottom: 60px;
+        margin-bottom: 20px;
     }
 
     .extra-card {
@@ -283,7 +299,7 @@
     .archive-list {
         display: flex;
         flex-direction: column;
-        margin-bottom: 60px;
+        margin-bottom: 40px;
         border-top: 1px solid var(--border);
     }
 
@@ -328,16 +344,20 @@
         text-align: right;
     }
 
-    @media (max-width: 1024px) {
+    @media (max-width: 1200px) {
+        .newsy-home-grid { grid-template-columns: repeat(2, 1fr); }
+    }
+    @media (max-width: 768px) {
         .stats-grid { grid-template-columns: 1fr; }
+        .newsy-home-grid { grid-template-columns: 1fr; }
         .archive-item { grid-template-columns: 1fr; gap: 10px; padding: 20px 10px; }
         .archive-date { text-align: left; }
     }
 </style>
 
 <!-- SEKCJA HERO -->
 <section class="hero">
-    <span class="section-tag">INFRASTRUKTURA & KOD</span>
+    <div class="section-tag" style="margin-top: 0;">Infrastruktura & Kod</div>
     <h1 class="hero-title">DEVLAB<br>STUDY<span>_</span></h1>
     <p class="hero-desc">
         Dokumentuję rozbudowę mojego środowiska homelab (Cisco, MikroTik, Proxmox), konfigurację sieci LAN/VLAN i optymalizację energetyczną. Dodatkowo tworzę autorskie aplikacje z linii DevLab Network Toolkit.
@@ -349,7 +369,7 @@ <h1 class="hero-title">DEVLAB<br>STUDY<span>_</span></h1>
 </section>
 
 <!-- STATYSTYKI YOUTUBE -->
-<span class="section-tag">AKTYWNE WĘZŁY SPOŁECZNOŚCI</span>
+<div class="section-tag">Aktywne Węzły Społeczności</div>
 <div class="stats-grid">
     <a href="https://www.youtube.com/channel/UCisFPSU_Y8hznpqrcewcJAg" target="_blank" class="stat-card">
         <div>
@@ -393,10 +413,10 @@ <h1 class="hero-title">DEVLAB<br>STUDY<span>_</span></h1>
 </div>
 
 <!-- SEKCJA NAJNOWSZE NEWSY -->
-<span class="section-tag">NAJNOWSZE RAPORTY TECHNOLOGICZNE (NEWSY)</span>
+<div class="section-tag">Najnowsze Raporty Technologiczne (Newsy)</div>
 <div class="newsy-home-grid">
     {% assign sorted_newsy = site.newsy | sort: 'date' | reverse %}
-    {% for post in sorted_newsy limit:3 %}
+    {% for post in sorted_newsy limit:4 %}
     <a href="{{ post.url | relative_url }}" class="home-news-card">
         {% assign t = post %}
         {% assign thumb = t.icon | default: t.image %}
@@ -428,7 +448,7 @@ <h1 class="hero-title">DEVLAB<br>STUDY<span>_</span></h1>
               {% assign thumb_src = thumb | relative_url %}
             {% endunless %}
             <img src="{{ thumb_src }}" alt="" loading="lazy"
-                 class="news-thumb-img {% if is_icon %}is-icon{% endif %}"
+                 class="news-thumb-img"
                  onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
             <span class="news-thumb-fallback" style="display:none">{{ emoji }}</span>
           {% else %}
@@ -437,23 +457,23 @@ <h1 class="hero-title">DEVLAB<br>STUDY<span>_</span></h1>
         </div>
         <div class="home-news-content">
             <div>
-                <div style="font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--accent-contrast); margin-bottom: 8px; font-weight: 800;">
+                <div style="font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--accent-contrast); margin-bottom: 6px; font-weight: 800;">
                     [{{ post.category | default: "BRIEF" | upcase }}] // {{ post.date | date: "%Y.%m.%d" }}
                 </div>
-                <h3 style="font-size: 1.15rem; font-weight: 800; color: #fff; margin: 0 0 10px 0; line-height: 1.3;">
+                <h3 style="font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 10px 0; line-height: 1.25;">
                     {{ post.title }}
                 </h3>
             </div>
-            <div style="font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--accent-blue); margin-top: 15px; font-weight: 700;">
-                // CZYTAJ ARTYKUŁ &rarr;
+            <div style="font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--accent-blue); margin-top: 12px; font-weight: 700;">
+                // CZYTAJ &rarr;
             </div>
         </div>
     </a>
     {% endfor %}
 </div>
 
 <!-- SEKCJA SPONSORÓW -->
-<span class="section-tag">PARTNERZY TECHNOLOGICZNI</span>
+<div class="section-tag">Partnerzy Technologiczni</div>
 <div class="sponsors-grid">
     <div class="sponsor-card">
         <div>
@@ -473,7 +493,7 @@ <h3 style="font-size: 1.15rem; font-weight: 800; color: #fff; margin: 0 0 10px 0
 </div>
 
 <!-- MARKETPLACE & SUPPORT -->
-<span class="section-tag">MARKETPLACE & WSPARCIE</span>
+<div class="section-tag">Marketplace & Wsparcie</div>
 <div class="extra-grid">
     <div class="extra-card">
         <div style="position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #00bfb2;"></div>
@@ -502,7 +522,7 @@ <h3 style="font-size: 0.8rem; color: var(--accent-blue); margin: 0 0 10px 0; tex
 </div>
 
 <!-- DYNAMICZNY DZIENNIK SYSTEMOWY (BLOG) -->
-<span class="section-tag">OSTATNIE WPISY / DZIENNIK SYSTEMOWY</span>
+<div class="section-tag">Ostatnie Wpisy / Dziennik Systemowy</div>
 <div class="archive-list">
     {% assign sorted_posts = site.posts | sort: 'date' | reverse %}
     {% for post in sorted_posts limit:5 %}