marty/rm-circle-team-router
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handouts v2: kie.ai detailed artwork backgrounds + fixed DOM overlay (mobile layout repaired)

Browse Source 
Five full-bleed AI-generated designs (nano-banana-pro) with baked-in stylized headlines matching the banner-kit energy; QR + link + disclaimer now a percentage-scaled DOM overlay (canvas approach removed - it collapsed on mobile and clipped the QR). Lower-right of each artwork kept calm for the QR panel.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-08-27 08:15:59 -05:00
parent b019becebe
commit c4cabb0a8f
7 changed files with 35 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/flyers.html
+11 -4
View File
@@ -40,14 +40,21 @@
/* ---- half-sheet handouts (2 per letter page, cut in half, image-based) ---- */
.hs-page{margin:0 auto 26px;max-width:680px}
.hs{position:relative;aspect-ratio:8.5/5.5;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35);
display:flex;align-items:flex-end;justify-content:flex-end;font-family:Inter,system-ui,sans-serif;
background-size:cover;background-position:center;font-family:Inter,system-ui,sans-serif;
-webkit-print-color-adjust:exact;print-color-adjust:exact}
.hs-img-bg{background-size:cover;background-position:center}
.hs-canvas{display:block}
/* QR overlay panel — % sized so it scales on screen, mobile, and print */
.hs-qrov{position:absolute;right:3%;bottom:5.5%;width:22%;background:#fff;border-radius:8%/12%;
padding:2% 1.6% 1.4%;text-align:center;color:#10151b;box-shadow:0 5px 18px rgba(0,0,0,.55)}
.hs-qrov .q{width:100%;line-height:0}
.hs-qrov .q svg{width:100%;height:auto;display:block}
.hs-qrov .q .qph{width:100%;aspect-ratio:1;border:2px dashed #99a;border-radius:6px;box-sizing:border-box}
.hs-qrov .scan{font-weight:800;letter-spacing:.12em;font-size:clamp(6px,1.4vw,11px);margin-top:5%}
.hs-qrov .lnk{font-weight:800;font-size:clamp(6px,1.35vw,10.5px);word-break:break-all;line-height:1.2}
.hs-discov{position:absolute;left:2.6%;bottom:2.4%;width:60%;font-size:clamp(5px,1vw,8.5px);line-height:1.35;
color:#fff;opacity:.92;text-align:left;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.6)}
.hs-print{position:absolute;top:10px;right:10px;z-index:10;cursor:pointer}
.hs-copy{display:none}
.hs-cut{display:none}
@media (max-width:560px){.hs{aspect-ratio:auto}.hs-main{flex-direction:column;align-items:stretch}.hs-qrbox{align-self:center}}
@media print{
@page{size:letter;margin:0}
body{background:#fff!important}