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

Merge branch 'p8-w6-medium-section' into dev

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-11 18:38:10 -04:00
parent 9792d4346e a6e565e445
commit 6d3b9cd4d3
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>
@* Sound section *@
@* Medium section *@
<section class="section">
<div class="section-header-grid">
<MudGrid Style="margin-bottom: 5rem;">
<MudItem xs="12" md="4">
<div class="section-label">Genres &amp; Moods</div>
<h2 class="section-title">Every<br /><em>Frequency</em><br />Explored</h2>
<div class="section-label">Format &amp; Medium</div>
<h2 class="section-title">Music through<br /><em>Every</em><br />Medium</h2>
</MudItem>
<MudItem xs="12" md="8">
<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>
</MudItem>
</MudGrid>
</div>
<div class="genre-grid">
@* TODO Phase 2.2: wire each genre to /genres/{slug} *@
<div class="genre-card">
<div class="genre-name">House</div>
<div class="genre-count">Foundation</div>
<div class="medium-grid">
@* TODO Phase 3.x: wire each card to its format-filtered browse route once /tracks?format= exists *@
<div class="medium-card">
<div class="medium-image" style="background-image: url('img/dd-studio.jpg');">
<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 class="genre-card">
<div class="genre-name">Techno</div>
<div class="genre-count">Architecture</div>
<div class="medium-card">
<div class="medium-image" style="background-image: url('img/dd-live.jpeg');">
<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 class="genre-card">
<div class="genre-name">Trance</div>
<div class="genre-count">Ascension</div>
</div>
<div class="genre-card">
<div class="genre-name">IDM</div>
<div class="genre-count">Intelligence</div>
</div>
<div class="genre-card">
<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 class="medium-card">
<div class="medium-image" style="background-image: url('img/dd-dj.jpeg');">
<div class="medium-scrim"></div>
</div>
<div class="medium-body">
<div class="medium-type">Mix</div>
<div class="medium-name">DJ Mix Releases</div>
<div class="medium-desc">Uninterrupted sets &mdash; one track bleeding into the next, start to finish.</div>
</div>
</div>
</div>
</section>
DeepDrftPublic.Client/Pages/Home.razor.css
+58 -20
View File
@@ -103,36 +103,36 @@
align-self: end;
}
/* Genre grid */
.genre-grid {
/* ── MEDIUM GRID (Music through Every Medium) ── */
.medium-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--deepdrft-border);
border: 1px solid var(--deepdrft-border);
margin-bottom: 4rem;
}
@media (max-width: 960px) {
.genre-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 959px) {
.medium-grid { grid-template-columns: repeat(2, 1fr); }
.medium-card:last-child { grid-column: 1 / -1; }
}
@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);
padding: 2rem 1.5rem;
transition: background 0.3s, color 0.3s;
cursor: pointer;
position: relative;
overflow: hidden;
text-decoration: none;
display: block;
position: relative;
}
.genre-card::after {
.medium-card::after {
content: '';
position: absolute;
bottom: 0;
@@ -143,25 +143,63 @@
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s;
z-index: 1;
}
.genre-card:hover::after { transform: scaleX(1); }
.genre-card:hover { background: #f3f6f4; }
.medium-card:hover::after { transform: scaleX(1); }
.genre-name {
font-family: var(--deepdrft-font-display);
font-size: 1.5rem;
font-weight: 400;
color: var(--deepdrft-navy);
margin-bottom: 0.5rem;
.medium-image {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
background-size: cover;
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-size: 0.58rem;
letter-spacing: 0.2em;
color: var(--deepdrft-muted);
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 ── */