2026 Deep DRFT Theme Draft 1 WIP
This commit is contained in:
daniel-c-harvey
@@ -1,4 +1,4 @@
|
||||
/* Navigation menu item styling */
|
||||
/* Navigation menu item styling */
|
||||
.nav-menu-item {
|
||||
display: block;
|
||||
padding: 8px 16px;
|
||||
@@ -29,26 +29,42 @@
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Hover state */
|
||||
.nav-menu-item:hover {
|
||||
background-color: rgba(138, 43, 226, 0.08);
|
||||
color: #8A2BE2;
|
||||
text-decoration: none;
|
||||
}
|
||||
/* === HOVER STATES === */
|
||||
|
||||
.nav-menu-item:hover .nav-item-content {
|
||||
color: var(--mud-palette-tertiary);
|
||||
/* Base hover */
|
||||
.nav-menu-item:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-menu-item:hover .nav-item-text {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Active state */
|
||||
/* Charleston (Light Mode) - Gold hover tint */
|
||||
:global(.deepdrft-theme-light) .nav-menu-item:hover {
|
||||
background-color: rgba(201, 169, 98, 0.1);
|
||||
color: #1C1C1C;
|
||||
}
|
||||
|
||||
:global(.deepdrft-theme-light) .nav-menu-item:hover .nav-item-content {
|
||||
color: #B8848C;
|
||||
}
|
||||
|
||||
/* Lowcountry (Dark Mode) - Coral glow hover */
|
||||
:global(.deepdrft-theme-dark) .nav-menu-item:hover {
|
||||
background-color: rgba(224, 122, 95, 0.12);
|
||||
color: #E07A5F;
|
||||
box-shadow: 0 0 10px rgba(224, 122, 95, 0.15);
|
||||
}
|
||||
|
||||
:global(.deepdrft-theme-dark) .nav-menu-item:hover .nav-item-content {
|
||||
color: #E07A5F;
|
||||
}
|
||||
|
||||
/* === ACTIVE STATES === */
|
||||
|
||||
/* Base active */
|
||||
.nav-menu-item.active {
|
||||
background-color: rgba(138, 43, 226, 0.12);
|
||||
color: var(--mud-palette-primary);
|
||||
border-left: 4px solid #8A2BE2;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
@@ -64,8 +80,39 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Focus state */
|
||||
.nav-menu-item:focus {
|
||||
outline: 2px solid #8A2BE2;
|
||||
/* Charleston (Light Mode) - Iron left border */
|
||||
:global(.deepdrft-theme-light) .nav-menu-item.active {
|
||||
background-color: rgba(28, 28, 28, 0.08);
|
||||
color: #1C1C1C;
|
||||
border-left: 4px solid #1C1C1C;
|
||||
}
|
||||
|
||||
:global(.deepdrft-theme-light) .nav-menu-item.active .nav-item-content {
|
||||
color: #1C1C1C;
|
||||
}
|
||||
|
||||
/* Lowcountry (Dark Mode) - Gold active indicator */
|
||||
:global(.deepdrft-theme-dark) .nav-menu-item.active {
|
||||
background-color: rgba(233, 196, 106, 0.12);
|
||||
color: #E9C46A;
|
||||
border-left: 4px solid #E9C46A;
|
||||
box-shadow: 0 0 12px rgba(233, 196, 106, 0.2);
|
||||
}
|
||||
|
||||
:global(.deepdrft-theme-dark) .nav-menu-item.active .nav-item-content {
|
||||
color: #E9C46A;
|
||||
}
|
||||
|
||||
/* === FOCUS STATES === */
|
||||
|
||||
/* Charleston (Light Mode) - Iron focus outline */
|
||||
:global(.deepdrft-theme-light) .nav-menu-item:focus {
|
||||
outline: 2px solid #1C1C1C;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Lowcountry (Dark Mode) - Coral focus outline */
|
||||
:global(.deepdrft-theme-dark) .nav-menu-item:focus {
|
||||
outline: 2px solid #E07A5F;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
@@ -24,15 +24,33 @@
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
border-radius: 1rem;
|
||||
border: 1px solid var(--deepdrft-theme-primary);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
|
||||
0 2px 10px var(--deepdrft-theme-secondary);
|
||||
border: 2px solid var(--deepdrft-theme-primary);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
color: #ffffff;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Charleston (Light Mode) - Iron frame effect */
|
||||
:global(.deepdrft-theme-light) .player-backdrop {
|
||||
background: rgba(253, 251, 247, 0.92);
|
||||
border: 2px solid #1C1C1C;
|
||||
box-shadow: 0 4px 20px rgba(28, 28, 28, 0.2),
|
||||
inset 0 0 0 1px rgba(28, 28, 28, 0.05);
|
||||
color: #1C1C1C;
|
||||
}
|
||||
|
||||
/* Lowcountry (Dark Mode) - Warm sunset glow effect */
|
||||
:global(.deepdrft-theme-dark) .player-backdrop {
|
||||
background: rgba(20, 20, 32, 0.88);
|
||||
border: 1px solid rgba(224, 122, 95, 0.5);
|
||||
box-shadow: 0 0 20px rgba(224, 122, 95, 0.25),
|
||||
0 0 40px rgba(123, 109, 141, 0.15),
|
||||
0 4px 20px rgba(0, 0, 0, 0.4);
|
||||
color: #F5F0E6;
|
||||
}
|
||||
|
||||
/* Control buttons positioning */
|
||||
.player-controls {
|
||||
position: absolute;
|
||||
@@ -50,7 +68,7 @@
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
background: linear-gradient(135deg,
|
||||
background: linear-gradient(135deg,
|
||||
var(--deepdrft-theme-primary) 0%,
|
||||
var(--deepdrft-theme-secondary) 50%,
|
||||
var(--deepdrft-theme-tertiary) 100%
|
||||
@@ -58,15 +76,36 @@
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
border: 2px solid var(--deepdrft-theme-secondary);
|
||||
box-shadow: 0 4px 20px var(--deepdrft-theme-primary),
|
||||
0 2px 10px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Charleston (Light Mode) - Iron dock */
|
||||
:global(.deepdrft-theme-light) .minimized-dock {
|
||||
background: linear-gradient(135deg, #1C1C1C 0%, #B8848C 50%, #C9A962 100%);
|
||||
border: 2px solid #1C1C1C;
|
||||
box-shadow: 0 4px 15px rgba(28, 28, 28, 0.4);
|
||||
}
|
||||
|
||||
/* Lowcountry (Dark Mode) - Warm sunset dock */
|
||||
:global(.deepdrft-theme-dark) .minimized-dock {
|
||||
background: linear-gradient(135deg, #E07A5F 0%, #7B6D8D 50%, #E9C46A 100%);
|
||||
border: 2px solid rgba(224, 122, 95, 0.6);
|
||||
box-shadow: 0 0 20px rgba(224, 122, 95, 0.4),
|
||||
0 0 40px rgba(123, 109, 141, 0.2);
|
||||
}
|
||||
|
||||
.minimized-dock:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 6px 25px rgba(var(--deepdrft-theme-primary), 0.8),
|
||||
0 3px 15px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
:global(.deepdrft-theme-light) .minimized-dock:hover {
|
||||
box-shadow: 0 6px 20px rgba(28, 28, 28, 0.5);
|
||||
}
|
||||
|
||||
:global(.deepdrft-theme-dark) .minimized-dock:hover {
|
||||
box-shadow: 0 0 30px rgba(224, 122, 95, 0.5),
|
||||
0 0 50px rgba(123, 109, 141, 0.3);
|
||||
}
|
||||
|
||||
/* Minimized button styles */
|
||||
|
||||
@@ -26,11 +26,22 @@
|
||||
min-width: 4px;
|
||||
height: var(--bar-height, 2%);
|
||||
min-height: 2px;
|
||||
background: var(--deepdrft-theme-secondary, #8A2BE2);
|
||||
background: var(--deepdrft-theme-secondary);
|
||||
border-radius: 2px 2px 0 0;
|
||||
transition: height 0.05s ease-out;
|
||||
}
|
||||
|
||||
/* Charleston (Light Mode) - Iron to gold colored bars */
|
||||
:global(.deepdrft-theme-light) .spectrum-bar {
|
||||
background: linear-gradient(to top, #1C1C1C 0%, #B8848C 50%, #C9A962 100%);
|
||||
}
|
||||
|
||||
/* Lowcountry (Dark Mode) - Coral to gold bars with warm glow */
|
||||
:global(.deepdrft-theme-dark) .spectrum-bar {
|
||||
background: linear-gradient(to top, #E07A5F 0%, #E9C46A 100%);
|
||||
box-shadow: 0 0 4px rgba(233, 196, 106, 0.4);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.spectrum-container {
|
||||
|
||||
@@ -6,24 +6,26 @@
|
||||
<MudPopoverProvider />
|
||||
<MudDialogProvider />
|
||||
<MudSnackbarProvider />
|
||||
<MudLayout Style="display: flex; flex-direction: column; min-height: 100vh">
|
||||
<AudioPlayerProvider>
|
||||
<MudAppBar Elevation="_themeManager.AppBarElevation">
|
||||
<MudAvatar Class="mr-2">
|
||||
<MudImage Src="img/deepdrft-logo.jpg"></MudImage>
|
||||
</MudAvatar>
|
||||
<NavMenu />
|
||||
<MudSpacer/>
|
||||
<MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle"/>
|
||||
</MudAppBar>
|
||||
<MudMainContent Class="flex-grow-1 pt-16 pb-8">
|
||||
<MudContainer MaxWidth="MaxWidth.False" Class="pa-4">
|
||||
@Body
|
||||
</MudContainer>
|
||||
<AudioPlayerBar />
|
||||
</MudMainContent>
|
||||
</AudioPlayerProvider>
|
||||
</MudLayout>
|
||||
<div class="@ThemeWrapperClass">
|
||||
<MudLayout Style="display: flex; flex-direction: column; min-height: 100vh">
|
||||
<AudioPlayerProvider>
|
||||
<MudAppBar Elevation="_themeManager.AppBarElevation">
|
||||
<MudAvatar Class="mr-2">
|
||||
<MudImage Src="img/deepdrft-logo.jpg"></MudImage>
|
||||
</MudAvatar>
|
||||
<NavMenu />
|
||||
<MudSpacer/>
|
||||
<MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle"/>
|
||||
</MudAppBar>
|
||||
<MudMainContent Class="flex-grow-1 pt-16 pb-8">
|
||||
<MudContainer MaxWidth="MaxWidth.False" Class="pa-4">
|
||||
@Body
|
||||
</MudContainer>
|
||||
<AudioPlayerBar />
|
||||
</MudMainContent>
|
||||
</AudioPlayerProvider>
|
||||
</MudLayout>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="blazor-error-ui" data-nosnippet>
|
||||
@@ -49,35 +51,35 @@
|
||||
{
|
||||
Default = new DefaultTypography()
|
||||
{
|
||||
FontFamily = new[] {"Electrolize", "sans-serif"}
|
||||
FontFamily = new[] {"Source Serif 4", "serif"}
|
||||
},
|
||||
H1 = new H1Typography()
|
||||
{
|
||||
FontFamily = new[] {"Audiowide", "sans-serif"}
|
||||
FontFamily = new[] {"Playfair Display", "serif"}
|
||||
},
|
||||
H2 = new H2Typography()
|
||||
{
|
||||
FontFamily = new[] {"Michroma", "sans-serif"}
|
||||
FontFamily = new[] {"Cormorant Garamond", "serif"}
|
||||
},
|
||||
H3 = new H3Typography()
|
||||
{
|
||||
FontFamily = new[] {"Michroma", "sans-serif"}
|
||||
FontFamily = new[] {"Cormorant Garamond", "serif"}
|
||||
},
|
||||
H4 = new H4Typography()
|
||||
{
|
||||
FontFamily = new[] {"Michroma", "sans-serif"}
|
||||
FontFamily = new[] {"Cormorant Garamond", "serif"}
|
||||
},
|
||||
H5 = new H5Typography()
|
||||
{
|
||||
FontFamily = new[] {"Michroma", "sans-serif"}
|
||||
FontFamily = new[] {"Cormorant Garamond", "serif"}
|
||||
},
|
||||
H6 = new H6Typography()
|
||||
{
|
||||
FontFamily = new[] {"Michroma", "sans-serif"}
|
||||
FontFamily = new[] {"Cormorant Garamond", "serif"}
|
||||
},
|
||||
Button = new ButtonTypography()
|
||||
{
|
||||
FontFamily = new[] {"Michroma", "sans-serif"}
|
||||
FontFamily = new[] {"Cormorant Garamond", "serif"}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -110,66 +112,70 @@
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
// Charleston in the Day - Light Theme
|
||||
// Inspired by Charleston's historic architecture: white stucco, black wrought iron gates, elegant accents
|
||||
private readonly PaletteLight _lightPalette = new()
|
||||
{
|
||||
Primary = "#8A2BE2", // BlueViolet - main DeepDrft purple
|
||||
Secondary = "#FF1493", // DeepPink - main DeepDrft pink
|
||||
Tertiary = "#4B0082", // Indigo - DeepDrft deep purple
|
||||
Info = "#9370DB", // MediumPurple - DeepDrft accent purple
|
||||
Success = "#98FB98", // PaleGreen - soft success
|
||||
Warning = "#FFEAA7", // Light peach - soft warning
|
||||
Error = "#FFB6C1", // LightPink - soft error
|
||||
Black = "#2F2F2F", // Dark gray for text
|
||||
White = "#FFFFFF", // Pure white
|
||||
Surface = "#FFFAF0", // FloralWhite - creamy surface
|
||||
Background = "#FAF0E6", // Linen - warm cream background
|
||||
AppbarText = "#2F2F2F", // Dark text on light appbar
|
||||
AppbarBackground = "rgba(138,43,226,0.85)", // Translucent DeepDrft primary
|
||||
DrawerBackground = "rgba(138,43,226,0.1)", // Very light DeepDrft primary
|
||||
TextPrimary = "#2F2F2F", // Dark primary text
|
||||
TextSecondary = "#6B6B6B", // Medium gray secondary text
|
||||
GrayLight = "rgba(138,43,226,0.1)", // Light DeepDrft tint
|
||||
GrayLighter = "rgba(138,43,226,0.05)", // Very light DeepDrft tint
|
||||
GrayDefault = "rgba(138,43,226,0.2)", // Medium DeepDrft tint
|
||||
GrayDark = "rgba(138,43,226,0.4)", // Darker DeepDrft tint
|
||||
Divider = "rgba(138,43,226,0.15)", // Soft DeepDrft divider lines
|
||||
TableLines = "rgba(138,43,226,0.15)", // Soft DeepDrft table lines
|
||||
Primary = "#1C1C1C", // Wrought iron black - strong, elegant
|
||||
Secondary = "#B8848C", // Dusty rose - elegant accent
|
||||
Tertiary = "#C9A962", // Antique gold - replaces brown
|
||||
Info = "#2196F3", // MudBlazor default blue (semantic)
|
||||
Success = "#4CAF50", // MudBlazor default green (semantic)
|
||||
Warning = "#FF9800", // MudBlazor default amber (semantic)
|
||||
Error = "#F44336", // MudBlazor default red (semantic)
|
||||
Black = "#1C1C1C", // Wrought iron black
|
||||
White = "#FDFBF7", // Cream white (stucco)
|
||||
Surface = "#FDFBF7", // Cream stucco surface
|
||||
Background = "#F5F2EC", // Warm linen background
|
||||
AppbarText = "#FDFBF7", // Cream text on dark appbar (FIX)
|
||||
AppbarBackground = "#1C1C1C", // Solid wrought iron appbar
|
||||
DrawerBackground = "#F5F2EC", // Linen drawer
|
||||
TextPrimary = "#1C1C1C", // Wrought iron text
|
||||
TextSecondary = "#4A4A4A", // Softer iron text
|
||||
GrayLight = "rgba(28,28,28,0.08)", // Light iron tint
|
||||
GrayLighter = "rgba(28,28,28,0.04)", // Very light iron tint
|
||||
GrayDefault = "rgba(28,28,28,0.15)", // Medium iron tint
|
||||
GrayDark = "rgba(28,28,28,0.25)", // Darker iron tint
|
||||
Divider = "rgba(28,28,28,0.12)", // Subtle divider lines
|
||||
TableLines = "rgba(28,28,28,0.12)", // Table borders
|
||||
};
|
||||
|
||||
// Lowcountry Summer Nights - Dark Theme
|
||||
// Inspired by warm sunsets over marshes, fireflies, Spanish moss, lamplight
|
||||
private readonly PaletteDark _darkPalette = new()
|
||||
{
|
||||
Primary = "#FF1493", // DeepPink - main DeepDrft pink for dark mode
|
||||
Secondary = "#8A2BE2", // BlueViolet - main DeepDrft purple
|
||||
Tertiary = "#9370DB", // MediumPurple - DeepDrft accent
|
||||
Info = "#4B0082", // Indigo - DeepDrft deep purple
|
||||
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
|
||||
Surface = "rgba(75,0,130,0.2)", // Dark DeepDrft indigo tint
|
||||
Background = "#0A0A0A", // Very dark background
|
||||
BackgroundGray = "#1A1A1A", // Very dark gray
|
||||
AppbarText = "#FFFFFF", // White text on dark appbar
|
||||
AppbarBackground = "rgba(75,0,130,0.95)", // Translucent DeepDrft indigo
|
||||
DrawerBackground = "rgba(75,0,130,0.15)", // Dark DeepDrft indigo tint
|
||||
DrawerIcon = "#E0E0E0", // Light gray icons
|
||||
DrawerText = "#E0E0E0", // Light gray drawer text
|
||||
ActionDefault = "#BDBDBD", // Light gray for actions
|
||||
ActionDisabled = "#757575", // Medium gray for disabled
|
||||
ActionDisabledBackground = "#2F2F2F", // Dark gray background
|
||||
TextPrimary = "#FFFFFF", // White primary text
|
||||
TextSecondary = "#E0E0E0", // Light gray secondary text
|
||||
TextDisabled = "#757575", // Disabled text
|
||||
GrayLight = "rgba(255,20,147,0.15)", // Light DeepDrft pink tint
|
||||
GrayLighter = "rgba(255,20,147,0.08)", // Lighter DeepDrft pink tint
|
||||
GrayDefault = "rgba(255,20,147,0.25)", // Default DeepDrft pink tint
|
||||
GrayDark = "rgba(255,20,147,0.4)", // Darker DeepDrft pink tint
|
||||
Divider = "rgba(255,20,147,0.2)", // DeepDrft pink divider lines
|
||||
LinesDefault = "rgba(255,20,147,0.2)", // DeepDrft pink lines
|
||||
TableLines = "rgba(255,20,147,0.2)", // DeepDrft pink table lines
|
||||
OverlayLight = "rgba(0,0,0,0.7)", // Dark overlay
|
||||
OverlayDark = "rgba(255,255,255,0.1)", // Light overlay for dark mode
|
||||
Primary = "#E07A5F", // Sunset coral - warm, not neon
|
||||
Secondary = "#7B6D8D", // Twilight purple - muted
|
||||
Tertiary = "#E9C46A", // Firefly gold - lamplight
|
||||
Info = "#2196F3", // MudBlazor default blue (semantic)
|
||||
Success = "#4CAF50", // MudBlazor default green (semantic)
|
||||
Warning = "#FF9800", // MudBlazor default amber (semantic)
|
||||
Error = "#F44336", // MudBlazor default red (semantic)
|
||||
Black = "#0A0A0F", // Deep night black
|
||||
White = "#F5F0E6", // Warm moonlight white
|
||||
Surface = "rgba(123,109,141,0.12)", // Twilight-tinted surface
|
||||
Background = "#0D0D12", // Deep twilight background
|
||||
BackgroundGray = "#141420", // Slightly lighter night
|
||||
AppbarText = "#F5F0E6", // Warm moonlight text
|
||||
AppbarBackground = "rgba(13,13,18,0.95)", // Translucent night
|
||||
DrawerBackground = "rgba(123,109,141,0.08)", // Subtle twilight tint
|
||||
DrawerIcon = "#E0E0E0", // Light icons
|
||||
DrawerText = "#E0E0E0", // Light drawer text
|
||||
ActionDefault = "#BDBDBD", // Default action color
|
||||
ActionDisabled = "#757575", // Disabled state
|
||||
ActionDisabledBackground = "#1A1A2E", // Disabled background
|
||||
TextPrimary = "#F5F0E6", // Warm white primary text
|
||||
TextSecondary = "#B8B0C4", // Lavender gray secondary text
|
||||
TextDisabled = "#757575", // Disabled text
|
||||
GrayLight = "rgba(224,122,95,0.15)", // Coral tint light
|
||||
GrayLighter = "rgba(224,122,95,0.08)", // Coral tint lighter
|
||||
GrayDefault = "rgba(224,122,95,0.22)", // Coral tint default
|
||||
GrayDark = "rgba(224,122,95,0.35)", // Coral tint dark
|
||||
Divider = "rgba(224,122,95,0.18)", // Coral divider
|
||||
LinesDefault = "rgba(224,122,95,0.18)", // Coral lines
|
||||
TableLines = "rgba(224,122,95,0.18)", // Coral table lines
|
||||
OverlayLight = "rgba(0,0,0,0.7)", // Dark overlay
|
||||
OverlayDark = "rgba(255,255,255,0.08)", // Light overlay
|
||||
};
|
||||
|
||||
public string DarkLightModeButtonIcon => _isDarkMode switch
|
||||
@@ -177,6 +183,9 @@
|
||||
true => Icons.Material.Rounded.AutoMode,
|
||||
false => Icons.Material.Outlined.DarkMode,
|
||||
};
|
||||
|
||||
// Theme wrapper class for CSS targeting
|
||||
private string ThemeWrapperClass => _isDarkMode ? "deepdrft-theme-dark" : "deepdrft-theme-light";
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -6,36 +6,36 @@
|
||||
|
||||
@* Hero Section *@
|
||||
<MudPaper Elevation="0" Class="pa-8 mb-6 text-center deepdrft-gradient-hero deepdrft-hero-container">
|
||||
|
||||
|
||||
<MudGrid Justify="Justify.Center">
|
||||
<MudItem xs="12" md="8">
|
||||
<MudText Typo="Typo.h1" Color="Color.Surface"
|
||||
Class="mb-4 deepdrft-text-hero">
|
||||
<MudText Typo="Typo.h1"
|
||||
Class="mb-4 deepdrft-text-hero deepdrft-hero-title">
|
||||
DEEPDRFT
|
||||
</MudText>
|
||||
|
||||
<MudText Typo="Typo.h4" Color="Color.Surface"
|
||||
Class="mb-6 deepdrft-text-subtitle">
|
||||
|
||||
<MudText Typo="Typo.h4"
|
||||
Class="mb-6 deepdrft-text-subtitle deepdrft-hero-subtitle">
|
||||
ELECTRONIC MUSIC COLLECTIVE
|
||||
</MudText>
|
||||
|
||||
<MudText Typo="Typo.h6" Color="Color.Surface"
|
||||
Class="mb-8 deepdrft-text-description deepdrft-hero-text-container">
|
||||
|
||||
<MudText Typo="Typo.h6"
|
||||
Class="mb-8 deepdrft-text-description deepdrft-hero-text-container deepdrft-hero-description">
|
||||
Live electronic music from Charleston, SC featuring house, techno, trance, and IDM crafted with synthesizers and grooveboxes
|
||||
</MudText>
|
||||
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Surface"
|
||||
Size="Size.Large"
|
||||
Class="mr-4 mb-2 deepdrft-button-primary">
|
||||
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
Size="Size.Large"
|
||||
Class="mr-4 mb-2 deepdrft-hero-button-filled">
|
||||
<MudIcon Icon="@Icons.Material.Filled.PlayArrow" Class="mr-2" />
|
||||
START STREAMING
|
||||
</MudButton>
|
||||
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Surface"
|
||||
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Primary"
|
||||
Size="Size.Large"
|
||||
Class="mb-2 deepdrft-button-outlined">
|
||||
Class="mb-2 deepdrft-hero-button-outlined">
|
||||
<MudIcon Icon="@Icons.Material.Filled.LibraryMusic" Class="mr-2" />
|
||||
BROWSE TRACKS
|
||||
</MudButton>
|
||||
@@ -199,22 +199,24 @@
|
||||
|
||||
@* Call to Action *@
|
||||
<MudPaper Elevation="8" Class="pa-8 deepdrft-gradient-primary deepdrft-cta-container">
|
||||
<MudText Typo="Typo.h3" Color="Color.Surface" Class="mb-4 deepdrft-text-bold">
|
||||
<MudText Typo="Typo.h3" Class="mb-4 deepdrft-text-bold deepdrft-hero-title">
|
||||
Ready to Dive Deep?
|
||||
</MudText>
|
||||
<MudText Typo="Typo.h6" Color="Color.Surface" Class="mb-6 deepdrft-text-description">
|
||||
<MudText Typo="Typo.h6" Class="mb-6 deepdrft-text-description deepdrft-hero-description">
|
||||
Immerse yourself in the electronic soundscapes of DeepDrft
|
||||
</MudText>
|
||||
<MudButtonGroup Size="Size.Large" Class="deepdrft-cta-buttons">
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Surface"
|
||||
Class="deepdrft-button-primary deepdrft-button-spaced">
|
||||
<MudButton Variant="Variant.Filled"
|
||||
Color="Color.Primary"
|
||||
Size="Size.Large"
|
||||
Class="deepdrft-hero-button-filled deepdrft-button-spaced">
|
||||
<MudIcon Icon="@Icons.Material.Filled.PlayCircle" Class="mr-2" />
|
||||
EXPLORE MUSIC
|
||||
</MudButton>
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Surface"
|
||||
Class="deepdrft-button-outlined deepdrft-button-spaced">
|
||||
<MudButton Variant="Variant.Outlined"
|
||||
Color="Color.Primary"
|
||||
Size="Size.Large"
|
||||
Class="deepdrft-hero-button-outlined deepdrft-button-spaced">
|
||||
<MudIcon Icon="@Icons.Material.Filled.Schedule" Class="mr-2" />
|
||||
LIVE SCHEDULE
|
||||
</MudButton>
|
||||
|
||||
Reference in New Issue
Block a user