Riso editorial
A two-ink print look for a magazine or a portfolio.
<piix-scene>WebGLIssue 07 · Night roads
The long way home
Essays on driving after dark, printed in two inks.
<section class="lay-riso">
<piix-scene kind="rays" height="300px"></piix-scene>
<div class="lay-copy">
<p class="lay-kicker">Issue 07 · Night roads</p>
<h2>The long way home</h2>
<p>Essays on driving after dark, printed in two inks.</p>
</div>
</section>
<style>
.lay-copy{display:grid;gap:12px;justify-items:start;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.lay-copy h2{margin:0;font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1;letter-spacing:-.04em}
.lay-copy p{margin:0;max-width:42ch;font-size:17px;line-height:1.5;opacity:.75}
.lay-kicker{font:400 12px/1 "Silkscreen",monospace!important;text-transform:uppercase;letter-spacing:.06em;opacity:.6!important}
.lay-riso{display:grid;grid-template-columns:1.2fr 1fr;background:#eadcc4;color:#1c38d4}
.lay-riso .lay-copy{padding:40px;align-content:center}
.lay-riso h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;letter-spacing:-.02em}
.lay-riso p{opacity:1}
@media (max-width:760px){.lay-riso{grid-template-columns:1fr}}
</style>
Pair the riso scenes with a serif and the same two inks everywhere else, and the whole page feels printed. The scene is the cover image; the rest is plain HTML and CSS.
Installation
<!-- once, anywhere on the page: every component --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>
<!-- just riso editorial (the shared engine loads itself, once) --> <script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/scene.min.js"></script>
npm install piixpal // once, in your entry file import "piixpal";
// npm install piixpal
import "piixpal";
export default function Page() {
return (
<section className="lay-riso">
<piix-scene kind="rays" height="300px"></piix-scene>
<div className="lay-copy">
<p className="lay-kicker">Issue 07 · Night roads</p>
<h2>The long way home</h2>
<p>Essays on driving after dark, printed in two inks.</p>
</div>
</section>
<style>
.lay-copy{display:grid;gap:12px;justify-items:start;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.lay-copy h2{margin:0;font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1;letter-spacing:-.04em}
.lay-copy p{margin:0;max-width:42ch;font-size:17px;line-height:1.5;opacity:.75}
.lay-kicker{font:400 12px/1 "Silkscreen",monospace!important;text-transform:uppercase;letter-spacing:.06em;opacity:.6!important}
.lay-riso{display:grid;grid-template-columns:1.2fr 1fr;background:#eadcc4;color:#1c38d4}
.lay-riso .lay-copy{padding:40px;align-content:center}
.lay-riso h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;letter-spacing:-.02em}
.lay-riso p{opacity:1}
@media (max-width:760px){.lay-riso{grid-template-columns:1fr}}
</style>
);
}
Usage
<section class="lay-riso">
<piix-scene kind="rays" height="300px"></piix-scene>
<div class="lay-copy">
<p class="lay-kicker">Issue 07 · Night roads</p>
<h2>The long way home</h2>
<p>Essays on driving after dark, printed in two inks.</p>
</div>
</section>
<style>
.lay-copy{display:grid;gap:12px;justify-items:start;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.lay-copy h2{margin:0;font-size:clamp(30px,4.4vw,52px);font-weight:800;line-height:1;letter-spacing:-.04em}
.lay-copy p{margin:0;max-width:42ch;font-size:17px;line-height:1.5;opacity:.75}
.lay-kicker{font:400 12px/1 "Silkscreen",monospace!important;text-transform:uppercase;letter-spacing:.06em;opacity:.6!important}
.lay-riso{display:grid;grid-template-columns:1.2fr 1fr;background:#eadcc4;color:#1c38d4}
.lay-riso .lay-copy{padding:40px;align-content:center}
.lay-riso h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;letter-spacing:-.02em}
.lay-riso p{opacity:1}
@media (max-width:760px){.lay-riso{grid-template-columns:1fr}}
</style>
Accessibility
- Your copy is ordinary HTML: headings, paragraphs, real buttons.
- The scenes are described for screen readers, or hidden when they are decoration.