feat: add custom Bootstrap styling with SCSS support

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>
2025-10-27 22:04:52 +01:00
parent 7a9b4ccd54
commit bf52fda68f
8 changed files with 361 additions and 0 deletions
@@ -9,6 +9,12 @@
  <!-- Bootstrap 5.x CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

+  <!-- Custom SCSS compiled via Hugo Pipes -->
+  {{ $scss := resources.Get "scss/main.scss" }}
+  {{ $options := dict "targetPath" "css/main.css" "outputStyle" "compressed" }}
+  {{ $style := $scss | css.Sass $options | resources.Fingerprint "sha384" }}
+  <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" crossorigin="anonymous">
+
  {{ block "head" . }}{{ end }}
 </head>
 <body>