Image-driven homepage: hero, logo overlay, and performance strip - #2
Merged
Merged
Conversation
Give the homepage a more dynamic, performance-led look built from the lab's own stage photography: - Full-bleed hero banner using a NIME 2026 performance photo, with a warm/dark scrim, overlaid mission headline, and call-to-action buttons to the performances and join pages. - Rounded, shadowed research/teaching section images with a subtle hover lift (new .feature-img class) plus descriptive alt text. - A full-bleed "On stage" strip: a horizontally scrolling row of curated performance photos linking through to the performances page. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PUgUwdX2TPAh7yQzV96xTR
Add the white SMCClab wordmark on top of the hero, and rotate the hero background across a curated pool of dark, dramatic performance photos — a different one is chosen on each visit (with a stable server-rendered default for no-JS visitors). - Overlay assets/lab-logo/smcclab-white.png in the hero, with a drop shadow and a slightly stronger scrim so it stays legible on any photo. - Rotate the background client-side from five performance images. - Visually hide the theme's redundant page-title on the homepage while keeping it in the accessibility tree / for SEO as the page h1. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PUgUwdX2TPAh7yQzV96xTR
There was a problem hiding this comment.
Pull request overview
This PR updates the Jekyll homepage to be more image-driven by introducing a full-bleed hero section with a randomized background photo + logo overlay, adds a horizontally scrolling “On stage” performance strip, and improves presentation/accessibility of the research/teaching images.
Changes:
- Added a full-bleed homepage hero with overlaid logo, headline, CTAs, and a small inline script to randomly pick a background image.
- Added a full-bleed “On stage” horizontal photo strip linking to
/performances/. - Added new homepage CSS for hero/strip styling and a
.feature-imgtreatment for research/teaching images.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
index.md |
Replaces the simple intro + static image with a new hero section, adds randomized hero background JS, improves image alt text, and adds the “On stage” strip. |
assets/style.css |
Adds homepage-specific styling for the hero, buttons, feature images, and performance strip (plus an overflow rule). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+95
to
+96
| /* prevent full-bleed sections from creating a horizontal scrollbar */ | ||
| body { overflow-x: hidden; } |
Comment on lines
+208
to
+228
| .hero-btn:hover, | ||
| .hero-btn:focus { | ||
| transform: translateY(-2px); | ||
| background: rgba(255,255,255,0.14); | ||
| -webkit-text-fill-color: #fff; /* override the global gradient-text link hover */ | ||
| color: #fff; | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .hero-btn-primary { | ||
| border-color: transparent; | ||
| color: #2a0f0f; | ||
| background: linear-gradient(180deg, rgba(255,188,48,1) 0%, rgba(255,120,80,1) 100%); | ||
| } | ||
|
|
||
| .hero-btn-primary:hover, | ||
| .hero-btn-primary:focus { | ||
| color: #2a0f0f; | ||
| -webkit-text-fill-color: #2a0f0f; | ||
| filter: brightness(1.05); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Gives the homepage a more dynamic, image-driven style built entirely from performance photos already in the repo.
What's new
Full-bleed hero with the lab logo over a rotating photo
assets/lab-logo/smcclab-white.png) is layered over the hero with a drop shadow and a dark/warm scrim so it stays legible on any background.data-hero-imagesattribute, so adding/removing a photo is a one-line edit./performances/and/join/.Dynamic research/teaching images
.feature-imgclass), plus descriptivealttext (they were previously empty)."On stage" performance strip
Notes
<h1 class="page-title">SMCClab</h1>above the content, which was redundant once the logo wordmark is in the hero. It's now visually hidden on the homepage only (via:has(.home-hero)) but kept in the DOM as the page'sh1for SEO and screen readers.body { overflow-x: hidden }to support the full-bleed sections; as a side benefit it also clips a pre-existing horizontal overflow from the Mailchimp form.index.mdandassets/style.csschanged. Verified with a local Jekyll build and screenshots at desktop and mobile widths, including the logo's legibility across the full rotation pool.🤖 Generated with Claude Code
https://claude.ai/code/session_01PUgUwdX2TPAh7yQzV96xTR
Generated by Claude Code