Pullquote

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

let pullquote_demo_para = "Quillo renders a page on the server, then resumes its components in the browser from the state the server sent, so a page shows at once and reacts as soon as it is touched. What someone typed and clicked before the script came is kept and done then. A component that runs by itself loads as soon as the page is idle; the rest wait until they are reached, so a page with a hundred of them costs no more than one."view PullquoteDemo() =    <div.demo-stack>        <div id="pullquote-demo-article" style="font: 15px/1.6 var(--ui-font)">            <Pullquote side="right" repeated={true} id="pullquote-demo-right">A page shows at once and reacts as soon as it is touched.</Pullquote>            <p style="margin: 0 0 1em">{pullquote_demo_para}</p>            <p style="margin: 0 0 1em">{pullquote_demo_para}</p>            <Pullquote side="left" author="Ada Lovelace" id="pullquote-demo-left">The Engine weaves algebraic patterns just as the loom weaves flowers.</Pullquote>            <p style="margin: 0 0 1em">{pullquote_demo_para}</p>            <p style="margin: 0">{pullquote_demo_para}</p>            <Pullquote side="full" author="Someone on the team" id="pullquote-demo-full">Ship the smallest thing that teaches you something.</Pullquote>            <p style="margin: 0">{pullquote_demo_para}</p>        </div>    </div>

// Pullquote: a line lifted from an article, set large, beside the column (the text// flows around it) or across it.////   <Pullquote side="right">Ship the smallest thing that teaches you something.</Pullquote>//   <Pullquote side="full" author="Ada Lovelace">The Engine weaves algebraic patterns.</Pullquote>//// children: the quote. side: "right" (default) or "left", floated beside the text// that follows it, taking about half the width; "full" spans the column, between// two rules. author: a name under it. repeated: true when the same words are in the// article already: the pull quote is then hidden from screen readers, which would// otherwise read it twice. It is an <aside>.import ui/theme.qwe use ui_clslet pullquote_css = css`.ui-pullquote { margin: 0 0 20px; padding: 6px 0; font: 500 22px/1.35 var(--ui-font); color: var(--ui-fg);  letter-spacing: -.01em; overflow-wrap: anywhere; }.ui-pullquote-left, .ui-pullquote-right { width: min(45%, 320px); }.ui-pullquote-left { float: left; margin-right: 28px; border-right: 3px solid var(--ui-accent); padding-right: 20px; }.ui-pullquote-right { float: right; margin-left: 28px; border-left: 3px solid var(--ui-accent); padding-left: 20px; }.ui-pullquote-full { clear: both; margin: 28px 0; padding: 22px 0; border-top: 1px solid var(--ui-border);  border-bottom: 1px solid var(--ui-border); font-size: 26px; text-align: center; }.ui-pullquote-text { margin: 0; }.ui-pullquote-text::before { content: "“"; }.ui-pullquote-text::after { content: "”"; }.ui-pullquote-by { margin: 8px 0 0; font: 14px/1.4 var(--ui-font); color: var(--ui-muted); letter-spacing: 0; }.ui-pullquote-by::before { content: "— "; }@media (max-width: 560px) {  .ui-pullquote-left, .ui-pullquote-right { float: none; width: auto; margin: 20px 0; }}`view Pullquote(side: str = "right", author: str? = null, repeated: bool = false, id: str? = null,               class: str? = null, children) {    style global pullquote_css    <aside class={ui_cls(["ui-pullquote", `ui-pullquote-${side}`, class])} id={id} aria-hidden={repeated ? "true" : null}>        <p.ui-pullquote-text>{children}</p>        {author != null && <p.ui-pullquote-by>{author}</p>}    </aside>}