portfolio-page/src/scss/variables.scss

101 lines
2.5 KiB
SCSS

// Breakpoint variables
$mobile-breakpoint: 768px;
$desktop-breakpoint: 769px;
// Color variables
$color-primary: #042c53;
$color-secondary: #0c447c;
$color-heading: #042c53;
// Shadow variables
$shadow-sm: 0 4px 12px;
$shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
$shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
// Border radius variables
$border-radius-sm: 0.375rem;
$border-radius-md: 0.5rem;
$border-radius-lg: 1rem;
$border-radius-xl: 1.5rem;
// Spacing variables
$spacing-xs: 0.5rem;
$spacing-sm: 0.75rem;
$spacing-md: 1rem;
$spacing-lg: 1.5rem;
$spacing-xl: 2rem;
$spacing-2xl: 3rem;
$spacing-3xl: 4rem;
// Section variables
$section-padding-y: $spacing-2xl;
// Card variables
$card-border-radius: $border-radius-xl;
$card-border-radius-sm: $border-radius-md;
$card-border-radius-md: $border-radius-lg;
$card-border-radius-lg: $border-radius-xl;
$card-padding: $spacing-xl;
$card-padding-sm: $spacing-lg;
$card-padding-md: $spacing-md;
$card-padding-lg: $spacing-xl;
$card-gap: $spacing-xl;
$card-gap-sm: $spacing-md;
// Transition variables
$transition-base: all 0.3s ease;
$transition-default: all 0.3s ease;
$transition-fast: all 0.2s ease;
$transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
// Common shadow variables
$shadow-card:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
$shadow-card-hover:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
$shadow-card-lg:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
$shadow-button:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
// Gradient variables
$gradient-primary: #042c53;
// Light theme gradient
$gradient-text-light: linear-gradient(
to right,
$color-secondary,
$color-primary
);
// Dark theme gradient
$gradient-text-dark: linear-gradient(to right, #e6f1fb, #b5d4f4);
// Default gradient for backwards compatibility
$gradient-text: $gradient-text-light;
// Services Section Variables
$services-card-padding: 1.5rem;
$services-card-border-radius: 0.75rem;
$services-icon-size: 2.5rem;
$services-grid-gap: 1.5rem;
$services-grid-gap-mobile: 1rem;
$services-header-margin: 2rem;
// Skills Section Variables
$skills-header-margin: 3rem;
$skills-category-gap: 2rem;
$skills-category-gap-mobile: 1.5rem;
$skills-skill-gap: 1.5rem;
$skills-skill-gap-mobile: 1rem;
$skills-progress-height: 0.75rem;
$skills-progress-radius: 9999px;
$skills-category-padding: 2rem;
$skills-category-padding-mobile: 1.5rem;
// Add any other global variables here