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/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;
}