diff --git a/DeepDrftPublic.Client/Pages/Home.razor b/DeepDrftPublic.Client/Pages/Home.razor index b08938b..765b9c8 100644 --- a/DeepDrftPublic.Client/Pages/Home.razor +++ b/DeepDrftPublic.Client/Pages/Home.razor @@ -30,7 +30,7 @@ ImageHeight="auto" ImageWidth="100%" ParallaxSpeed="0.35" - Class="my-8"/> + Class="my-12"/> @* Divider *@ @@ -48,10 +48,12 @@
Format & Medium

Music through
Every
Medium

- -

- 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 — each one a different relationship between the moment and the record of it. -

+ +
+

+ 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 — each one a different relationship between the moment and the record of it. +

+
@@ -171,6 +173,20 @@ +
+ +
+ + + @code { [CascadingParameter] public IStreamingPlayerService? Player { get; set; } } diff --git a/DeepDrftPublic.Client/Pages/Home.razor.css b/DeepDrftPublic.Client/Pages/Home.razor.css index 6fe4726..b1825bc 100644 --- a/DeepDrftPublic.Client/Pages/Home.razor.css +++ b/DeepDrftPublic.Client/Pages/Home.razor.css @@ -93,23 +93,40 @@ color: var(--deepdrft-green); } +/* The body column is already full height; make it a flex container that + centers its child vertically, so .section-body (with margin: auto for + horizontal centering) sits centered against the taller title column + instead of anchored at the top. ::deep is required because the class is + on the MudItem-rendered div, which doesn't carry this component's scope + attribute. */ +.section-header-grid ::deep .section-body-item { + display: flex; + align-items: center; +} + .section-body { + display: flex; + max-width: 560px; + margin: auto; + align-content: center; + justify-content: center; +} + +.section-body p { + display: flex; font-family: var(--deepdrft-font-body); font-size: 0.9rem; line-height: 1.8; color: var(--deepdrft-navy); opacity: 0.65; max-width: 52ch; - align-self: end; } /* ── MEDIUM GRID (Music through Every Medium) ── */ .medium-grid { display: grid; grid-template-columns: repeat(3, 1fr); - gap: 1px; - background: var(--deepdrft-border); - border: 1px solid var(--deepdrft-border); + gap: 56px; margin-bottom: 4rem; } @@ -125,11 +142,14 @@ .medium-card { background: var(--deepdrft-white); + border: 1px solid var(--deepdrft-border); cursor: pointer; overflow: hidden; text-decoration: none; display: block; position: relative; + max-width: 380px; + margin: 0 auto; } .medium-card::after { diff --git a/DeepDrftPublic/wwwroot/img/mixer-bw.jpg b/DeepDrftPublic/wwwroot/img/mixer-bw.jpg new file mode 100644 index 0000000..6839184 Binary files /dev/null and b/DeepDrftPublic/wwwroot/img/mixer-bw.jpg differ diff --git a/DeepDrftPublic/wwwroot/img/mixer.jpg b/DeepDrftPublic/wwwroot/img/mixer.jpg new file mode 100644 index 0000000..5f7cbfe Binary files /dev/null and b/DeepDrftPublic/wwwroot/img/mixer.jpg differ