feat: add KubeCon + CloudNativeCon NA 2026 announcement banner on homepage

[thisisobate]

What

Adds an announcement ribbon at the top of the homepage promoting KubeCon + CloudNativeCon North America (Nov 9-12), linking to the registration page with UTM tracking.

How

• content/_index.md – new announcement front-matter block (enable, text, cta, link) so the message/link can be updated or disabled without touching templates.
• themes/microcks/layouts/partials/header.html – renders the banner inside the fixed <header> only when .IsHome and announcement.enable are true; adds a has-announcement class on the header. Falls back to an arrow icon if cta is omitted.
• themes/microcks/assets/scss/_announcement.scss (new) – #46aaf3 background, white text, centered flex layout, hover state, and a margin offset on .herobanner so the hero isn't hidden under the taller fixed header. Includes a mobile breakpoint.
• themes/microcks/assets/scss/style.scss – imports the new partial.

Notes

• Banner only appears on the homepage; other pages are unaffected (verified in build output).
• To disable after the event, set announcement.enable: false in content/_index.md.
• Link opens in a new tab with rel="noopener".

Related issue(s)

Fixes #601

Screenshot

[github-actions]

👋 @thisisobate

Welcome to the Microcks community! 💖

Thanks and congrats 🎉 for opening your first pull request here! Be sure to follow the pull request template or please update it accordingly.

Hope you have a great time there!

[yada]

Thanks for this, the banner looks good on desktop and the front-matter toggle is a nice touch. I ran the PR locally and found a layout bug that makes the homepage hero partly hidden on mobile. It needs fixing before merge.

See details in comment

[yada]

The hero offset never applies. In _announcement.scss, the rule .has-announcement + main .herobanner relies on main being the immediate sibling of <header>. In the rendered page a <script> tag (the dark-mode snippet) sits between </header> and <main>, so the selector never matches. The hero keeps its original 12vh / 10vh margin while the fixed header is now taller, so the header covers the top of the hero.

I measured how much of the hero h1 sits under the header (master has 0 overlap at every width):

Viewport	Overlap with PR
iPhone SE 375px	50px (the first line, "The open source,", is hidden)
iPhone 14 390px	24px
Galaxy 360px	35px
320px	57px
Laptop 1280×720	13px (heading flush against the header)
iPad 768px and 1920px	0px

The 1770px screenshot in the PR description doesn't show this because wide viewports have enough natural spacing.

Fix

Use the general sibling combinator in both places in _announcement.scss:

.has-announcement ~ main .herobanner { ... }

and the same change inside the @media (max-width: 768px) block. I tested this locally. The overlap drops to 0 at every viewport above and the full heading is visible on mobile.

Non-blocking suggestions

• Mobile banner height: On phones the banner wraps to three lines and takes about 73px. Shorter text or a smaller font below 480px would save screen space.
• Hard-coded offset: The 44px in the hero offset is hard-coded, but the banner height varies when the text wraps. Consider driving the spacing from the header's actual height (for example a CSS variable).

I haven't tested dark mode, but please test it.

[yada]

Thanks for the quick fix, b685455 works. I re-tested on the same viewports (320 to 1920px, plus live resize and dark mode) and the hero heading is fully visible everywhere, with no horizontal scroll.

On the JS added in header.html: the ~ selector change is what fixes the overlap, and the script only fine-tunes the spacing. I'd keep it. The banner text is editable from announcement.text in front matter, and the script adjusts the hero spacing automatically if the text gets longer or shorter. A CSS-only version would need its per-breakpoint heights re-measured every time the text changes.

With JS disabled the page still has no overlap at any width, because the CSS fallback and the hero padding absorb the difference.

LGTM.

[github-actions]

🎉 @thisisobate

You are now a Microcks community contributor! 💖

Thanks and congrats 🚀 on merging your first pull request! We are delighted and very proud of you! 👏

📢 If you're using Microcks in your organization, please add your company name to this list. 🙏 It really helps the project to gain momentum and credibility. It's a small contribution back to the project with a big impact.

If you need to know why and how to add yourself to the list, please read the blog post "Join the Microcks Adopters list and Empower the vibrant open source Community 🙌"

Kudos and please keep going, we need you 🙌