first pass - kryz inspired
This commit is contained in:
@@ -0,0 +1,106 @@
|
||||
@use './variables' as *;
|
||||
|
||||
// ========== Reusable SCSS mixins for layout and styling ==========
|
||||
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@mixin flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@mixin gradient-text($from: $accent-orange, $to: $accent-orange-light) {
|
||||
background: linear-gradient(135deg, $from, $to);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
@mixin card-style {
|
||||
background: $neutral-white;
|
||||
border-radius: $radius-lg;
|
||||
box-shadow: $shadow-md;
|
||||
transition: transform $transition-normal, box-shadow $transition-normal;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin section-padding($top: $spacing-3xl, $bottom: $spacing-3xl) {
|
||||
padding-top: $top;
|
||||
padding-bottom: $bottom;
|
||||
}
|
||||
|
||||
@mixin responsive($breakpoint) {
|
||||
@if $breakpoint == sm { @media (max-width: ($bp-sm - 1px)) { @content; } }
|
||||
@if $breakpoint == md { @media (max-width: ($bp-md - 1px)) { @content; } }
|
||||
@if $breakpoint == lg { @media (max-width: ($bp-lg - 1px)) { @content; } }
|
||||
@if $breakpoint == xl { @media (max-width: ($bp-xl - 1px)) { @content; } }
|
||||
}
|
||||
|
||||
@mixin button-style($bg: $accent-orange, $text: $neutral-white, $hover-bg: $accent-orange-dark) {
|
||||
background: $bg;
|
||||
color: $text;
|
||||
border: none;
|
||||
border-radius: $radius-md;
|
||||
padding: $spacing-sm $spacing-lg;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background $transition-fast, transform $transition-fast;
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mountain-divider($color: $primary-blue, $height: 80px) {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $height;
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%231a3a5c' fill-opacity='1' d='M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,218.7C672,235,768,245,864,234.7C960,224,1056,192,1152,186.7C1248,181,1344,203,1392,213.3L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center bottom;
|
||||
background-size: cover;
|
||||
margin-top: -$height;
|
||||
}
|
||||
|
||||
@mixin flowery-border($color: $accent-orange) {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: $spacing-md auto 0;
|
||||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='35' r='12' fill='%23e87a2e'/%3E%3Ccircle cx='35' cy='50' r='12' fill='%23e87a2e'/%3E%3Ccircle cx='65' cy='50' r='12' fill='%23e87a2e'/%3E%3Ccircle cx='40' cy='62' r='12' fill='%23e87a2e'/%3E%3Ccircle cx='60' cy='62' r='12' fill='%23e87a2e'/%3E%3Ccircle cx='50' cy='50' r='8' fill='%23f0a86a'/%3E%3C/svg%3E") no-repeat center;
|
||||
background-size: contain;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fade-in {
|
||||
animation: fadeIn 0.6s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-8px); }
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
@use './variables' as *;
|
||||
|
||||
// ========== CSS Custom Properties (exposed to the browser) ==========
|
||||
// These map SCSS variables to CSS custom properties so Angular components
|
||||
// can consume them via var() at runtime.
|
||||
|
||||
:root {
|
||||
// Primary
|
||||
--color-primary: #{$primary-blue};
|
||||
--color-primary-light: #{$primary-blue-light};
|
||||
--color-primary-dark: #{$primary-blue-dark};
|
||||
--color-primary-muted: #{$primary-blue-muted};
|
||||
|
||||
// Accent
|
||||
--color-accent: #{$accent-orange};
|
||||
--color-accent-light: #{$accent-orange-light};
|
||||
--color-accent-dark: #{$accent-orange-dark};
|
||||
--color-accent-muted: #{$accent-orange-muted};
|
||||
|
||||
// Neutrals
|
||||
--color-white: #{$neutral-white};
|
||||
--color-cream: #{$neutral-cream};
|
||||
--color-light: #{$neutral-light};
|
||||
--color-medium: #{$neutral-medium};
|
||||
--color-dark: #{$neutral-dark};
|
||||
--color-black: #{$neutral-black};
|
||||
|
||||
// Semantic
|
||||
--color-success: #{$success-green};
|
||||
--color-danger: #{$danger-red};
|
||||
--color-info: #{$info-blue};
|
||||
|
||||
// Typography
|
||||
--font-primary: #{$font-primary};
|
||||
--font-heading: #{$font-heading};
|
||||
--font-mono: #{$font-mono};
|
||||
|
||||
// Radii
|
||||
--radius-sm: #{$radius-sm};
|
||||
--radius-md: #{$radius-md};
|
||||
--radius-lg: #{$radius-lg};
|
||||
--radius-xl: #{$radius-xl};
|
||||
--radius-full: #{$radius-full};
|
||||
|
||||
// Shadows
|
||||
--shadow-sm: #{$shadow-sm};
|
||||
--shadow-md: #{$shadow-md};
|
||||
--shadow-lg: #{$shadow-lg};
|
||||
--shadow-xl: #{$shadow-xl};
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
// =============================================================================
|
||||
// Color Palette — edit these to change the entire site's color scheme
|
||||
// =============================================================================
|
||||
|
||||
// Primary palette
|
||||
$primary-blue: #1a3a5c;
|
||||
$primary-blue-light: #2a5a8c;
|
||||
$primary-blue-dark: #0e2440;
|
||||
$primary-blue-muted: #3a6a9c;
|
||||
|
||||
// Accent palette
|
||||
$accent-orange: #e87a2e;
|
||||
$accent-orange-light: #f09a4e;
|
||||
$accent-orange-dark: #c85a1e;
|
||||
$accent-orange-muted: #f0a86a;
|
||||
|
||||
// Neutrals
|
||||
$neutral-white: #ffffff;
|
||||
$neutral-cream: #faf6f0;
|
||||
$neutral-light: #f0ebe3;
|
||||
$neutral-medium: #8a8580;
|
||||
$neutral-dark: #3a3632;
|
||||
$neutral-black: #1a1816;
|
||||
|
||||
// Semantic
|
||||
$success-green: #4a9e4f;
|
||||
$danger-red: #c83030;
|
||||
$info-blue: #3a8abf;
|
||||
|
||||
// Gradients
|
||||
$sky-gradient: linear-gradient(135deg, $primary-blue-dark 0%, $primary-blue 40%, $primary-blue-light 100%);
|
||||
$sunset-gradient: linear-gradient(135deg, $accent-orange-dark 0%, $accent-orange 50%, $accent-orange-light 100%);
|
||||
$mixed-gradient: linear-gradient(135deg, $primary-blue-dark 0%, $primary-blue 50%, $accent-orange 100%);
|
||||
|
||||
// Typography
|
||||
$font-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
$font-heading: 'Georgia', 'Times New Roman', serif;
|
||||
$font-mono: 'Courier New', Courier, monospace;
|
||||
|
||||
// Spacing
|
||||
$spacing-xs: 0.25rem;
|
||||
$spacing-sm: 0.5rem;
|
||||
$spacing-md: 1rem;
|
||||
$spacing-lg: 2rem;
|
||||
$spacing-xl: 3rem;
|
||||
$spacing-2xl: 4rem;
|
||||
$spacing-3xl: 6rem;
|
||||
|
||||
// Border radius
|
||||
$radius-sm: 4px;
|
||||
$radius-md: 8px;
|
||||
$radius-lg: 16px;
|
||||
$radius-xl: 24px;
|
||||
$radius-full: 50%;
|
||||
|
||||
// Shadows
|
||||
$shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
|
||||
$shadow-md: 0 4px 12px rgba(0,0,0,0.15);
|
||||
$shadow-lg: 0 8px 30px rgba(0,0,0,0.18);
|
||||
$shadow-xl: 0 12px 40px rgba(0,0,0,0.22);
|
||||
|
||||
// Breakpoints
|
||||
$bp-sm: 576px;
|
||||
$bp-md: 768px;
|
||||
$bp-lg: 992px;
|
||||
$bp-xl: 1200px;
|
||||
|
||||
// Transitions
|
||||
$transition-fast: 150ms ease;
|
||||
$transition-normal: 300ms ease;
|
||||
$transition-slow: 500ms ease;
|
||||
|
||||
// Z-index scale
|
||||
$z-dropdown: 100;
|
||||
$z-sticky: 200;
|
||||
$z-overlay: 300;
|
||||
$z-modal: 400;
|
||||
$z-toast: 500;
|
||||
Reference in New Issue
Block a user