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