58 lines
1.5 KiB
SCSS
58 lines
1.5 KiB
SCSS
 
|
// Bootstrap Variable Overrides
|
||
|
|
// These variables override Bootstrap's default design tokens
|
||
|
|
// They are applied via CSS custom properties and utility classes
|
||
|
|
|
||
|
|
// Typography - Base Font Size
|
||
|
|
// This is the root font size that Bootstrap uses for all rem calculations
|
||
|
|
// Default: 1rem (typically 16px in browsers)
|
||
|
|
$font-size-base: 1.25rem;
|
||
|
|
|
||
|
|
// You can also set it to a specific pixel value:
|
||
|
|
// $font-size-base: 18px; // Makes everything slightly larger
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-size: $font-size-base;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Typography - Heading Font Sizes
|
||
|
|
// Customize heading sizes to establish visual hierarchy
|
||
|
|
$h1-font-size: 2rem; // Default: 2.5rem
|
||
|
|
$h2-font-size: 1.75rem; // Default: 2rem
|
||
|
|
$h3-font-size: 1.5rem; // Default: 1.75rem
|
||
|
|
$h4-font-size: 1.25rem; // Default: 1.5rem
|
||
|
|
$h5-font-size: 1rem; // Default: 1.25rem
|
||
|
|
$h6-font-size: 1rem; // Default: 1rem
|
||
|
|
|
||
|
|
// Apply heading sizes using CSS
|
||
|
|
h1 { font-size: $h1-font-size; }
|
||
|
|
h2 { font-size: $h2-font-size; }
|
||
|
|
h3 { font-size: $h3-font-size; }
|
||
|
|
h4 { font-size: $h4-font-size; }
|
||
|
|
h5 { font-size: $h5-font-size; }
|
||
|
|
h6 { font-size: $h6-font-size; }
|
||
|
|
|
||
|
|
// Link Colors
|
||
|
|
// Customize link colors for brand consistency
|
||
|
|
$link-color: #0b0089; // Default Bootstrap: #0d6efd
|
||
|
|
$link-hover-color: #0052a3; // Darker shade for hover state
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: $link-color;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
color: $link-hover-color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Spacing
|
||
|
|
// Uncomment and customize spacing scale if needed
|
||
|
|
// $spacer: 1rem;
|
||
|
|
// $spacers: (
|
||
|
|
// 0: 0,
|
||
|
|
// 1: $spacer * 0.25,
|
||
|
|
// 2: $spacer * 0.5,
|
||
|
|
// 3: $spacer,
|
||
|
|
// 4: $spacer * 1.5,
|
||
|
|
// 5: $spacer * 3,
|
||
|
|
// );
|