Commits konnten nicht geladen werden ({error}).
}
+ {!error && !data && Noch keine Commits archiviert.
}
-
- {data.items.map((c) => (
-
- {c.url ? (
-
- {c.sha.slice(0, 7)}
-
- ) : (
-
{c.sha.slice(0, 7)}
- )}
-
{c.message.split('\n')[0]}
-
{c.repo.split('/').pop()}
-
{c.branch}
-
{dateFmt.format(new Date(c.committed_at))}
+ {data?.total > 0 && (
+
+ {data.items.map((c) => (
+
+ {c.url ? (
+
+ {c.sha.slice(0, 7)}
+
+ ) : (
+
{c.sha.slice(0, 7)}
+ )}
+
{c.message.split('\n')[0]}
+
{c.repo.split('/').pop()}
+
{c.branch}
+
+ {dateFmt.format(new Date(c.committed_at))}
+
+
+ ))}
- ))}
-
+ )}
- {pages > 1 && (
-
-
- Seite {page} / {pages}
-
-
- )}
+ {pages > 1 && (
+
+
+
+ {String(page).padStart(2, '0')} / {String(pages).padStart(2, '0')}
+
+
+
+ )}
+
);
}
diff --git a/frontend/src/pages/Devlogs.jsx b/frontend/src/pages/Devlogs.jsx
index 40330eb..7dce981 100644
--- a/frontend/src/pages/Devlogs.jsx
+++ b/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 (
<>
-
- Devlog
-
- Die Entwicklung von EcoGame — einem Voxel-Sandbox-Survival
- in Unreal Engine 5. Frisch aus dem Editor, Tag für Tag.
-
+
+ DEVLOG
+
+
+
// Archiv
+
Devlog
+
+ Entwicklungs-Updates, frisch aus dem Editor — automatisch archiviert.
+
+
Devlogs konnten nicht geladen werden.
}
- {!error && !data && Lade …
}
- {data?.total === 0 && Noch keine Devlogs archiviert.
}
+
+ {error && Devlogs konnten nicht geladen werden.
}
+ {!error && !data && Lade …
}
+ {data?.total === 0 && Noch keine Devlogs archiviert.
}
- {data?.total > 0 && (
-
- {data.items.map((d) => (
-
-
-
- {dateFmt.format(new Date(d.posted_at))}
-
- {relative(d.posted_at)}
-
-
-
-
-
- ))}
-
+ {data.items.map((d) => (
+
+
+
+ {dateFmt.format(new Date(d.posted_at))}
+
+ {relative(d.posted_at)}
+
+
+
+
+
+ ))}
+
-
- Seite {page} / {pages}
-
-
- )}
+ {pages > 1 && (
+
+
+
+ {String(page).padStart(2, '0')} / {String(pages).padStart(2, '0')}
+
+
+
+ )}
+
);
}
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 1d252c7..eb77309 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,330 +1,337 @@
-/* EcoGame Webinterface — Voxel-Game-Ästhetik, dunkles Theme */
+/* ═══════════════════════════════════════════════════
+ D4RKST3R // DEVLOG — Styles (Design-System der Platform-Seite)
+ ═══════════════════════════════════════════════════ */
+
+*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
:root {
- --bg: #0b0f0d;
- --bg-raised: #111713;
- --bg-card: rgba(22, 30, 25, 0.75);
- --border: rgba(255, 255, 255, 0.07);
- --border-strong: rgba(255, 255, 255, 0.12);
- --text: #edf3ee;
- --text-dim: #8fa396;
- --text-faint: #5c6e63;
- --green-100: #4ade80;
- --green-200: #22c55e;
- --green-300: #15803d;
- --discord: #5865f2;
- --discord-hover: #6a76f5;
- --font: 'Inter Variable', system-ui, sans-serif;
- --mono: 'JetBrains Mono', ui-monospace, monospace;
+ --neon: #f5c518;
+ --neon2: #ff4d00;
+ --bg: #0a0a0a;
+ --bg2: #111;
+ --bg3: #161616;
+ --text: #e8e0d0;
+ --muted: #8a8378;
+ --muted2: #666;
+ --border: rgba(245, 197, 24, 0.15);
+ --success: #00ff88;
+ --display: 'Bebas Neue', sans-serif;
+ --body: 'Barlow Condensed', sans-serif;
+ --mono: 'Share Tech Mono', monospace;
}
-* { box-sizing: border-box; }
-html { color-scheme: dark; }
+html { scroll-behavior: smooth; color-scheme: dark; }
body {
- margin: 0;
background: var(--bg);
color: var(--text);
- font-family: var(--font);
- line-height: 1.65;
- font-size: 15.5px;
- -webkit-font-smoothing: antialiased;
+ font-family: var(--body);
+ font-size: 17px;
+ line-height: 1.6;
+ overflow-x: hidden;
+ min-height: 100vh;
}
-.app { min-height: 100vh; display: flex; flex-direction: column; position: relative; }
+a { color: inherit; text-decoration: none; }
+button { font-family: inherit; cursor: pointer; }
-/* Sanfter grüner Glow oben + feines Grid als Spiel-Referenz */
-.bg-glow {
- position: absolute;
- inset: 0;
- pointer-events: none;
- background:
- radial-gradient(600px 320px at 50% -80px, rgba(34, 197, 94, 0.14), transparent 70%),
- linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
- linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
- background-size: auto, 32px 32px, 32px 32px;
- mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
- -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
- z-index: 0;
+/* ── NOISE + SCANLINES ─────────────────────────────── */
+body::before {
+ content: ''; position: fixed; inset: 0;
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+ opacity: .03; pointer-events: none; z-index: 900;
+}
+body::after {
+ content: ''; position: fixed; inset: 0;
+ background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, .07) 2px, rgba(0, 0, 0, .07) 4px);
+ pointer-events: none; z-index: 899;
}
-/* ---------- Header ---------- */
-.header {
- position: sticky;
- top: 0;
- z-index: 10;
- background: rgba(11, 15, 13, 0.85);
- border-bottom: 1px solid var(--border);
+/* ── PARTICLES ─────────────────────────────────────── */
+.particles-wrap {
+ position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden;
}
-.header-inner {
- max-width: 820px;
- margin: 0 auto;
- padding: 0.75rem 1.25rem;
- display: flex;
- align-items: center;
- gap: 2rem;
+.particle {
+ position: absolute; width: 2px; height: 2px;
+ background: var(--neon); border-radius: 50%; opacity: 0;
+ animation: floatUp var(--dur, 8s) var(--delay, 0s) infinite ease-in;
}
-.brand {
- display: flex;
- align-items: center;
- gap: 0.6rem;
- text-decoration: none;
- color: var(--text);
+@keyframes floatUp {
+ 0% { opacity: 0; transform: translateY(0) scale(1); }
+ 10% { opacity: .6; }
+ 80% { opacity: .2; }
+ 100% { opacity: 0; transform: translateY(-100vh) scale(0); }
}
-.logo { width: 26px; height: 26px; }
-.brand-name { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em; }
-.brand-accent { color: var(--green-100); }
-.nav { display: flex; gap: 0.4rem; flex: 1; }
-.nav a {
- color: var(--text-dim);
- text-decoration: none;
- font-weight: 500;
- font-size: 0.92rem;
- padding: 0.35rem 0.85rem;
- border-radius: 99px;
- transition: color 0.15s, background 0.15s;
-}
-.nav a:hover { color: var(--text); }
-.nav a.active { color: var(--green-100); background: rgba(34, 197, 94, 0.1); }
+.app { min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 2; }
-/* ---------- Auth ---------- */
+/* ── NAV ───────────────────────────────────────────── */
+.nav {
+ position: sticky; top: 0; z-index: 200;
+ display: flex; align-items: center; gap: 2.5rem;
+ padding: 1.25rem 2.5rem;
+ background: linear-gradient(to bottom, rgba(10, 10, 10, .98), rgba(10, 10, 10, .75));
+ border-bottom: 1px solid transparent;
+ transition: padding .3s, border-color .3s, background .3s;
+}
+.nav.scrolled {
+ padding: .8rem 2.5rem;
+ background: rgba(10, 10, 10, .95);
+ border-bottom-color: var(--border);
+}
+.nav-logo {
+ font-family: var(--display);
+ font-size: 1.6rem; letter-spacing: .15em; color: var(--neon);
+ line-height: 1;
+}
+.nav-logo span { color: var(--neon2); }
+
+.nav-links { display: flex; gap: 1.75rem; flex: 1; }
+.nav-links a {
+ font-family: var(--mono);
+ font-size: .7rem; letter-spacing: .25em; text-transform: uppercase;
+ color: var(--muted); padding: .3rem 0;
+ border-bottom: 1px solid transparent;
+ transition: color .2s, border-color .2s;
+}
+.nav-links a:hover { color: var(--text); }
+.nav-links a.active { color: var(--neon); border-bottom-color: var(--neon); }
+
+/* ── AUTH ──────────────────────────────────────────── */
.auth { display: flex; align-items: center; }
-.user-chip {
- display: flex;
- align-items: center;
- gap: 0.55rem;
- background: var(--bg-raised);
+.btn-login {
+ display: inline-flex; align-items: center; gap: .55rem;
+ font-family: var(--mono); font-size: .7rem;
+ letter-spacing: .25em; text-transform: uppercase;
+ color: var(--neon);
border: 1px solid var(--border);
- border-radius: 99px;
- padding: 0.25rem 0.7rem 0.25rem 0.3rem;
+ padding: .5rem 1.1rem;
+ transition: background .2s, border-color .2s, color .2s;
}
-.avatar { width: 26px; height: 26px; border-radius: 50%; }
-.username { color: var(--text-dim); font-size: 0.85rem; font-weight: 500; }
-.logout {
- color: var(--text-faint);
- text-decoration: none;
- font-size: 0.8rem;
- padding: 0 0.15rem;
+.btn-login:hover { border-color: var(--neon); background: rgba(245, 197, 24, .08); }
+.discord-mark { width: 15px; height: 15px; }
+
+.user-chip {
+ display: flex; align-items: center; gap: .6rem;
+ border: 1px solid rgba(255, 255, 255, .1);
+ padding: .3rem .8rem .3rem .35rem;
}
-.logout:hover { color: var(--text); }
+.avatar { width: 24px; height: 24px; border-radius: 50%; }
+.username { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; color: var(--muted); }
+.logout { color: var(--muted2); font-size: .75rem; padding: 0 .1rem; transition: color .2s; }
+.logout:hover { color: var(--neon2); }
-/* ---------- Buttons ---------- */
-.btn {
- display: inline-flex;
- align-items: center;
- gap: 0.5rem;
- background: var(--green-200);
- color: #04120a;
- border: none;
- border-radius: 8px;
- padding: 0.5rem 1rem;
- font-family: var(--font);
- font-size: 0.9rem;
- font-weight: 600;
- text-decoration: none;
- cursor: pointer;
- transition: background 0.15s, transform 0.1s;
+/* ── PAGE HEADER ───────────────────────────────────── */
+.page-header {
+ position: relative; overflow: hidden;
+ padding: 5.5rem 2.5rem 3.5rem;
+ border-bottom: 1px solid var(--border);
+ display: flex; align-items: flex-end;
+ min-height: 280px;
}
-.btn:hover:not(:disabled) { background: var(--green-100); transform: translateY(-1px); }
-.btn:disabled { opacity: 0.35; cursor: default; }
-
-.btn-discord { background: var(--discord); color: #fff; }
-.btn-discord:hover:not(:disabled) { background: var(--discord-hover); }
-.discord-mark { width: 18px; height: 18px; }
-
-/* ---------- Layout ---------- */
-.main {
- flex: 1;
- max-width: 820px;
- width: 100%;
+.page-bg-text {
+ position: absolute;
+ right: -1rem; top: 50%; transform: translateY(-50%);
+ font-family: var(--display);
+ font-size: 14rem; color: rgba(245, 197, 24, .04);
+ pointer-events: none; user-select: none; white-space: nowrap;
+ line-height: 1;
+}
+.page-header-grid {
+ position: absolute; inset: 0;
+ background-image:
+ linear-gradient(var(--border) 1px, transparent 1px),
+ linear-gradient(90deg, var(--border) 1px, transparent 1px);
+ background-size: 60px 60px;
+ mask-image: radial-gradient(ellipse 80% 80% at 30% 50%, black 20%, transparent 70%);
+ -webkit-mask-image: radial-gradient(ellipse 80% 80% at 30% 50%, black 20%, transparent 70%);
+ opacity: .5;
+}
+.page-header-content {
+ position: relative; z-index: 2;
+ max-width: 860px; width: 100%;
margin: 0 auto;
- padding: 2.5rem 1.25rem 4rem;
- position: relative;
- z-index: 1;
+}
+.page-tag {
+ font-family: var(--mono);
+ font-size: .7rem; letter-spacing: .3em;
+ color: var(--neon2); text-transform: uppercase;
+ margin-bottom: .9rem;
+}
+.page-title {
+ font-family: var(--display);
+ font-size: clamp(3rem, 7vw, 5.5rem);
+ line-height: .95; letter-spacing: .02em;
+ color: var(--text);
+ margin-bottom: .75rem;
+}
+.page-subtitle {
+ font-size: 1.1rem; font-weight: 300;
+ color: var(--muted); max-width: 600px; line-height: 1.6;
}
-.hero { margin-bottom: 2.25rem; }
-.hero h1 {
- margin: 0 0 0.4rem;
- font-size: 2.3rem;
- font-weight: 800;
- letter-spacing: -0.03em;
- background: linear-gradient(100deg, var(--text) 30%, var(--green-100));
- -webkit-background-clip: text;
- background-clip: text;
- color: transparent;
+/* ── CONTENT ───────────────────────────────────────── */
+.main { flex: 1; }
+.content {
+ max-width: 860px; width: 100%;
+ margin: 0 auto;
+ padding: 2.75rem 2.5rem 5rem;
}
-.hero p { margin: 0; color: var(--text-dim); max-width: 34rem; }
-.hero strong { color: var(--text); }
-.notice { color: var(--text-dim); padding: 2rem 0; }
-.notice.center { text-align: center; padding: 4rem 0; }
-.notice.center p { margin: 0 0 1rem; font-size: 1.05rem; }
+.notice { color: var(--muted); padding: 1.5rem 0; font-size: 1.05rem; }
+.notice.center { text-align: center; padding: 3.5rem 0; }
+.notice.center p { margin-bottom: 1.25rem; }
-/* ---------- Devlog-Timeline ---------- */
+/* ── DEVLOG-TIMELINE ───────────────────────────────── */
.timeline {
- display: flex;
- flex-direction: column;
- gap: 1.4rem;
- position: relative;
- padding-left: 1.4rem;
+ display: flex; flex-direction: column; gap: 1.5rem;
+ position: relative; padding-left: 1.6rem;
}
.timeline::before {
content: '';
- position: absolute;
- left: 4px;
- top: 8px;
- bottom: 8px;
- width: 2px;
- background: linear-gradient(to bottom, var(--green-300), rgba(21, 128, 61, 0.08));
- border-radius: 2px;
+ position: absolute; left: 3px; top: 10px; bottom: 10px;
+ width: 1px;
+ background: linear-gradient(to bottom, var(--neon), rgba(245, 197, 24, .05));
}
.card {
position: relative;
- background: var(--bg-card);
- border: 1px solid var(--border);
- border-radius: 14px;
- padding: 1.15rem 1.4rem 1.05rem;
- transition: border-color 0.2s, transform 0.15s;
+ background: var(--bg2);
+ border: 1px solid rgba(255, 255, 255, .06);
+ padding: 1.3rem 1.6rem 1.2rem;
+ transition: border-color .25s, background .25s;
}
-.card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
+.card:hover { border-color: var(--border); background: var(--bg3); }
.card::before {
- /* Voxel-Marker auf der Timeline */
+ /* Marker auf der Timeline */
content: '';
- position: absolute;
- left: -1.55rem;
- top: 1.45rem;
- width: 9px;
- height: 9px;
- background: var(--green-200);
- border-radius: 2px;
- transform: rotate(45deg);
- box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
+ position: absolute; left: -1.72rem; top: 1.55rem;
+ width: 7px; height: 7px;
+ background: var(--neon);
+ box-shadow: 0 0 10px rgba(245, 197, 24, .6);
}
.card-meta {
- display: flex;
- align-items: baseline;
- justify-content: space-between;
- gap: 1rem;
- margin-bottom: 0.5rem;
+ display: flex; align-items: baseline; justify-content: space-between;
+ gap: 1rem; margin-bottom: .55rem;
}
.card-date {
- color: var(--green-100);
- font-size: 0.85rem;
- font-weight: 650;
- text-transform: capitalize;
- letter-spacing: 0.01em;
+ font-family: var(--mono);
+ font-size: .75rem; letter-spacing: .2em;
+ color: var(--neon); text-transform: uppercase;
+}
+.card-rel {
+ font-family: var(--mono);
+ font-size: .65rem; letter-spacing: .1em;
+ color: var(--muted2); white-space: nowrap;
}
-.card-rel { color: var(--text-faint); font-size: 0.78rem; white-space: nowrap; }
-.card-body { color: #cfdad2; }
-.card-body p { margin: 0.55rem 0; }
+.card-body { color: var(--text); font-weight: 300; font-size: 1.08rem; }
+.card-body p { margin: .55rem 0; }
.card-body p:first-child { margin-top: 0; }
.card-body p:last-child { margin-bottom: 0; }
-.card-body strong { color: var(--text); }
-.card-body em { color: var(--text-dim); }
-.card-body a { color: var(--green-100); text-decoration: none; border-bottom: 1px solid rgba(74, 222, 128, 0.3); }
-.card-body a:hover { border-bottom-color: var(--green-100); }
+.card-body strong { color: var(--neon); font-weight: 600; }
+.card-body em { color: var(--muted); }
+.card-body a {
+ color: var(--neon);
+ border-bottom: 1px solid var(--border);
+ transition: border-color .2s;
+}
+.card-body a:hover { border-bottom-color: var(--neon); }
.card-body code {
font-family: var(--mono);
- font-size: 0.82em;
- background: rgba(0, 0, 0, 0.35);
- border: 1px solid var(--border);
- border-radius: 5px;
- padding: 0.08rem 0.4rem;
- color: #a7e8bd;
+ font-size: .82em;
+ background: #000;
+ border: 1px solid rgba(255, 255, 255, .08);
+ padding: .06rem .4rem;
+ color: var(--success);
}
-/* ---------- Commit-Liste ---------- */
-.commit-list {
- background: var(--bg-card);
- border: 1px solid var(--border);
- border-radius: 14px;
- overflow: hidden;
-}
+/* ── COMMIT-LISTE ──────────────────────────────────── */
+.commit-list { border: 1px solid rgba(255, 255, 255, .06); background: var(--bg2); }
.commit-row {
- display: flex;
- align-items: center;
- gap: 0.9rem;
- padding: 0.65rem 1.1rem;
- border-bottom: 1px solid var(--border);
- font-size: 0.9rem;
+ display: flex; align-items: center; gap: .9rem;
+ padding: .7rem 1.15rem;
+ border-bottom: 1px solid rgba(255, 255, 255, .05);
+ transition: background .15s;
}
.commit-row:last-child { border-bottom: none; }
-.commit-row:hover { background: rgba(255, 255, 255, 0.02); }
+.commit-row:hover { background: var(--bg3); }
.sha {
font-family: var(--mono);
- font-size: 0.8rem;
- color: var(--green-100);
- text-decoration: none;
- background: rgba(34, 197, 94, 0.08);
- border: 1px solid rgba(34, 197, 94, 0.2);
- border-radius: 6px;
- padding: 0.1rem 0.45rem;
+ font-size: .72rem; letter-spacing: .05em;
+ color: var(--neon);
+ border: 1px solid var(--border);
+ padding: .12rem .5rem;
white-space: nowrap;
+ transition: border-color .2s, background .2s;
}
-a.sha:hover { border-color: var(--green-200); }
+a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
.commit-msg {
flex: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- color: #cfdad2;
+ overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+ font-weight: 300; font-size: 1.02rem;
}
.chip {
- font-size: 0.72rem;
- font-weight: 550;
- padding: 0.12rem 0.55rem;
- border-radius: 99px;
- white-space: nowrap;
+ font-family: var(--mono);
+ font-size: .6rem; letter-spacing: .15em; text-transform: uppercase;
+ padding: .14rem .55rem; white-space: nowrap;
}
-.chip-repo { background: rgba(255, 255, 255, 0.05); color: var(--text-dim); border: 1px solid var(--border); }
-.chip-branch { background: rgba(88, 101, 242, 0.12); color: #a5b0ff; border: 1px solid rgba(88, 101, 242, 0.25); }
+.chip-repo { color: var(--muted); border: 1px solid rgba(255, 255, 255, .1); }
+.chip-branch { color: var(--neon2); border: 1px solid rgba(255, 77, 0, .3); }
.commit-time {
font-family: var(--mono);
- font-size: 0.75rem;
- color: var(--text-faint);
- white-space: nowrap;
+ font-size: .68rem; color: var(--muted2); white-space: nowrap;
}
-/* ---------- Pagination ---------- */
+/* ── PAGINATION ────────────────────────────────────── */
.pager {
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 1.25rem;
- margin-top: 2rem;
- color: var(--text-faint);
- font-size: 0.88rem;
+ display: flex; align-items: center; justify-content: center;
+ gap: 1.5rem; margin-top: 2.25rem;
}
+.pager-info {
+ font-family: var(--mono);
+ font-size: .75rem; letter-spacing: .2em; color: var(--muted2);
+}
+.btn {
+ font-family: var(--mono);
+ font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
+ color: var(--neon);
+ background: none;
+ border: 1px solid var(--border);
+ padding: .5rem 1.1rem;
+ transition: background .2s, border-color .2s, opacity .2s;
+}
+.btn:hover:not(:disabled) { border-color: var(--neon); background: rgba(245, 197, 24, .08); }
+.btn:disabled { opacity: .25; cursor: default; }
-/* ---------- Footer ---------- */
+/* ── FOOTER ────────────────────────────────────────── */
.footer {
border-top: 1px solid var(--border);
- color: var(--text-faint);
- padding: 1.25rem;
- font-size: 0.85rem;
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 0.6rem;
+ padding: 1.5rem 2.5rem;
+ display: flex; align-items: center; justify-content: center; gap: .9rem;
+ font-family: var(--mono); font-size: .68rem; letter-spacing: .2em;
+ color: var(--muted2);
}
-.footer .logo { width: 18px; height: 18px; opacity: 0.7; }
-.footer a { color: var(--text-dim); text-decoration: none; }
-.footer a:hover { color: var(--green-100); }
+.footer-logo { font-family: var(--display); font-size: .95rem; letter-spacing: .15em; color: var(--neon); }
+.footer-logo span { color: var(--neon2); }
+.footer-sep { color: var(--muted2); }
+.footer a { color: var(--muted); text-transform: uppercase; transition: color .2s; }
+.footer a:hover { color: var(--neon); }
-/* ---------- Mobile ---------- */
+/* ── MOBILE ────────────────────────────────────────── */
@media (max-width: 640px) {
- .header-inner { gap: 1rem; }
+ .nav { padding: 1rem 1.25rem; gap: 1.25rem; }
+ .nav.scrolled { padding: .8rem 1.25rem; }
.username { display: none; }
- .hero h1 { font-size: 1.8rem; }
- .timeline { padding-left: 1.1rem; }
- .commit-row { flex-wrap: wrap; row-gap: 0.3rem; }
+ .page-header { padding: 4rem 1.25rem 2.5rem; min-height: 200px; }
+ .page-bg-text { font-size: 8rem; }
+ .content { padding: 2rem 1.25rem 4rem; }
+ .timeline { padding-left: 1.2rem; }
+ .commit-row { flex-wrap: wrap; row-gap: .35rem; }
.commit-msg { flex-basis: 100%; order: -1; white-space: normal; }
}