daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

feat: replace home genre cards with Music through Every Medium image section

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-11 17:55:13 -04:00
parent 38e345ccf7
commit a6e565e445
2 changed files with 91 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Pages/Home.razor
+33 -27
View File
@@ -40,47 +40,53 @@
<div class="divider-line"></div> <div class="divider-line"></div>
</div> </div>
@* Sound section *@ @* Medium section *@
<section class="section"> <section class="section">
<div class="section-header-grid"> <div class="section-header-grid">
<MudGrid Style="margin-bottom: 5rem;"> <MudGrid Style="margin-bottom: 5rem;">
<MudItem xs="12" md="4"> <MudItem xs="12" md="4">
<div class="section-label">Genres &amp; Moods</div> <div class="section-label">Format &amp; Medium</div>
<h2 class="section-title">Every<br /><em>Frequency</em><br />Explored</h2> <h2 class="section-title">Music through<br /><em>Every</em><br />Medium</h2>
</MudItem> </MudItem>
<MudItem xs="12" md="8"> <MudItem xs="12" md="8">
<p class="section-body"> <p class="section-body">
From the hypnotic pulse of deep house to the fractal complexity of IDM, Deep DRFT refuses to be categorized. We treat genre as a palette &mdash; not a cage. Each session begins as something and ends as something else entirely. The same hands, three different rooms. A studio cut is built; a live set is risked; a DJ mix is woven. We release in every form the music asks for &mdash; each one a different relationship between the moment and the record of it.
</p> </p>
</MudItem> </MudItem>
</MudGrid> </MudGrid>
</div> </div>
<div class="genre-grid"> <div class="medium-grid">
@* TODO Phase 2.2: wire each genre to /genres/{slug} *@ @* TODO Phase 3.x: wire each card to its format-filtered browse route once /tracks?format= exists *@
<div class="genre-card"> <div class="medium-card">
<div class="genre-name">House</div> <div class="medium-image" style="background-image: url('img/dd-studio.jpg');">
<div class="genre-count">Foundation</div> <div class="medium-scrim"></div>
</div>
<div class="medium-body">
<div class="medium-type">Studio</div>
<div class="medium-name">Studio Releases</div>
<div class="medium-desc">Composed, layered, and finished &mdash; tracks built to be returned to.</div>
</div>
</div> </div>
<div class="genre-card"> <div class="medium-card">
<div class="genre-name">Techno</div> <div class="medium-image" style="background-image: url('img/dd-live.jpeg');">
<div class="genre-count">Architecture</div> <div class="medium-scrim"></div>
</div>
<div class="medium-body">
<div class="medium-type">Live</div>
<div class="medium-name">Live Releases</div>
<div class="medium-desc">Performances caught in the moment, unrepeatable and unedited.</div>
</div>
</div> </div>
<div class="genre-card"> <div class="medium-card">
<div class="genre-name">Trance</div> <div class="medium-image" style="background-image: url('img/dd-dj.jpeg');">
<div class="genre-count">Ascension</div> <div class="medium-scrim"></div>
</div> </div>
<div class="genre-card"> <div class="medium-body">
<div class="genre-name">IDM</div> <div class="medium-type">Mix</div>
<div class="genre-count">Intelligence</div> <div class="medium-name">DJ Mix Releases</div>
</div> <div class="medium-desc">Uninterrupted sets &mdash; one track bleeding into the next, start to finish.</div>
<div class="genre-card"> </div>
<div class="genre-name">Progressive</div>
<div class="genre-count">Journey</div>
</div>
<div class="genre-card">
<div class="genre-name">Ambient</div>
<div class="genre-count">Atmosphere</div>
</div> </div>
</div> </div>
</section> </section>
DeepDrftPublic.Client/Pages/Home.razor.css
+58 -20
View File
@@ -103,36 +103,36 @@
align-self: end; align-self: end;
} }
/* Genre grid */ /* ── MEDIUM GRID (Music through Every Medium) ── */
.genre-grid { .medium-grid {
display: grid; display: grid;
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 1px; gap: 1px;
background: var(--deepdrft-border); background: var(--deepdrft-border);
border: 1px solid var(--deepdrft-border); border: 1px solid var(--deepdrft-border);
margin-bottom: 4rem; margin-bottom: 4rem;
} }
@media (max-width: 960px) { @media (max-width: 959px) {
.genre-grid { grid-template-columns: repeat(3, 1fr); } .medium-grid { grid-template-columns: repeat(2, 1fr); }
.medium-card:last-child { grid-column: 1 / -1; }
} }
@media (max-width: 599px) { @media (max-width: 599px) {
.genre-grid { grid-template-columns: repeat(2, 1fr); } .medium-grid { grid-template-columns: 1fr; }
.medium-card:last-child { grid-column: auto; }
} }
.genre-card { .medium-card {
background: var(--deepdrft-white); background: var(--deepdrft-white);
padding: 2rem 1.5rem;
transition: background 0.3s, color 0.3s;
cursor: pointer; cursor: pointer;
position: relative;
overflow: hidden; overflow: hidden;
text-decoration: none; text-decoration: none;
display: block; display: block;
position: relative;
} }
.genre-card::after { .medium-card::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@@ -143,25 +143,63 @@
transform: scaleX(0); transform: scaleX(0);
transform-origin: left; transform-origin: left;
transition: transform 0.3s; transition: transform 0.3s;
z-index: 1;
} }
.genre-card:hover::after { transform: scaleX(1); } .medium-card:hover::after { transform: scaleX(1); }
.genre-card:hover { background: #f3f6f4; }
.genre-name { .medium-image {
font-family: var(--deepdrft-font-display); position: relative;
font-size: 1.5rem; width: 100%;
font-weight: 400; aspect-ratio: 4 / 3;
color: var(--deepdrft-navy); background-size: cover;
margin-bottom: 0.5rem; background-position: center;
transition: transform 0.5s ease;
} }
.genre-count { .medium-card:hover .medium-image { transform: scale(1.05); }
.medium-scrim {
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(17, 35, 56, 0.0) 40%,
rgba(17, 35, 56, 0.35) 100%);
transition: opacity 0.3s;
opacity: 0.7;
}
.medium-card:hover .medium-scrim { opacity: 1; }
.medium-body {
padding: 2rem 1.5rem;
position: relative;
}
.medium-type {
font-family: var(--deepdrft-font-mono); font-family: var(--deepdrft-font-mono);
font-size: 0.58rem; font-size: 0.58rem;
letter-spacing: 0.2em; letter-spacing: 0.2em;
color: var(--deepdrft-muted); color: var(--deepdrft-muted);
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 0.6rem;
}
.medium-name {
font-family: var(--deepdrft-font-display);
font-size: 1.6rem;
font-weight: 400;
color: var(--deepdrft-navy);
margin-bottom: 0.75rem;
line-height: 1.1;
}
.medium-desc {
font-family: var(--deepdrft-font-body);
font-size: 0.82rem;
line-height: 1.65;
color: var(--deepdrft-navy);
opacity: 0.6;
} }
/* ── DARK FEATURE SECTION ── */ /* ── DARK FEATURE SECTION ── */