Skip to content

Add Nextflow Frontier announcement banner - #502

Merged
mavi-sqr merged 6 commits into
masterfrom
new-banner
Oct 13, 2026
Merged

mavi-sqr merged 6 commits into
masterfrom
new-banner

Conversation

@mavi-sqr

@mavi-sqr mavi-sqr commented Oct 12, 2026 •

Copy link
Copy Markdown
Collaborator

Summary

  • Adds a site-wide announcement banner above the navbar: "Our new product, Nextflow Frontier, is live, built on Nextflow by the team who created it." with a Learn more link button (shared Button, variant="link") pointing to https://nextflow.com/frontier. Background uses the bg-brand token, same as the cookie banner.
  • The banner sits inside the fixed header, so it hides/reveals with the navbar on scroll. It measures its own height (37px) and offsets the page by that amount.
  • On mobile the message scrolls on a single line (marquee) with Learn more pinned on the right. Under prefers-reduced-motion it falls back to the static wrapped text; the duplicate copy used for the loop is aria-hidden.
  • Anchors the mobile hamburger toggle to the navbar row so it no longer overlaps the banner.

Before merging

Notes

  • WCAG AA contrast: banner and link text 18.6:1. Visible focus ring; transition disabled under prefers-reduced-motion.
  • Not dismissible.
  • The mobile marquee only pauses on hover / press-and-hold; there is no explicit pause control (WCAG 2.2.2).
  • On pages with a sticky side nav (e.g. Examples), the banner covers the top few px of the side nav while the header is visible.

Test plan

  • Checked in the dev server at 1440px and 375px
  • Check the Examples / docs pages with the sticky side nav

🤖 Generated with Claude Code

Site-wide banner above the navbar announcing Nextflow Frontier, with a
"Learn more" link button. It lives inside the fixed header and offsets
the page by its measured height, so it wraps cleanly on mobile.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
@netlify

netlify Bot commented Oct 12, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for nextflow-staging ready!

Name Link
🔨 Latest commit 80f9f7f
🔍 Latest deploy log https://app.netlify.com/projects/nextflow-staging/deploys/6acdfb5887c2517e615a1d28
😎 Deploy Preview https://deploy-preview-502--nextflow-staging.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 63 (🔴 down 2 from production)
Accessibility: 81 (🟢 up 7 from production)
Best Practices: 83 (no change from production)
SEO: 79 (🔴 down 8 from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@mavi-sqr
mavi-sqr requested a review from ewels October 12, 2026 12:26
@mavi-sqr

Copy link
Copy Markdown
Collaborator Author

FYI: @ewels

mavi-sqr and others added 4 commits October 12, 2026 14:28
On small screens the message runs as a one-line marquee with the CTA
pinned on the right. Falls back to the static wrapped text under
prefers-reduced-motion; the duplicate copy is hidden from assistive tech.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
@mavi-sqr
mavi-sqr merged commit 05115d8 into master Oct 13, 2026
6 checks passed
@mavi-sqr
mavi-sqr deleted the new-banner branch October 13, 2026 10:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants