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

Front End Work

Browse Source 
- Colors & Styles
 - Fonts
 - Small Layout Adjustments
This commit is contained in:
daniel-c-harvey
2025-09-06 15:21:03 -04:00
parent 5a8a2da842
commit 0951514778
6 changed files with 102 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftWeb.Client/Controls/TracksGallery.razor
+2 -2
View File
@@ -1,8 +1,8 @@
<MudContainer MaxWidth="MaxWidth.False" Class="tracks-gallery-container">
<MudContainer MaxWidth="MaxWidth.Large" Class="tracks-gallery-container">
<MudGrid Spacing="3" Justify="Justify.Center">
@foreach (var track in Tracks)
{
<MudItem xs="12" sm="6" md="4" lg="2" xl="2">
<MudItem xs="12" sm="6" md="4" lg="3" xl="3">
<div class="deepdrft-track-gallery-item-center">
<TrackCard TrackModel="@track" IsPlaying="@(track.Id == SelectedTrack?.Id)" OnPlay="@HandlePlayClick"/>
</div>
DeepDrftWeb.Client/Layout/MainLayout.razor
+38 -3
View File
@@ -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
DeepDrftWeb.Client/Pages/Home.razor
+3 -3
View File
@@ -70,13 +70,13 @@
<MudIcon Icon="@Icons.Material.Filled.MusicNote" Class="mr-2" />
Our Sound
</MudText>
<MudChipSet T="string" Class="mb-4">
<MudChipSet ReadOnly T="string" Class="mb-4">
<MudChip Color="Color.Primary" Class="deepdrft-chip-spacing">House</MudChip>
<MudChip Color="Color.Secondary" Class="deepdrft-chip-spacing">Techno</MudChip>
<MudChip Color="Color.Tertiary" Class="deepdrft-chip-spacing">Trance</MudChip>
<MudChip Color="Color.Info" Class="deepdrft-chip-spacing">IDM</MudChip>
<MudChip Color="Color.Primary" Variant="Variant.Outlined" Class="deepdrft-chip-spacing">Progressive</MudChip>
<MudChip Color="Color.Secondary" Variant="Variant.Outlined" Class="deepdrft-chip-spacing">Ambient</MudChip>
<MudChip Color="Color.Warning" Class="deepdrft-chip-spacing">Progressive</MudChip>
<MudChip Color="Color.Success" Class="deepdrft-chip-spacing">Ambient</MudChip>
</MudChipSet>
<MudText Typo="Typo.body1" Class="deepdrft-text-readable">
From deep, driving basslines to ethereal atmospheric textures, our music explores the
DeepDrftWeb.Client/Pages/TracksView.razor.cs
+1 -1
View File
@@ -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();
DeepDrftWeb/Components/App.razor
+5 -3
View File
@@ -5,9 +5,11 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Michroma&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Electrolize:wght@400&display=swap" rel="stylesheet">
<link href="_@Assets["content/MudBlazor.ThemeManager/MudBlazorThemeManager.css"]" rel="stylesheet" />
<link href=@Assets["_content/MudBlazor/MudBlazor.min.css"] rel="stylesheet" />
<link rel="stylesheet" href="@Assets["DeepDrftWeb.styles.css"]"/>
DeepDrftWeb/wwwroot/styles/deepdrft-styles.css
+53 -3
View File
@@ -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;
}