generated from Websites/symfony-template
Feat: Integriert Bootstrap und SCSS-Variablen für Designanpassungen
This commit is contained in:
@@ -5,5 +5,7 @@
|
||||
* (and its CSS file) in your base layout (base.html.twig).
|
||||
*/
|
||||
|
||||
// require('bootstrap');
|
||||
|
||||
// any CSS you import will output into a single css file (app.scss in this case)
|
||||
import './styles/app.scss';
|
||||
|
||||
+378
-2
@@ -1,3 +1,379 @@
|
||||
body {
|
||||
background-color: lightgray;
|
||||
// =============================================================================
|
||||
// Design Tokens — SCSS Variables
|
||||
// =============================================================================
|
||||
|
||||
// Surface palette
|
||||
$color-surface: #0b1326;
|
||||
$color-surface-dim: #0b1326;
|
||||
$color-surface-bright: #31394d;
|
||||
$color-surface-container-lowest: #060e20;
|
||||
$color-surface-container-low: #131b2e;
|
||||
$color-surface-container: #171f33;
|
||||
$color-surface-container-high: #222a3d;
|
||||
$color-surface-container-highest: #2d3449;
|
||||
$color-on-surface: #dae2fd;
|
||||
$color-on-surface-variant: #c0c7d3;
|
||||
$color-inverse-surface: #dae2fd;
|
||||
$color-inverse-on-surface: #283044;
|
||||
$color-outline: #8a919d;
|
||||
$color-outline-variant: #404751;
|
||||
$color-surface-tint: #9dcaff;
|
||||
$color-surface-variant: #2d3449;
|
||||
|
||||
// Primary — Electric Azure
|
||||
$color-primary: #9dcaff;
|
||||
$color-on-primary: #003257;
|
||||
$color-primary-container: #50a7fa;
|
||||
$color-on-primary-container: #003b65;
|
||||
$color-inverse-primary: #0061a2;
|
||||
|
||||
// Secondary
|
||||
$color-secondary: #89ceff;
|
||||
$color-on-secondary: #00344d;
|
||||
$color-secondary-container: #00a2e6;
|
||||
$color-on-secondary-container: #00344e;
|
||||
|
||||
// Tertiary (indigo accent)
|
||||
$color-tertiary: #c0c1ff;
|
||||
$color-on-tertiary: #1000a9;
|
||||
$color-tertiary-container: #9598ff;
|
||||
$color-on-tertiary-container: #1c16b1;
|
||||
|
||||
// Error
|
||||
$color-error: #ffb4ab;
|
||||
$color-on-error: #690005;
|
||||
$color-error-container: #93000a;
|
||||
$color-on-error-container: #ffdad6;
|
||||
|
||||
// Background
|
||||
$color-background: #0b1326;
|
||||
$color-on-background: #dae2fd;
|
||||
|
||||
// Typography stacks
|
||||
$font-display: 'Space Grotesk', system-ui, sans-serif;
|
||||
$font-body: 'Geist', system-ui, -apple-system, sans-serif;
|
||||
$font-mono: 'JetBrains Mono', 'Courier New', monospace;
|
||||
|
||||
// Border radius scale
|
||||
$radius-sm: 0.25rem;
|
||||
$radius-default: 0.5rem;
|
||||
$radius-md: 0.75rem;
|
||||
$radius-lg: 1rem;
|
||||
$radius-xl: 1.5rem;
|
||||
$radius-full: 9999px;
|
||||
|
||||
// =============================================================================
|
||||
// Bootstrap Variable Overrides
|
||||
// Must be declared before @import for !default overrides to take effect.
|
||||
// Bootstrap 5.x uses @import internally — @use with() is not supported.
|
||||
// =============================================================================
|
||||
|
||||
// Semantic color map
|
||||
$primary: $color-primary-container; // #50a7fa — Electric Azure
|
||||
$secondary: $color-secondary; // #89ceff
|
||||
$success: #4ade80;
|
||||
$info: $color-primary; // #9dcaff
|
||||
$warning: #fbbf24;
|
||||
$danger: $color-error; // #ffb4ab
|
||||
$light: $color-surface-bright; // #31394d
|
||||
$dark: $color-surface-container-lowest; // #060e20
|
||||
|
||||
// Body
|
||||
$body-bg: $color-background; // #0b1326
|
||||
$body-color: $color-on-surface; // #dae2fd
|
||||
$body-secondary-color: $color-on-surface-variant; // #c0c7d3
|
||||
|
||||
// Links
|
||||
$link-color: $color-primary; // #9dcaff
|
||||
$link-hover-color: $color-primary-container; // #50a7fa
|
||||
|
||||
// Borders
|
||||
$border-color: $color-outline-variant; // #404751
|
||||
|
||||
// Border radius
|
||||
$border-radius: $radius-default; // 0.5rem
|
||||
$border-radius-sm: $radius-sm; // 0.25rem
|
||||
$border-radius-lg: $radius-md; // 0.75rem
|
||||
$border-radius-xl: $radius-lg; // 1rem
|
||||
$border-radius-xxl: $radius-xl; // 1.5rem
|
||||
$border-radius-pill: $radius-full; // 9999px
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: $font-body;
|
||||
$font-family-monospace: $font-mono;
|
||||
$font-size-base: 1rem; // 16px
|
||||
$line-height-base: 1.5;
|
||||
|
||||
// Headings
|
||||
$headings-font-family: $font-display;
|
||||
$headings-font-weight: 600;
|
||||
$headings-line-height: 1.3;
|
||||
$headings-color: $color-on-surface;
|
||||
|
||||
// Grid
|
||||
$grid-gutter-width: 1.5rem; // 24px
|
||||
$container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1140px,
|
||||
xxl: 1280px,
|
||||
);
|
||||
|
||||
// Cards
|
||||
$card-bg: $color-surface-container;
|
||||
$card-border-color: $color-outline-variant;
|
||||
$card-cap-bg: transparent;
|
||||
|
||||
// Form inputs
|
||||
$input-bg: $color-surface-container-low;
|
||||
$input-border-color: $color-outline-variant;
|
||||
$input-color: $color-on-surface;
|
||||
$input-focus-border-color: $color-primary-container;
|
||||
$input-placeholder-color: $color-on-surface-variant;
|
||||
|
||||
// Code
|
||||
$code-color: $color-tertiary;
|
||||
$pre-color: $color-on-surface;
|
||||
|
||||
// Navbar
|
||||
$navbar-dark-color: rgba($color-on-surface, 0.85);
|
||||
$navbar-dark-hover-color: $color-primary;
|
||||
$navbar-dark-active-color: $color-primary;
|
||||
|
||||
// =============================================================================
|
||||
// Bootstrap Import
|
||||
// =============================================================================
|
||||
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
|
||||
// =============================================================================
|
||||
// CSS Custom Properties — Full Design Token Set
|
||||
// =============================================================================
|
||||
|
||||
:root {
|
||||
// Surface
|
||||
--color-surface: #{$color-surface};
|
||||
--color-surface-dim: #{$color-surface-dim};
|
||||
--color-surface-bright: #{$color-surface-bright};
|
||||
--color-surface-container-lowest: #{$color-surface-container-lowest};
|
||||
--color-surface-container-low: #{$color-surface-container-low};
|
||||
--color-surface-container: #{$color-surface-container};
|
||||
--color-surface-container-high: #{$color-surface-container-high};
|
||||
--color-surface-container-highest: #{$color-surface-container-highest};
|
||||
--color-on-surface: #{$color-on-surface};
|
||||
--color-on-surface-variant: #{$color-on-surface-variant};
|
||||
--color-inverse-surface: #{$color-inverse-surface};
|
||||
--color-inverse-on-surface: #{$color-inverse-on-surface};
|
||||
--color-outline: #{$color-outline};
|
||||
--color-outline-variant: #{$color-outline-variant};
|
||||
--color-surface-tint: #{$color-surface-tint};
|
||||
--color-surface-variant: #{$color-surface-variant};
|
||||
|
||||
// Primary
|
||||
--color-primary: #{$color-primary};
|
||||
--color-on-primary: #{$color-on-primary};
|
||||
--color-primary-container: #{$color-primary-container};
|
||||
--color-on-primary-container: #{$color-on-primary-container};
|
||||
--color-inverse-primary: #{$color-inverse-primary};
|
||||
|
||||
// Secondary
|
||||
--color-secondary: #{$color-secondary};
|
||||
--color-on-secondary: #{$color-on-secondary};
|
||||
--color-secondary-container: #{$color-secondary-container};
|
||||
--color-on-secondary-container: #{$color-on-secondary-container};
|
||||
|
||||
// Tertiary
|
||||
--color-tertiary: #{$color-tertiary};
|
||||
--color-on-tertiary: #{$color-on-tertiary};
|
||||
--color-tertiary-container: #{$color-tertiary-container};
|
||||
--color-on-tertiary-container: #{$color-on-tertiary-container};
|
||||
|
||||
// Error
|
||||
--color-error: #{$color-error};
|
||||
--color-on-error: #{$color-on-error};
|
||||
--color-error-container: #{$color-error-container};
|
||||
--color-on-error-container: #{$color-on-error-container};
|
||||
|
||||
// Background
|
||||
--color-background: #{$color-background};
|
||||
--color-on-background: #{$color-on-background};
|
||||
|
||||
// Font stacks
|
||||
--font-display: #{$font-display};
|
||||
--font-body: #{$font-body};
|
||||
--font-mono: #{$font-mono};
|
||||
|
||||
// Spacing scale (4px baseline)
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 16px;
|
||||
--spacing-lg: 24px;
|
||||
--spacing-xl: 32px;
|
||||
|
||||
// Border radius
|
||||
--radius-sm: #{$radius-sm};
|
||||
--radius: #{$radius-default};
|
||||
--radius-md: #{$radius-md};
|
||||
--radius-lg: #{$radius-lg};
|
||||
--radius-xl: #{$radius-xl};
|
||||
--radius-full: #{$radius-full};
|
||||
|
||||
// Elevation: glow-only focus/hover effect
|
||||
--glow-primary: 0 0 0 3px rgba(80, 167, 250, 0.2);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Base Styles
|
||||
// =============================================================================
|
||||
|
||||
body {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-on-surface);
|
||||
font-family: var(--font-body);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
code, kbd, pre, samp {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Typography Utility Classes
|
||||
// =============================================================================
|
||||
|
||||
.text-display-lg {
|
||||
font-family: var(--font-display);
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 32px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.text-headline-md {
|
||||
font-family: var(--font-display);
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.text-body-lg {
|
||||
font-family: var(--font-body);
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.text-body-md {
|
||||
font-family: var(--font-body);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.text-code-sm {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.text-label-caps {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Component Overrides
|
||||
// =============================================================================
|
||||
|
||||
// Buttons — glow on interactive states
|
||||
.btn-primary {
|
||||
color: $color-on-primary-container;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
box-shadow: var(--glow-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
box-shadow: var(--glow-primary);
|
||||
}
|
||||
}
|
||||
|
||||
// Cards — tonal layering, no shadows
|
||||
.card {
|
||||
box-shadow: none;
|
||||
|
||||
.card-title {
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
}
|
||||
|
||||
// Inputs — glow on focus (already wired via $input-focus-border-color)
|
||||
.form-control,
|
||||
.form-select {
|
||||
&:focus {
|
||||
box-shadow: var(--glow-primary);
|
||||
}
|
||||
}
|
||||
|
||||
// Tech chips — JetBrains Mono, muted azure fill
|
||||
.badge-tech {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius);
|
||||
padding: 4px 8px;
|
||||
background-color: rgba(80, 167, 250, 0.1);
|
||||
color: var(--color-primary-container);
|
||||
border: 1px solid rgba(80, 167, 250, 0.2);
|
||||
}
|
||||
|
||||
// Code blocks — darkest surface, language label top-right
|
||||
pre {
|
||||
position: relative;
|
||||
background-color: var(--color-surface-container-lowest);
|
||||
border: 1px solid var(--color-outline-variant);
|
||||
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.code-lang {
|
||||
position: absolute;
|
||||
top: var(--spacing-sm);
|
||||
right: var(--spacing-md);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-on-surface-variant);
|
||||
}
|
||||
}
|
||||
|
||||
// Interactive glow helper
|
||||
.interactive-glow {
|
||||
transition: box-shadow 0.2s ease;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: var(--glow-primary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -20,5 +20,9 @@
|
||||
"dev": "encore dev",
|
||||
"watch": "encore dev --watch",
|
||||
"build": "encore production --progress"
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"bootstrap": "^5.3.8"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -972,6 +972,11 @@
|
||||
"@parcel/watcher-win32-ia32" "2.5.6"
|
||||
"@parcel/watcher-win32-x64" "2.5.6"
|
||||
|
||||
"@popperjs/core@^2.11.8":
|
||||
version "2.11.8"
|
||||
resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
|
||||
integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
|
||||
|
||||
"@sinclair/typebox@^0.34.0":
|
||||
version "0.34.49"
|
||||
resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.34.49.tgz#4f1369234f2ecf693866476c3b2e1b54d2a9d68e"
|
||||
@@ -1323,6 +1328,11 @@ boolbase@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
|
||||
integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==
|
||||
|
||||
bootstrap@^5.3.8:
|
||||
version "5.3.8"
|
||||
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.3.8.tgz#6401a10057a22752d21f4e19055508980656aeed"
|
||||
integrity sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==
|
||||
|
||||
brace-expansion@^1.1.7:
|
||||
version "1.1.15"
|
||||
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.15.tgz#a6d90d54067236e5f42570a3b7378d594d9b7738"
|
||||
|
||||
Reference in New Issue
Block a user