diff --git a/frontend/scripts/patch-static-heads.mjs b/frontend/scripts/patch-static-heads.mjs index 857d334..f79ba49 100644 --- a/frontend/scripts/patch-static-heads.mjs +++ b/frontend/scripts/patch-static-heads.mjs @@ -32,6 +32,12 @@ const PAGES = [ title: 'On This Day · upbeatBytes', desc: 'One genuinely good thing that happened on this day in history.', }, + { + file: 'art.html', path: '/art', + title: 'Daily Art · upbeatBytes', + desc: "A masterwork a day from the world's open museum collections — beautifully framed, " + + 'with a short note on what you’re looking at.', + }, ]; function subsFor(url, title, desc) { diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte index 51df80c..e19cd32 100644 --- a/frontend/src/routes/home3/+page.svelte +++ b/frontend/src/routes/home3/+page.svelte @@ -91,7 +91,7 @@ } catch { /* global brief */ } try { const it = (await getJSON(`/api/brief?limit=1${homeq}`))?.items?.[0]; - if (it) news = { id: it.id, title: it.title, summary: it.summary || it.description || '', image: it.image_url || null }; + if (it) news = { id: it.id, title: it.title, summary: it.summary || it.description || '', image: it.image_url || null, source_read_minutes: it.source_read_minutes }; // Photos display full (cover); only wide/tall figures (diagrams) get the framed plate. if (news?.image) { const probe = new Image(); diff --git a/frontend/src/routes/play/+page.svelte b/frontend/src/routes/play/+page.svelte index 4a0a8dd..d5c74f6 100644 --- a/frontend/src/routes/play/+page.svelte +++ b/frontend/src/routes/play/+page.svelte @@ -270,7 +270,7 @@ Play · Upbeat Bytes — calm daily games {#if isDevGated(game)}{/if} @@ -516,6 +516,7 @@ .tile:hover { transform: translateY(-5px); } .tile.soon { cursor: default; } .tile.soon:hover { transform: none; } + @media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:hover { transform: none; } } .tile-word { background: #f0a830; box-shadow: 0 12px 26px -10px rgba(224, 148, 31, 0.55); } .tile-ws { background: #2f7fb0; box-shadow: 0 12px 26px -10px rgba(47, 127, 176, 0.55); } .tile-bloom { background: #5a9b63; box-shadow: 0 12px 26px -10px rgba(90, 155, 99, 0.55); } @@ -540,8 +541,10 @@ .m-ws { padding: 12px 16px 66px; display: grid; grid-template-columns: repeat(6, 29px); gap: 4px; justify-content: center; align-content: center; } .wc { width: 29px; height: 29px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; color: rgba(255, 255, 255, 0.42); } .wc.hl { background: rgba(255, 255, 255, 0.93); color: #2f7fb0; border-radius: 7px; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12); } - /* flex-center the flower in the space above the title (padding-bottom clears the foot) */ - .m-bloom { display: flex; align-items: center; justify-content: center; padding-bottom: 64px; box-sizing: border-box; } + /* Bloom is a circular medallion, so center it in the tile's visual field (~43%), lower than + the other top-illustration motifs — just a small padding-bottom to keep the lower petal + off the title/gradient. */ + .m-bloom { display: flex; align-items: center; justify-content: center; padding-bottom: 32px; box-sizing: border-box; } .bloom-ring { position: relative; width: 150px; height: 150px; } .m-bloom .petal { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #4f8a58; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1); } .m-bloom .pc { width: 50px; height: 50px; background: #3e7a47; color: #fff; font-size: 22px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); }