thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

/art redesign: "The Story" editorial page (writeup + palette + frame + share)

Browse Source 
Rebuilt /art to CD's "The Story" hybrid: a warm-tan editorial card with the
Daily-Art purple accent. Left = guide write-up (kicker · title · attribution ·
the museum-guide blurb · Collection/Rights · View at The Met). Right = the framed
piece (our existing frame + thickness customizer, on one line each) on a deeper-
tan ground, then a divider, the "Colors in this piece" palette, and Share /
Download (Download gated on public-domain license; image is same-origin so it
just works). Self-hosted Space Mono for the curatorial micro-labels; Newsreader
display + Hanken UI like the rest of the hub.

Mobile: the left/right wrappers collapse (display:contents) so the blocks reflow
to head → artwork → writeup → controls — the art sits high, seen before it's read.
Kept HubBar, the Back button, and the fullscreen lightbox (incl. landscape rotate).
Save-to-account + framed-composite export deferred to Phase 2.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-23 20:22:06 -04:00
parent ed814c97b9
commit 5157c221ed
3 changed files with 174 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/art/+page.svelte
+172 -94
View File
@@ -41,9 +41,6 @@
else goto('/home3', { replaceState: true });
}
let who = $derived(
art ? [art.artist || 'Unknown artist', art.date_text].filter(Boolean) : []
);
// Woods are built from four real mitered rails (grain turns at the corners); metals/none aren't.
let isWood = $derived(['walnut', 'oak', 'mahogany'].includes(frame));
@@ -70,6 +67,30 @@
function saveThickness() {
try { localStorage.setItem('ub_art_thickness', String(thickness)); } catch { /* ignore */ }
}
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
let dateLabel = $derived.by(() => {
if (!art?.date) return '';
const [, m, d] = art.date.split('-').map(Number);
return MONTHS[m - 1] ? `${MONTHS[m - 1]} ${d}` : '';
});
// "Winslow Homer, 1865 — oil on canvas"
let attribution = $derived.by(() => {
if (!art) return '';
const who = [art.artist, art.date_text].filter(Boolean).join(', ');
return art.medium ? (who ? `${who} — ${art.medium}` : art.medium) : who;
});
let dlName = $derived(art ? `${(art.title || 'artwork').replace(/[^\w \-]+/g, '').trim()}.jpg` : 'artwork.jpg');
let copied = $state(false);
async function share() {
const url = art?.source_url || location.href;
try {
if (navigator.share) { await navigator.share({ title: art?.title || 'Daily Art', url }); return; }
await navigator.clipboard.writeText(url);
copied = true; setTimeout(() => (copied = false), 1800);
} catch { /* cancelled / unsupported — no-op */ }
}
</script>
<svelte:window onkeydown={onKey} />
@@ -96,59 +117,83 @@
</svg>
Back
</button>
<div class="intro">
<h1>Daily Art</h1>
<p>A masterwork a day, from the world's open collections.</p>
</div>
<div class="divider" aria-hidden="true"></div>
{#if state === 'ready'}
<figure class="piece">
<button class="frame frame--{frame}" style="--frame-scale:{thickness}"
onclick={() => (zoom = true)} aria-label="Expand artwork">
{#if isWood}{@render woodRails()}{/if}
<span class="mat">
<img src={art.image_url} alt={art.title}
onload={(e) => (landscape = e.currentTarget.naturalWidth > e.currentTarget.naturalHeight)} />
<span class="hint">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5" />
</svg>
Click to expand
</span>
</span>
</button>
<figcaption class="placard">
<h2 class="title">{art.title}</h2>
<p class="who">
{#each who as part, i}{#if i > 0}<span class="sep">·</span>{/if}{part}{/each}
</p>
{#if art.medium}<p class="medium">{art.medium}</p>{/if}
<p class="credit">
from {art.museum}{#if art.license}<span class="sep">·</span>{art.license}{/if}
{#if art.source_url}<a class="more" href={art.source_url} target="_blank" rel="noopener">View at {art.museum} →</a>{/if}
</p>
<div class="frames">
<span class="frames-label">Frame</span>
{#each FRAMES as f}
<button class="swatch swatch--{f.id}" class:on={frame === f.id}
onclick={() => setFrame(f.id)} aria-pressed={frame === f.id} title={f.label}>
<span class="sr">{f.label}</span>
</button>
{/each}
<!-- "The Story": the guide write-up on the left, the framed piece + controls on the right -->
<article class="story-card">
<div class="left">
<div class="head">
<div class="kicker"><span class="kicker-rule"></span>Daily Art{#if dateLabel} · {dateLabel}{/if}</div>
<h1 class="art-title">{art.title}</h1>
{#if attribution}<p class="attribution">{attribution}</p>{/if}
</div>
{#if frame !== 'none'}
<div class="thickness">
<span class="frames-label">Thickness</span>
<input type="range" min="0.7" max="1.9" step="0.05"
bind:value={thickness} oninput={saveThickness} aria-label="Frame thickness" />
<div class="body">
{#if art.blurb}<p class="blurb">{art.blurb}</p>{/if}
<div class="meta-cols">
<div class="meta"><span class="meta-label">Collection</span><span class="meta-val">{art.museum}</span></div>
{#if art.license}<div class="meta"><span class="meta-label">Rights</span><span class="meta-val">{art.license}</span></div>{/if}
</div>
{/if}
</figcaption>
</figure>
{#if art.source_url}
<a class="cta" href={art.source_url} target="_blank" rel="noopener">View at {art.museum} →</a>
{/if}
</div>
</div>
<div class="right">
<div class="art-stage">
<button class="frame frame--{frame} art-frame" style="--frame-scale:{thickness}"
onclick={() => (zoom = true)} aria-label="Expand artwork">
{#if isWood}{@render woodRails()}{/if}
<span class="mat">
<img src={art.image_url} alt={art.title}
onload={(e) => (landscape = e.currentTarget.naturalWidth > e.currentTarget.naturalHeight)} />
<span class="hint">
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M9 4H4v5M15 4h5v5M9 20H4v-5M15 20h5v-5" />
</svg>
Expand
</span>
</span>
</button>
</div>
<div class="controls">
<div class="ctl-row">
<span class="ctl-label">Frame</span>
<div class="swatches">
{#each FRAMES as f}
<button class="swatch swatch--{f.id}" class:on={frame === f.id}
onclick={() => setFrame(f.id)} aria-pressed={frame === f.id} title={f.label}>
<span class="sr">{f.label}</span>
</button>
{/each}
</div>
</div>
{#if frame !== 'none'}
<div class="ctl-row">
<span class="ctl-label">Thickness</span>
<input type="range" min="0.7" max="1.9" step="0.05"
bind:value={thickness} oninput={saveThickness} aria-label="Frame thickness" />
</div>
{/if}
{#if art.palette?.length}
<div class="ctl-divider"></div>
<div class="ctl-label">Colors in this piece</div>
<div class="palette" aria-hidden="true">
{#each art.palette as c}<span class="chip" style="background:{c}"></span>{/each}
</div>
{/if}
<div class="actions">
<button class="act act-share" onclick={share}>{copied ? 'Link copied' : '↗ Share'}</button>
{#if art.is_public_domain}
<a class="act act-dl" href={art.image_url_large || art.image_url} download={dlName}>↓ Download</a>
{/if}
</div>
</div>
</div>
</article>
{:else if state === 'empty'}
<p class="note">The gallery's resting — a new piece is hung each morning. Check back soon.</p>
{:else}
@@ -172,33 +217,41 @@
{/if}
<style>
/* --- look-overhaul testbed: bright, modern, calm. Scoped to /art for now. --- */
@font-face { font-family: 'Hanken Grotesk'; src: url('/fonts/hanken-var.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-var.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-italic-var.woff2') format('woff2'); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/fonts/space-mono-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
/* --- "The Story": editorial Daily Art page. Daily-Art identity = the purple accent. --- */
.room {
--canvas: #faf6ee; /* warm cream, not brown */
--surface: #ffffff;
--ink: #232a31; /* dark slate */
--muted: #707b86;
--canvas: #faf6ee; /* warm room ground */
--card: #ece1cc; /* warm-tan story card */
--art-band: #ddcfb2; /* deeper tan behind the framed piece */
--ink: #232a31; /* dark slate — titles */
--story: #4f4a3f; /* warm body text */
--muted: #8a8273;
--label: #6f6757; /* Space Mono micro-labels */
--line: #ece5d8;
--accent: #0a93c0; /* upbeatBytes blue, a touch brighter */
--accent-deep: #066c8e;
--accent: #8857C2; /* Daily-Art purple (matches the home tile) */
--accent-deep: #6f42a8;
min-height: 100vh;
background: var(--canvas);
color: var(--ink);
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
display: flex;
flex-direction: column;
}
.gallery {
flex: 1; width: 100%; max-width: 1100px; margin: 0 auto;
padding: clamp(6px, 1.5vw, 16px) clamp(20px, 5vw, 56px) clamp(20px, 5vw, 56px);
flex: 1; width: 100%; max-width: 1052px; margin: 0 auto;
padding: clamp(10px, 2vw, 22px) clamp(18px, 5vw, 44px) clamp(28px, 5vw, 48px);
box-sizing: border-box;
display: flex; flex-direction: column; align-items: center;
display: flex; flex-direction: column; justify-content: center;
}
/* top-left Back (the gallery centers its children, so pin this one to the left) */
/* top-left Back */
.back {
align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
margin: 0 0 clamp(10px, 2vw, 18px); padding: 6px 10px 6px 0;
margin: 0 0 clamp(10px, 2vw, 16px); padding: 6px 10px 6px 0;
background: none; border: none; cursor: pointer; font: inherit; font-size: 14px;
font-weight: 600; color: var(--muted); transition: color 0.15s ease;
-webkit-tap-highlight-color: transparent;
@@ -207,22 +260,62 @@
.back svg { transition: transform 0.15s ease; }
.back:hover svg { transform: translateX(-2px); }
.intro { text-align: center; margin-bottom: clamp(18px, 3.5vw, 30px); }
.intro h1 {
font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
font-size: clamp(2rem, 5vw, 3rem); margin: 0; letter-spacing: -0.01em;
/* The Story card: writeup (left) + framed art & controls (right). On phones the wrappers
collapse (display:contents) so the pieces reflow to head → art → writeup → controls. */
.story-card {
display: flex; border-radius: 22px; overflow: hidden; background: var(--card);
box-shadow: 0 16px 40px -22px rgba(120, 95, 50, 0.32);
}
.intro p { color: var(--muted); margin: 10px 0 0; font-size: 1.05rem; }
.left { flex: 1; min-width: 0; padding: clamp(28px, 4vw, 50px) clamp(24px, 3.4vw, 46px); display: flex; flex-direction: column; justify-content: center; }
.kicker { display: inline-flex; align-items: center; gap: 9px; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.kicker-rule { width: 18px; height: 2px; background: var(--accent); border-radius: 2px; }
.art-title { font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); margin: 14px 0 0; }
.attribution { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: clamp(1rem, 1.6vw, 1.13rem); color: #7a7263; margin: 12px 0 0; }
.blurb { font-size: clamp(0.97rem, 1.25vw, 1.02rem); line-height: 1.72; color: var(--story); margin: 20px 0 0; max-width: 44ch; text-wrap: pretty; }
.meta-cols { display: flex; gap: 36px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(120, 95, 50, 0.20); }
.meta { display: flex; flex-direction: column; gap: 4px; }
.meta-label { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label); }
.meta-val { font-size: 14px; font-weight: 600; color: #3f3a30; }
.cta { align-self: flex-start; margin-top: 26px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700; padding: 13px 22px; border-radius: 9px; text-decoration: none; transition: background 0.15s ease; -webkit-tap-highlight-color: transparent; }
.cta:hover { background: var(--accent-deep); }
/* A quiet hairline between the title and the artwork, fading at both ends. */
.divider {
width: min(440px, 76%); height: 1px; margin: 0 auto clamp(24px, 4.5vw, 44px);
background: linear-gradient(90deg, transparent, rgba(112, 123, 134, 0.30) 22%,
rgba(112, 123, 134, 0.30) 78%, transparent);
/* right column: the framed piece on a deeper-tan ground, controls beneath */
.right { flex: 0 0 46%; background: var(--art-band); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(28px, 3.4vw, 44px) clamp(22px, 3vw, 38px); }
.art-stage { display: flex; justify-content: center; width: 100%; }
.art-frame { max-width: 100%; }
.controls { width: 100%; max-width: 440px; margin-top: clamp(24px, 3vw, 32px); }
.ctl-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.ctl-row:first-child { margin-top: 0; }
.ctl-label { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.ctl-row > .ctl-label { width: 78px; flex: none; }
.swatches { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ctl-row input[type="range"] { flex: 1; accent-color: var(--accent); cursor: pointer; }
.ctl-divider { height: 1px; background: rgba(120, 95, 50, 0.18); margin: 24px 0 18px; }
.palette { display: flex; gap: 9px; margin-top: 11px; }
.chip { flex: 1; max-width: 46px; height: 34px; border-radius: 8px; }
.actions { display: flex; gap: 11px; margin-top: 24px; }
.act { flex: 1; text-align: center; font-size: 13.5px; font-weight: 700; padding: 12px 0; border-radius: 9px; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.act-share { background: var(--accent); color: #fff; border: none; font-family: inherit; transition: background 0.15s ease; }
.act-share:hover { background: var(--accent-deep); }
.act-dl { border: 1.5px solid #c7b48f; color: var(--story); background: transparent; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.15s ease, color 0.15s ease; }
.act-dl:hover { border-color: var(--accent); color: var(--accent); }
/* Phones: collapse the wrappers so the four blocks reflow into one calm column —
head → artwork → writeup → controls (the artwork sits high, seen before it's read). */
@media (max-width: 760px) {
.gallery { justify-content: flex-start; }
.story-card { flex-direction: column; }
.left, .right { display: contents; } /* promote head/body/art-stage/controls */
.head { order: 1; padding: clamp(22px, 5vw, 28px) clamp(18px, 5vw, 22px) 14px; }
.art-stage { order: 2; background: var(--art-band); padding: 22px 18px; box-sizing: border-box; }
.body { order: 3; padding: 20px clamp(18px, 5vw, 22px) 4px; }
.controls { order: 4; max-width: none; margin: 16px clamp(14px, 4vw, 18px) clamp(20px, 5vw, 24px);
background: #fff; border: 1px solid #ece3d0; border-radius: 16px; padding: 18px 16px; }
.meta-cols { gap: 28px; }
.cta { align-self: stretch; text-align: center; }
}
.piece { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 860px; }
/* The frame: a beveled moulding (wood/metal) around a cream mat around the art.
--rail / --mat are the moulding and mat widths; both scale with --frame-scale (the
thickness slider). EVERY variant — even "No frame" — reserves the same footprint, so
@@ -344,20 +437,8 @@
}
.frame:hover .hint, .frame:focus-visible .hint { background: rgba(20, 26, 33, 0.72); }
.placard { text-align: center; margin-top: clamp(22px, 4vw, 36px); max-width: 640px; }
.title {
font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
font-size: clamp(1.4rem, 3.5vw, 2rem); margin: 0; line-height: 1.2;
}
.who { margin: 8px 0 0; font-size: 1.05rem; color: var(--ink); }
.medium { margin: 4px 0 0; color: var(--muted); font-size: 0.95rem; font-style: italic; }
.credit { margin: 16px 0 0; color: var(--muted); font-size: 0.88rem; }
.sep { display: inline-block; margin: 0 0.5em; color: var(--muted); }
.more { display: inline-block; margin-left: 8px; color: var(--accent); font-weight: 600; text-decoration: none; }
.more:hover { color: var(--accent-deep); }
.sep { display: inline-block; margin: 0 0.5em; color: var(--muted); } /* used in the lightbox caption */
.frames { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 11px; margin-top: 24px; }
.frames-label { font-size: 0.74rem; font-weight: 600; color: var(--muted); margin-right: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
/* Frame chips read as little beveled beads; selection is a clean offset ring. */
.swatch {
width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
@@ -377,9 +458,6 @@
.swatch--none { background: linear-gradient(150deg, #ffffff, #ece6da); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.thickness { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.thickness input[type="range"] { width: min(220px, 60vw); accent-color: var(--accent); cursor: pointer; }
.note { color: var(--muted); font-size: 1.05rem; margin-top: 40px; }
.foot {
frontend/static/fonts/CREDITS.txt
+2
View File
@@ -7,3 +7,5 @@ newsreader-var.woff2 / newsreader-italic-var.woff2 — "Newsreader" by Productio
License: SIL Open Font License 1.1. All self-hosted (no Google hotlink) for the /home3 design direction.
Work Sans — Wei Huang, OFL 1.1 (Google Fonts). Latin subset, variable 400–700.
Space Mono — Colophon Foundry, OFL 1.1 (Google Fonts). Latin subset, 400.
frontend/static/fonts/space-mono-latin.woff2
BIN
View File
Binary file not shown.