mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-07 08:15:58 +00:00
George Cushen
bec38c8759
Resolves #3123 ## What Changed **Avatar Quality Improvements:** - Generate avatars at 2x resolution for crisp display on high-DPI screens - Updated Hugo imaging config with quality: 90, lanczos resampling, and picture hint - Improved WebP compression quality across all avatar locations **New Customization Parameters:** - Added design.avatar.size with 5 options: small (150px), medium (200px), large (320px), xl (400px), xxl (500px) - Added design.avatar.shape with 3 options: circle (default), square, rounded - Sizing aligned with 2025 social media standards (LinkedIn/X: 400px, Instagram: 320px, TikTok: 200px) **Updated Templates:** - Enhanced resume-biography.html and resume-biography-3.html with flexible parameter system - Updated all starter templates (academic-cv, resume, blog, link-in-bio) with example configurations - Improved avatar CSS for dynamic sizing control
Hugo Blox Tailwind CSS v4 Structure
Overview
The CSS architecture is modularized for maintainability and organization. The entry point is main.css which orchestrates all imports.
Directory Structure
css/
├── main.css # Main entry point
├── color-utilities.css # HB Theme Engine
├── config/ # Tailwind configuration
│ ├── tailwind.css # Tailwind v4 directives (@source, @custom-variant)
│ ├── theme.css # HB Theme variables (@theme block)
│ └── safelist.css # Dynamic classes safelist
├── framework/ # Hugo Blox framework styles
│ ├── base.css # Base styles and typography
│ └── components.css # Framework components
├── components/ # Hugo Blox module components
│ └── all.css # Imports all component files
├── blox/ # Block-specific styles
│ └── all.css # Imports all block styles
└── views/ # Listing view styles
└── all.css # Imports all listing view styles
Key Files
main.css
The orchestrator that imports everything in the correct order:
- Tailwind base
- Configuration
- Base styles
- Hugo Blox theme engine
- Components
- Safelist
config/tailwind.css
Contains Tailwind v4-specific directives:
@source- Where to scan for classes@custom-variant- Custom variants (dark, hover)@plugin- Plugin imports
config/theme.css
Defines the theme using @theme block:
- Color palettes (primary, secondary, neutral)
- Font families and sizes
- Custom properties
color-utilities.css
Hugo Blox theme engine with color utility classes:
- All color shades (50-950)
- All variants (hover, dark, focus)
- Gradient utilities
Tailwind v4 Notes
@source,@theme,@pluginare new v4 directives- Linters may show warnings for these - they can be ignored
- Hugo's
css.TailwindCSSfunction processes this automatically - No PostCSS configuration needed anymore
Maintenance
When adding new styles:
- Framework classes →
framework/components.css - Theme variables →
config/theme.css - Component styles →
components/[file].css - Dynamic classes → Add to
config/safelist.css