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

feature: Responsive mobile layout for home page

Browse Source 
Migrate hero, section-header, and section-split to MudGrid with xs/sm/md breakpoints (Spacing=0 to keep color panels flush); add @media collapse rules for genre/features card grids and the CTA banner. Visual styling unchanged at desktop width.
This commit is contained in:
daniel-c-harvey
2026-06-07 07:37:09 -04:00
parent c4e7b49776
commit 18b5fa9401
2 changed files with 88 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Pages/Home.razor
+21 -19
View File
@@ -5,15 +5,15 @@
<PageTitle>Deep DRFT - Electronic Music Collective</PageTitle>
@* Hero - split 50/50 *@
<section class="hero">
<div class="hero-left">
<MudGrid Spacing="0" Class="hero">
<MudItem xs="12" md="6" Class="hero-left">
<DeepDrftHero />
</div>
</MudItem>
<div class="hero-right">
<MudItem xs="12" md="6" Class="hero-right">
<NowPlaying />
</div>
</section>
</MudItem>
</MudGrid>
@* Divider *@
<div class="section-divider">
@@ -24,15 +24,17 @@
@* Sound section *@
<section class="section">
<div class="section-header">
<div>
<MudGrid Class="section-header-grid" 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>
<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.
</p>
</div>
</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.
</p>
</MudItem>
</MudGrid>
<div class="genre-grid">
@* TODO Phase 2.2: wire each genre to /genres/{slug} *@
@@ -103,16 +105,16 @@
</section>
@* Split: origin + connect *@
<div class="section-split">
<div class="split-left">
<MudGrid Spacing="0" Class="section-split">
<MudItem xs="12" md="6" Class="split-left">
<div class="split-eyebrow">Our Origin</div>
<h2 class="split-title">Where the Holy City<br /><em>Meets the Future</em></h2>
<p class="split-body">
Charleston, South Carolina holds centuries of culture in its streets. We carry that weight into the studio &mdash; tradition as tension against the forward pull of electronic sound. The result is music that feels both ancient and unimagined.
</p>
</div>
</MudItem>
<div class="split-right">
<MudItem xs="12" md="6" Class="split-right">
<div class="connect-label">Stay Connected</div>
<h2 class="connect-title">Never Miss<br />a <em>Session</em></h2>
<div class="connect-options">
@@ -138,8 +140,8 @@
</div>
@* TODO: subscription form lives behind this CTA *@
<button class="btn-primary connect-cta" type="button">Subscribe Free</button>
</div>
</div>
</MudItem>
</MudGrid>
@* CTA banner *@
<section class="cta-banner">
DeepDrftPublic.Client/Pages/Home.razor.css
+67 -10
View File
@@ -6,8 +6,6 @@
/* ── HERO ── */
.hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
}
@@ -18,6 +16,7 @@
padding: 6rem 3rem;
position: relative;
background: var(--deepdrft-white);
height: 100%;
}
.hero-right {
@@ -27,6 +26,13 @@
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
height: 100%;
}
@media (max-width: 960px) {
.hero { min-height: auto; }
.hero-left { padding: 4rem 1.5rem 3rem; }
.hero-right { min-height: 50vh; }
}
/* ── DIVIDER ── */
@@ -59,12 +65,10 @@
background: var(--deepdrft-white);
}
.section-header {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 4rem;
margin-bottom: 5rem;
align-items: end;
@media (min-width: 960px) {
.section-header-grid {
align-items: end;
}
}
.section-label {
@@ -109,6 +113,14 @@
margin-bottom: 4rem;
}
@media (max-width: 960px) {
.genre-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.genre-grid { grid-template-columns: repeat(2, 1fr); }
}
.genre-card {
background: var(--deepdrft-white);
padding: 2rem 1.5rem;
@@ -191,6 +203,20 @@
.feature-card:hover { background: rgba(250, 250, 248, 0.04); }
/* Below md: per-card border-right leaves dangling hairlines when columns
collapse, so switch to border-bottom dividers instead. */
@media (max-width: 960px) {
.features-grid { grid-template-columns: repeat(2, 1fr); }
.feature-card { border-right: none; border-bottom: 1px solid rgba(250, 250, 248, 0.08); }
.feature-card:last-child { border-bottom: none; }
}
@media (max-width: 600px) {
.features-grid { grid-template-columns: 1fr; }
.feature-card { border-right: none; border-bottom: 1px solid rgba(250, 250, 248, 0.08); }
.feature-card:last-child { border-bottom: none; }
}
.feature-icon {
width: 2.5rem;
height: 2.5rem;
@@ -227,11 +253,13 @@
/* ── SPLIT: ORIGIN + CONNECT ── */
.section-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 60vh;
}
@media (max-width: 960px) {
.section-split { min-height: auto; }
}
.split-left {
background: var(--deepdrft-green);
padding: 6rem 4rem;
@@ -240,6 +268,7 @@
justify-content: center;
position: relative;
overflow: hidden;
height: 100%;
}
.split-left::before {
@@ -259,6 +288,7 @@
flex-direction: column;
justify-content: center;
background: var(--deepdrft-white);
height: 100%;
}
.split-eyebrow {
@@ -442,6 +472,7 @@
position: relative;
z-index: 1;
flex-shrink: 0;
flex-wrap: wrap;
}
.btn-white {
@@ -480,3 +511,29 @@
}
.btn-outline-white:hover { border-color: var(--deepdrft-white); }
@media (max-width: 600px) {
.cta-banner {
flex-direction: column;
align-items: flex-start;
gap: 2rem;
padding: 4rem 1.5rem;
}
.cta-actions {
width: 100%;
}
.btn-white,
.btn-outline-white {
flex: 1;
text-align: center;
min-width: 140px;
}
/* At 22rem the "DRFT" watermark forces horizontal scroll on mobile. */
.cta-banner::before {
font-size: 8rem;
right: -0.5rem;
}
}