Skip to content

Hero - navbar UI #266

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RaphaGil wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Hero - navbar UI #266

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a14351c
Redesign hero section with updated UI
RaphaGil May 26, 2026
987e409
Redesign hero section with updated UI
RaphaGil May 26, 2026
2e404bd
added brand-pallete.css with the RGB Color Scheme
RaphaGil May 26, 2026
c4ea78b
Redesign hero and navigation with responsive mobile layout.
RaphaGil May 26, 2026
bda9626
organized the navbar with the new links requested
RaphaGil May 26, 2026
f6ed8bb
WIP: navbar and content updates
RaphaGil May 26, 2026
9e7f934
update hero section layout for mobile responsiveness
RaphaGil May 26, 2026
6b7c11a
Improve hero stats layout on medium and large breakpoints.
RaphaGil May 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 239 additions & 0 deletions assets/css/hero.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
/* Modern hero — matches OpenMS_Modern_Dynamic_Design mockup */

.hero-modern {
--hero-orange: #ff9500;
--hero-pink: #ff1b9e;
--hero-navy: #001a4d;
--hero-accent-yellow: #ffd700;
--hero-white: #ffffff;

position: relative;
overflow: hidden;

@coderabbitai coderabbitai Bot May 26, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Mobile stats can be clipped off-screen by parent overflow.

overflow: hidden on .hero-modern conflicts with mobile stats positioned at bottom: 0 plus translateY(100%), so the stats block can be cut off.

Suggested fix 
 `@media` (max-width: 768px) {
   .hero-modern {
     padding: clamp(0.75rem, 1.5vh, 1.5rem) 1.25rem;
     min-height: min(28rem, calc(100dvh - var(--openms-hero-chrome)));
+    overflow: visible;
   }

Also applies to: 520-526

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@assets/css/hero.css` at line 16, The .hero-modern rule uses overflow: hidden
which clips the mobile stats block that is positioned with bottom: 0 and
transform: translateY(100%); change the overflow so the stats aren't cut off —
e.g., remove overflow: hidden or set overflow-y: visible (or use overflow-x:
hidden; overflow-y: visible) on .hero-modern, and apply the same fix to the
related rules around the mobile-stats styles referenced in the diff (lines
~520-526) so the absolutely-positioned/styled stats can render off the bottom
without being clipped.

color: var(--hero-white);
background: linear-gradient(135deg, var(--hero-navy) 0%, #1a2a5f 50%, #0a1a3f 100%);
padding: 5rem 2.5rem;
min-height: 32rem;
}

.hero-modern::before,
.hero-modern::after {
content: "";
position: absolute;
border-radius: 50%;
z-index: 1;
pointer-events: none;
}

.hero-modern::before {
top: -50%;
right: -10%;
width: 37.5rem;
height: 37.5rem;
background: radial-gradient(circle, rgba(255, 149, 0, 0.15) 0%, transparent 70%);
}

.hero-modern::after {
bottom: -30%;
left: -5%;
width: 31.25rem;
height: 31.25rem;
background: radial-gradient(circle, rgba(255, 27, 158, 0.1) 0%, transparent 70%);
}

.hero-modern__container {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3.75rem;
align-items: center;
max-width: 75rem;
margin: 0 auto;
}

.hero-modern__title {
font-size: clamp(2rem, 4.5vw, 3.375rem);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 1.5rem;
color: var(--hero-white);
}

.hero-modern__gradient-text {
background: linear-gradient(90deg, var(--hero-accent-yellow), var(--hero-orange), var(--hero-pink));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

.hero-modern__description {
font-size: 1.125rem;
line-height: 1.7;
opacity: 0.95;
margin-bottom: 2rem;
max-width: 31.25rem;
}

.hero-modern__buttons {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2.5rem;
}

.hero-modern__btn {
display: inline-block;
padding: 0.875rem 2rem;
font-size: 0.9375rem;
font-weight: 600;
border-radius: 0.5rem;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.hero-modern__btn--primary {
color: var(--hero-white);
background: linear-gradient(135deg, var(--hero-orange), var(--hero-pink));
box-shadow: 0 0.5rem 1.5rem rgba(255, 149, 0, 0.3);
}

.hero-modern__btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 0.75rem 2rem rgba(255, 149, 0, 0.4);
color: var(--hero-white);
}

.hero-modern__btn--secondary {
color: var(--hero-white);
background: rgba(255, 255, 255, 0.15);
border: 2px solid var(--hero-white);
backdrop-filter: blur(10px);
}

.hero-modern__btn--secondary:hover {
background: rgba(255, 255, 255, 0.25);
border-color: var(--hero-accent-yellow);
color: var(--hero-white);
}

.hero-modern__stats {
display: flex;
flex-wrap: wrap;
gap: 2.5rem;
padding-top: 2.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-modern__stat {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.hero-modern__stat-number {
font-size: 1.75rem;
font-weight: 800;
background: linear-gradient(90deg, var(--hero-accent-yellow), var(--hero-orange));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

.hero-modern__stat-label {
font-size: 0.8125rem;
opacity: 0.85;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.hero-modern__visual {
display: flex;
align-items: center;
justify-content: center;
min-height: 18rem;
}

.hero-modern__waveform {
display: flex;
align-items: center;
justify-content: center;
gap: 0.1875rem;
width: 100%;
max-width: 25rem;
height: 100%;
min-height: 16rem;
}

.hero-modern__wave-bar {
width: 0.375rem;
height: 20%;
border-radius: 0.1875rem;
background: linear-gradient(180deg, var(--hero-orange), var(--hero-pink));
animation: hero-modern-waveform 2s ease-in-out infinite;
}

.hero-modern__wave-bar:nth-child(1) { animation-delay: 0s; }
.hero-modern__wave-bar:nth-child(2) { animation-delay: 0.1s; }
.hero-modern__wave-bar:nth-child(3) { animation-delay: 0.2s; }
.hero-modern__wave-bar:nth-child(4) { animation-delay: 0.3s; }
.hero-modern__wave-bar:nth-child(5) { animation-delay: 0.4s; }
.hero-modern__wave-bar:nth-child(6) { animation-delay: 0.5s; }
.hero-modern__wave-bar:nth-child(7) { animation-delay: 0.6s; }
.hero-modern__wave-bar:nth-child(8) { animation-delay: 0.7s; }
.hero-modern__wave-bar:nth-child(9) { animation-delay: 0.8s; }
.hero-modern__wave-bar:nth-child(10) { animation-delay: 0.9s; }
.hero-modern__wave-bar:nth-child(11) { animation-delay: 1s; }

@keyframes hero-modern-waveform {
0%,
100% {
height: 20%;
}
50% {
height: 100%;
}
}

@media (max-width: 1024px) {
.hero-modern {
padding: 5rem 1.5rem;
min-height: auto;
}

.hero-modern__container {
grid-template-columns: 1fr;
gap: 2.5rem;
}

.hero-modern__visual {
min-height: 12rem;
}
}

@media (max-width: 768px) {
.hero-modern {
padding: 3.75rem 1rem;
}

.hero-modern__buttons {
flex-direction: column;
align-items: stretch;
}

.hero-modern__btn {
text-align: center;
}

.hero-modern__stats {
flex-direction: column;
gap: 1.5rem;
}
}

@media (prefers-reduced-motion: reduce) {
.hero-modern__wave-bar {
animation: none;
height: 55%;
}
}
47 changes: 21 additions & 26 deletions assets/css/styles_override.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,45 +8,40 @@
background-color: #1a3a7a;
}

.hero-title-content {
max-width: 1200px;
margin: 1vh auto;
}

.hero-logo {
max-height: 200px;
}

.navbar.is-fresh .navbar-item.has-dropdown .navbar-link {
color: var(--colorPrimaryDark);
}

.navbar.is-fresh .navbar-brand .navbar-brand-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding-left: 0;
}

.navbar.is-fresh .navbar-brand img {
max-height: 50px !important;
height: 50px;
width: auto;
}

@media only screen and (max-width: 850px) {
.social-media-icons {
width: 100%;
}
}

@media only screen and (max-width: 600px) {
.hero-logo {
max-height: 150px;
}
.navbar.is-fresh .navbar-logo-text {
font-size: 1.5rem;
font-weight: 700;
color: #001a4d;
line-height: 1;
}

@media only screen and (max-width: 400px) {
.hero-logo {
max-height: 120px;
}
/* Solid bar over the dark homepage hero (matches design mockup) */
body:has(.hero-modern) #nav.navbar.is-fresh {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 2px solid #e8eaed;
}

@media only screen and (max-width: 320px) {
.hero-logo {
max-height: 100px;
@media only screen and (max-width: 850px) {
.social-media-icons {
width: 100%;
}
}

Expand Down
28 changes: 19 additions & 9 deletions config.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,17 +36,27 @@ languages:
navbarlogo:
image: OpenMS_transparent_blackFont.png
link: /
text: OpenMS
altText: OpenMS
hero:
# Main hero title
# title: OpenMS
# Hero subtitle (optional)
subtitle: The open-source framework for Mass Spectrometry
# Button text
buttontext: Install
# Where the main hero button links to
titleBefore: "The "
titleHighlight: open-source framework
titleAfter: " for Mass Spectrometry"
description: >-
Build sophisticated LC/MS data analysis tools with C++ or Python.
Process large datasets at scale. Create high-performance algorithms.
Join 1000+ researchers worldwide.
buttontext: Get Started Now
buttonlink: https://openms.readthedocs.io/en/latest/about/installation.html
# Hero image (from static/images/___)
image: OpenMS_transparent_blackFont.png
secondaryButtonText: Watch Demo
secondaryButtonLink: https://openms.readthedocs.io/en/latest/getting-started/walkthrough.html
stats:
- number: "10+"
label: Years Active
- number: "1000+"
label: Researchers
- number: "3.5.0"
label: Latest Version

heroGroup:
- title: "OpenMS allows users to:"
Expand Down
48 changes: 48 additions & 0 deletions layouts/partials/hero.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
{{- $hero := .Site.Params.hero }}
{{- $titleBefore := index $hero "titleBefore" | default "The " }}
{{- $titleHighlight := index $hero "titleHighlight" | default "open-source framework" }}
{{- $titleAfter := index $hero "titleAfter" | default " for Mass Spectrometry" }}
{{- $description := index $hero "description" }}
{{- $buttonText := index $hero "buttontext" }}
{{- $buttonLink := index $hero "buttonlink" }}
{{- $secondaryText := index $hero "secondaryButtonText" }}
{{- $secondaryLink := index $hero "secondaryButtonLink" }}
{{- $stats := index $hero "stats" }}

<section class="hero-modern" aria-label="OpenMS introduction">
<div class="hero-modern__container">
<div class="hero-modern__content">
<h1 class="hero-modern__title">
{{ $titleBefore }}<span class="hero-modern__gradient-text">{{ $titleHighlight }}</span>{{ $titleAfter }}
</h1>
{{- with $description }}
<p class="hero-modern__description">{{ . }}</p>
{{- end }}
<div class="hero-modern__buttons">
{{- if $buttonText }}
<a class="hero-modern__btn hero-modern__btn--primary" href="{{ $buttonLink }}">{{ $buttonText }}</a>
{{- end }}

@coderabbitai coderabbitai Bot May 26, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Guard primary CTA rendering on both text and URL.

Right now the primary button is rendered when buttontext exists, even if buttonlink is missing, which can produce an empty/invalid navigation target.

Suggested fix 
-        {{- if $buttonText }}
+        {{- if and $buttonText $buttonLink }}
         <a class="hero-modern__btn hero-modern__btn--primary" href="{{ $buttonLink }}">{{ $buttonText }}</a>
         {{- end }}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{{- if $buttonText }}
<a class="hero-modern__btn hero-modern__btn--primary" href="{{ $buttonLink }}">{{ $buttonText }}</a>
{{- end }}
{{- if and $buttonText $buttonLink }}
<a class="hero-modern__btn hero-modern__btn--primary" href="{{ $buttonLink }}">{{ $buttonText }}</a>
{{- end }}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@layouts/partials/hero.html` around lines 22 - 24, The primary CTA anchor is
currently rendered when only $buttonText exists, which can produce an invalid
link; update the conditional around the anchor (the block that renders the <a
class="hero-modern__btn hero-modern__btn--primary"...> element) to require both
$buttonText and $buttonLink (e.g., change the if from checking only $buttonText
to checking both $buttonText and $buttonLink) so the button only renders when it
has both text and a valid href.

{{- if and $secondaryText $secondaryLink }}
<a class="hero-modern__btn hero-modern__btn--secondary" href="{{ $secondaryLink }}">{{ $secondaryText }}</a>
{{- end }}
</div>
{{- with $stats }}
<div class="hero-modern__stats">
{{- range . }}
<div class="hero-modern__stat">
<div class="hero-modern__stat-number">{{ .number }}</div>
<div class="hero-modern__stat-label">{{ .label }}</div>
</div>
{{- end }}
</div>
{{- end }}
</div>
<div class="hero-modern__visual" aria-hidden="true">
<div class="hero-modern__waveform">
{{- range seq 11 }}
<div class="hero-modern__wave-bar"></div>
{{- end }}
</div>
</div>
</div>
</section>
Loading