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>
1014 B
1014 B
Why
The site currently uses Bootstrap 5.3.2 from CDN with default styling. To establish a unique visual identity and brand consistency, we need the ability to customize Bootstrap variables (font sizes, colors, spacing) and add custom styles without modifying the core framework.
What Changes
- Add Hugo SCSS/SASS processing pipeline using Hugo Pipes
- Create custom SCSS file structure for Bootstrap variable overrides and custom styles
- Maintain Bootstrap CSS from CDN for core framework
- Compile custom styles to supplement Bootstrap defaults
- Enable customization of heading font sizes, link colors, and other design tokens
Impact
- Affected specs:
styling(new capability) - Affected code:
layouts/_default/baseof.html- Update to include compiled custom CSSassets/scss/- New directory for SCSS fileshugo.toml- May need configuration for SCSS processing
- No breaking changes to existing functionality
- Performance: Minimal impact, adds one additional CSS file (~few KB)