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

fix: wrap hero and section-split MudGrids in plain HTML elements so CSS isolation scope attributes reach .hero and .section-split rules

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-07 07:48:26 -04:00
parent 18b5fa9401
commit 8b3e7e0620
1 changed files with 67 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Pages/Home.razor
+21 -7
View File
@@ -5,15 +5,21 @@
<PageTitle>Deep DRFT - Electronic Music Collective</PageTitle> <PageTitle>Deep DRFT - Electronic Music Collective</PageTitle>
@* Hero - split 50/50 *@ @* Hero - split 50/50 *@
<MudGrid Spacing="0" Class="hero"> <section class="hero">
<MudItem xs="12" md="6" Class="hero-left"> <MudGrid Spacing="0" Style="height: 100%;">
<MudItem xs="12" md="6">
<div class="hero-left">
<DeepDrftHero /> <DeepDrftHero />
</div>
</MudItem> </MudItem>
<MudItem xs="12" md="6" Class="hero-right"> <MudItem xs="12" md="6">
<div class="hero-right">
<NowPlaying /> <NowPlaying />
</div>
</MudItem> </MudItem>
</MudGrid> </MudGrid>
</section>
@* Divider *@ @* Divider *@
<div class="section-divider"> <div class="section-divider">
@@ -24,7 +30,8 @@
@* Sound section *@ @* Sound section *@
<section class="section"> <section class="section">
<MudGrid Class="section-header-grid" Style="margin-bottom: 5rem;"> <div class="section-header-grid">
<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">Genres &amp; Moods</div>
<h2 class="section-title">Every<br /><em>Frequency</em><br />Explored</h2> <h2 class="section-title">Every<br /><em>Frequency</em><br />Explored</h2>
@@ -35,6 +42,7 @@
</p> </p>
</MudItem> </MudItem>
</MudGrid> </MudGrid>
</div>
<div class="genre-grid"> <div class="genre-grid">
@* TODO Phase 2.2: wire each genre to /genres/{slug} *@ @* TODO Phase 2.2: wire each genre to /genres/{slug} *@
@@ -105,16 +113,20 @@
</section> </section>
@* Split: origin + connect *@ @* Split: origin + connect *@
<MudGrid Spacing="0" Class="section-split"> <div class="section-split">
<MudItem xs="12" md="6" Class="split-left"> <MudGrid Spacing="0" Style="height: 100%;">
<MudItem xs="12" md="6">
<div class="split-left">
<div class="split-eyebrow">Our Origin</div> <div class="split-eyebrow">Our Origin</div>
<h2 class="split-title">Where the Holy City<br /><em>Meets the Future</em></h2> <h2 class="split-title">Where the Holy City<br /><em>Meets the Future</em></h2>
<p class="split-body"> <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. 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> </p>
</div>
</MudItem> </MudItem>
<MudItem xs="12" md="6" Class="split-right"> <MudItem xs="12" md="6">
<div class="split-right">
<div class="connect-label">Stay Connected</div> <div class="connect-label">Stay Connected</div>
<h2 class="connect-title">Never Miss<br />a <em>Session</em></h2> <h2 class="connect-title">Never Miss<br />a <em>Session</em></h2>
<div class="connect-options"> <div class="connect-options">
@@ -140,8 +152,10 @@
</div> </div>
@* TODO: subscription form lives behind this CTA *@ @* TODO: subscription form lives behind this CTA *@
<button class="btn-primary connect-cta" type="button">Subscribe Free</button> <button class="btn-primary connect-cta" type="button">Subscribe Free</button>
</div>
</MudItem> </MudItem>
</MudGrid> </MudGrid>
</div>
@* CTA banner *@ @* CTA banner *@
<section class="cta-banner"> <section class="cta-banner">