From 18b5fa9401fcb2919e8fe5afcc7dccb98c7cda87 Mon Sep 17 00:00:00 2001 From: daniel-c-harvey Date: Sun, 7 Jun 2026 07:37:09 -0400 Subject: [PATCH 1/2] feature: Responsive mobile layout for home page 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. --- DeepDrftPublic.Client/Pages/Home.razor | 40 +++++------ DeepDrftPublic.Client/Pages/Home.razor.css | 77 +++++++++++++++++++--- 2 files changed, 88 insertions(+), 29 deletions(-) diff --git a/DeepDrftPublic.Client/Pages/Home.razor b/DeepDrftPublic.Client/Pages/Home.razor index 2e5a731..ff6bd68 100644 --- a/DeepDrftPublic.Client/Pages/Home.razor +++ b/DeepDrftPublic.Client/Pages/Home.razor @@ -5,15 +5,15 @@ Deep DRFT - Electronic Music Collective @* Hero - split 50/50 *@ -
-
+ + -
+ -
+ -
-
+ + @* Divider *@
@@ -24,15 +24,17 @@ @* Sound section *@
-
-
+ +
Genres & Moods

Every
Frequency
Explored

-
-

- 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 — not a cage. Each session begins as something and ends as something else entirely. -

-
+ + +

+ 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 — not a cage. Each session begins as something and ends as something else entirely. +

+ +
@* TODO Phase 2.2: wire each genre to /genres/{slug} *@ @@ -103,16 +105,16 @@
@* Split: origin + connect *@ -
-
+ +
Our Origin

Where the Holy City
Meets the Future

Charleston, South Carolina holds centuries of culture in its streets. We carry that weight into the studio — tradition as tension against the forward pull of electronic sound. The result is music that feels both ancient and unimagined.

-
+ -
+
Stay Connected

Never Miss
a Session

@@ -138,8 +140,8 @@
@* TODO: subscription form lives behind this CTA *@ -
-
+ + @* CTA banner *@
diff --git a/DeepDrftPublic.Client/Pages/Home.razor.css b/DeepDrftPublic.Client/Pages/Home.razor.css index 3124603..29562e8 100644 --- a/DeepDrftPublic.Client/Pages/Home.razor.css +++ b/DeepDrftPublic.Client/Pages/Home.razor.css @@ -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; + } +} From 8b3e7e0620b3820489ba28fdbe84569644e26d3a Mon Sep 17 00:00:00 2001 From: daniel-c-harvey Date: Sun, 7 Jun 2026 07:48:26 -0400 Subject: [PATCH 2/2] fix: wrap hero and section-split MudGrids in plain HTML elements so CSS isolation scope attributes reach .hero and .section-split rules --- DeepDrftPublic.Client/Pages/Home.razor | 120 ++++++++++++++----------- 1 file changed, 67 insertions(+), 53 deletions(-) diff --git a/DeepDrftPublic.Client/Pages/Home.razor b/DeepDrftPublic.Client/Pages/Home.razor index ff6bd68..4ae0fbf 100644 --- a/DeepDrftPublic.Client/Pages/Home.razor +++ b/DeepDrftPublic.Client/Pages/Home.razor @@ -5,15 +5,21 @@ Deep DRFT - Electronic Music Collective @* Hero - split 50/50 *@ - - - - +
+ + +
+ +
+ - - - - + +
+ +
+ + +
@* Divider *@
@@ -24,17 +30,19 @@ @* Sound section *@
- - -
Genres & Moods
-

Every
Frequency
Explored

- - -

- 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 — not a cage. Each session begins as something and ends as something else entirely. -

- - +
+ + +
Genres & Moods
+

Every
Frequency
Explored

+ + +

+ 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 — not a cage. Each session begins as something and ends as something else entirely. +

+ + +
@* TODO Phase 2.2: wire each genre to /genres/{slug} *@ @@ -105,43 +113,49 @@
@* Split: origin + connect *@ - - -
Our Origin
-

Where the Holy City
Meets the Future

-

- Charleston, South Carolina holds centuries of culture in its streets. We carry that weight into the studio — tradition as tension against the forward pull of electronic sound. The result is music that feels both ancient and unimagined. -

- +
+ + +
+
Our Origin
+

Where the Holy City
Meets the Future

+

+ Charleston, South Carolina holds centuries of culture in its streets. We carry that weight into the studio — tradition as tension against the forward pull of electronic sound. The result is music that feels both ancient and unimagined. +

+
+ - -
Stay Connected
-

Never Miss
a Session

-
- @* TODO: wire to subscription system when newsletter/alerts backend exists *@ -
-
- -
-
-
Newsletter
-
New releases & studio dispatches
+ +
+
Stay Connected
+

Never Miss
a Session

+
+ @* TODO: wire to subscription system when newsletter/alerts backend exists *@ +
+
+ +
+
+
Newsletter
+
New releases & studio dispatches
+
+
+
+
+ +
+
+
Live Alerts
+
Know the moment we go live
+
+
+ @* TODO: subscription form lives behind this CTA *@ +
-
-
- -
-
-
Live Alerts
-
Know the moment we go live
-
-
-
- @* TODO: subscription form lives behind this CTA *@ - - - + + +
@* CTA banner *@