Update post.html

Author: DevLabStudy

_layouts/post.html

@@ -5,52 +5,217 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ page.title }} | DevLabStudy</title>
     <link rel="icon" type="image/jpeg" href="/profileIcon_g3ffyg7edeeg1.jpeg">
+    <!-- Czcionki Google Fonts dopasowane do reszty portalu -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&family=JetBrains+Mono:wght@400;700;800&display=swap" rel="stylesheet">
 
     <style>
         :root {
-            --bg-nav: rgba(5, 5, 5, 0.85); --text-main: #f8fafc; --text-muted: #94a3b8; 
-            --border-color: rgba(255, 255, 255, 0.1); --accent-blue: #3b82f6;
+            --bg-nav: rgba(5, 5, 5, 0.9);
+            --card-bg: rgba(10, 15, 25, 0.75);
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --border: rgba(255, 255, 255, 0.1);
+            --accent-blue: #00d2ff;
+            --accent-contrast: #ff5e00;
         }
+
         body { 
-            font-family: 'Inter', -apple-system, sans-serif; margin: 0; min-height: 100vh;
+            font-family: 'Inter', -apple-system, sans-serif; 
+            margin: 0; 
+            min-height: 100vh;
             background: #000 url('/background.png') no-repeat center center fixed; 
-            background-size: cover; color: var(--text-main); line-height: 1.8;
+            background-size: cover; 
+            color: var(--text-main); 
+            line-height: 1.8;
+        }
+
+        .navbar { 
+            position: sticky; 
+            top: 0; 
+            z-index: 100; 
+            background: var(--bg-nav); 
+            backdrop-filter: blur(15px); 
+            border-bottom: 1px solid var(--border); 
+            padding: 15px 40px; 
+            display: flex; 
+            align-items: center; 
+            justify-content: space-between; 
+        }
+        .nav-brand { 
+            font-size: 1.3rem; 
+            font-weight: 900; 
+            text-decoration: none; 
+            color: var(--text-main); 
+            font-family: 'JetBrains Mono', monospace;
+            letter-spacing: -0.5px;
+        }
+        .nav-brand span { color: var(--accent-contrast); }
+        .back-link { 
+            color: var(--accent-blue); 
+            text-decoration: none; 
+            font-weight: 700; 
+            font-size: 0.85rem; 
+            font-family: 'JetBrains Mono', monospace;
+            text-transform: uppercase;
+            transition: 0.2s;
+        }
+        .back-link:hover { opacity: 0.8; transform: translateX(-3px); }
+        
+        .container { 
+            max-width: 900px; 
+            margin: 50px auto; 
+            padding: 50px; 
+            background: var(--card-bg); 
+            backdrop-filter: blur(15px); 
+            border-radius: 14px; 
+            border: 1px solid var(--border); 
+            box-shadow: 0 20px 50px rgba(0,0,0,0.6);
+            position: relative;
+            overflow: hidden;
+        }
+        /* Cienki pasek akcentu po lewej stronie kontenera w stylu terminala */
+        .container::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; width: 4px; height: 100%;
+            background: var(--accent-blue);
         }
-        .navbar { position: sticky; top: 0; z-index: 100; 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; }
-        .nav-brand { font-size: 1.5rem; font-weight: 800; text-decoration: none; color: var(--text-main); }
-        .back-link { color: var(--accent-blue); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
-        .back-link:hover { text-decoration: underline; }
 
-        .container { max-width: 800px; margin: 40px auto; padding: 40px; background: rgba(5, 5, 5, 0.8); backdrop-filter: blur(10px); border-radius: 12px; border: 1px solid var(--border-color); }
+        .article-header { 
+            border-bottom: 1px dashed var(--border); 
+            padding-bottom: 25px; 
+            margin-bottom: 35px; 
+        }
+
+        .article-meta-bar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.78rem;
+        }
+
+        .article-category {
+            color: var(--accent-contrast);
+            font-weight: 800;
+            text-transform: uppercase;
+            background: rgba(255, 94, 0, 0.1);
+            padding: 4px 10px;
+            border-radius: 4px;
+            border: 1px solid rgba(255, 94, 0, 0.2);
+        }
+
+        .article-date { 
+            color: var(--text-muted); 
+        }
 
-        .article-header { border-bottom: 1px solid var(--border-color); padding-bottom: 20px; margin-bottom: 30px; }
-        .article-title { font-size: 2.2rem; margin: 0 0 10px 0; font-weight: 800; }
-        .article-date { color: var(--text-muted); font-size: 0.95rem; }
+        .article-title { 
+            font-size: 2.4rem; 
+            margin: 0; 
+            font-weight: 900; 
+            letter-spacing: -1px;
+            line-height: 1.2;
+        }
 
