D4rkst3r/d4rkbot
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Design-Polish: Favicon, Animationen, Fokus- und Hover-Zustände

Browse Source 
- 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 <noreply@anthropic.com>
This commit is contained in:
D4rkst3r
2026-07-23 11:58:50 +02:00
co-authored by Claude Opus 4.8
parent 143288affa
commit db2e7987a0
3 changed files with 42 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+3 -1
View File
@@ -4,7 +4,9 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>D4RKST3R // DEVLOG</title> <title>D4RKST3R // DEVLOG</title>
<meta name="description" content="D4RKST3R — Devlog-Archiv & Commit-Feed." /> <meta name="description" content="D4RKST3R — Devlog-Archiv, Changelog & Community." />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="theme-color" content="#0a0a0a" />
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
frontend/public/favicon.svg
+6
View File
@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<rect width="32" height="32" rx="6" fill="#0a0a0a"/>
<path d="M16 5 L26 10.5 L16 16 L6 10.5 Z" fill="#f5c518"/>
<path d="M6 10.5 L16 16 L16 27 L6 21.5 Z" fill="#8a6f0e"/>
<path d="M26 10.5 L16 16 L16 27 L26 21.5 Z" fill="#ff4d00"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 308 B

frontend/src/style.css
+33 -1
View File
@@ -35,6 +35,25 @@ body {
a { color: inherit; text-decoration: none; } a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; } 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 ─────────────────────────────── */ /* ── NOISE + SCANLINES ─────────────────────────────── */
body::before { body::before {
content: ''; position: fixed; inset: 0; content: ''; position: fixed; inset: 0;
@@ -83,7 +102,9 @@ body::after {
font-family: var(--display); font-family: var(--display);
font-size: 1.6rem; letter-spacing: .15em; color: var(--neon); font-size: 1.6rem; letter-spacing: .15em; color: var(--neon);
line-height: 1; 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-logo span { color: var(--neon2); }
.nav-links { display: flex; gap: 1.75rem; flex: 1; } .nav-links { display: flex; gap: 1.75rem; flex: 1; }
@@ -151,6 +172,7 @@ body::after {
position: relative; z-index: 2; position: relative; z-index: 2;
max-width: 860px; width: 100%; max-width: 860px; width: 100%;
margin: 0 auto; margin: 0 auto;
animation: riseIn .45s ease both;
} }
.page-tag { .page-tag {
font-family: var(--mono); font-family: var(--mono);
@@ -176,6 +198,7 @@ body::after {
max-width: 860px; width: 100%; max-width: 860px; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 2.75rem 2.5rem 5rem; padding: 2.75rem 2.5rem 5rem;
animation: riseIn .45s ease .08s both;
} }
.notice { color: var(--muted); padding: 1.5rem 0; font-size: 1.05rem; } .notice { color: var(--muted); padding: 1.5rem 0; font-size: 1.05rem; }
@@ -245,6 +268,11 @@ body::after {
width: 7px; height: 7px; width: 7px; height: 7px;
background: var(--neon); background: var(--neon);
box-shadow: 0 0 10px rgba(245, 197, 24, .6); 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 { .card-meta {
@@ -564,7 +592,11 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
padding: .5rem 1.1rem; padding: .5rem 1.1rem;
transition: background .2s, border-color .2s, opacity .2s; 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; } .btn:disabled { opacity: .25; cursor: default; }
/* ── FOOTER ────────────────────────────────────────── */ /* ── FOOTER ────────────────────────────────────────── */