Frontend-Polish: Navbar, Roadmap, Galerie und Karten aufgehübscht
- Navbar: animierter Gradient-Unterstrich (wächst von links, aktiver Tab mit Neon-Glow), Blur-Effekt + Glanzlinie beim Scrollen, Login-Button und User-Chip als Pills mit Avatar-Ring - Karten: Radius, Hover-Lift mit Schatten - Roadmap: Meilensteine mit Neon-Akzentleiste links, Fortschrittsbalken rund mit wanderndem Glanz, Prozent in Neon - Galerie: gestaffeltes Einblenden, Hover-Zoom mit Glow und aufschiebender Meta-Zeile - Community-Wünsche: Hover-States, Gruppen-Titel mit auslaufender Linie, Footer mit Glanzlinie - .claude/launch.json für lokale Frontend-Preview Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
+121
-31
@@ -91,13 +91,24 @@ body::after {
|
||||
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;
|
||||
transition: padding .3s, border-color .3s, background .3s, backdrop-filter .3s;
|
||||
}
|
||||
.nav.scrolled {
|
||||
padding: .8rem 2.5rem;
|
||||
background: rgba(10, 10, 10, .95);
|
||||
background: rgba(10, 10, 10, .82);
|
||||
backdrop-filter: blur(14px) saturate(1.2);
|
||||
-webkit-backdrop-filter: blur(14px) saturate(1.2);
|
||||
border-bottom-color: var(--border);
|
||||
}
|
||||
/* Neon-Glanzlinie unter der Navbar, wird beim Scrollen sichtbar */
|
||||
.nav::after {
|
||||
content: '';
|
||||
position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(245, 197, 24, .5) 30%, rgba(255, 77, 0, .5) 70%, transparent);
|
||||
opacity: 0; transition: opacity .3s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.nav.scrolled::after { opacity: 1; }
|
||||
.nav-logo {
|
||||
font-family: var(--display);
|
||||
font-size: 1.6rem; letter-spacing: .15em; color: var(--neon);
|
||||
@@ -107,16 +118,30 @@ body::after {
|
||||
.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; }
|
||||
.nav-links { display: flex; gap: 1.6rem; flex: 1; }
|
||||
.nav-links a {
|
||||
position: relative;
|
||||
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;
|
||||
transition: color .2s, text-shadow .2s;
|
||||
}
|
||||
/* Animierter Gradient-Unterstrich: wächst von links */
|
||||
.nav-links a::after {
|
||||
content: '';
|
||||
position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
|
||||
background: linear-gradient(90deg, var(--neon), var(--neon2));
|
||||
border-radius: 2px;
|
||||
transform: scaleX(0); transform-origin: left;
|
||||
transition: transform .25s ease;
|
||||
}
|
||||
.nav-links a:hover { color: var(--text); }
|
||||
.nav-links a.active { color: var(--neon); border-bottom-color: var(--neon); }
|
||||
.nav-links a:hover::after { transform: scaleX(.55); }
|
||||
.nav-links a.active {
|
||||
color: var(--neon);
|
||||
text-shadow: 0 0 12px rgba(245, 197, 24, .35);
|
||||
}
|
||||
.nav-links a.active::after { transform: scaleX(1); }
|
||||
|
||||
/* ── AUTH ──────────────────────────────────────────── */
|
||||
.auth { display: flex; align-items: center; }
|
||||
@@ -126,18 +151,27 @@ body::after {
|
||||
letter-spacing: .25em; text-transform: uppercase;
|
||||
color: var(--neon);
|
||||
border: 1px solid var(--border);
|
||||
padding: .5rem 1.1rem;
|
||||
transition: background .2s, border-color .2s, color .2s;
|
||||
border-radius: 999px;
|
||||
padding: .5rem 1.2rem;
|
||||
transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
|
||||
}
|
||||
.btn-login:hover {
|
||||
border-color: var(--neon);
|
||||
background: rgba(245, 197, 24, .08);
|
||||
box-shadow: 0 0 16px rgba(245, 197, 24, .15);
|
||||
}
|
||||
.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;
|
||||
border-radius: 999px;
|
||||
padding: .3rem .9rem .3rem .35rem;
|
||||
background: rgba(255, 255, 255, .03);
|
||||
transition: border-color .2s;
|
||||
}
|
||||
.avatar { width: 24px; height: 24px; border-radius: 50%; }
|
||||
.user-chip:hover { border-color: var(--border); }
|
||||
.avatar { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(245, 197, 24, .4); }
|
||||
.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); }
|
||||
@@ -257,10 +291,16 @@ body::after {
|
||||
position: relative;
|
||||
background: var(--bg2);
|
||||
border: 1px solid rgba(255, 255, 255, .06);
|
||||
border-radius: 12px;
|
||||
padding: 1.3rem 1.6rem 1.2rem;
|
||||
transition: border-color .25s, background .25s;
|
||||
transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
|
||||
}
|
||||
.card:hover {
|
||||
border-color: var(--border);
|
||||
background: var(--bg3);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, .45), 0 0 0 1px rgba(245, 197, 24, .06);
|
||||
}
|
||||
.card:hover { border-color: var(--border); background: var(--bg3); }
|
||||
.timeline .card::before {
|
||||
/* Marker auf der Timeline */
|
||||
content: '';
|
||||
@@ -414,11 +454,14 @@ body::after {
|
||||
|
||||
.wish-row {
|
||||
display: flex; align-items: baseline; gap: 1rem;
|
||||
padding: .55rem .9rem;
|
||||
padding: .6rem 1rem;
|
||||
background: var(--bg2);
|
||||
border: 1px solid rgba(255, 255, 255, .06);
|
||||
border-radius: 10px;
|
||||
margin-bottom: .5rem;
|
||||
transition: border-color .2s, background .2s;
|
||||
}
|
||||
.wish-row:hover { border-color: var(--border); background: var(--bg3); }
|
||||
.wish-score {
|
||||
font-family: var(--mono); font-size: .78rem;
|
||||
color: var(--neon); white-space: nowrap; min-width: 3.5rem;
|
||||
@@ -430,61 +473,95 @@ body::after {
|
||||
.gallery-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
gap: .75rem;
|
||||
gap: .9rem;
|
||||
}
|
||||
.shot {
|
||||
position: relative; display: block; overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, .08);
|
||||
border-radius: 10px;
|
||||
aspect-ratio: 16 / 9;
|
||||
background: #000;
|
||||
transition: border-color .2s;
|
||||
transition: border-color .25s, transform .25s, box-shadow .25s;
|
||||
animation: riseIn .5s ease both;
|
||||
}
|
||||
/* Gestaffeltes Einblenden der ersten Reihen */
|
||||
.shot:nth-child(2) { animation-delay: .05s; }
|
||||
.shot:nth-child(3) { animation-delay: .1s; }
|
||||
.shot:nth-child(4) { animation-delay: .15s; }
|
||||
.shot:nth-child(5) { animation-delay: .2s; }
|
||||
.shot:nth-child(6) { animation-delay: .25s; }
|
||||
.shot:hover {
|
||||
border-color: var(--neon);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 12px 28px rgba(0, 0, 0, .5), 0 0 18px rgba(245, 197, 24, .12);
|
||||
}
|
||||
.shot:hover { border-color: var(--neon); }
|
||||
.shot img {
|
||||
width: 100%; height: 100%; object-fit: cover; display: block;
|
||||
transition: transform .3s;
|
||||
transition: transform .35s ease, filter .35s;
|
||||
filter: brightness(.92);
|
||||
}
|
||||
.shot:hover img { transform: scale(1.04); }
|
||||
.shot:hover img { transform: scale(1.06); filter: brightness(1.05); }
|
||||
.shot-meta {
|
||||
position: absolute; inset: auto 0 0 0;
|
||||
display: flex; justify-content: space-between; align-items: baseline;
|
||||
padding: .4rem .6rem;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent);
|
||||
padding: .55rem .7rem .45rem;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, .9), transparent);
|
||||
font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
|
||||
opacity: 0; transition: opacity .2s;
|
||||
opacity: 0; transform: translateY(4px);
|
||||
transition: opacity .25s, transform .25s;
|
||||
}
|
||||
.shot:hover .shot-meta { opacity: 1; }
|
||||
.shot:hover .shot-meta { opacity: 1; transform: translateY(0); }
|
||||
.shot-author { color: var(--neon); }
|
||||
.shot-date { color: var(--muted); }
|
||||
|
||||
/* ── ROADMAP ───────────────────────────────────────── */
|
||||
.roadmap-group { margin-bottom: 2.25rem; }
|
||||
.roadmap-group { margin-bottom: 2.75rem; }
|
||||
.roadmap-group .settings-title { margin-bottom: 1rem; }
|
||||
.milestone { margin-bottom: 1.1rem; }
|
||||
.milestone {
|
||||
margin-bottom: 1.1rem;
|
||||
border-left: 3px solid rgba(245, 197, 24, .25);
|
||||
}
|
||||
.milestone:hover { border-left-color: var(--neon); }
|
||||
.milestone-title {
|
||||
font-family: var(--display);
|
||||
font-size: 1.3rem; letter-spacing: .04em;
|
||||
font-size: 1.35rem; letter-spacing: .04em;
|
||||
color: var(--text);
|
||||
}
|
||||
.progress {
|
||||
height: 6px;
|
||||
position: relative;
|
||||
height: 8px; border-radius: 999px;
|
||||
background: rgba(255, 255, 255, .06);
|
||||
margin-top: .8rem;
|
||||
margin-top: .9rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
height: 100%; border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--neon2), var(--neon));
|
||||
box-shadow: 0 0 10px rgba(245, 197, 24, .4);
|
||||
box-shadow: 0 0 12px rgba(245, 197, 24, .45);
|
||||
transition: width .6s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Wandernder Glanz auf dem Fortschrittsbalken */
|
||||
.progress-bar::after {
|
||||
content: '';
|
||||
position: absolute; inset: 0;
|
||||
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
|
||||
transform: translateX(-100%);
|
||||
animation: barShine 3.2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes barShine {
|
||||
0%, 55% { transform: translateX(-100%); }
|
||||
85%, 100% { transform: translateX(100%); }
|
||||
}
|
||||
.progress-info {
|
||||
display: flex; justify-content: space-between;
|
||||
font-family: var(--mono);
|
||||
font-size: .65rem; letter-spacing: .1em;
|
||||
color: var(--muted2);
|
||||
margin-top: .35rem;
|
||||
margin-top: .45rem;
|
||||
}
|
||||
.progress-info span:first-child { color: var(--neon); }
|
||||
|
||||
/* ── CHANGELOG ─────────────────────────────────────── */
|
||||
.release-card { margin-bottom: 1.5rem; }
|
||||
@@ -661,11 +738,18 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.settings-title {
|
||||
display: flex; align-items: center; gap: 1rem;
|
||||
font-family: var(--mono);
|
||||
font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
|
||||
color: var(--neon2);
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
/* Auslaufende Linie hinter Gruppen-Titeln */
|
||||
.settings-title::after {
|
||||
content: '';
|
||||
flex: 1; height: 1px;
|
||||
background: linear-gradient(90deg, rgba(255, 77, 0, .35), transparent);
|
||||
}
|
||||
|
||||
.stats { display: flex; flex-wrap: wrap; gap: 2.5rem; }
|
||||
.stat { display: flex; flex-direction: column; gap: .1rem; }
|
||||
@@ -812,12 +896,18 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
|
||||
|
||||
/* ── FOOTER ────────────────────────────────────────── */
|
||||
.footer {
|
||||
position: relative;
|
||||
border-top: 1px solid var(--border);
|
||||
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::before {
|
||||
content: '';
|
||||
position: absolute; left: 0; right: 0; top: -1px; height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(245, 197, 24, .4), transparent);
|
||||
}
|
||||
.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); }
|
||||
|
||||
Reference in New Issue
Block a user