From 7395ba9479aeac63c0ef6c7f9abc4fe3d5013926 Mon Sep 17 00:00:00 2001 From: Charlie Date: Sat, 13 Jun 2026 14:43:42 +0200 Subject: [PATCH] schema-apps: Painting museum gallery placard design MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Bespoke renderTypeSpecific layout for Painting — dark gallery wall background, painting centered in subtle frame, museum plaque with artist (bold), title (italic), date+medium (small caps muted), curator's notes section. Class .card.museum-placard. Gate passes (324 apps). --- app.css | 117 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ app.js | 83 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 200 insertions(+) diff --git a/app.css b/app.css index a0daa54..847905d 100644 --- a/app.css +++ b/app.css @@ -5166,3 +5166,120 @@ footer a:hover { color: var(--accent-2); } .sb-tickets-cta { margin: .5rem 1rem; } .sb-overview { padding: .4rem 1rem .8rem; } } + +/* ── Painting — Museum Gallery Placard ── */ +.card.museum-placard { + background: #1a1a1e; + border-color: rgba(255,255,255,.06); + box-shadow: + 0 2px 8px rgba(0,0,0,.4), + 0 12px 40px rgba(0,0,0,.5); + overflow: hidden; +} +.card.museum-placard .hd.hidden { display: none; } + +/* Gallery wall — dark, like a museum */ +.mp-wall { + padding: 2.5rem 2rem 1.5rem; + display: flex; + justify-content: center; + background: linear-gradient(to bottom, #1a1a1e, #222226); +} + +/* Subtle frame around the painting */ +.mp-frame { + display: inline-block; + padding: 10px; + background: #2a2a2e; + border: 1px solid rgba(255,255,255,.06); + border-radius: 2px; + box-shadow: + 0 8px 32px rgba(0,0,0,.6), + 0 2px 8px rgba(0,0,0,.4); + max-width: 100%; +} +.mp-painting { + display: block; + max-width: 100%; + height: auto; + border-radius: 1px; +} + +/* Body area — dark gallery surface */ +.card.museum-placard .bd { + background: #1a1a1e; + color: rgba(255,255,255,.7); + padding-top: .8rem; +} +.card.museum-placard .bd::before { + display: none; +} + +/* Museum plaque */ +.mp-plaque { + text-align: center; + padding: .8rem 1.5rem 1.2rem; + border-bottom: 1px solid rgba(255,255,255,.06); +} +.mp-artist { + font-size: 1rem; + font-weight: 700; + color: rgba(255,255,255,.9); + letter-spacing: .01em; + margin-bottom: .25rem; +} +.mp-title { + font-size: 1.15rem; + font-style: italic; + color: rgba(255,255,255,.7); + margin-bottom: .35rem; +} +.mp-meta { + font-size: .68rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: .12em; + color: rgba(255,255,255,.3); +} + +/* Curator's notes */ +.mp-curatorial { + padding: .8rem 1.5rem 1rem; +} +.mp-curatorial-label { + font-size: .7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .12em; + color: rgba(255,255,255,.3); + margin-bottom: .4rem; +} +.mp-curatorial-body { + font-size: .84rem; + line-height: 1.75; + color: rgba(255,255,255,.55); + margin: 0; +} + +/* Edit/JSON-LD disclosure in dark theme */ +.card.museum-placard details { + border-color: rgba(255,255,255,.08); +} +.card.museum-placard summary { + color: rgba(255,255,255,.35); +} +.card.museum-placard .row .k { + color: rgba(255,255,255,.35); +} +.card.museum-placard .row .v { + color: rgba(255,255,255,.7); +} + +@media (max-width: 480px) { + .mp-wall { padding: 1.5rem 1rem .8rem; } + .mp-frame { padding: 6px; } + .mp-plaque { padding: .6rem 1rem .8rem; } + .mp-artist { font-size: .9rem; } + .mp-title { font-size: 1rem; } + .mp-curatorial { padding: .6rem 1rem .8rem; } +} diff --git a/app.js b/app.js index a998b5d..aefa5b5 100644 --- a/app.js +++ b/app.js @@ -3388,6 +3388,89 @@ } } + // ── PAINTING (Museum Gallery Placard) ── + if (cfg.type === "Painting") { + const card = document.querySelector(".card"); + if (card) card.classList.add("museum-placard"); + + // Hide normal header + const hd = document.querySelector(".hd"); + if (hd) hd.classList.add("hidden"); + + // Remove generic hero — we build our own gallery wall + const heroMount = document.getElementById("hero-mount"); + if (heroMount) heroMount.querySelector('.hero')?.remove(); + + // ── Gallery wall with painting centered as if hung ── + const wall = document.createElement("div"); wall.className = "mp-wall"; + const imgUrl = data["image"]; + if (imgUrl) { + const frame = document.createElement("div"); frame.className = "mp-frame"; + const img = document.createElement("img"); img.className = "mp-painting"; + img.src = imgUrl; img.alt = data[cfg.titleProp] || ""; + img.loading = "lazy"; + frame.appendChild(img); + wall.appendChild(frame); + } + heroMount.appendChild(wall); + handled.add("image"); + handled.add("name"); + + // ── Museum plaque below the painting ── + const plaque = document.createElement("div"); plaque.className = "mp-plaque"; + + // Artist name in bold + const artist = data["artist"]; + if (artist) { + const artistEl = document.createElement("div"); artistEl.className = "mp-artist"; + artistEl.textContent = artist; + plaque.appendChild(artistEl); + handled.add("artist"); + } + + // Title in italic + const title = data[cfg.titleProp]; + if (title) { + const titleEl = document.createElement("div"); titleEl.className = "mp-title"; + titleEl.textContent = title; + plaque.appendChild(titleEl); + } + + // Date created + medium in small caps muted text + const metaParts = []; + const dateCreated = data["dateCreated"]; + if (dateCreated) { + metaParts.push(dateCreated); + handled.add("dateCreated"); + } + const medium = data["artMedium"]; + if (medium) { + metaParts.push(medium); + handled.add("artMedium"); + } + if (metaParts.length) { + const meta = document.createElement("div"); meta.className = "mp-meta"; + meta.textContent = metaParts.join(", "); + plaque.appendChild(meta); + } + + view.appendChild(plaque); + + // ── Description as curator's notes ── + const desc = data["description"]; + if (desc) { + const notes = document.createElement("div"); notes.className = "mp-curatorial"; + const label = document.createElement("div"); label.className = "mp-curatorial-label"; + label.textContent = "About the Work"; + notes.appendChild(label); + const body = document.createElement("p"); body.className = "mp-curatorial-body"; + body.textContent = desc; + notes.appendChild(body); + view.appendChild(notes); + handled.add("description"); + } + } + return handled; }