Skip to content

Fix homepage hero/header gap with homepage-only selector#124

Merged
ttuff merged 1 commit intomainfrom
codex/identify-and-fix-homepage-hero-gap-issue
Feb 18, 2026
Merged

Fix homepage hero/header gap with homepage-only selector#124
ttuff merged 1 commit intomainfrom
codex/identify-and-fix-homepage-hero-gap-issue

Conversation

@ttuff
Copy link
Contributor

@ttuff ttuff commented Feb 18, 2026

Motivation

  • The homepage hero wasn’t flush with the header because upstream layout spacing (top padding/margin on content containers) produced a visible white strip above the hero.
  • Previous homepage overrides used selectors that do not match this site's built markup (e.g., body[data-md-page="index"] / .md-home), so the fixes never applied.

Description

  • Replace non-matching homepage selectors with a robust homepage-only selector: body:has(.oasis-hero) and update all homepage-specific rules to use it in docs/styles/extra.css.
  • Reset the layout spacing that caused the gap by zeroing the top spacing on the content containers for the homepage: .md-content__inner and .md-main__inner (set padding-top: 0 !important; margin-top: 0 !important;).
  • Keep the hero background flush to the header using the existing safe offset rule on the hero itself (.oasis-hero { margin-top: calc(var(--md-header-height) * -1); padding-top: var(--md-header-height); }) so hero content does not slide under the header.
  • File changed: docs/styles/extra.css (replaced body[data-md-page="index"] / .md-home blocks with body:has(.oasis-hero) rules and removed the old homepage selectors).
  • Exact homepage-only selector used: body:has(.oasis-hero), and the element causing the gap was .md-content__inner (site base CSS also applies .md-main__inner { margin-top: 1.5rem; }).

Testing

  • Ran mkdocs build -q --site-dir /tmp/sitebuild to produce a built site and confirmed the build completed successfully.
  • Verified the built page body tag contains: <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="custom" data-md-color-accent="custom"> and confirmed that the homepage hero markup is <div class="esiil-banner oasis-hero"> so body:has(.oasis-hero) will match the homepage.
  • Attempted automated browser inspection and screenshots (Playwright); chromium runs were unstable in this environment, while WebKit runs produced page screenshots, but environment limitations prevented a single guaranteed DOM snapshot workflow; CSS changes were still validated via the built output and local stylesheet diff.
  • Result: mkdocs build succeeded and the CSS tweaks were applied in docs/styles/extra.css (homepage-only rules now target body:has(.oasis-hero) and the top gap rules were reset).

Codex Task

@chatgpt-codex-connector
Copy link

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

@ttuff ttuff merged commit 62d91d0 into main Feb 18, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant