CoverImage

import ui/theme.qwe use theme_cssuse ui/cover_image.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

// A landscape drawn in SVG, so the demo needs no image files.fn cover_image_demo_scene(sky: str, hill: str) -> str {    let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" width="1600" height="900">`        + `<defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="${sky}"/><stop offset="1" stop-color="#fff3e0"/></linearGradient></defs>`        + `<rect width="1600" height="900" fill="url(#g)"/><circle cx="1150" cy="300" r="90" fill="#ffd36b"/>`        + `<path d="M0 620 Q 400 420 800 600 T 1600 540 V 900 H 0 Z" fill="${hill}"/>`        + `<path d="M0 760 Q 500 600 900 780 T 1600 720 V 900 H 0 Z" fill="#1f3d2a"/></svg>`    `data:image/svg+xml,${url_encode(svg)}`}view CoverImageDemo() =    <div.demo-stack>        <CoverImage src={cover_image_demo_scene("#7cb7f0", "#2f6b3a")} alt="Green hills under a morning sky" eyebrow="Travel"                    title="The long way round" subtitle="Six days on foot across the Picos de Europa, with a tent and too many maps.">            <a class="ui-btn ui-btn-solid" href="https://example.com/read" style="background: #fff; color: #17161f">Read the story</a>        </CoverImage>        <CoverImage src={cover_image_demo_scene("#f3a46b", "#5b3a5e")} alt="" title="Autumn in the valley" size="sm" align="center"                    position="top" shade={0.5}/>        <p.demo-note>The gradient keeps the title readable; children go under the text.</p>    </div>

// CoverImage: a wide picture with a title over it, on a gradient so the words// read whatever the picture is: the top of an article, a profile, a listing.////   <CoverImage src="/img/ridge.jpg" alt="The north ridge at dawn" title="The long way round"//               subtitle="Six days across the Picos" eyebrow="Travel"/>//   <CoverImage src={trip.cover} alt="" title={trip.name} size="lg" align="center">//       <Button>Book now</Button>//   </CoverImage>//// src, alt: the picture. title: the heading over it (an h2); subtitle: a line// under it; eyebrow: a small line above it. children: anything under the text// (buttons, tags). size: the height, "sm" (220px), "md" (320px, default) or// "lg" (440px). position: which part of the picture stays in view when it is// cropped: "center" (default), "top" or "bottom". align: the text's place, "left"// (default) or "center". shade: how dark the gradient is, 0 to 1 (.7).import ui/theme.qwe use ui_clslet cover_image_css = css`.ui-cover-image {  position: relative; display: grid; align-items: end; overflow: hidden; width: 100%; height: var(--h, 320px);  border-radius: var(--ui-radius); background: var(--ui-subtle); color: #fff; font: 15px/1.5 var(--ui-font);}.ui-cover-image-sm { --h: 220px; }.ui-cover-image-lg { --h: 440px; }.ui-cover-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }.ui-cover-image-top img { object-position: top; }.ui-cover-image-bottom img { object-position: bottom; }.ui-cover-image-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, var(--shade, .7)) 0%, rgba(0, 0, 0, calc(var(--shade, .7) * .4)) 45%, transparent 80%); }.ui-cover-image-text { position: relative; display: grid; gap: 6px; padding: 28px; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }.ui-cover-image-center .ui-cover-image-text { justify-items: center; text-align: center; }.ui-cover-image-eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }.ui-cover-image-title { margin: 0; font-size: clamp(22px, 4vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }.ui-cover-image-subtitle { margin: 0; font-size: 16px; opacity: .92; }.ui-cover-image-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }.ui-cover-image-sm .ui-cover-image-text { padding: 20px; }.ui-cover-image-sm .ui-cover-image-title { font-size: 22px; }`view CoverImage(src: str, alt: str = "", title: str, subtitle: str? = null, eyebrow: str? = null, size: str = "md",                position: str = "center", align: str = "left", shade: num = 0.7, class: str? = null, children) {    style global cover_image_css    <section class={ui_cls(["ui-cover-image", size != "md" && `ui-cover-image-${size}`, position != "center" && `ui-cover-image-${position}`,                            align == "center" && "ui-cover-image-center", class])}             style={`--shade: ${shade}`} aria-label={title}>        <img src={src} alt={alt}/>        <div.ui-cover-image-shade aria-hidden="true"></div>        <div.ui-cover-image-text>            {eyebrow != null && <p.ui-cover-image-eyebrow>{eyebrow}</p>}            <h2.ui-cover-image-title>{title}</h2>            {subtitle != null && <p.ui-cover-image-subtitle>{subtitle}</p>}            {len(children) > 0 && <div.ui-cover-image-actions>{children}</div>}        </div>    </section>}