From db2e7987a0a4eb3bd5f80941e1d1bce8120c16c4 Mon Sep 17 00:00:00 2001 From: D4rkst3r Date: Thu, 23 Jul 2026 11:58:50 +0200 Subject: [PATCH] =?UTF-8?q?Design-Polish:=20Favicon,=20Animationen,=20Foku?= =?UTF-8?q?s-=20und=20Hover-Zust=C3=A4nde?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Voxel-Würfel-Favicon (SVG, Brand-Gelb/Orange) + theme-color - Einblend-Animation für Header/Content (respektiert prefers-reduced-motion) - Timeline-Marker leuchten beim Karten-Hover, Buttons mit Glow - Brand-Selection, Focus-Visible-Outline, dunkle Scrollbar Co-Authored-By: Claude Opus 4.8 --- frontend/index.html | 4 +++- frontend/public/favicon.svg | 6 ++++++ frontend/src/style.css | 34 +++++++++++++++++++++++++++++++++- 3 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 frontend/public/favicon.svg diff --git a/frontend/index.html b/frontend/index.html index 16967d3..b894f5f 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -4,7 +4,9 @@ D4RKST3R // DEVLOG - + + +
diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg new file mode 100644 index 0000000..1c4f071 --- /dev/null +++ b/frontend/public/favicon.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/src/style.css b/frontend/src/style.css index 2844bdb..e089c06 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -35,6 +35,25 @@ body { a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } +/* Text-Auswahl & Fokus im Brand-Look */ +::selection { background: rgba(245, 197, 24, .25); color: var(--text); } +:focus-visible { outline: 1px solid var(--neon); outline-offset: 2px; } + +/* Dunkle Scrollbar */ +::-webkit-scrollbar { width: 10px; height: 10px; } +::-webkit-scrollbar-track { background: var(--bg); } +::-webkit-scrollbar-thumb { background: #262626; border: 2px solid var(--bg); border-radius: 6px; } +::-webkit-scrollbar-thumb:hover { background: var(--neon); } + +/* Einblend-Animation für Inhalte */ +@keyframes riseIn { + from { opacity: 0; transform: translateY(10px); } + to { opacity: 1; transform: none; } +} +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { animation: none !important; transition: none !important; } +} + /* ── NOISE + SCANLINES ─────────────────────────────── */ body::before { content: ''; position: fixed; inset: 0; @@ -83,7 +102,9 @@ body::after { font-family: var(--display); font-size: 1.6rem; letter-spacing: .15em; color: var(--neon); line-height: 1; + transition: text-shadow .25s; } +.nav-logo:hover { text-shadow: 0 0 18px rgba(245, 197, 24, .55); } .nav-logo span { color: var(--neon2); } .nav-links { display: flex; gap: 1.75rem; flex: 1; } @@ -151,6 +172,7 @@ body::after { position: relative; z-index: 2; max-width: 860px; width: 100%; margin: 0 auto; + animation: riseIn .45s ease both; } .page-tag { font-family: var(--mono); @@ -176,6 +198,7 @@ body::after { max-width: 860px; width: 100%; margin: 0 auto; padding: 2.75rem 2.5rem 5rem; + animation: riseIn .45s ease .08s both; } .notice { color: var(--muted); padding: 1.5rem 0; font-size: 1.05rem; } @@ -245,6 +268,11 @@ body::after { width: 7px; height: 7px; background: var(--neon); box-shadow: 0 0 10px rgba(245, 197, 24, .6); + transition: box-shadow .25s, transform .25s; +} +.timeline .card:hover::before { + box-shadow: 0 0 16px rgba(245, 197, 24, .9); + transform: scale(1.25); } .card-meta { @@ -564,7 +592,11 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); } 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:hover:not(:disabled) { + border-color: var(--neon); + background: rgba(245, 197, 24, .08); + box-shadow: 0 0 14px rgba(245, 197, 24, .18); +} .btn:disabled { opacity: .25; cursor: default; } /* ── FOOTER ────────────────────────────────────────── */