This is an automated email from the ASF dual-hosted git repository. jamesfredley pushed a commit to branch add-grails-teepublic-shirt in repository https://gitbox.apache.org/repos/asf/grails-static-website.git
commit 372ba6d401bb20cbdf8252fd12d8dd69b4947f36 Author: James Fredley <[email protected]> AuthorDate: Mon Aug 10 16:11:57 2026 -0400 Add Grails TeePublic shirt promotion Add an accessible, responsive homepage card for the Apache Grails T-shirt and self-host the Acid Black Vintage preview. Assisted-by: opencode:gpt-5.6-sol playwright --- DESIGN.md | 9 +++ .../images/grails-teepublic-shirt-acid-black.jpg | Bin 0 -> 47420 bytes assets/stylesheets/screen.css | 74 +++++++++++++++++++++ pages/index.html | 15 ++++- 4 files changed, 97 insertions(+), 1 deletion(-) diff --git a/DESIGN.md b/DESIGN.md index 018037859b1..3ab698eb439 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -170,6 +170,15 @@ Large headings may use balanced wrapping. Body copy should use natural wrapping - **Attributes:** documented legacy `data-button-*` plus current `data-launcher-button-*` height/width/background/bottom/right/image/padding/border-radius; `data-button-*` aliases (`text-color`, `text-font-size`, `bg-color`, `position-bottom/right`) are used for compatibility. - **Layout:** catalogue pages reserve bottom safe space; below `961px`, `footer` gets a `68px` right exclusion zone so sentences are not covered. +### Homepage merchandise card + +- **Structure:** full-width card in the homepage community band with a square product image, `h2`, short description, variant guidance, and one TeePublic link. +- **Spacing:** mobile padding uses the existing `24px` comfortable step; the image and copy separate further at tablet width. +- **States:** the TeePublic link keeps white text on Grails blue, darkens on hover, and receives a visible Grails-blue focus outline against the white card. +- **Accessibility:** the section is labelled by its heading, the image has useful alternative text and intrinsic dimensions, and variant guidance is available as text rather than encoded only in the image. +- **Motion:** inherited color feedback only; no decorative movement. +- **Layout:** one readable column on mobile, changing to a balanced image-and-copy grid from `768px` while remaining inside the shared `1141px` content width. + ## 6. Motion & Interaction | Type | Duration | Easing | Usage | diff --git a/assets/images/grails-teepublic-shirt-acid-black.jpg b/assets/images/grails-teepublic-shirt-acid-black.jpg new file mode 100644 index 00000000000..c4a095d568d Binary files /dev/null and b/assets/images/grails-teepublic-shirt-acid-black.jpg differ diff --git a/assets/stylesheets/screen.css b/assets/stylesheets/screen.css index 5890c8d47cd..eab8d55506d 100644 --- a/assets/stylesheets/screen.css +++ b/assets/stylesheets/screen.css @@ -333,6 +333,80 @@ td { margin-top: 20px; } +.shirt-promotion { + display: grid; + grid-template-columns: minmax(0, 1fr); + gap: 24px; + align-items: center; + box-sizing: border-box; + margin: 50px 0; + padding: 24px; + background-color: #ffffff; + border-top: 2px solid #feb672; + box-shadow: 0 8px 6px -6px #ccc; +} + +.shirt-promotion-image { + display: block; + width: 100%; + max-width: 420px; + height: auto; + margin: 0 auto; +} + +.shirt-promotion-copy { + min-width: 0; + color: #666666; +} + +.training .content .shirt-promotion-copy h2 { + margin: 0 0 16px; + color: #4f4f4f; + font-size: 24px; + line-height: 1.3; +} + +.shirt-promotion-variant { + color: #4f4f4f; + font-weight: bold; +} + +.shirt-promotion-link, +.shirt-promotion-link:visited { + display: inline-block; + box-sizing: border-box; + max-width: 100%; + padding: 12px 20px; + background-color: #255AA8; + box-shadow: 1px 4px 4px #ccc; + color: #ffffff; + font-family: 'Archia-Light', 'Roboto-Light', "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 18px; + line-height: 1.4; + text-decoration: none; +} + +.shirt-promotion-link:hover { + background-color: #1d4684; + color: #ffffff; +} + +.shirt-promotion-link:focus, +.shirt-promotion-link:focus-visible { + background-color: #1d4684; + color: #ffffff; + outline: 3px solid #255AA8; + outline-offset: 3px; +} + +@media screen and (min-width: 768px) { + .shirt-promotion { + grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr); + gap: 40px; + padding: 32px; + } +} + body.search thead th, diff --git a/pages/index.html b/pages/index.html index 475202a2460..dad15a3a067 100644 --- a/pages/index.html +++ b/pages/index.html @@ -144,6 +144,19 @@ body: home </div> </div> </div> + <section class="shirt-promotion" aria-labelledby="shirt-promotion-title"> + <img class="shirt-promotion-image" src="[%url]/images/grails-teepublic-shirt-acid-black.jpg" + alt="Apache Grails T-shirt in Acid Black with an orange Grails logo" width="630" height="630" + loading="lazy"> + <div class="shirt-promotion-copy"> + <h2 id="shirt-promotion-title">Apache Grails T-Shirt</h2> + <p>Take the Apache Grails logo with you on a TeePublic T-shirt.</p> + <p class="shirt-promotion-variant">Shown in Male Fit, Vintage, Acid Black. Select Vintage and Acid Black + on TeePublic to match this look.</p> + <a class="shirt-promotion-link" + href="https://www.teepublic.com/t-shirt/96393154-apache-grails?store_id=3969012";>View the T-shirt on TeePublic</a> + </div> + </section> </div> </article> <article class="testimonials"> @@ -151,4 +164,4 @@ body: home <h2>They all use the Apache Grails Framework</h2> <img src="[%url]/images/testimoniallogos.png" alt="Companies using Grails" loading="lazy"> </div> -</article> \ No newline at end of file +</article>
