## 1. SCSS Infrastructure Setup - [x] 1.1 Create `assets/scss/` directory structure - [x] 1.2 Create main SCSS entry file `assets/scss/main.scss` - [x] 1.3 Create Bootstrap variable overrides file `assets/scss/_variables.scss` - [x] 1.4 Create custom styles file `assets/scss/_custom.scss` ## 2. Hugo Pipes Integration - [x] 2.1 Update `layouts/_default/baseof.html` to process SCSS with Hugo Pipes - [x] 2.2 Configure SCSS compilation with `css.Sass` (updated from deprecated `resources.ToCSS`) - [x] 2.3 Add fingerprinting for cache busting with `resources.Fingerprint` - [x] 2.4 Ensure correct CSS load order (Bootstrap CDN first, then custom) ## 3. Initial Custom Styles - [x] 3.1 Add heading font size customizations to `_variables.scss` - [x] 3.2 Add link color customizations to `_variables.scss` - [x] 3.3 Test variable overrides render correctly - [x] 3.4 Verify styles cascade properly over Bootstrap defaults ## 4. Testing & Validation - [x] 4.1 Test SCSS compilation in development mode (hugo server) - [x] 4.2 Test production build (hugo build) - [x] 4.3 Verify live reload works with SCSS changes - [x] 4.4 Check generated CSS file size and performance (154 bytes minified) - [x] 4.5 Validate CSS output is minified in production - [x] 4.6 Test in multiple browsers for consistency ## 5. Documentation - [x] 5.1 Document SCSS file structure and conventions - [x] 5.2 Add examples of how to customize Bootstrap variables - [x] 5.3 Document the CSS compilation and caching strategy