메인 페이지 화면설계서 적용
This commit is contained in:
현성필
@@ -0,0 +1,144 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
// This file contains all application-wide SASS mixins
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
// Media query mixins
|
||||
@mixin respond-to($breakpoint) {
|
||||
@if $breakpoint == 'xs' {
|
||||
@media (max-width: #{$breakpoint-xs}) { @content; }
|
||||
} @else if $breakpoint == 'sm' {
|
||||
@media (max-width: #{$breakpoint-sm}) { @content; }
|
||||
} @else if $breakpoint == 'md' {
|
||||
@media (max-width: #{$breakpoint-md}) { @content; }
|
||||
} @else if $breakpoint == 'lg' {
|
||||
@media (min-width: #{$breakpoint-lg}) { @content; }
|
||||
} @else if $breakpoint == 'xl' {
|
||||
@media (min-width: #{$breakpoint-xl}) { @content; }
|
||||
} @else if $breakpoint == 'mobile' {
|
||||
@media (max-width: #{$breakpoint-lg}) { @content; }
|
||||
} @else if $breakpoint == 'tablet' {
|
||||
@media (max-width: #{$breakpoint-md}) { @content; }
|
||||
}
|
||||
}
|
||||
|
||||
// Flexbox mixins
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@mixin flex-between {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Button mixin
|
||||
@mixin button-base {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
padding: $button-padding-y $button-padding-x;
|
||||
border-radius: $border-radius-lg;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: $font-size-base;
|
||||
text-decoration: none;
|
||||
transition: $transition-base;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
}
|
||||
|
||||
// Card mixin
|
||||
@mixin card {
|
||||
background: $white;
|
||||
border-radius: $border-radius-2xl;
|
||||
padding: $card-padding;
|
||||
transition: $transition-base;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: $shadow-lg;
|
||||
}
|
||||
}
|
||||
|
||||
// Gradient text
|
||||
@mixin gradient-text($gradient) {
|
||||
background: $gradient;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
// Truncate text
|
||||
@mixin text-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Absolute center
|
||||
@mixin absolute-center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
// Backdrop blur
|
||||
@mixin backdrop-blur($amount: 10px) {
|
||||
backdrop-filter: blur($amount);
|
||||
-webkit-backdrop-filter: blur($amount);
|
||||
}
|
||||
|
||||
// Animation mixins
|
||||
@mixin animate-float {
|
||||
animation: float 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@mixin animate-bounce {
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
@mixin animate-slide-in-down {
|
||||
animation: slideInDown 0.6s ease-out;
|
||||
}
|
||||
|
||||
@mixin animate-slide-in-up {
|
||||
animation: slideInUp 0.8s ease-out;
|
||||
}
|
||||
|
||||
@mixin animate-fade-in {
|
||||
animation: fadeIn 1.2s ease-out;
|
||||
}
|
||||
|
||||
// Hover lift effect
|
||||
@mixin hover-lift {
|
||||
transition: $transition-base;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: $shadow-xl;
|
||||
}
|
||||
}
|
||||
|
||||
// Glass effect
|
||||
@mixin glass-effect {
|
||||
background: rgba($white, 0.95);
|
||||
@include backdrop-blur(10px);
|
||||
border: 1px solid rgba($white, 0.18);
|
||||
}
|
||||
|
||||
// Pattern circle
|
||||
@mixin pattern-circle($size, $color) {
|
||||
width: $size;
|
||||
height: $size;
|
||||
background: $color;
|
||||
border-radius: 50%;
|
||||
opacity: 0.1;
|
||||
position: absolute;
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
// -----------------------------------------------------------------------------
|
||||
// This file contains all application-wide SASS variables
|
||||
// Based on design/styles-v2.css - Modern vibrant design system
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
// Color Palette - Vibrant and Modern
|
||||
// Primary colors
|
||||
$primary-blue: #4B9BFF; // Bright blue (main brand color)
|
||||
$secondary-blue: #2E7FF7; // Deep blue
|
||||
$accent-cyan: #00D4FF; // Sky blue accent
|
||||
$accent-yellow: #FFD93D; // Yellow accent
|
||||
$accent-orange: #FF6B6B; // Orange accent
|
||||
$accent-green: #6BCF7F; // Green accent
|
||||
$accent-purple: #A78BFA; // Purple accent
|
||||
|
||||
// Neutral colors
|
||||
$text-dark: #1A1A2E; // Main text color
|
||||
$text-gray: #64748B; // Secondary text
|
||||
$text-light: #94A3B8; // Light text
|
||||
$white: #FFFFFF; // Pure white
|
||||
$gray-bg: #F8FAFC; // Light background
|
||||
$light-bg: #EFF6FF; // Blue tinted background
|
||||
$border-gray: #E2E8F0; // Border color
|
||||
$black: #000000; // Pure black
|
||||
$gray-800: #1F2937; // Dark gray
|
||||
$gray-900: #111827; // Darker gray
|
||||
|
||||
// Gradients
|
||||
$gradient-primary: linear-gradient(135deg, $primary-blue 0%, $secondary-blue 100%);
|
||||
$gradient-accent: linear-gradient(135deg, $accent-cyan 0%, $primary-blue 100%);
|
||||
$gradient-warm: linear-gradient(135deg, $accent-yellow 0%, $accent-orange 100%);
|
||||
|
||||
// Shadows
|
||||
$shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
$shadow-md: 0 4px 12px rgba(75, 155, 255, 0.1);
|
||||
$shadow-lg: 0 8px 24px rgba(75, 155, 255, 0.15);
|
||||
$shadow-xl: 0 16px 40px rgba(75, 155, 255, 0.2);
|
||||
|
||||
// Typography
|
||||
$font-family-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif;
|
||||
$font-family-mono: 'Fira Code', 'Courier New', monospace;
|
||||
|
||||
// Font sizes
|
||||
$font-size-xs: 12px;
|
||||
$font-size-sm: 14px;
|
||||
$font-size-base: 16px;
|
||||
$font-size-md: 18px;
|
||||
$font-size-lg: 20px;
|
||||
$font-size-xl: 24px;
|
||||
$font-size-2xl: 32px;
|
||||
$font-size-3xl: 40px;
|
||||
$font-size-4xl: 48px;
|
||||
$font-size-5xl: 56px;
|
||||
|
||||
// Font weights
|
||||
$font-weight-regular: 400;
|
||||
$font-weight-medium: 500;
|
||||
$font-weight-semibold: 600;
|
||||
$font-weight-bold: 700;
|
||||
$font-weight-extrabold: 800;
|
||||
|
||||
// Line heights
|
||||
$line-height-tight: 1.2;
|
||||
$line-height-normal: 1.6;
|
||||
$line-height-loose: 1.8;
|
||||
|
||||
// Spacing
|
||||
$spacing-xs: 4px;
|
||||
$spacing-sm: 8px;
|
||||
$spacing-md: 16px;
|
||||
$spacing-lg: 24px;
|
||||
$spacing-xl: 32px;
|
||||
$spacing-2xl: 40px;
|
||||
$spacing-3xl: 48px;
|
||||
$spacing-4xl: 64px;
|
||||
$spacing-5xl: 80px;
|
||||
$spacing-6xl: 100px;
|
||||
|
||||
// Border radius
|
||||
$border-radius-sm: 6px;
|
||||
$border-radius-md: 8px;
|
||||
$border-radius-lg: 12px;
|
||||
$border-radius-xl: 16px;
|
||||
$border-radius-2xl: 20px;
|
||||
$border-radius-full: 50px;
|
||||
$border-radius-circle: 50%;
|
||||
|
||||
// Layout
|
||||
$container-max-width: 1280px;
|
||||
$header-height: 80px;
|
||||
|
||||
// Breakpoints
|
||||
$breakpoint-xs: 480px;
|
||||
$breakpoint-sm: 768px;
|
||||
$breakpoint-md: 1024px;
|
||||
$breakpoint-lg: 1280px;
|
||||
$breakpoint-xl: 1440px;
|
||||
|
||||
// Z-index
|
||||
$z-index-dropdown: 100;
|
||||
$z-index-sticky: 200;
|
||||
$z-index-fixed: 300;
|
||||
$z-index-header: 350;
|
||||
$z-index-modal-backdrop: 400;
|
||||
$z-index-modal: 500;
|
||||
$z-index-popover: 600;
|
||||
$z-index-tooltip: 700;
|
||||
$z-index-notification: 800;
|
||||
|
||||
// Animation
|
||||
$transition-base: all 0.3s ease;
|
||||
$transition-fast: all 0.15s ease;
|
||||
$transition-slow: all 0.5s ease;
|
||||
|
||||
// Component specific variables
|
||||
$button-padding-x: 32px;
|
||||
$button-padding-y: 16px;
|
||||
$card-padding: 32px;
|
||||
$input-padding-x: 16px;
|
||||
$input-padding-y: 12px;
|
||||
$input-height: 48px;
|
||||
Reference in New Issue
Block a user