fix: replace blurry VSYC hero raster with crisp SVG illustration#27
Merged
Conversation
The vsyc-marigolds-hero.jpg/webp was only 1168x784px but displayed full-width on desktop, causing it to be upscaled 1.6-2.2x on typical monitors and appearing visibly blurry. Replace with an inline SVG illustration (vsyc-marigolds-hero.svg) that renders pixel-perfect at every screen size. The SVG uses a <symbol> + <use> pattern to define a 24-petal marigold once and reuse it 15 times (10 main flowers + 5 background), with stems, a foliage base, and a navy gradient fade blending into the hero. object-fit changed from cover to fill so the vector fills the container without any cropping. Affects vsyc26.html (280px skyline) and all six sub-pages (220px page-hero-nature): schedule, register, sponsors, venue, rules, faq, terms. Also removes the now-dead <link rel=preload> for the old WebP. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR updates the VSYC-26 static site hero artwork by replacing a low-resolution raster hero image with a scalable SVG illustration, and adjusts styling so the new hero fills the intended containers without cropping.
Changes:
- Replaced the VSYC-26 hero
<picture>(JPG/WebP) with a single SVG<img>across the VSYC-26 landing page and sub-pages. - Added a new
assets/images/vsyc-marigolds-hero.svgillustration asset. - Updated
assets/css/vsyc26.csshero image fitting fromobject-fit: covertoobject-fit: fill.
Reviewed changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| vsyc26.html | Removes old hero image preload and swaps hero media to the new SVG. |
| vsyc26-venue.html | Swaps page-hero nature image to the new SVG. |
| vsyc26-terms.html | Swaps page-hero nature image to the new SVG. |
| vsyc26-sponsors.html | Swaps page-hero nature image to the new SVG. |
| vsyc26-schedule.html | Swaps page-hero nature image to the new SVG. |
| vsyc26-rules.html | Swaps page-hero nature image to the new SVG. |
| vsyc26-register.html | Swaps page-hero nature image to the new SVG. |
| vsyc26-faq.html | Swaps page-hero nature image to the new SVG. |
| assets/images/vsyc-marigolds-hero.svg | Adds the new vector hero illustration used site-wide on VSYC-26 pages. |
| assets/css/vsyc26.css | Updates hero image fitting behavior to fill containers with the SVG. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| </div> | ||
| <div class="hero-skyline"> | ||
| <picture><source srcset="assets/images/vsyc-marigolds-hero.webp" type="image/webp"/><img src="assets/images/vsyc-marigolds-hero.jpg" alt="" aria-hidden="true" decoding="async" width="1168" height="784"/></picture> | ||
| <img src="assets/images/vsyc-marigolds-hero.svg" alt="" aria-hidden="true" width="1440" height="280"/> |
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.
Summary
vsyc-marigolds-hero.jpg/webpwas only 1168×784px but rendered full-width, causing visible blurring (1.6–2.2× upscale on typical desktop monitors)vsyc-marigolds-hero.svg— a hand-drawn vector marigold field that is infinitely crisp at any screen widthobject-fit: cover → fillinvsyc26.cssso the SVG fills the container without any cropping<link rel="preload">for the old WebP fromvsyc26.htmlPages affected
All 7 VSYC-26 pages were updated:
vsyc26.html(280px skyline) and the six sub-pages — schedule, register, sponsors, venue, rules, faq, terms (220px page-hero-nature).SVG design
<symbol>defined once and referenced via<use>preserveAspectRatio="none"+object-fit: fillensures the design fills the container at every viewport width with no croppingTest plan
vsyc26.htmlon desktop at 1920px+ and confirm the hero bottom is no longer blurry🤖 Generated with Claude Code