itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-21 23:05:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(nav): merge Random Mix & Albums into Build a Mix hub

Browse Source 
Replaces two sidebar entries (Random Mix, Random Albums) with a single 'Build a Mix' item (Wand2 icon) at /random. Landing page shows two cards — Mix by Tracks and Mix by Albums — with glow-on-hover. Old routes updated throughout. All 7 locales updated.
This commit is contained in:
kilyabin
2026-04-12 13:26:27 +04:00
committed by GitHub
parent 8f18f73b33
commit bf38a286cd
13 changed files with 216 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.css
+98
View File
@@ -5596,6 +5596,104 @@
margin: 0.2rem 0 0;
}
/* ─ Random Landing ─ */
.random-landing {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100%;
padding: var(--space-8);
box-sizing: border-box;
}
.random-landing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(var(--space-4), 2vw, var(--space-6));
width: 100%;
max-width: min(860px, 90vw);
}
.mix-pick-card {
position: relative;
overflow: hidden;
display: flex;
align-items: flex-end;
min-height: clamp(200px, 22vh, 320px);
padding: var(--space-6);
border-radius: 16px;
background: var(--ctp-surface0);
border: 1px solid rgba(255, 255, 255, 0.06);
cursor: pointer;
text-align: left;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
color: inherit;
}
.mix-pick-card:hover {
transform: translateY(-4px) scale(1.015);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--accent), 0 0 24px -4px var(--accent);
border-color: var(--accent);
}
.mix-pick-card-bg-icon {
position: absolute;
top: 50%;
right: -16px;
transform: translateY(-50%);
width: clamp(140px, 14vw, 200px);
height: clamp(140px, 14vw, 200px);
color: var(--text-primary);
opacity: 0.07;
pointer-events: none;
flex-shrink: 0;
}
.mix-pick-card-content {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-2);
z-index: 1;
}
.mix-pick-card-icon {
color: var(--accent);
margin-bottom: var(--space-1);
}
.mix-pick-card-label {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
.mix-pick-card-desc {
font-size: 12px;
color: var(--text-muted);
line-height: 1.45;
max-width: 22ch;
}
@media (max-width: 640px) {
.random-landing {
padding: var(--space-5) var(--space-4);
justify-content: flex-start;
}
.random-landing-grid {
grid-template-columns: 1fr;
}
.mix-pick-card {
min-height: 160px;
}
}
/* ─ Playlists overview header ─ */
.playlists-header {
display: flex;