gurixandClaude
bf52fda68f
Implement SCSS-based custom styling system to enable Bootstrap customization while maintaining CDN delivery for core framework. Changes: - Add Hugo Pipes SCSS processing pipeline using css.Sass - Create modular SCSS file structure (main.scss, _variables.scss, _custom.scss) - Implement custom typography (base font size 1.25rem, adjusted heading sizes) - Add custom link colors (#0b0089 primary, #0052a3 hover) - Configure CSS minification and SHA-384 fingerprinting for cache busting - Add comprehensive SCSS styling documentation Technical details: - Updated baseof.html to compile SCSS with Hugo Pipes - CSS loads after Bootstrap CDN for proper cascade - Minified output (~154 bytes) - Supports live reload in development mode 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
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,
|
|
// );
|