Design: D4RKST3R-Brand statt EcoGame — generisches Devlog-Archiv

- Design-System der d4rkst3r-platform übernommen: Neon-Gelb/Orange auf Schwarz,
  Bebas Neue + Barlow Condensed + Share Tech Mono (selbst gehostet)
- Noise- + Scanline-Overlay, aufsteigende Partikel, Grid-PageHeader mit Ghost-Text
- EcoGame-Branding entfernt — Seite ist jetzt projekt-neutral nutzbar
- Nav mit D4RKST3R-Wortmarke (3R in Orange), Mono-Navigation, Login als Neon-Outline
- Im Browser verifiziert (Devlogs + Commits)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/pages/Devlogs.jsx

@@ -3,7 +3,7 @@ import { apiGet } from '../api.js';
 import { Markdown } from '../markdown.jsx';
 
 const dateFmt = new Intl.DateTimeFormat('de-DE', {
-    weekday: 'long', day: '2-digit', month: 'long', year: 'numeric',
+    weekday: 'short', day: '2-digit', month: '2-digit', year: 'numeric',
 });
 
 /** Relative Angabe wie „vor 3 Tagen" für die Karten-Ecke */
@@ -31,47 +31,55 @@ export default function Devlogs() {
 
     return (
         <>
-            <section className="hero">
-                <h1>Devlog</h1>
-                <p>
-                    Die Entwicklung von <strong>EcoGame</strong> — einem Voxel-Sandbox-Survival
-                    in Unreal Engine 5. Frisch aus dem Editor, Tag für Tag.
-                </p>
+            <section className="page-header">
+                <div className="page-bg-text">DEVLOG</div>
+                <div className="page-header-grid" aria-hidden="true" />
+                <div className="page-header-content">
+                    <div className="page-tag">// Archiv</div>
+                    <h1 className="page-title">Devlog</h1>
+                    <p className="page-subtitle">
+                        Entwicklungs-Updates, frisch aus dem Editor — automatisch archiviert.
+                    </p>
+                </div>
             </section>
 
-            {error && <p className="notice">Devlogs konnten nicht geladen werden.</p>}
-            {!error && !data && <p className="notice">Lade …</p>}
-            {data?.total === 0 && <p className="notice">Noch keine Devlogs archiviert.</p>}
+            <section className="content">
+                {error && <p className="notice">Devlogs konnten nicht geladen werden.</p>}
+                {!error && !data && <p className="notice">Lade …</p>}
+                {data?.total === 0 && <p className="notice">Noch keine Devlogs archiviert.</p>}
 
-            {data?.total > 0 && (
-                <div className="timeline">
-                    {data.items.map((d) => (
-                        <article className="card" key={d.message_id}>
-                            <div className="card-meta">
-                                <span className="card-date">
-                                    {dateFmt.format(new Date(d.posted_at))}
-                                </span>
-                                <span className="card-rel">{relative(d.posted_at)}</span>
-                            </div>
-                            <div className="card-body">
-                                <Markdown text={d.content} />
-                            </div>
-                        </article>
-                    ))}
-                </div>
-            )}
+                {data?.total > 0 && (
+                    <div className="timeline">
+                        {data.items.map((d) => (
+                            <article className="card" key={d.message_id}>
+                                <div className="card-meta">
+                                    <span className="card-date">
+                                        {dateFmt.format(new Date(d.posted_at))}
+                                    </span>
+                                    <span className="card-rel">{relative(d.posted_at)}</span>
+                                </div>
+                                <div className="card-body">
+                                    <Markdown text={d.content} />
+                                </div>
+                            </article>
+                        ))}
+                    </div>
+                )}
 
-            {pages > 1 && (
-                <div className="pager">
-                    <button className="btn" disabled={page <= 1} onClick={() => setPage(page - 1)}>
-                        ← Neuere
-                    </button>
-                    <span>Seite {page} / {pages}</span>
-                    <button className="btn" disabled={page >= pages} onClick={() => setPage(page + 1)}>
-                        Ältere →
-                    </button>
-                </div>
-            )}
+                {pages > 1 && (
+                    <div className="pager">
+                        <button className="btn" disabled={page <= 1} onClick={() => setPage(page - 1)}>
+                            ← Neuere
+                        </button>
+                        <span className="pager-info">
+                            {String(page).padStart(2, '0')} / {String(pages).padStart(2, '0')}
+                        </span>
+                        <button className="btn" disabled={page >= pages} onClick={() => setPage(page + 1)}>
+                            Ältere →
+                        </button>
+                    </div>
+                )}
+            </section>
         </>
     );
 }