-        /* Zaktualizowane style treści - zabezpieczenie przed rozciąganiem */
-        .article-content { font-size: 1.1rem; color: #cbd5e1; overflow-wrap: break-word; }
-        .article-content h2, .article-content h3 { margin-top: 40px; color: var(--text-main); }
-        .article-content a { color: var(--accent-blue); text-decoration: none; }
+        /* Stylizacja treści wpisu */
+        .article-content { 
+            font-size: 1.05rem; 
+            color: #cbd5e1; 
+            overflow-wrap: break-word; 
+        }
+        .article-content h2, .article-content h3 { 
+            margin-top: 45px; 
+            color: #fff; 
+            font-family: 'JetBrains Mono', monospace;
+            letter-spacing: -0.5px;
+        }
+        .article-content h2 { font-size: 1.5rem; border-left: 3px solid var(--accent-blue); padding-left: 12px; }
+        .article-content h3 { font-size: 1.2rem; color: var(--accent-blue); }
+
+        .article-content a { color: var(--accent-blue); text-decoration: none; font-weight: 600; }
+        .article-content a:hover { text-decoration: underline; }
 
-        /* Kluczowe poprawki dla zdjęć i kodu */
-        .article-content img { max-width: 100%; height: auto; display: block; margin: 20px auto; border-radius: 8px; border: 1px solid var(--border-color); }
-        .article-content pre { max-width: 100%; overflow-x: auto; background: rgba(0,0,0,0.5); padding: 15px; border-radius: 8px; }
-        .article-content code { background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 4px; font-family: monospace; }
+        /* Tabeli w markdownie nadajemy inżynieryjny sznyt */
+        .article-content table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 30px 0;
+            font-size: 0.9rem;
+            font-family: 'JetBrains Mono', monospace;
+        }
+        .article-content th, .article-content td {
+            border: 1px solid var(--border);
+            padding: 12px 15px;
+            text-align: left;
+        }
+        .article-content th {
+            background: rgba(0, 210, 255, 0.08);
+            color: var(--accent-blue);
+        }
+        .article-content tr:nth-child(even) {
+            background: rgba(255, 255, 255, 0.02);
+        }
+
+        /* Zabezpieczenie zdjęć i kodu */
+        .article-content img { 
+            max-width: 100%; 
+            height: auto; 
+            display: block; 
+            margin: 30px auto; 
+            border-radius: 8px; 
+            border: 1px solid var(--border); 
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+        }
+        .article-content pre { 
+            max-width: 100%; 
+            overflow-x: auto; 
+            background: rgba(0,0,0,0.6); 
+            border: 1px solid var(--border);
+            padding: 20px; 
+            border-radius: 8px; 
+            font-family: 'JetBrains Mono', monospace;
+        }
+        .article-content code { 
+            background: rgba(255,255,255,0.07); 
+            padding: 3px 7px; 
+            border-radius: 4px; 
+            font-family: 'JetBrains Mono', monospace; 
+            font-size: 0.9em;
+            color: var(--accent-blue);
+        }
+        .article-content pre code { background: none; padding: 0; color: #f8fafc; }
 
-        footer { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin-top: 50px; margin-bottom: 30px; }
+        footer { 
+            text-align: center; 
+            color: var(--text-muted); 
+            font-size: 0.8rem; 
+            font-family: 'JetBrains Mono', monospace;
+            margin-top: 60px; 
+            margin-bottom: 40px; 
+        }
+
+        @media (max-width: 768px) {
+            .container { margin: 20px 15px; padding: 25px; }
+            .article-title { font-size: 1.8rem; }
+            .navbar { padding: 15px 20px; }
+        }
     </style>
 </head>
 <body>
 
     <nav class="navbar">
-        <a href="/" class="nav-brand">DevLabStudy</a>
-        <a href="/blog" class="back-link">&larr; Powrót do bloga</a>
+        <a href="/" class="nav-brand">DEVLABSTUDY<span>_</span></a>
+        <a href="/blog" class="back-link">&larr; [ POWRÓT DO REJESTRU ]</a>
     </nav>
 
     <main class="container">
         <header class="article-header">
+            <div class="article-meta-bar">
+                <span class="article-category">[{{ page.category | default: "SYSTEM" | upcase }}]</span>
+                <span class="article-date">// {{ page.date | date: "%Y.%m.%d" }}</span>
+            </div>
             <h1 class="article-title">{{ page.title }}</h1>
-            <div class="article-date">{{ page.date | date: "%B %d, %Y" }}</div>
         </header>
 
         <article class="article-content">
@@ -59,7 +224,7 @@ <h1 class="article-title">{{ page.title }}</h1>
     </main>
 
     <footer>
-        <p>1 Gbps Fiber - Linux Fedora - Orbit™ Project 2026</p>
+        <p>// 1 Gbps Fiber - Linux Fedora - DevLabStudy System Hub 2026</p>
     </footer>
 
 </body>