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>
33 lines
1.4 KiB
HTML
33 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{ .Site.LanguageCode }}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="{{ if .Description }}{{ .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
|
|
<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
|
|
|
|
<!-- 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>
|
|
{{ partial "header.html" . }}
|
|
|
|
<main>
|
|
{{ block "main" . }}{{ end }}
|
|
</main>
|
|
|
|
{{ partial "footer.html" . }}
|
|
|
|
<!-- Bootstrap 5.x JS Bundle (includes Popper) -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
|
</body>
|
|
</html>
|