From 0951514778cdf30b56a8ae8d690bb3558020dc80 Mon Sep 17 00:00:00 2001 From: daniel-c-harvey Date: Sat, 6 Sep 2025 15:21:03 -0400 Subject: [PATCH] Front End Work - Colors & Styles - Fonts - Small Layout Adjustments --- .../Controls/TracksGallery.razor | 4 +- DeepDrftWeb.Client/Layout/MainLayout.razor | 41 +++++++++++++- DeepDrftWeb.Client/Pages/Home.razor | 6 +- DeepDrftWeb.Client/Pages/TracksView.razor.cs | 2 +- DeepDrftWeb/Components/App.razor | 8 ++- .../wwwroot/styles/deepdrft-styles.css | 56 ++++++++++++++++++- 6 files changed, 102 insertions(+), 15 deletions(-) diff --git a/DeepDrftWeb.Client/Controls/TracksGallery.razor b/DeepDrftWeb.Client/Controls/TracksGallery.razor index 5a423d6..b84311d 100644 --- a/DeepDrftWeb.Client/Controls/TracksGallery.razor +++ b/DeepDrftWeb.Client/Controls/TracksGallery.razor @@ -1,8 +1,8 @@ - + @foreach (var track in Tracks) { - +
diff --git a/DeepDrftWeb.Client/Layout/MainLayout.razor b/DeepDrftWeb.Client/Layout/MainLayout.razor index 0193a9b..1875127 100644 --- a/DeepDrftWeb.Client/Layout/MainLayout.razor +++ b/DeepDrftWeb.Client/Layout/MainLayout.razor @@ -41,7 +41,42 @@ Theme = { PaletteDark = _darkPalette, - PaletteLight = _lightPalette + PaletteLight = _lightPalette, + Typography = new Typography() + { + Default = new DefaultTypography() + { + FontFamily = new[] {"Electrolize", "sans-serif"} + }, + H1 = new H1Typography() + { + FontFamily = new[] {"Audiowide", "sans-serif"} + }, + H2 = new H2Typography() + { + FontFamily = new[] {"Michroma", "sans-serif"} + }, + H3 = new H3Typography() + { + FontFamily = new[] {"Michroma", "sans-serif"} + }, + H4 = new H4Typography() + { + FontFamily = new[] {"Michroma", "sans-serif"} + }, + H5 = new H5Typography() + { + FontFamily = new[] {"Michroma", "sans-serif"} + }, + H6 = new H6Typography() + { + FontFamily = new[] {"Michroma", "sans-serif"} + }, + Button = new ButtonTypography() + { + FontFamily = new[] {"Michroma", "sans-serif"} + } + } } }; @@ -104,8 +139,8 @@ Secondary = "#8A2BE2", // BlueViolet - main DeepDrft purple Tertiary = "#9370DB", // MediumPurple - DeepDrft accent Info = "#4B0082", // Indigo - DeepDrft deep purple - Success = "#00FF7F", // SpringGreen - bright success - Warning = "#FFD700", // Gold - warning color + Success = "#00A86B", // Jade - true jade green success color + Warning = "#FF8C00", // DarkOrange - orange warning color Error = "#FF6347", // Tomato - error color Black = "#000000", // Pure black White = "#FFFFFF", // Pure white diff --git a/DeepDrftWeb.Client/Pages/Home.razor b/DeepDrftWeb.Client/Pages/Home.razor index e8124db..99279cb 100644 --- a/DeepDrftWeb.Client/Pages/Home.razor +++ b/DeepDrftWeb.Client/Pages/Home.razor @@ -70,13 +70,13 @@ Our Sound - + House Techno Trance IDM - Progressive - Ambient + Progressive + Ambient From deep, driving basslines to ethereal atmospheric textures, our music explores the diff --git a/DeepDrftWeb.Client/Pages/TracksView.razor.cs b/DeepDrftWeb.Client/Pages/TracksView.razor.cs index 1fecd6f..9dc3a01 100644 --- a/DeepDrftWeb.Client/Pages/TracksView.razor.cs +++ b/DeepDrftWeb.Client/Pages/TracksView.razor.cs @@ -34,7 +34,7 @@ public partial class TracksView : ComponentBase private async Task PlayTrack(TrackEntity? track) { - if (track == null) return; + if (track == null && _selectedTrack == null || track?.Id == _selectedTrack?.Id) return; await AudioPlaybackEngine.LoadTrack(track); StateHasChanged(); diff --git a/DeepDrftWeb/Components/App.razor b/DeepDrftWeb/Components/App.razor index 9940478..43fd7d1 100644 --- a/DeepDrftWeb/Components/App.razor +++ b/DeepDrftWeb/Components/App.razor @@ -5,9 +5,11 @@ - - - + + + + + diff --git a/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css b/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css index d025d0c..81eee79 100644 --- a/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css +++ b/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css @@ -19,6 +19,11 @@ --deepdrft-theme-secondary: var(--deepdrft-secondary); --deepdrft-theme-tertiary: var(--deepdrft-tertiary); --deepdrft-theme-info: var(--deepdrft-accent); + + /* Font Hierarchy - DRY font definitions */ + --deepdrft-font-largest-headers: "Audiowide", sans-serif; /* h1, hero text, main titles */ + --deepdrft-font-headers: "Michroma", sans-serif; /* h2-h6, visual components, buttons */ + --deepdrft-font-body: "Electrolize", sans-serif; /* body text, paragraphs, smaller elements */ } /* Dark Mode Variables */ @@ -58,18 +63,43 @@ background: linear-gradient(to right, rgba(138,43,226,0.05) 0%, rgba(255,20,147,0.05) 100%); } -/* Text Shadows and Effects */ -.deepdrft-text-hero { +/* Font Hierarchy Styles - DRY Typography System */ + +/* Largest Headers - Turret Road */ +h1, .deepdrft-text-hero, .deepdrft-heading-primary { + font-family: var(--deepdrft-font-largest-headers); font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); +} + +.deepdrft-text-hero { font-size: clamp(2rem, 8vw, 4rem); } +/* Headers and Visual Components - Michroma */ +h2, h3, h4, h5, h6, +.deepdrft-heading-secondary, +.deepdrft-text-subtitle, +.deepdrft-button-text, +.deepdrft-nav-text, +.deepdrft-visual-text { + font-family: var(--deepdrft-font-headers); +} + .deepdrft-text-subtitle { font-weight: 300; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); } +/* Body Text and Smaller Elements - Electrolize */ +body, p, span, div, +.deepdrft-text-body, +.deepdrft-text-description, +.deepdrft-text-readable, +.deepdrft-small-text { + font-family: var(--deepdrft-font-body); +} + .deepdrft-text-description { font-weight: 400; opacity: 0.9; @@ -83,6 +113,23 @@ line-height: 1.6; } +/* MudBlazor Component Overrides - Apply font hierarchy to MudBlazor components */ +.mud-typography-h1 { + font-family: var(--deepdrft-font-largest-headers) !important; +} + +.mud-typography-h2, .mud-typography-h3, .mud-typography-h4, +.mud-typography-h5, .mud-typography-h6, +.mud-button-text, .mud-navlink-text, .mud-appbar-content { + font-family: var(--deepdrft-font-headers) !important; +} + +.mud-typography-body1, .mud-typography-body2, +.mud-typography-caption, .mud-typography-overline, +.mud-input-text, .mud-select-text, .mud-form-label { + font-family: var(--deepdrft-font-body) !important; +} + /* Border Accents */ .deepdrft-border-left-primary { border-left: 4px solid #FF1493; @@ -104,7 +151,8 @@ .deepdrft-button-primary { color: #8A2BE2; font-weight: bold; - box-shadow: 0 4px 8px rgba(0,0,0,0.2); + padding: 10px 24px; + box-shadow: 0 4px 8px rgba(0,0,0,0.3); } .deepdrft-button-outlined { @@ -211,6 +259,7 @@ .deepdrft-track-card-container { width: 250px; height: 250px; + min-width: 250px; position: relative; overflow: hidden; } @@ -282,6 +331,7 @@ @media (max-width: 480px) { .deepdrft-track-card-container { + min-width: 200px; width: 200px; height: 200px; }