mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-11 03:12:56 +00:00
George Cushen
f584ad1610
The mask-image approach for section_break was wrong: making pixels
transparent reveals the body background, not the next sibling section
(which sits below in document flow, not behind in z-order). When the
body bg didn't match the adjacent section, this produced a visible
white/light strip between sections — exactly what the fade was
supposed to prevent.
Replace mask-image with absolutely-positioned gradient overlay divs at
the section's top/bottom edges. The overlay fades from transparent to
a user-specified colour matching the adjacent sibling's background.
Explicit colour declaration is required because Hugo can't reliably
auto-detect the next sibling's bg at parse time.
API change (no backward-compat — feature was added this session, no
sites depend on the legacy string form):
# before
section_break: fade-bottom
# after
section_break:
fade_bottom: "#101828" # CSS colour matching next section's bg
fade_top: "#0a0e27" # optional, independent
size: "6rem" # optional, default 6rem
Update the landing page hero (fade-bottom into dark logos band) and
cta-card (fade-top from white FAQ section above) to the new form.
HugoBlox Kit Modules
Install HugoBlox features as Hugo Modules.
Quick start (most sites)
Add HugoBlox Kit core to config/_default/module.yaml (or hugo.yaml):
module:
imports:
- path: github.com/HugoBlox/kit/modules/blox
That’s it — analytics is already included when you use modules/blox.
Module map
- Core framework:
github.com/HugoBlox/kit/modules/blox- Layouts, blocks (Blox), Tailwind pipeline, shortcodes, defaults
- Includes:
github.com/HugoBlox/kit/modules/analytics
- Slides (content type):
github.com/HugoBlox/kit/modules/slides- Markdown slide decks (powered by Reveal.js)
- Integrations:
github.com/HugoBlox/kit/modules/integrations/*- Netlify:
github.com/HugoBlox/kit/modules/integrations/netlify
- Netlify:
Optional installs
Slides
module:
imports:
- path: github.com/HugoBlox/kit/modules/blox
- path: github.com/HugoBlox/kit/modules/slides
Netlify integration (security headers + redirects outputs)
module:
imports:
- path: github.com/HugoBlox/kit/modules/blox
- path: github.com/HugoBlox/kit/modules/integrations/netlify
Then enable Hugo outputs for Netlify:
outputs:
home: [HTML, RSS, headers, redirects]
Updating
hugo mod get -u github.com/HugoBlox/kit/modules/blox@main
hugo mod tidy