hero.html| Commit | Message |
|---|---|
ac75fabf3 | 2021-08-10 Jekyll site migration |
default.html), the hero template includes navbar.html on line 14. This is why default.html has the conditional: "if hero, skip navbar." The navbar renders INSIDE the hero's overlay, giving it a transparent background that blends with the hero image.{% if page.header.image %}
{% assign image = page.header.image %} // From page front matter
{% endif %}
// Fallback: uses page.hero.image if header.image not set
<header style="background-image: url({{ image }});"> // Inline CSS
<div style="background: {{ page.header.overlay }};"> // Color overlaydata-uk-scrollspy="cls: uk-animation-slide-bottom-medium; repeat: true"
The hero content (title, subtitle) slides up from the bottom when the user scrolls to it. repeat: true means the animation replays every time the element enters the viewport — not just once. This is a subtle UX polish: on long pages, returning to the hero re-triggers the animation.
uk-animation-slide-bottom-medium is a UIkit animation class — elements start 50px below their final position and slide up with a medium-duration transition. This is themed by animation.scss (#4028).
The hero search bar is identical to the navbar search (#3905) — same library (SimpleJekyllSearch), same data source (search.json), same searchResults() custom function. The only difference: the hero search uses id="search-hero" instead of id="search-navbar", and it's only rendered when page.hero.search is truthy.
On the homepage: search: false — no search bar in the hero. The value proposition is stronger without a search field competing for attention.
On the search page (#4093): search: true — the search bar IS the hero's purpose. The hero provides the visual context for the search experience.
The hero has TWO possible background image sources:
page.header.imagepage.hero.imagesearch.png)URLs are resolved via
{% if image contains 'http' %}— external images use absolute URLs, internal images get{{ site.uploads | absolute_url }}prepended. The overlay is applied as a semi-transparent color on top of the image for text readability.