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>
19 lines
1014 B
Markdown
19 lines
1014 B
Markdown
## 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 CSS
|
|
- `assets/scss/` - New directory for SCSS files
|
|
- `hugo.toml` - May need configuration for SCSS processing
|
|
- No breaking changes to existing functionality
|
|
- Performance: Minimal impact, adds one additional CSS file (~few KB)
|