fix: wrap hero and section-split MudGrids in plain HTML elements so CSS isolation scope attributes reach .hero and .section-split rules
This commit is contained in:
daniel-c-harvey
@@ -5,15 +5,21 @@
|
||||
<PageTitle>Deep DRFT - Electronic Music Collective</PageTitle>
|
||||
|
||||
@* Hero - split 50/50 *@
|
||||
<MudGrid Spacing="0" Class="hero">
|
||||
<MudItem xs="12" md="6" Class="hero-left">
|
||||
<DeepDrftHero />
|
||||
</MudItem>
|
||||
<section class="hero">
|
||||
<MudGrid Spacing="0" Style="height: 100%;">
|
||||
<MudItem xs="12" md="6">
|
||||
<div class="hero-left">
|
||||
<DeepDrftHero />
|
||||
</div>
|
||||
</MudItem>
|
||||
|
||||
<MudItem xs="12" md="6" Class="hero-right">
|
||||
<NowPlaying />
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
<MudItem xs="12" md="6">
|
||||
<div class="hero-right">
|
||||
<NowPlaying />
|
||||
</div>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</section>
|
||||
|
||||
@* Divider *@
|
||||
<div class="section-divider">
|
||||
@@ -24,17 +30,19 @@
|
||||
|
||||
@* Sound section *@
|
||||
<section class="section">
|
||||
<MudGrid Class="section-header-grid" Style="margin-bottom: 5rem;">
|
||||
<MudItem xs="12" md="4">
|
||||
<div class="section-label">Genres & Moods</div>
|
||||
<h2 class="section-title">Every<br /><em>Frequency</em><br />Explored</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 — not a cage. Each session begins as something and ends as something else entirely.
|
||||
</p>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
<div class="section-header-grid">
|
||||
<MudGrid Style="margin-bottom: 5rem;">
|
||||
<MudItem xs="12" md="4">
|
||||
<div class="section-label">Genres & Moods</div>
|
||||
<h2 class="section-title">Every<br /><em>Frequency</em><br />Explored</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 — not a cage. Each session begins as something and ends as something else entirely.
|
||||
</p>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</div>
|
||||
|
||||
<div class="genre-grid">
|
||||
@* TODO Phase 2.2: wire each genre to /genres/{slug} *@
|
||||
@@ -105,43 +113,49 @@
|
||||
</section>
|
||||
|
||||
@* Split: origin + connect *@
|
||||
<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 — tradition as tension against the forward pull of electronic sound. The result is music that feels both ancient and unimagined.
|
||||
</p>
|
||||
</MudItem>
|
||||
<div class="section-split">
|
||||
<MudGrid Spacing="0" Style="height: 100%;">
|
||||
<MudItem xs="12" md="6">
|
||||
<div 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 — tradition as tension against the forward pull of electronic sound. The result is music that feels both ancient and unimagined.
|
||||
</p>
|
||||
</div>
|
||||
</MudItem>
|
||||
|
||||
<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">
|
||||
@* TODO: wire to subscription system when newsletter/alerts backend exists *@
|
||||
<div class="connect-option">
|
||||
<div class="option-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" /></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="option-text-label">Newsletter</div>
|
||||
<div class="option-text-sub">New releases & studio dispatches</div>
|
||||
<MudItem xs="12" md="6">
|
||||
<div 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">
|
||||
@* TODO: wire to subscription system when newsletter/alerts backend exists *@
|
||||
<div class="connect-option">
|
||||
<div class="option-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" /></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="option-text-label">Newsletter</div>
|
||||
<div class="option-text-sub">New releases & studio dispatches</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="connect-option">
|
||||
<div class="option-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.73 21a2 2 0 0 1-3.46 0" /></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="option-text-label">Live Alerts</div>
|
||||
<div class="option-text-sub">Know the moment we go live</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@* TODO: subscription form lives behind this CTA *@
|
||||
<button class="btn-primary connect-cta" type="button">Subscribe Free</button>
|
||||
</div>
|
||||
<div class="connect-option">
|
||||
<div class="option-icon">
|
||||
<svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" /><path d="M13.73 21a2 2 0 0 1-3.46 0" /></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="option-text-label">Live Alerts</div>
|
||||
<div class="option-text-sub">Know the moment we go live</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@* TODO: subscription form lives behind this CTA *@
|
||||
<button class="btn-primary connect-cta" type="button">Subscribe Free</button>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</MudItem>
|
||||
</MudGrid>
|
||||
</div>
|
||||
|
||||
@* CTA banner *@
|
||||
<section class="cta-banner">
|
||||
|
||||
Reference in New Issue
Block a user