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>
2.9 KiB
2.9 KiB
ADDED Requirements
Requirement: SCSS Processing Pipeline
The system SHALL process SCSS files using Hugo Pipes to generate custom CSS that supplements Bootstrap's CDN-provided styles.
Scenario: SCSS compilation on build
- WHEN Hugo builds the site
- THEN SCSS files in
assets/scss/are compiled to CSS - AND the compiled CSS is fingerprinted for cache busting
- AND the resulting CSS file is included in the HTML output
Scenario: Development mode with live reload
- WHEN running Hugo in development mode (hugo server)
- THEN SCSS changes trigger automatic recompilation
- AND the browser live-reloads with updated styles
Requirement: Bootstrap Variable Customization
The system SHALL allow customization of Bootstrap design tokens through SCSS variables without modifying the CDN-provided Bootstrap CSS.
Scenario: Override heading font sizes
- WHEN custom heading sizes are defined in SCSS variables
- THEN the compiled CSS applies these sizes to heading elements
- AND the Bootstrap CDN CSS is loaded first (base styles)
- AND custom CSS is loaded after (overrides)
Scenario: Override link colors
- WHEN custom link colors are defined in SCSS variables
- THEN links across the site use the custom colors
- AND link hover states use appropriate custom colors
Scenario: Override spacing scale
- WHEN custom spacing values are defined
- THEN elements using those spacing classes reflect the custom values
Requirement: Custom Style Organization
The system SHALL organize custom styles in a maintainable SCSS file structure following Hugo and SASS best practices.
Scenario: Main SCSS entry point
- WHEN Hugo processes SCSS
- THEN a single main SCSS file serves as the entry point
- AND this file imports Bootstrap variable overrides
- AND this file imports custom component styles
- AND this file imports custom utility styles
Scenario: Modular SCSS files
- WHEN developers add new custom styles
- THEN styles can be organized into separate partial files
- AND partial files are imported into the main SCSS file
- AND file naming follows SCSS conventions (e.g.,
_variables.scss,_custom.scss)
Requirement: CSS Output Integration
The system SHALL integrate compiled custom CSS into the base layout template alongside Bootstrap CDN CSS.
Scenario: CSS load order
- WHEN a page is rendered
- THEN Bootstrap CDN CSS loads first
- AND custom compiled CSS loads second
- AND CSS files include integrity hashes where applicable
- AND the custom CSS file path includes a fingerprint for cache busting
Scenario: Production build optimization
- WHEN building for production
- THEN SCSS is compiled with minification
- AND the output CSS is optimized for file size
- AND source maps are not included in production builds