feat: update desktop workflows and app center
This commit is contained in:
inman
@@ -0,0 +1,619 @@
|
||||
/**
|
||||
* <deck-stage> — reusable web component for HTML decks.
|
||||
*
|
||||
* Handles:
|
||||
* (a) speaker notes — reads <script type="application/json" id="speaker-notes">
|
||||
* and posts {slideIndexChanged: N} to the parent window on nav.
|
||||
* (b) keyboard navigation — ←/→, PgUp/PgDn, Space, Home/End, number keys.
|
||||
* (c) press R to reset to slide 0 (with a tasteful keyboard hint).
|
||||
* (d) bottom-center overlay showing slide count + hints, fades out on idle.
|
||||
* (e) auto-scaling — inner canvas is a fixed design size (default 1920×1080)
|
||||
* scaled with `transform: scale()` to fit the viewport, letterboxed.
|
||||
* Set the `noscale` attribute to render at authored size (1:1) — the
|
||||
* PPTX exporter sets this so its DOM capture sees unscaled geometry.
|
||||
* (f) print — `@media print` lays every slide out as its own page at the
|
||||
* design size, so the browser's Print → Save as PDF produces a clean
|
||||
* one-page-per-slide PDF with no extra setup.
|
||||
*
|
||||
* Slides are HIDDEN, not unmounted. Non-active slides stay in the DOM with
|
||||
* `visibility: hidden` + `opacity: 0`, so their state (videos, iframes,
|
||||
* form inputs, React trees) is preserved across navigation.
|
||||
*
|
||||
* Lifecycle event — the component dispatches a `slidechange` CustomEvent on
|
||||
* itself whenever the active slide changes (including the initial mount).
|
||||
* The event bubbles and composes out of shadow DOM, so you can listen on
|
||||
* the <deck-stage> element or on document:
|
||||
*
|
||||
* document.querySelector('deck-stage').addEventListener('slidechange', (e) => {
|
||||
* e.detail.index // new 0-based index
|
||||
* e.detail.previousIndex // previous index, or -1 on init
|
||||
* e.detail.total // total slide count
|
||||
* e.detail.slide // the new active slide element
|
||||
* e.detail.previousSlide // the prior slide element, or null on init
|
||||
* e.detail.reason // 'init' | 'keyboard' | 'click' | 'tap' | 'api'
|
||||
* });
|
||||
*
|
||||
* Persistence: none at the deck level. The host app keeps the current slide
|
||||
* in its own URL (?slide=) and re-delivers it via location.hash on load, so a
|
||||
* bare load with no hash always starts at slide 1.
|
||||
*
|
||||
* Usage:
|
||||
* <deck-stage width="1920" height="1080">
|
||||
* <section data-label="Title">...</section>
|
||||
* <section data-label="Agenda">...</section>
|
||||
* </deck-stage>
|
||||
*
|
||||
* Slides are the direct element children of <deck-stage>. Each slide is
|
||||
* automatically tagged with:
|
||||
* - data-screen-label="NN Label" (1-indexed, for comment flow)
|
||||
* - data-om-validate="no_overflowing_text,no_overlapping_text,slide_sized_text"
|
||||
*/
|
||||
|
||||
(() => {
|
||||
const DESIGN_W_DEFAULT = 1920;
|
||||
const DESIGN_H_DEFAULT = 1080;
|
||||
const OVERLAY_HIDE_MS = 1800;
|
||||
const VALIDATE_ATTR = 'no_overflowing_text,no_overlapping_text,slide_sized_text';
|
||||
|
||||
const pad2 = (n) => String(n).padStart(2, '0');
|
||||
|
||||
const stylesheet = `
|
||||
:host {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: block;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stage {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.canvas {
|
||||
position: relative;
|
||||
transform-origin: center center;
|
||||
flex-shrink: 0;
|
||||
background: #fff;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* Slides live in light DOM (via <slot>) so authored CSS still applies.
|
||||
We absolutely position each slotted child to stack them. */
|
||||
::slotted(*) {
|
||||
position: absolute !important;
|
||||
inset: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
::slotted([data-deck-active]) {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* Tap zones for mobile — back/forward thirds like Stories.
|
||||
Transparent, no visible UI, don't block the overlay. */
|
||||
.tapzones {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
z-index: 2147482000;
|
||||
pointer-events: none;
|
||||
}
|
||||
.tapzone {
|
||||
flex: 1;
|
||||
pointer-events: auto;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
/* Only activate tap zones on coarse pointers (touch devices). */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.tapzones { display: none; }
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 22px;
|
||||
transform: translate(-50%, 6px) scale(0.92);
|
||||
filter: blur(6px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-feature-settings: "tnum" 1;
|
||||
letter-spacing: 0.01em;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 260ms ease, transform 260ms cubic-bezier(.2,.8,.2,1), filter 260ms ease;
|
||||
transform-origin: center bottom;
|
||||
z-index: 2147483000;
|
||||
user-select: none;
|
||||
}
|
||||
.overlay[data-visible] {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
filter: blur(0);
|
||||
}
|
||||
|
||||
.btn {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
cursor: default;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
border-radius: 999px;
|
||||
color: rgba(255,255,255,0.72);
|
||||
transition: background 140ms ease, color 140ms ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
|
||||
.btn:active { background: rgba(255,255,255,0.18); }
|
||||
.btn:focus { outline: none; }
|
||||
.btn:focus-visible { outline: none; }
|
||||
.btn::-moz-focus-inner { border: 0; }
|
||||
.btn svg { width: 14px; height: 14px; display: block; }
|
||||
.btn.reset {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
padding: 0 10px 0 12px;
|
||||
gap: 6px;
|
||||
color: rgba(255,255,255,0.72);
|
||||
}
|
||||
.btn.reset .kbd {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
||||
font-size: 10px;
|
||||
line-height: 1;
|
||||
color: rgba(255,255,255,0.88);
|
||||
background: rgba(255,255,255,0.12);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.count {
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
padding: 0 8px;
|
||||
min-width: 42px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
.count .sep { color: rgba(255,255,255,0.45); margin: 0 3px; font-weight: 400; }
|
||||
.count .total { color: rgba(255,255,255,0.55); }
|
||||
|
||||
.divider {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background: rgba(255,255,255,0.18);
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
/* ── Print: one page per slide, no chrome ────────────────────────────
|
||||
The screen layout stacks every slide at inset:0 inside a scaled
|
||||
canvas; for print we want them in document flow at the authored
|
||||
design size so the browser paginates one slide per sheet. The
|
||||
@page size is set from the width/height attributes via the inline
|
||||
<style id="deck-stage-print-page"> that connectedCallback injects
|
||||
into <head> (the @page at-rule has no effect inside shadow DOM). */
|
||||
@media print {
|
||||
:host {
|
||||
position: static;
|
||||
inset: auto;
|
||||
background: none;
|
||||
overflow: visible;
|
||||
color: inherit;
|
||||
}
|
||||
.stage { position: static; display: block; }
|
||||
.canvas {
|
||||
transform: none !important;
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
background: none;
|
||||
will-change: auto;
|
||||
}
|
||||
::slotted(*) {
|
||||
position: relative !important;
|
||||
inset: auto !important;
|
||||
width: var(--deck-design-w) !important;
|
||||
height: var(--deck-design-h) !important;
|
||||
box-sizing: border-box !important;
|
||||
opacity: 1 !important;
|
||||
visibility: visible !important;
|
||||
pointer-events: auto;
|
||||
break-after: page;
|
||||
page-break-after: always;
|
||||
break-inside: avoid;
|
||||
overflow: hidden;
|
||||
}
|
||||
::slotted(*:last-child) {
|
||||
break-after: auto;
|
||||
page-break-after: auto;
|
||||
}
|
||||
.overlay, .tapzones { display: none !important; }
|
||||
}
|
||||
`;
|
||||
|
||||
class DeckStage extends HTMLElement {
|
||||
static get observedAttributes() { return ['width', 'height', 'noscale']; }
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this._root = this.attachShadow({ mode: 'open' });
|
||||
this._index = 0;
|
||||
this._slides = [];
|
||||
this._notes = [];
|
||||
this._hideTimer = null;
|
||||
this._mouseIdleTimer = null;
|
||||
|
||||
this._onKey = this._onKey.bind(this);
|
||||
this._onResize = this._onResize.bind(this);
|
||||
this._onSlotChange = this._onSlotChange.bind(this);
|
||||
this._onMouseMove = this._onMouseMove.bind(this);
|
||||
this._onTapBack = this._onTapBack.bind(this);
|
||||
this._onTapForward = this._onTapForward.bind(this);
|
||||
}
|
||||
|
||||
get designWidth() {
|
||||
return parseInt(this.getAttribute('width'), 10) || DESIGN_W_DEFAULT;
|
||||
}
|
||||
get designHeight() {
|
||||
return parseInt(this.getAttribute('height'), 10) || DESIGN_H_DEFAULT;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this._render();
|
||||
this._loadNotes();
|
||||
this._syncPrintPageRule();
|
||||
window.addEventListener('keydown', this._onKey);
|
||||
window.addEventListener('resize', this._onResize);
|
||||
window.addEventListener('mousemove', this._onMouseMove, { passive: true });
|
||||
// Initial collection + layout happens via slotchange, which fires on mount.
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
window.removeEventListener('keydown', this._onKey);
|
||||
window.removeEventListener('resize', this._onResize);
|
||||
window.removeEventListener('mousemove', this._onMouseMove);
|
||||
if (this._hideTimer) clearTimeout(this._hideTimer);
|
||||
if (this._mouseIdleTimer) clearTimeout(this._mouseIdleTimer);
|
||||
}
|
||||
|
||||
attributeChangedCallback() {
|
||||
if (this._canvas) {
|
||||
this._canvas.style.width = this.designWidth + 'px';
|
||||
this._canvas.style.height = this.designHeight + 'px';
|
||||
this._canvas.style.setProperty('--deck-design-w', this.designWidth + 'px');
|
||||
this._canvas.style.setProperty('--deck-design-h', this.designHeight + 'px');
|
||||
this._fit();
|
||||
this._syncPrintPageRule();
|
||||
}
|
||||
}
|
||||
|
||||
_render() {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = stylesheet;
|
||||
|
||||
const stage = document.createElement('div');
|
||||
stage.className = 'stage';
|
||||
|
||||
const canvas = document.createElement('div');
|
||||
canvas.className = 'canvas';
|
||||
canvas.style.width = this.designWidth + 'px';
|
||||
canvas.style.height = this.designHeight + 'px';
|
||||
canvas.style.setProperty('--deck-design-w', this.designWidth + 'px');
|
||||
canvas.style.setProperty('--deck-design-h', this.designHeight + 'px');
|
||||
|
||||
const slot = document.createElement('slot');
|
||||
slot.addEventListener('slotchange', this._onSlotChange);
|
||||
canvas.appendChild(slot);
|
||||
stage.appendChild(canvas);
|
||||
|
||||
// Tap zones (mobile): left third = back, right third = forward.
|
||||
const tapzones = document.createElement('div');
|
||||
tapzones.className = 'tapzones export-hidden';
|
||||
tapzones.setAttribute('aria-hidden', 'true');
|
||||
tapzones.setAttribute('data-noncommentable', '');
|
||||
const tzBack = document.createElement('div');
|
||||
tzBack.className = 'tapzone tapzone--back';
|
||||
const tzMid = document.createElement('div');
|
||||
tzMid.className = 'tapzone tapzone--mid';
|
||||
tzMid.style.pointerEvents = 'none';
|
||||
const tzFwd = document.createElement('div');
|
||||
tzFwd.className = 'tapzone tapzone--fwd';
|
||||
tzBack.addEventListener('click', this._onTapBack);
|
||||
tzFwd.addEventListener('click', this._onTapForward);
|
||||
tapzones.append(tzBack, tzMid, tzFwd);
|
||||
|
||||
// Overlay: compact, solid black, with clickable controls.
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'overlay export-hidden';
|
||||
overlay.setAttribute('role', 'toolbar');
|
||||
overlay.setAttribute('aria-label', 'Deck controls');
|
||||
overlay.setAttribute('data-noncommentable', '');
|
||||
overlay.innerHTML = `
|
||||
<button class="btn prev" type="button" aria-label="Previous slide" title="Previous (←)">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 3L5 8l5 5"/></svg>
|
||||
</button>
|
||||
<span class="count" aria-live="polite"><span class="current">1</span><span class="sep">/</span><span class="total">1</span></span>
|
||||
<button class="btn next" type="button" aria-label="Next slide" title="Next (→)">
|
||||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg>
|
||||
</button>
|
||||
<span class="divider"></span>
|
||||
<button class="btn reset" type="button" aria-label="Reset to first slide" title="Reset (R)">Reset<span class="kbd">R</span></button>
|
||||
`;
|
||||
|
||||
overlay.querySelector('.prev').addEventListener('click', () => this._go(this._index - 1, 'click'));
|
||||
overlay.querySelector('.next').addEventListener('click', () => this._go(this._index + 1, 'click'));
|
||||
overlay.querySelector('.reset').addEventListener('click', () => this._go(0, 'click'));
|
||||
|
||||
this._root.append(style, stage, tapzones, overlay);
|
||||
this._canvas = canvas;
|
||||
this._slot = slot;
|
||||
this._overlay = overlay;
|
||||
this._countEl = overlay.querySelector('.current');
|
||||
this._totalEl = overlay.querySelector('.total');
|
||||
}
|
||||
|
||||
/** @page must live in the document stylesheet — it's a no-op inside
|
||||
* shadow DOM. Inject/update a single <head> style tag so the print
|
||||
* sheet matches the design size and Save-as-PDF yields one slide per
|
||||
* page with no margins. */
|
||||
_syncPrintPageRule() {
|
||||
const id = 'deck-stage-print-page';
|
||||
let tag = document.getElementById(id);
|
||||
if (!tag) {
|
||||
tag = document.createElement('style');
|
||||
tag.id = id;
|
||||
document.head.appendChild(tag);
|
||||
}
|
||||
tag.textContent =
|
||||
'@page { size: ' + this.designWidth + 'px ' + this.designHeight + 'px; margin: 0; } ' +
|
||||
'@media print { html, body { margin: 0 !important; padding: 0 !important; background: none !important; overflow: visible !important; height: auto !important; } ' +
|
||||
'* { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }';
|
||||
}
|
||||
|
||||
_onSlotChange() {
|
||||
this._collectSlides();
|
||||
this._restoreIndex();
|
||||
this._applyIndex({ showOverlay: false, broadcast: true, reason: 'init' });
|
||||
this._fit();
|
||||
}
|
||||
|
||||
_collectSlides() {
|
||||
const assigned = this._slot.assignedElements({ flatten: true });
|
||||
this._slides = assigned.filter((el) => {
|
||||
// Skip template/style/script nodes even if someone slots them.
|
||||
const tag = el.tagName;
|
||||
return tag !== 'TEMPLATE' && tag !== 'SCRIPT' && tag !== 'STYLE';
|
||||
});
|
||||
|
||||
this._slides.forEach((slide, i) => {
|
||||
const n = i + 1;
|
||||
// Determine a label for comment flow: prefer explicit data-label,
|
||||
// then an existing data-screen-label, then first heading, else "Slide".
|
||||
let label = slide.getAttribute('data-label');
|
||||
if (!label) {
|
||||
const existing = slide.getAttribute('data-screen-label');
|
||||
if (existing) {
|
||||
// Strip any leading number the author may have included.
|
||||
label = existing.replace(/^\s*\d+\s*/, '').trim() || existing;
|
||||
}
|
||||
}
|
||||
if (!label) {
|
||||
const h = slide.querySelector('h1, h2, h3, [data-title]');
|
||||
if (h) label = (h.textContent || '').trim().slice(0, 40);
|
||||
}
|
||||
if (!label) label = 'Slide';
|
||||
slide.setAttribute('data-screen-label', `${pad2(n)} ${label}`);
|
||||
|
||||
// Validation attribute for comment flow / auto-checks.
|
||||
if (!slide.hasAttribute('data-om-validate')) {
|
||||
slide.setAttribute('data-om-validate', VALIDATE_ATTR);
|
||||
}
|
||||
|
||||
slide.setAttribute('data-deck-slide', String(i));
|
||||
});
|
||||
|
||||
if (this._totalEl) this._totalEl.textContent = String(this._slides.length || 1);
|
||||
if (this._index >= this._slides.length) this._index = Math.max(0, this._slides.length - 1);
|
||||
}
|
||||
|
||||
_loadNotes() {
|
||||
const tag = document.getElementById('speaker-notes');
|
||||
if (!tag) { this._notes = []; return; }
|
||||
try {
|
||||
const parsed = JSON.parse(tag.textContent || '[]');
|
||||
if (Array.isArray(parsed)) this._notes = parsed;
|
||||
} catch (e) {
|
||||
console.warn('[deck-stage] Failed to parse #speaker-notes JSON:', e);
|
||||
this._notes = [];
|
||||
}
|
||||
}
|
||||
|
||||
_restoreIndex() {
|
||||
// The host's ?slide= param is delivered as a #<int> hash (1-indexed) on
|
||||
// the iframe src. No hash → slide 1; the deck itself keeps no position
|
||||
// state across loads.
|
||||
const h = (location.hash || '').match(/^#(\d+)$/);
|
||||
if (h) {
|
||||
const n = parseInt(h[1], 10) - 1;
|
||||
if (n >= 0 && n < this._slides.length) this._index = n;
|
||||
}
|
||||
}
|
||||
|
||||
_applyIndex({ showOverlay = true, broadcast = true, reason = 'init' } = {}) {
|
||||
if (!this._slides.length) return;
|
||||
const prev = this._prevIndex == null ? -1 : this._prevIndex;
|
||||
const curr = this._index;
|
||||
// Keep the iframe's own hash in sync so an in-iframe location.reload()
|
||||
// (reload banner path in viewer-handle.ts) lands on the current slide,
|
||||
// not the stale deep-link hash from initial load.
|
||||
try { history.replaceState(null, '', '#' + (curr + 1)); } catch (e) {}
|
||||
this._slides.forEach((s, i) => {
|
||||
if (i === curr) s.setAttribute('data-deck-active', '');
|
||||
else s.removeAttribute('data-deck-active');
|
||||
});
|
||||
if (this._countEl) this._countEl.textContent = String(curr + 1);
|
||||
|
||||
if (broadcast) {
|
||||
// (1) Legacy: host-window postMessage for speaker-notes renderers.
|
||||
try { window.postMessage({ slideIndexChanged: curr }, '*'); } catch (e) {}
|
||||
|
||||
// (2) In-page CustomEvent on the <deck-stage> element itself.
|
||||
// Bubbles and composes out of shadow DOM so slide code can listen:
|
||||
// document.querySelector('deck-stage').addEventListener('slidechange', e => {
|
||||
// e.detail.index, e.detail.previousIndex, e.detail.total, e.detail.slide, e.detail.reason
|
||||
// });
|
||||
const detail = {
|
||||
index: curr,
|
||||
previousIndex: prev,
|
||||
total: this._slides.length,
|
||||
slide: this._slides[curr] || null,
|
||||
previousSlide: prev >= 0 ? (this._slides[prev] || null) : null,
|
||||
reason: reason, // 'init' | 'keyboard' | 'click' | 'tap' | 'api'
|
||||
};
|
||||
this.dispatchEvent(new CustomEvent('slidechange', {
|
||||
detail,
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
}
|
||||
|
||||
this._prevIndex = curr;
|
||||
if (showOverlay) this._flashOverlay();
|
||||
}
|
||||
|
||||
_flashOverlay() {
|
||||
if (!this._overlay) return;
|
||||
this._overlay.setAttribute('data-visible', '');
|
||||
if (this._hideTimer) clearTimeout(this._hideTimer);
|
||||
this._hideTimer = setTimeout(() => {
|
||||
this._overlay.removeAttribute('data-visible');
|
||||
}, OVERLAY_HIDE_MS);
|
||||
}
|
||||
|
||||
_fit() {
|
||||
if (!this._canvas) return;
|
||||
// PPTX export sets noscale so the DOM capture sees authored-size
|
||||
// geometry — the scaled canvas is in shadow DOM, so the exporter's
|
||||
// resetTransformSelector can't reach .canvas.style.transform directly.
|
||||
if (this.hasAttribute('noscale')) {
|
||||
this._canvas.style.transform = 'none';
|
||||
return;
|
||||
}
|
||||
const vw = window.innerWidth;
|
||||
const vh = window.innerHeight;
|
||||
const s = Math.min(vw / this.designWidth, vh / this.designHeight);
|
||||
this._canvas.style.transform = `scale(${s})`;
|
||||
}
|
||||
|
||||
_onResize() { this._fit(); }
|
||||
|
||||
_onMouseMove() {
|
||||
// Keep overlay visible while mouse moves; hide after idle.
|
||||
this._flashOverlay();
|
||||
}
|
||||
|
||||
_onTapBack(e) {
|
||||
e.preventDefault();
|
||||
this._go(this._index - 1, 'tap');
|
||||
}
|
||||
|
||||
_onTapForward(e) {
|
||||
e.preventDefault();
|
||||
this._go(this._index + 1, 'tap');
|
||||
}
|
||||
|
||||
_onKey(e) {
|
||||
// Ignore when the user is typing.
|
||||
const t = e.target;
|
||||
if (t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName))) return;
|
||||
if (e.metaKey || e.ctrlKey || e.altKey) return;
|
||||
|
||||
const key = e.key;
|
||||
let handled = true;
|
||||
|
||||
if (key === 'ArrowRight' || key === 'PageDown' || key === ' ' || key === 'Spacebar') {
|
||||
this._go(this._index + 1, 'keyboard');
|
||||
} else if (key === 'ArrowLeft' || key === 'PageUp') {
|
||||
this._go(this._index - 1, 'keyboard');
|
||||
} else if (key === 'Home') {
|
||||
this._go(0, 'keyboard');
|
||||
} else if (key === 'End') {
|
||||
this._go(this._slides.length - 1, 'keyboard');
|
||||
} else if (key === 'r' || key === 'R') {
|
||||
this._go(0, 'keyboard');
|
||||
} else if (/^[0-9]$/.test(key)) {
|
||||
// 1..9 jump to that slide; 0 jumps to 10.
|
||||
const n = key === '0' ? 9 : parseInt(key, 10) - 1;
|
||||
if (n < this._slides.length) this._go(n, 'keyboard');
|
||||
} else {
|
||||
handled = false;
|
||||
}
|
||||
|
||||
if (handled) {
|
||||
e.preventDefault();
|
||||
this._flashOverlay();
|
||||
}
|
||||
}
|
||||
|
||||
_go(i, reason = 'api') {
|
||||
if (!this._slides.length) return;
|
||||
const clamped = Math.max(0, Math.min(this._slides.length - 1, i));
|
||||
if (clamped === this._index) {
|
||||
this._flashOverlay();
|
||||
return;
|
||||
}
|
||||
this._index = clamped;
|
||||
this._applyIndex({ showOverlay: true, broadcast: true, reason });
|
||||
}
|
||||
|
||||
// Public API ------------------------------------------------------------
|
||||
|
||||
/** Current slide index (0-based). */
|
||||
get index() { return this._index; }
|
||||
/** Total slide count. */
|
||||
get length() { return this._slides.length; }
|
||||
/** Programmatically navigate. */
|
||||
goTo(i) { this._go(i, 'api'); }
|
||||
next() { this._go(this._index + 1, 'api'); }
|
||||
prev() { this._go(this._index - 1, 'api'); }
|
||||
reset() { this._go(0, 'api'); }
|
||||
}
|
||||
|
||||
if (!customElements.get('deck-stage')) {
|
||||
customElements.define('deck-stage', DeckStage);
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,737 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Editorial Deck Template</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<script src="deck-stage.js"></script>
|
||||
<style>
|
||||
:root{
|
||||
--pink:#F2B6C6;
|
||||
--pink-deep:#F2B6C6;
|
||||
--cream:#F2D86A;
|
||||
--navy:#7A1F35;
|
||||
--forest:#7A1F35;
|
||||
--burgundy:#7A1F35;
|
||||
--lime:#F2D86A;
|
||||
--sky:#F2B6C6;
|
||||
--terracotta:#F2D86A;
|
||||
--butter:#F2D86A;
|
||||
--ink:#7A1F35;
|
||||
}
|
||||
html, body { margin:0; padding:0; background:#7A1F35; }
|
||||
body { font-family: "Bricolage Grotesque", sans-serif; color: var(--ink); }
|
||||
|
||||
deck-stage section {
|
||||
width:1920px; height:1080px;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.mono { font-family:"JetBrains Mono", monospace; }
|
||||
.serif { font-family:"Instrument Serif", serif; font-style: italic; font-weight:400; }
|
||||
.grotesk { font-family:"Bricolage Grotesque", sans-serif; }
|
||||
|
||||
.pill {
|
||||
display:inline-flex; align-items:center; justify-content:center;
|
||||
padding: 0.35em 0.9em;
|
||||
border-radius: 999px;
|
||||
font-family:"Bricolage Grotesque", sans-serif;
|
||||
font-weight:500;
|
||||
line-height:1;
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-family:"JetBrains Mono", monospace;
|
||||
font-size:24px;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position:absolute; left:64px; right:64px; bottom:36px;
|
||||
display:flex; justify-content:space-between; align-items:center;
|
||||
font-family:"JetBrains Mono", monospace;
|
||||
font-size:16px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
opacity:0.75;
|
||||
}
|
||||
.footer .dotrow { display:flex; gap:8px; }
|
||||
.footer .dotrow i { width:8px; height:8px; border-radius:999px; background: currentColor; opacity:0.3; display:inline-block; }
|
||||
.footer .dotrow i.on { opacity:1; }
|
||||
|
||||
/* ========== SLIDE 1: COVER ========== */
|
||||
.s-cover { background: var(--pink); color: var(--ink); }
|
||||
.s-cover .pill-cluster {
|
||||
position:absolute;
|
||||
top:120px; left:64px; right:64px;
|
||||
display:flex; flex-wrap:wrap; gap: 22px;
|
||||
max-width: 1500px;
|
||||
}
|
||||
.s-cover .pill-cluster .pill { font-size: 44px; padding: 16px 38px; }
|
||||
.s-cover .wordmark {
|
||||
position:absolute;
|
||||
left:64px; right:64px; bottom:80px;
|
||||
font-family:"Bricolage Grotesque", sans-serif;
|
||||
font-weight:800;
|
||||
font-size: 300px;
|
||||
line-height: 0.82;
|
||||
letter-spacing:-0.04em;
|
||||
color: var(--burgundy);
|
||||
display:flex;
|
||||
align-items:flex-end;
|
||||
flex-wrap:nowrap;
|
||||
}
|
||||
.s-cover .wordmark .amp { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; font-stretch:normal; }
|
||||
.s-cover .meta {
|
||||
position:absolute; top:64px; left:64px; right:64px;
|
||||
display:flex; justify-content:space-between;
|
||||
font-family:"JetBrains Mono", monospace;
|
||||
font-size:24px; letter-spacing:0.15em; text-transform:uppercase;
|
||||
}
|
||||
|
||||
/* ========== SLIDE 2: MANIFESTO ========== */
|
||||
.s-manifesto { background: var(--cream); color: var(--ink); display:grid; grid-template-columns: 1fr 1fr; }
|
||||
.s-manifesto .left { padding: 96px 64px; display:flex; flex-direction:column; justify-content:space-between; }
|
||||
.s-manifesto .right {
|
||||
background: var(--forest); color: var(--cream);
|
||||
padding: 96px 80px;
|
||||
display:flex; flex-direction:column; justify-content:space-between;
|
||||
position:relative;
|
||||
}
|
||||
.s-manifesto .chapter {
|
||||
font-family:"Instrument Serif", serif; font-style:italic;
|
||||
font-size: 240px; line-height:0.9;
|
||||
color: var(--burgundy);
|
||||
}
|
||||
.s-manifesto .chapter sup { font-size: 0.35em; vertical-align: super; opacity:0.6; }
|
||||
.s-manifesto .lede {
|
||||
font-family:"Bricolage Grotesque", sans-serif;
|
||||
font-size: 56px; line-height:1.05;
|
||||
font-weight:500; letter-spacing:-0.02em;
|
||||
max-width: 720px;
|
||||
}
|
||||
.s-manifesto .lede em { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color:var(--terracotta); }
|
||||
.s-manifesto .right h3 {
|
||||
font-family:"JetBrains Mono", monospace;
|
||||
font-size: 24px; letter-spacing:0.18em; text-transform:uppercase;
|
||||
margin: 0 0 32px; color: var(--butter); font-weight:500;
|
||||
}
|
||||
.s-manifesto .right p {
|
||||
font-size: 28px; line-height:1.45; max-width:540px; margin:0 0 24px;
|
||||
}
|
||||
.s-manifesto .right .signature {
|
||||
font-family:"Instrument Serif", serif; font-style:italic;
|
||||
font-size: 64px; line-height:1;
|
||||
color: var(--lime);
|
||||
}
|
||||
|
||||
/* ========== SLIDE 3: GRID OF VALUES ========== */
|
||||
.s-grid { background: var(--pink); padding: 72px 64px 80px; }
|
||||
.s-grid h2 {
|
||||
margin:0 0 32px; font-size: 76px; line-height:1;
|
||||
font-family:"Bricolage Grotesque", sans-serif; font-weight:700;
|
||||
letter-spacing:-0.02em; color: var(--burgundy);
|
||||
max-width: 1100px;
|
||||
}
|
||||
.s-grid h2 em { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color: var(--navy); }
|
||||
.s-grid .grid {
|
||||
display:grid; grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
.s-grid .card {
|
||||
border-radius: 28px;
|
||||
padding: 28px 28px 30px;
|
||||
height: 340px;
|
||||
display:flex; flex-direction:column; justify-content:space-between;
|
||||
position:relative; overflow:hidden;
|
||||
}
|
||||
.s-grid .card .num {
|
||||
font-family:"JetBrains Mono", monospace;
|
||||
font-size: 24px; letter-spacing:0.15em;
|
||||
opacity:0.7;
|
||||
}
|
||||
.s-grid .card h4 {
|
||||
font-size: 40px; line-height:1; margin: 0;
|
||||
font-weight:600; letter-spacing:-0.02em;
|
||||
}
|
||||
.s-grid .card p { font-size: 24px; line-height:1.4; margin:0; opacity:0.85; }
|
||||
.s-grid .c1, .s-grid .c3, .s-grid .c5, .s-grid .c7 { background: var(--burgundy); color: var(--butter); }
|
||||
.s-grid .c2, .s-grid .c4, .s-grid .c6, .s-grid .c8 { background: var(--butter); color: var(--burgundy); }
|
||||
|
||||
/* ========== SLIDE 4: BIG STAT / EDITORIAL ========== */
|
||||
.s-stat { background: var(--burgundy); color: var(--cream); padding: 96px 64px; position:relative; }
|
||||
.s-stat .toprow { display:flex; justify-content:space-between; align-items:flex-start; }
|
||||
.s-stat .kicker { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.18em; text-transform:uppercase; color: var(--butter); }
|
||||
.s-stat .swatches { display:flex; gap:10px; }
|
||||
.s-stat .swatches i { width:36px; height:36px; border-radius:999px; display:block; }
|
||||
.s-stat .figure {
|
||||
margin-top: 20px;
|
||||
font-family:"Bricolage Grotesque", sans-serif;
|
||||
font-weight:700;
|
||||
font-size: 540px;
|
||||
line-height: 0.78;
|
||||
letter-spacing: -0.06em;
|
||||
color: var(--pink);
|
||||
display:flex; align-items:flex-start;
|
||||
}
|
||||
.s-stat .figure .pct { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; font-size:220px; color: var(--lime); margin-top: 60px; margin-left: 20px; }
|
||||
.s-stat .breakdown {
|
||||
position:absolute; right:64px; bottom:80px;
|
||||
width: 600px;
|
||||
}
|
||||
.s-stat .breakdown .row {
|
||||
display:grid; grid-template-columns: 150px 1fr 90px;
|
||||
gap: 16px; align-items:center; padding: 14px 0;
|
||||
border-top: 1px solid rgba(246,237,220,0.25);
|
||||
font-size: 24px;
|
||||
}
|
||||
.s-stat .breakdown .row:last-child { border-bottom: 1px solid rgba(246,237,220,0.25); }
|
||||
.s-stat .breakdown .row .lbl { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.7; }
|
||||
.s-stat .breakdown .row .bar { height:10px; border-radius:999px; background: rgba(246,237,220,0.15); position:relative; overflow:hidden; }
|
||||
.s-stat .breakdown .row .bar i { display:block; height:100%; border-radius:999px; }
|
||||
.s-stat .breakdown .row .val { font-family:"JetBrains Mono", monospace; font-size:24px; text-align:right; }
|
||||
|
||||
/* ========== SLIDE 5: TIMELINE ========== */
|
||||
.s-timeline { background: var(--butter); padding: 96px 80px; }
|
||||
.s-timeline .head { display:flex; justify-content:space-between; align-items:flex-start; gap: 48px; margin-bottom: 48px; }
|
||||
.s-timeline .head h2 {
|
||||
margin:0; font-size: 76px; line-height:0.95;
|
||||
font-weight:700; letter-spacing:-0.02em; color: var(--burgundy);
|
||||
max-width: 1100px;
|
||||
}
|
||||
.s-timeline .head h2 em { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color: var(--burgundy); }
|
||||
.s-timeline .head .meta { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.15em; text-transform:uppercase; text-align:right; line-height:1.5; color: var(--burgundy); flex-shrink:0; }
|
||||
.s-timeline .head .meta span { display:block; opacity:0.55; margin-top: 4px; }
|
||||
.s-timeline .track {
|
||||
position:relative;
|
||||
padding: 60px 0 40px;
|
||||
}
|
||||
.s-timeline .axis {
|
||||
position:absolute; left:0; right:0; top: 110px;
|
||||
height: 4px; background: var(--ink); opacity:0.15;
|
||||
}
|
||||
.s-timeline .stops {
|
||||
display:grid; grid-template-columns: repeat(5, 1fr);
|
||||
gap: 24px; position:relative;
|
||||
}
|
||||
.s-timeline .stop { position:relative; padding-top: 90px; }
|
||||
.s-timeline .stop .dot {
|
||||
position:absolute; top: 90px; left: 0;
|
||||
width: 28px; height: 28px; border-radius: 999px;
|
||||
transform: translateY(-50%);
|
||||
border: 4px solid var(--butter);
|
||||
background: var(--burgundy);
|
||||
display: none;
|
||||
}
|
||||
.s-timeline .stop .yr {
|
||||
font-family:"Instrument Serif", serif; font-style:italic;
|
||||
font-size: 56px; line-height:1; margin-bottom: 12px;
|
||||
color: var(--burgundy);
|
||||
}
|
||||
.s-timeline .stop h5 {
|
||||
margin:0 0 12px; font-size:28px; font-weight:600; letter-spacing:-0.01em; color: var(--burgundy);
|
||||
}
|
||||
.s-timeline .stop p { margin:0; font-size:24px; line-height:1.45; color: var(--burgundy); opacity:0.8; }
|
||||
|
||||
.s-timeline .ribbon {
|
||||
margin-top: 56px;
|
||||
background: var(--burgundy); color: var(--butter);
|
||||
border-radius: 999px;
|
||||
padding: 24px 44px;
|
||||
display:flex; justify-content:space-between; align-items:center;
|
||||
font-family:"JetBrains Mono", monospace; font-size: 24px; letter-spacing:0.15em; text-transform:uppercase;
|
||||
}
|
||||
.s-timeline .ribbon strong { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; font-size:30px; letter-spacing:0; text-transform:none; color: var(--pink); }
|
||||
|
||||
/* ========== SLIDE 6: CHART ========== */
|
||||
.s-chart { background: var(--navy); color: var(--cream); padding: 88px 64px; display:grid; grid-template-columns: 1.1fr 1fr; gap:64px; }
|
||||
.s-chart .l h2 {
|
||||
margin:0 0 24px; font-size: 84px; line-height:0.95;
|
||||
font-weight:700; letter-spacing:-0.02em;
|
||||
}
|
||||
.s-chart .l h2 em { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color: var(--butter); }
|
||||
.s-chart .l .lede { font-size: 24px; line-height:1.5; max-width: 640px; opacity:0.85; }
|
||||
.s-chart .l .legend {
|
||||
margin-top: 56px;
|
||||
display:flex; flex-direction:column; gap: 16px;
|
||||
}
|
||||
.s-chart .l .legend .item { display:flex; align-items:center; gap: 14px; font-size:24px; }
|
||||
.s-chart .l .legend .item i { width:14px; height:14px; border-radius:4px; display:block; }
|
||||
.s-chart .l .legend .item .cat { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.7; margin-left:auto; }
|
||||
.s-chart .r {
|
||||
background: var(--cream); color: var(--ink);
|
||||
border-radius: 32px;
|
||||
padding: 48px 48px 56px;
|
||||
display:flex; flex-direction:column;
|
||||
position:relative;
|
||||
}
|
||||
.s-chart .r .head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 32px; }
|
||||
.s-chart .r .head .ttl { font-family:"Instrument Serif", serif; font-style:italic; font-size: 40px; }
|
||||
.s-chart .r .head .unit { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.6; }
|
||||
.s-chart svg.chart { width:100%; flex:0 0 auto; max-height: 480px; }
|
||||
.s-chart .r .xax { display:grid; grid-template-columns: repeat(6, 1fr); margin-top: 12px; font-family:"JetBrains Mono", monospace; font-size:24px; opacity:0.6; letter-spacing:0.1em; }
|
||||
|
||||
/* ========== SLIDE 7: QUOTE / EDITORIAL SPLIT ========== */
|
||||
.s-quote { background: var(--lime); color: var(--ink); padding: 0; display:grid; grid-template-columns: 0.95fr 1fr; }
|
||||
.s-quote .l { padding: 80px 56px 80px 80px; display:flex; flex-direction:column; justify-content:space-between; gap: 24px; position:relative; }
|
||||
.s-quote .l .top { display:flex; flex-direction:column; gap: 12px; }
|
||||
.s-quote .l .mark { font-family:"Instrument Serif", serif; font-style:italic; font-size: 200px; line-height:0.6; color: var(--burgundy); margin: 80px 0 0 0; }
|
||||
.s-quote .l blockquote {
|
||||
margin: 0;
|
||||
font-family:"Instrument Serif", serif; font-style:italic;
|
||||
font-size: 64px; line-height:1.1;
|
||||
color: var(--ink);
|
||||
max-width: 760px;
|
||||
}
|
||||
.s-quote .l blockquote b { font-family:"Bricolage Grotesque", sans-serif; font-style:normal; font-weight:600; color: var(--burgundy); }
|
||||
.s-quote .l .attribution { display:flex; align-items:center; gap:20px; }
|
||||
.s-quote .l .avatar { width:72px; height:72px; border-radius:999px; background: var(--burgundy); border:3px solid var(--burgundy); }
|
||||
.s-quote .l .who { font-size:26px; font-weight:600; }
|
||||
.s-quote .l .who small { display:block; font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.65; font-weight:400; margin-top:4px; }
|
||||
.s-quote .r {
|
||||
background: var(--burgundy); color: var(--butter);
|
||||
padding: 96px 80px;
|
||||
display:flex; flex-direction:column; gap: 28px;
|
||||
position:relative;
|
||||
}
|
||||
.s-quote .r h3 { margin:0; font-size: 56px; font-weight:600; line-height:1; letter-spacing:-0.02em; }
|
||||
.s-quote .r .endorsements { display:flex; flex-direction:column; gap: 20px; margin-top: 8px; }
|
||||
.s-quote .r .endorsements .row {
|
||||
display:grid; grid-template-columns: 80px 1fr;
|
||||
gap: 20px; align-items:center;
|
||||
padding: 20px 0; border-top: 1px solid rgba(246,237,220,0.3);
|
||||
}
|
||||
.s-quote .r .endorsements .row:last-child { border-bottom: 1px solid rgba(246,237,220,0.3); }
|
||||
.s-quote .r .endorsements .num { font-family:"Instrument Serif", serif; font-style:italic; font-size: 56px; line-height:1; color: var(--pink); }
|
||||
.s-quote .r .endorsements .txt { font-size: 26px; line-height:1.4; }
|
||||
.s-quote .r .endorsements .txt strong { font-weight:600; display:block; margin-bottom: 4px; }
|
||||
|
||||
/* ========== SLIDE 8: CLOSER / INDEX ========== */
|
||||
.s-closer { background: var(--ink); color: var(--cream); padding: 96px 64px; position:relative; }
|
||||
.s-closer .top { display:flex; justify-content:space-between; align-items:flex-start; }
|
||||
.s-closer .top .kicker { font-family:"JetBrains Mono", monospace; font-size:24px; letter-spacing:0.18em; text-transform:uppercase; color: var(--lime); }
|
||||
.s-closer .big {
|
||||
margin-top: 40px;
|
||||
font-family:"Bricolage Grotesque", sans-serif;
|
||||
font-weight:700;
|
||||
font-size: 320px;
|
||||
line-height: 0.82;
|
||||
letter-spacing: -0.05em;
|
||||
color: var(--pink);
|
||||
max-width: 800px;
|
||||
}
|
||||
.s-closer .big em { display:inline-block; margin-left: -20px; }
|
||||
.s-closer .big em { font-family:"Instrument Serif", serif; font-style:italic; font-weight:400; color: var(--butter); }
|
||||
.s-closer .grid {
|
||||
position:absolute; left:64px; right:64px; bottom: 120px;
|
||||
display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
|
||||
}
|
||||
.s-closer .grid .col h6 {
|
||||
margin: 0 0 16px;
|
||||
font-family:"JetBrains Mono", monospace;
|
||||
font-size:24px; letter-spacing:0.15em; text-transform:uppercase;
|
||||
color: var(--lime); font-weight:500;
|
||||
}
|
||||
.s-closer .grid .col p { margin:0; font-size: 24px; line-height:1.45; }
|
||||
.s-closer .grid .col p + p { margin-top: 8px; }
|
||||
.s-closer .corner-pills {
|
||||
position:absolute; right:64px; top: 200px;
|
||||
display:flex; flex-direction:column; gap: 12px; align-items:flex-end;
|
||||
}
|
||||
.s-closer .corner-pills .pill { font-size:22px; padding: 10px 24px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<deck-stage>
|
||||
|
||||
<!-- ============ SLIDE 1: COVER ============ -->
|
||||
<section class="s-cover" data-screen-label="01 Cover">
|
||||
<div class="meta">
|
||||
<span>Vol. 04 — Editorial Brief</span>
|
||||
<span>Spring / Summer Edition</span>
|
||||
<span>FW · 2026</span>
|
||||
</div>
|
||||
|
||||
<div class="pill-cluster">
|
||||
<span class="pill" style="background:var(--burgundy); color:var(--pink)">focus</span>
|
||||
<span class="pill" style="background:var(--butter); color:var(--burgundy)">tech-equipped</span>
|
||||
<span class="pill" style="background:var(--burgundy); color:var(--butter)">creativity</span>
|
||||
<span class="pill" style="background:var(--butter); color:var(--burgundy)">coffee</span>
|
||||
<span class="pill" style="background:var(--burgundy); color:var(--pink)">community</span>
|
||||
<span class="pill" style="background:var(--butter); color:var(--burgundy)">coworking</span>
|
||||
<span class="pill" style="background:var(--burgundy); color:var(--butter)">productivity</span>
|
||||
<span class="pill" style="background:var(--butter); color:var(--burgundy)">inspiration</span>
|
||||
<span class="pill" style="background:var(--burgundy); color:var(--pink)">flexible</span>
|
||||
<span class="pill" style="background:var(--butter); color:var(--burgundy)">workshops</span>
|
||||
<span class="pill" style="background:var(--burgundy); color:var(--butter)">collaboration</span>
|
||||
<span class="pill" style="background:var(--butter); color:var(--burgundy)">studio</span>
|
||||
</div>
|
||||
|
||||
<div class="wordmark">
|
||||
<span>Studio</span>
|
||||
<span class="amp" style="color:var(--butter); margin: 0 24px 24px;">&</span>
|
||||
<span>Salon</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ SLIDE 2: MANIFESTO ============ -->
|
||||
<section class="s-manifesto" data-screen-label="02 Manifesto">
|
||||
<div class="left">
|
||||
<div>
|
||||
<div class="label" style="margin-bottom:32px; color: var(--burgundy);">Chapter One · Manifesto</div>
|
||||
<div class="chapter">01<sup></sup></div>
|
||||
</div>
|
||||
<div class="lede">
|
||||
Placeholder lede sets the tone for the whole document. A short, declarative sentence followed by an <em>aside in italic</em> that carries the warmth.
|
||||
</div>
|
||||
<div class="mono" style="font-size:24px; letter-spacing:0.12em; opacity:0.6; text-transform:uppercase;">Page 002 / 016 · Read Time 04:30</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div>
|
||||
<h3>An opening note</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
|
||||
<p>Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="signature">— with warmth,</div>
|
||||
<div style="font-family:'JetBrains Mono', monospace; font-size:24px; letter-spacing:0.18em; text-transform:uppercase; margin-top: 12px; color: var(--butter);">The Editorial Desk</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ SLIDE 3: VALUES GRID ============ -->
|
||||
<section class="s-grid" data-screen-label="03 Principles">
|
||||
<div style="display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 24px;">
|
||||
<h2>Eight principles, <em>loosely held.</em></h2>
|
||||
<div class="mono" style="font-size:24px; letter-spacing:0.15em; text-transform:uppercase; color: var(--burgundy);">§ 03 — Principles</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="card c1">
|
||||
<div class="num">/ 01</div>
|
||||
<h4>Slow looking</h4>
|
||||
<p>A short paragraph describing the principle in plain language. Two sentences is plenty.</p>
|
||||
</div>
|
||||
<div class="card c2">
|
||||
<div class="num">/ 02</div>
|
||||
<h4>Open kitchen</h4>
|
||||
<p>Process in public. Show the seams, the sketches, the half-formed thoughts before they harden.</p>
|
||||
</div>
|
||||
<div class="card c3">
|
||||
<div class="num">/ 03</div>
|
||||
<h4>Borrowed light</h4>
|
||||
<p>Cite generously. The best ideas always belong to a lineage; name the room you walked into.</p>
|
||||
</div>
|
||||
<div class="card c4">
|
||||
<div class="num">/ 04</div>
|
||||
<h4>Quiet defaults</h4>
|
||||
<p>Restraint as a posture. Loud only when the moment earns it; otherwise, a soft shoulder.</p>
|
||||
</div>
|
||||
<div class="card c5">
|
||||
<div class="num">/ 05</div>
|
||||
<h4>Fewer, finer</h4>
|
||||
<p>Pare back the pile. Three considered objects beat thirty hurried ones, every single time.</p>
|
||||
</div>
|
||||
<div class="card c6">
|
||||
<div class="num">/ 06</div>
|
||||
<h4>Generous edges</h4>
|
||||
<p>Margins are mercy. Leave white space for the reader to breathe and bring their own.</p>
|
||||
</div>
|
||||
<div class="card c7">
|
||||
<div class="num">/ 07</div>
|
||||
<h4>Hand in it</h4>
|
||||
<p>A trace of the maker, on purpose. Polish should never quite hide the fingerprints.</p>
|
||||
</div>
|
||||
<div class="card c8">
|
||||
<div class="num">/ 08</div>
|
||||
<h4>To be added</h4>
|
||||
<p>A placeholder principle, awaiting the next conversation. The list is not yet finished.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ SLIDE 4: BIG STAT ============ -->
|
||||
<section class="s-stat" data-screen-label="04 Headline figure">
|
||||
<div class="toprow">
|
||||
<div>
|
||||
<div class="kicker">§ 04 — Headline Figure</div>
|
||||
<div class="serif" style="font-size: 48px; margin-top: 16px; color: var(--pink);">A portrait, in numbers.</div>
|
||||
</div>
|
||||
<div class="swatches">
|
||||
<i style="background:var(--pink)"></i>
|
||||
<i style="background:var(--lime)"></i>
|
||||
<i style="background:var(--butter)"></i>
|
||||
<i style="background:var(--terracotta)"></i>
|
||||
<i style="background:var(--sky)"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="figure" style="margin-left:0px; max-width: 900px;">
|
||||
<span>72</span><span class="pct">%</span>
|
||||
</div>
|
||||
<div style="position:absolute; left:64px; bottom:80px; max-width: 900px;">
|
||||
<div class="kicker" style="color:var(--butter);">What this measures</div>
|
||||
<p style="font-size:24px; line-height:1.45; margin-top:18px; opacity:0.9;">Placeholder annotation. A short, candid sentence about what the figure means and, more importantly, what it doesn't. Survey of n=842, fielded in placeholder month, weighted to placeholder population.</p>
|
||||
</div>
|
||||
|
||||
<div class="breakdown">
|
||||
<div class="kicker" style="margin-bottom:12px;">Composition</div>
|
||||
<div class="row">
|
||||
<span class="lbl">Segment A</span>
|
||||
<span class="bar"><i style="width:82%; background:var(--lime)"></i></span>
|
||||
<span class="val">82.4</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="lbl">Segment B</span>
|
||||
<span class="bar"><i style="width:64%; background:var(--butter)"></i></span>
|
||||
<span class="val">63.9</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="lbl">Segment C</span>
|
||||
<span class="bar"><i style="width:48%; background:var(--terracotta)"></i></span>
|
||||
<span class="val">48.1</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="lbl">Segment D</span>
|
||||
<span class="bar"><i style="width:31%; background:var(--sky)"></i></span>
|
||||
<span class="val">31.0</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ SLIDE 5: TIMELINE ============ -->
|
||||
<section class="s-timeline" data-screen-label="05 Trajectory">
|
||||
<div class="head">
|
||||
<h2>A short trajectory, <em>told in five stops.</em></h2>
|
||||
<div class="meta">
|
||||
§ 05 — Trajectory<br/>
|
||||
<span style="opacity:0.5;">2019 → present</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="track">
|
||||
<div class="axis"></div>
|
||||
<div class="stops">
|
||||
<div class="stop">
|
||||
<span class="dot"></span>
|
||||
<div class="yr">'19</div>
|
||||
<h5>The first prototype</h5>
|
||||
<p>A short caption per milestone, written in plain prose. One observation, one consequence.</p>
|
||||
</div>
|
||||
<div class="stop">
|
||||
<span class="dot"></span>
|
||||
<div class="yr">'21</div>
|
||||
<h5>Quiet expansion</h5>
|
||||
<p>Placeholder copy describing a turning point. Keep the writing concrete, never abstract.</p>
|
||||
</div>
|
||||
<div class="stop">
|
||||
<span class="dot"></span>
|
||||
<div class="yr">'23</div>
|
||||
<h5>A new house style</h5>
|
||||
<p>Type, color, voice — re-cast around a single editorial premise; everything else followed.</p>
|
||||
</div>
|
||||
<div class="stop">
|
||||
<span class="dot"></span>
|
||||
<div class="yr">'25</div>
|
||||
<h5>The salon, formalized</h5>
|
||||
<p>Monthly gatherings became a fixture, then a discipline, then the work's center of gravity.</p>
|
||||
</div>
|
||||
<div class="stop">
|
||||
<span class="dot"></span>
|
||||
<div class="yr">'26</div>
|
||||
<h5>Where we sit now</h5>
|
||||
<p>Present tense. A brief, honest description of the shape of the practice today, in two breaths.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ribbon">
|
||||
<span>Next chapter loading</span>
|
||||
<strong>— and the work continues, gently.</strong>
|
||||
<span>Vol. 05 / Autumn</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ SLIDE 6: CHART ============ -->
|
||||
<section class="s-chart" data-screen-label="06 Composition">
|
||||
<div class="l">
|
||||
<div class="label" style="color:var(--butter); margin-bottom: 20px;">§ 06 — Composition</div>
|
||||
<h2>How the days <em>arrange themselves.</em></h2>
|
||||
<p class="lede">A placeholder description for the chart on the right. Speak to the shape of the data — what rises, what plateaus — not the precise figures. Methodology and a one-line caveat live at the bottom.</p>
|
||||
<div class="legend">
|
||||
<div class="item"><i style="background:var(--pink); border:1px solid var(--burgundy);"></i> Studio hours, deep work <span class="cat">Series A</span></div>
|
||||
<div class="item"><i style="background:var(--butter); border:2px solid var(--burgundy); border-radius:999px;"></i> Salon & conversation <span class="cat">Series B</span></div>
|
||||
<div class="item"><i style="background:var(--burgundy);"></i> Reading, drift, walking <span class="cat">Series C</span></div>
|
||||
<div class="item"><i style="background:transparent; border-top: 3px dotted var(--butter); border-radius:0; height: 0;"></i> Correspondence, admin <span class="cat">Series D</span></div>
|
||||
</div>
|
||||
<div class="mono" style="margin-top: 40px; font-size:24px; letter-spacing:0.1em; text-transform:uppercase; opacity:0.5;">Source: internal logs · self-reported · n = 24 weeks</div>
|
||||
</div>
|
||||
<div class="r">
|
||||
<div class="head">
|
||||
<span class="ttl">Hours per week, by mode</span>
|
||||
<span class="unit">Hrs / wk</span>
|
||||
</div>
|
||||
<svg class="chart" viewBox="0 0 720 380" preserveAspectRatio="none">
|
||||
<!-- gridlines -->
|
||||
<g stroke="#7A1F35" stroke-opacity="0.15" stroke-width="1">
|
||||
<line x1="60" y1="40" x2="720" y2="40" />
|
||||
<line x1="60" y1="125" x2="720" y2="125" />
|
||||
<line x1="60" y1="210" x2="720" y2="210" />
|
||||
<line x1="60" y1="295" x2="720" y2="295" />
|
||||
<line x1="60" y1="380" x2="720" y2="380" />
|
||||
</g>
|
||||
<!-- y labels -->
|
||||
<g font-family="JetBrains Mono, monospace" font-size="24" fill="#7A1F35" fill-opacity="0.6">
|
||||
<text x="0" y="48">40</text>
|
||||
<text x="0" y="133">30</text>
|
||||
<text x="0" y="218">20</text>
|
||||
<text x="0" y="303">10</text>
|
||||
<text x="8" y="380">0</text>
|
||||
</g>
|
||||
|
||||
<!-- Series A (pink area, burgundy stroke) -->
|
||||
<path d="M 60 230 Q 120 200 180 180 T 300 145 T 420 120 T 540 100 T 660 80 L 660 380 L 60 380 Z"
|
||||
fill="#F2B6C6" fill-opacity="0.85"/>
|
||||
<path d="M 60 230 Q 120 200 180 180 T 300 145 T 420 120 T 540 100 T 660 80"
|
||||
fill="none" stroke="#7A1F35" stroke-width="3"/>
|
||||
|
||||
<!-- Series C bars (burgundy, dark on yellow) -->
|
||||
<g fill="#7A1F35">
|
||||
<rect x="80" y="320" width="22" height="60" rx="4"/>
|
||||
<rect x="190" y="300" width="22" height="80" rx="4"/>
|
||||
<rect x="300" y="285" width="22" height="95" rx="4"/>
|
||||
<rect x="410" y="275" width="22" height="105" rx="4"/>
|
||||
<rect x="520" y="260" width="22" height="120" rx="4"/>
|
||||
<rect x="630" y="245" width="22" height="135" rx="4"/>
|
||||
</g>
|
||||
|
||||
<!-- Series B (yellow circles + burgundy line) -->
|
||||
<path d="M 90 280 L 200 250 L 310 235 L 420 215 L 530 200 L 640 175"
|
||||
fill="none" stroke="#7A1F35" stroke-width="3"/>
|
||||
<g fill="#F2D86A" stroke="#7A1F35" stroke-width="3">
|
||||
<circle cx="90" cy="280" r="8"/>
|
||||
<circle cx="200" cy="250" r="8"/>
|
||||
<circle cx="310" cy="235" r="8"/>
|
||||
<circle cx="420" cy="215" r="8"/>
|
||||
<circle cx="530" cy="200" r="8"/>
|
||||
<circle cx="640" cy="175" r="8"/>
|
||||
</g>
|
||||
|
||||
<!-- Series D (burgundy dotted) -->
|
||||
<path d="M 90 350 L 200 345 L 310 348 L 420 338 L 530 340 L 640 332"
|
||||
fill="none" stroke="#7A1F35" stroke-width="3" stroke-dasharray="2 10" stroke-linecap="round" stroke-opacity="0.6"/>
|
||||
</svg>
|
||||
<div class="xax">
|
||||
<span>W·01</span><span>W·05</span><span>W·09</span><span>W·13</span><span>W·17</span><span>W·24</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ SLIDE 7: QUOTE / SPLIT ============ -->
|
||||
<section class="s-quote" data-screen-label="07 In their words">
|
||||
<div class="l">
|
||||
<div class="top">
|
||||
<div class="mono" style="font-size:24px; letter-spacing:0.18em; text-transform:uppercase; color: var(--burgundy);">§ 07 — In their words</div>
|
||||
<div class="mark">“</div>
|
||||
</div>
|
||||
<blockquote>
|
||||
A placeholder pull-quote, set in italic with one phrase rendered as <b>bold sans</b> for emphasis, the way good editorial designers have always done it.
|
||||
</blockquote>
|
||||
<div class="attribution">
|
||||
<div class="avatar"></div>
|
||||
<div class="who">
|
||||
A. Placeholder-Surname
|
||||
<small>Editor-at-large · Sister Publication</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="r">
|
||||
<div class="label" style="color: var(--butter);">Three short reads</div>
|
||||
<h3>Voices, lightly edited — from the readership.</h3>
|
||||
<div class="endorsements">
|
||||
<div class="row">
|
||||
<span class="num">i.</span>
|
||||
<div class="txt">
|
||||
<strong>On the rhythm</strong>
|
||||
A two-line testimonial that reads as if spoken aloud across a small kitchen table.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="num">ii.</span>
|
||||
<div class="txt">
|
||||
<strong>On the company</strong>
|
||||
Another short note, three or four beats long, useful and specific without being precious about it.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="num">iii.</span>
|
||||
<div class="txt">
|
||||
<strong>On returning</strong>
|
||||
A closing testimonial — the one that comes after the others have already convinced the reader.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ SLIDE 8: CLOSER / INDEX ============ -->
|
||||
<section class="s-closer" data-screen-label="08 Colophon">
|
||||
<div class="top">
|
||||
<div>
|
||||
<div class="kicker">§ 08 — Colophon & Index</div>
|
||||
<div class="serif" style="font-size:48px; color:var(--pink); margin-top:12px;">Until the next volume.</div>
|
||||
</div>
|
||||
<div class="mono" style="font-size:24px; letter-spacing:0.15em; text-transform:uppercase; opacity:0.7; text-align:right; line-height:1.4;">
|
||||
End of issue<br/>
|
||||
<span style="opacity:0.5;">No. 04 · 016 pp.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="big">
|
||||
Fin<em>.</em>
|
||||
</div>
|
||||
|
||||
<div class="corner-pills">
|
||||
<span class="pill" style="background:var(--burgundy); color:var(--cream); font-size:24px; padding: 12px 28px;">issue 04</span>
|
||||
<span class="pill" style="background:var(--lime); color:var(--ink); font-size:24px; padding: 12px 28px;">spring volume</span>
|
||||
<span class="pill" style="background:var(--butter); color:var(--ink); font-size:24px; padding: 12px 28px;">colophon</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col">
|
||||
<h6>Editorial</h6>
|
||||
<p>A. Placeholder</p>
|
||||
<p>B. Placeholder</p>
|
||||
<p>C. Placeholder</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h6>Type</h6>
|
||||
<p>Bricolage Grotesque</p>
|
||||
<p>Instrument Serif</p>
|
||||
<p>JetBrains Mono</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h6>Printed by</h6>
|
||||
<p>Placeholder Press</p>
|
||||
<p>City & State</p>
|
||||
<p>Recycled stock, 120gsm</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<h6>Correspondence</h6>
|
||||
<p>desk@placeholder.studio</p>
|
||||
<p>P.O. Box 0000</p>
|
||||
<p>Routing No. 04 / 26</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</deck-stage>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,43 @@
|
||||
{
|
||||
"slug": "editorial-tri-tone",
|
||||
"name": "Editorial Tri-Tone",
|
||||
"tagline": "Three-color editorial system: dusty pink, mustard cream, and deep burgundy, set in Bricolage + Instrument Serif.",
|
||||
"mood": [
|
||||
"editorial",
|
||||
"warm",
|
||||
"intentional",
|
||||
"moody"
|
||||
],
|
||||
"occasion": [
|
||||
"editorial / magazine pitch",
|
||||
"fashion brand deck",
|
||||
"lifestyle media",
|
||||
"literary / cultural",
|
||||
"art direction review"
|
||||
],
|
||||
"tone": [
|
||||
"literary",
|
||||
"warm",
|
||||
"considered",
|
||||
"stylish"
|
||||
],
|
||||
"formality": "medium-high",
|
||||
"density": "medium",
|
||||
"palette": {
|
||||
"pink": "#F2B6C6",
|
||||
"cream_yellow": "#F2D86A",
|
||||
"burgundy": "#7A1F35",
|
||||
"description": "dusty pink, mustard cream, and deep burgundy used as full-bleed color blocks; very high contrast tri-tone with no fourth color"
|
||||
},
|
||||
"typography": {
|
||||
"display": "Bricolage Grotesque",
|
||||
"serif": "Instrument Serif",
|
||||
"mono": "JetBrains Mono",
|
||||
"style": "expressive variable grotesk + literary serif + technical mono; magazine-page typographic system"
|
||||
},
|
||||
"scheme": "mixed",
|
||||
"best_for": "Anything that should feel like a fashion-magazine spread: editorial pitches, fashion brand decks, lifestyle media, art direction reviews. Equally good for any deck \u2014 including tech, research, or business \u2014 that wants tri-tone discipline and serif/sans contrast instead of the usual neutrals.",
|
||||
"avoid_for": "Decks that need to read as soft or comforting \u2014 the burgundy/pink/cream tri-tone is intentionally high-contrast and styled.",
|
||||
"slide_count": 8,
|
||||
"navigation": "deck-stage runtime (arrow keys, space, PgUp/PgDn, Home/End)"
|
||||
}
|
||||
Reference in New Issue
Block a user