Add list styles: Podium, Spotlight, Grid, List

- Each list picks a style in List settings (new lists default to Podium);
  existing lists keep Grid or List
- Podium: top 3 on medal-colored steps (#1 center and raised), the rest
  behind a native <details> "Show N more"; stacks #1 over #2/#3 on phones
- Spotlight: #1 as a feature card (art, why-note or description, play
  button), the rest as a numbered list
- Visitors can switch styles on a list page (?style=), preserved across
  pages; later pages fall back to a plain list since they don't start at #1
- Entries' detail data now lives on a wrapper per list, so featured and
  collapsed entries all open the detail view

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/static/css/app.css

@@ -165,10 +165,10 @@ code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; bac
 /* ---------- ranked items: grid ---------- */
 .items { list-style: none; margin: 0; padding: 0; }
 .items--grid { display: grid; gap: 22px 18px; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }
-.items--grid.aspect-square { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
+.aspect-square .items--grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
 @media (max-width: 640px) {
   .items--grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 12px; }
-  .items--grid.aspect-square { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
+  .aspect-square .items--grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
 }
 .item-btn {
   all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px;
@@ -281,6 +281,101 @@ code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; bac
   .items--rows .item-rank { font-size: 18px; }
 }
 
+/* ---------- style: podium ---------- */
+/* #2, #1, #3 left to right, #1 raised and a little larger, each standing on
+   a medal-colored step. */
+.podium {
+  list-style: none; margin: 8px auto 0; padding: 0; max-width: 860px;
+  display: grid; grid-template-columns: 1fr 1.22fr 1fr; gap: 0 22px; align-items: end;
+}
+.podium--2 { grid-template-columns: 1fr 1.22fr; max-width: 580px; }
+.podium--1 { grid-template-columns: minmax(0, 300px); justify-content: center; }
+.podium-spot { position: relative; display: flex; flex-direction: column; min-width: 0; --medal: var(--gold); }
+.podium-spot--1 { order: 2; }
+.podium-spot--2 { order: 1; --medal: var(--silver); }
+.podium-spot--3 { order: 3; --medal: var(--bronze); }
+.podium--1 .podium-spot--1 { order: 0; }
+.podium-card { align-items: center; text-align: center; gap: 12px; padding: 0 4px 14px; }
+.podium-card .item-art { width: 100%; box-shadow: var(--shadow); }
+.podium-spot--1 .item-art { box-shadow: 0 0 0 3px var(--medal), var(--shadow); }
+.podium-card .item-body { align-items: center; width: 100%; }
+.podium-card .item-title { font-size: 16px; }
+.podium-spot--1 .item-title { font-size: 18px; font-weight: 700; }
+.podium-card .item-tags { justify-content: center; }
+.podium-step {
+  display: grid; place-items: center; border-radius: 10px 10px 0 0;
+  border-top: 3px solid var(--medal);
+  background: linear-gradient(to bottom, color-mix(in srgb, var(--medal) 26%, var(--surface)), color-mix(in srgb, var(--medal) 4%, var(--bg)));
+  font: 800 30px/1 var(--font-display); color: var(--medal); font-variant-numeric: tabular-nums;
+}
+.podium-spot--1 .podium-step { height: 86px; font-size: 40px; }
+.podium-spot--2 .podium-step { height: 60px; }
+.podium-spot--3 .podium-step { height: 42px; font-size: 26px; }
+.podium + .more, .podium + .more-all { margin-top: 0; border-top: 1px solid var(--border); }
+@media (max-width: 640px) {
+  /* #1 on its own row, #2 and #3 side by side beneath it. */
+  .podium, .podium--2 { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
+  .podium-spot--1 { order: 0; grid-column: 1 / -1; justify-self: center; width: min(100%, 230px); }
+  .podium-spot--2 { order: 1; }
+  .podium-spot--3 { order: 2; }
+  /* Short, equal steps so every spot still shows its rank. */
+  .podium-spot .podium-step { height: 34px; font-size: 20px; border-radius: 8px; }
+  .podium-card { padding-bottom: 10px; }
+}
+
+/* "Show N more" under a podium: the browser's own <details>, so it works
+   without JavaScript. */
+.more { padding-top: 18px; }
+.more > summary {
+  list-style: none; display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0 auto;
+  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
+  color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+.more > summary::-webkit-details-marker { display: none; }
+.more > summary:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
+.more > summary .icon { transition: transform 0.2s; }
+.more-open, .more[open] .more-closed { display: none; }
+.more[open] .more-open { display: inline; }
+.more[open] > summary { margin-bottom: 16px; }
+.more[open] > summary .icon { transform: rotate(180deg); }
+.more-all {
+  display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; margin: 16px auto 0;
+  color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none;
+}
+.more-all:hover { color: var(--accent); }
+.podium + .more-all { padding-top: 16px; width: 100%; }
+/* On a list page, pages past the first only make sense once the rest is open. */
+.list-body:has(.ranked--podium details:not([open])) .pager { display: none; }
+
+/* ---------- style: spotlight ---------- */
+.spotlight {
+  position: relative; overflow: hidden; isolation: isolate; margin-bottom: 14px;
+  display: grid; grid-template-columns: minmax(150px, 250px) 1fr; gap: 30px; align-items: center;
+  padding: 26px; border-radius: calc(var(--radius) + 8px); border: 1px solid var(--border); background: var(--surface);
+}
+.aspect-square .spotlight { grid-template-columns: minmax(150px, 270px) 1fr; }
+.spotlight-bg { position: absolute; inset: 0; z-index: -1; }
+.spotlight-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.4); filter: blur(50px) saturate(1.4); opacity: 0.32; }
+.spotlight-art { position: relative; }
+.spotlight-art .item-art { box-shadow: 0 0 0 3px var(--gold), var(--shadow); }
+.spotlight-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-items: flex-start; }
+.spotlight-rank { font: 800 46px/1 var(--font-display); color: var(--gold); }
+.spotlight-title { font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; }
+.spotlight-body .item-sub { font-size: 15px; white-space: normal; }
+.spotlight-desc { color: var(--muted); font-size: 15px; line-height: 1.6; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
+.spotlight-note {
+  margin: 8px 0 0; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
+  background: var(--accent-soft); font-size: 15px; white-space: pre-line;
+  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
+}
+.spotlight-more { margin-top: 10px; }
+@media (max-width: 640px) {
+  .spotlight, .aspect-square .spotlight { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
+  .spotlight-art { width: min(100%, 220px); justify-self: center; }
+  .spotlight-rank { font-size: 36px; }
+}
+
 /* ---------- list page ---------- */
 .list-hero { position: relative; overflow: hidden; padding: 28px 0 34px; border-bottom: 1px solid var(--border); }
 .list-hero-backdrop { position: absolute; inset: 0; z-index: 0; }
@@ -304,9 +399,9 @@ code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; bac
 .list-body { padding-top: 30px; }
 
 .segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: calc(var(--radius) + 2px); background: var(--surface); border: 1px solid var(--border); }
-.segmented button { display: grid; place-items: center; width: 34px; height: 30px; border: 0; border-radius: calc(var(--radius) - 2px); background: none; color: var(--muted); cursor: pointer; }
-.segmented button:hover { color: var(--text); }
-.segmented button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); }
+.segmented a, .segmented button { display: grid; place-items: center; width: 34px; height: 30px; border: 0; border-radius: calc(var(--radius) - 2px); background: none; color: var(--muted); cursor: pointer; }
+.segmented a:hover, .segmented button:hover { color: var(--text); }
+.segmented [aria-current="true"], .segmented [aria-pressed="true"] { background: var(--surface-2); color: var(--text); }
 
 .pager { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 40px; flex-wrap: wrap; }
 .pager:empty { display: none; }
@@ -506,6 +601,21 @@ input[type="checkbox"] { accent-color: var(--accent); width: 18px; height: 18px;
 .cat-option input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
 .cat-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
 .cat-option input:disabled + span { opacity: 0.45; cursor: not-allowed; }
+.style-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.style-option { position: relative; }
+.style-option input { position: absolute; opacity: 0; pointer-events: none; }
+.style-option span {
+  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: center; height: 100%;
+  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+.style-option .icon { grid-row: span 2; width: 22px; height: 22px; color: var(--accent); }
+.style-option b { font-size: 14px; }
+.style-option small { color: var(--muted); font-size: 12px; line-height: 1.35; }
+.style-option span:hover { border-color: var(--accent); }
+.style-option input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
+.style-option input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
+@media (max-width: 480px) { .style-picker { grid-template-columns: 1fr; } }
 .size-chips { display: flex; flex-wrap: wrap; gap: 6px; }
 .size-chips button { height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; font-size: 13px; font-weight: 600; }
 .size-chips button:hover { border-color: var(--accent); }

web/static/img/icons.svg

@@ -22,6 +22,8 @@
 <symbol id="settings" viewBox="0 0 24 24"><path d="M20 7h-9M14 17H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></symbol>
 <symbol id="list" viewBox="0 0 24 24"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></symbol>
 <symbol id="rows" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="6" rx="1.5"/><rect x="3" y="14" width="18" height="6" rx="1.5"/></symbol>
+<symbol id="podium" viewBox="0 0 24 24"><path d="M2 21h20"/><rect x="9" y="5" width="6" height="16" rx="1"/><rect x="3" y="10" width="6" height="11" rx="1"/><rect x="15" y="13" width="6" height="8" rx="1"/></symbol>
+<symbol id="spotlight" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="11" rx="2"/><path d="M3 18h18M3 21h12"/></symbol>
 <symbol id="grid" viewBox="0 0 24 24"><rect width="7" height="7" x="3" y="3" rx="1.5"/><rect width="7" height="7" x="14" y="3" rx="1.5"/><rect width="7" height="7" x="14" y="14" rx="1.5"/><rect width="7" height="7" x="3" y="14" rx="1.5"/></symbol>
 <symbol id="logout" viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></symbol>
 <symbol id="download" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></symbol>

web/static/js/admin-list.js

@@ -54,7 +54,7 @@ const isFull = () => list.itemCount >= list.maxItems;
 
 document.querySelector("[data-action=edit-list]").addEventListener("click", () => {
   openListForm({
-    categories, limits, list,
+    categories, limits, styles: boot.styles, list,
     onSaved: (saved) => {
       // The artwork shape affects the whole editor, so redraw from scratch.
       if (saved.art !== list.art) { location.reload(); return; }

web/static/js/admin-lists.js

@@ -13,14 +13,14 @@ const root = document.getElementById("lists");
 
 function newList(category) {
   openListForm({
-    categories, limits, category,
+    categories, limits, styles: boot.styles, category,
     onSaved: (l) => { location.href = `/admin/lists/${l.id}`; },
   });
 }
 
 function editList(list) {
   openListForm({
-    categories, limits, list,
+    categories, limits, styles: boot.styles, list,
     onSaved: (saved) => {
       lists = lists.map((l) => (l.id === saved.id ? saved : l));
       render();

web/static/js/list-form.js

@@ -22,7 +22,7 @@ const autoTitle = (n, cat) => (cat.key === "custom" ? "" : `Top ${n} ${cat.label
  * @param {string} [o.category]  preselected category for a new list
  * @param {(list: object) => void} o.onSaved
  */
-export function openListForm({ categories, limits, list, category, onSaved }) {
+export function openListForm({ categories, limits, styles, list, category, onSaved }) {
   const editing = !!list;
   const catByKey = Object.fromEntries(categories.map((c) => [c.key, c]));
   const state = {
@@ -77,11 +77,12 @@ export function openListForm({ categories, limits, list, category, onSaved }) {
 
   const desc = h("textarea", { name: "description", rows: 2, maxlength: 1000, placeholder: "Optional: a line about what makes this list", value: list?.description || "" });
   const slug = editing && h("input", { name: "slug", value: list.slug, maxlength: 60, pattern: "[a-z0-9-]+", spellcheck: false });
-  const layout = list?.layout || "grid";
-  const layoutGroup = h("div", { class: "radio-cards" },
-    h("label", {}, h("input", { type: "radio", name: "layout", value: "grid", checked: layout === "grid" }), icon("grid"), "Artwork grid"),
-    h("label", {}, h("input", { type: "radio", name: "layout", value: "rows", checked: layout === "rows" }), icon("rows"), "Ranked list"),
-  );
+  const layout = list?.layout || styles[0].key;
+  const layoutGroup = h("div", { class: "style-picker", role: "radiogroup", "aria-label": "Style" },
+    styles.map((st) => h("label", { class: "style-option" },
+      h("input", { type: "radio", name: "layout", value: st.key, checked: layout === st.key }),
+      h("span", {}, icon(st.icon), h("b", {}, st.label), h("small", {}, st.description)),
+    )));
   // Custom lists choose their artwork shape; built-in categories have one.
   const art = list?.art || "square";
   const artField = h("div", { class: "field", hidden: !isCustom() },
@@ -106,7 +107,8 @@ export function openListForm({ categories, limits, list, category, onSaved }) {
       h("label", { class: "field" }, h("span", { class: "field-label" }, "Description"), desc),
       editing && h("label", { class: "field" }, h("span", { class: "field-label" }, "Address"),
         h("div", { class: "input-group", style: { alignItems: "center" } }, h("span", { class: "muted" }, "/l/"), slug)),
-      h("div", { class: "field" }, h("span", { class: "field-label" }, "Layout"), layoutGroup),
+      h("div", { class: "field" }, h("span", { class: "field-label" }, "Style"), layoutGroup,
+        h("span", { class: "field-hint" }, "How the list looks on your page. Visitors can switch styles on the list's own page.")),
       artField,
       h("label", { class: "check" }, visible, "Show this list on my public page"),
       error,

web/static/js/public.js

@@ -1,12 +1,13 @@
 // Public pages: item detail dialog and grid/list toggle.
-import { h, icon, openDialog, storageGet, storageSet } from "./common.js";
+import { h, icon, openDialog } from "./common.js";
 import { previewButton } from "./player.js";
 
 // Each ranked list on the page ships its items as JSON next to the markup.
-const lists = [...document.querySelectorAll("[data-items]")].map((ol) => {
-  const data = JSON.parse(ol.nextElementSibling?.textContent || "[]");
-  return { ol, items: data, title: ol.dataset.listTitle, square: ol.classList.contains("aspect-square") };
-});
+const lists = [...document.querySelectorAll("[data-items]")].map((el) => ({
+  items: JSON.parse(el.querySelector(":scope > .items-data")?.textContent || "[]"),
+  title: el.dataset.listTitle,
+  square: el.classList.contains("aspect-square"),
+}));
 
 function findItem(id) {
   for (const list of lists) {
@@ -78,23 +79,3 @@ document.addEventListener("click", (e) => {
   const found = findItem(Number(btn.dataset.item));
   if (found) show(found.list, found.idx);
 });
-
-// Grid / list toggle on list pages, remembered per list in this browser.
-const toggle = document.querySelector("[data-layout-toggle]");
-if (toggle) {
-  const key = "canon:layout:" + toggle.dataset.key;
-  const apply = (layout) => {
-    for (const { ol } of lists) {
-      ol.classList.toggle("items--grid", layout === "grid");
-      ol.classList.toggle("items--rows", layout === "rows");
-    }
-    for (const b of toggle.querySelectorAll("button")) b.setAttribute("aria-pressed", String(b.dataset.layout === layout));
-  };
-  apply(storageGet(key) || toggle.dataset.default);
-  toggle.addEventListener("click", (e) => {
-    const b = e.target.closest("button[data-layout]");
-    if (!b) return;
-    apply(b.dataset.layout);
-    storageSet(key, b.dataset.layout);
-  });
-}

web/templates/pages/home.html

@@ -30,7 +30,7 @@
     </div>
     <a class="see-all" href="/l/{{.List.Slug}}">{{if .More}}All {{num .List.ItemCount}}{{else}}Open{{end}}{{icon "arrow-right"}}</a>
   </header>
-  {{if .Items}}{{template "items" (dict "Items" .Items "Category" .Category "Layout" .List.Layout "Title" .List.Title)}}{{end}}
+  {{if .Items}}{{template "ranked" (dict "Items" .Items "Category" .Category "Style" .List.Layout "Title" .List.Title "AllLink" (and (gt .More 0) (print "/l/" .List.Slug)) "Total" .List.ItemCount)}}{{end}}
 </section>
 {{end}}
 {{else}}

web/templates/pages/list.html

@@ -18,10 +18,11 @@
       <div class="list-actions">
         {{if $.LoggedIn}}<a class="btn btn--ghost" href="/admin/lists/{{.List.ID}}">{{icon "pencil"}}Edit</a>{{if .Items}}{{template "export" .List.Slug}}{{end}}{{end}}
         {{if .Items}}
-        <div class="segmented" role="group" aria-label="Layout" data-layout-toggle data-default="{{.List.Layout}}" data-key="{{.List.Slug}}">
-          <button type="button" data-layout="grid" title="Grid">{{icon "grid"}}<span class="sr-only">Grid</span></button>
-          <button type="button" data-layout="rows" title="List">{{icon "rows"}}<span class="sr-only">List</span></button>
-        </div>
+        <nav class="segmented" aria-label="Style">
+          {{- range .Styles}}
+          <a href="?style={{.Key}}" title="{{.Label}}"{{if eq .Key $.Data.Style}} aria-current="true"{{end}}>{{icon .Icon}}<span class="sr-only">{{.Label}}</span></a>
+          {{- end}}
+        </nav>
         {{end}}
       </div>
     </div>
@@ -30,16 +31,16 @@
 
 <div class="container list-body">
 {{if .Items}}
-  {{template "items" (dict "Items" .Items "Category" .Category "Layout" .List.Layout "Title" .List.Title)}}
+  {{template "ranked" (dict "Items" .Items "Category" .Category "Style" .Style "Title" .List.Title)}}
   {{if .PageNums}}
   <nav class="pager" aria-label="Pages">
-    {{if gt .Page 1}}<a class="pager-btn" href="?page={{add .Page -1}}" rel="prev">{{icon "chevron-left"}}<span class="sr-only">Previous</span></a>{{end}}
+    {{if gt .Page 1}}<a class="pager-btn" href="?page={{add .Page -1}}{{.PageQS}}" rel="prev">{{icon "chevron-left"}}<span class="sr-only">Previous</span></a>{{end}}
     {{range .PageNums}}
       {{if eq . 0}}<span class="pager-gap">…</span>
       {{else if eq . $.Data.Page}}<span class="pager-btn is-current" aria-current="page">{{.}}</span>
-      {{else}}<a class="pager-btn" href="?page={{.}}">{{.}}</a>{{end}}
+      {{else}}<a class="pager-btn" href="?page={{.}}{{$.Data.PageQS}}">{{.}}</a>{{end}}
     {{end}}
-    {{if lt .Page .Pages}}<a class="pager-btn" href="?page={{add .Page 1}}" rel="next">{{icon "chevron-right"}}<span class="sr-only">Next</span></a>{{end}}
+    {{if lt .Page .Pages}}<a class="pager-btn" href="?page={{add .Page 1}}{{.PageQS}}" rel="next">{{icon "chevron-right"}}<span class="sr-only">Next</span></a>{{end}}
   </nav>
   {{end}}
 {{else}}

web/templates/partials/items.html

@@ -1,29 +1,35 @@
 {{define "items"}}
-<ol class="items items--{{.Layout}} aspect-{{.Category.Aspect}}" data-items data-list-title="{{.Title}}" start="{{with index .Items 0}}{{.Rank}}{{end}}">
+<ol class="items items--{{.Layout}}" start="{{with index .Items 0}}{{.Rank}}{{end}}">
   {{- range .Items}}
   <li class="item{{if le .Rank 3}} item--top item--top{{.Rank}}{{end}}">
     <button type="button" class="item-btn" data-item="{{.ID}}">
       <span class="item-art">
-        {{- if .Image}}<img src="{{.Image}}" alt="" loading="lazy" decoding="async">{{else}}<span class="art-fallback">{{icon $.Category.Icon}}</span>{{end -}}
+        {{- template "art" (dict "Item" . "Icon" $.Category.Icon)}}
         <span class="rank-badge" aria-hidden="true">{{.Rank}}</span>
       </span>
       <span class="item-rank" aria-hidden="true">{{.Rank}}</span>
       <span class="item-body">
         <span class="item-title"><span class="sr-only">#{{.Rank}}: </span>{{.Title}}</span>
-        {{- if .Badge}}
-        {{- with .Subtitle}}<span class="item-sub">{{.}}</span>{{end}}
-        <span class="item-tags"><span class="badge">{{.Badge}}</span>{{with .Year}}<span class="item-year">{{.}}</span>{{end}}</span>
-        {{- else if or .Subtitle .Year}}
-        <span class="item-sub">{{.Subtitle}}{{if and .Subtitle .Year}}<span class="dot" aria-hidden="true">·</span>{{end}}{{.Year}}</span>
-        {{- end}}
+        {{- template "itemsub" .}}
         {{- with .Note}}<span class="item-note">{{.}}</span>{{end}}
       </span>
     </button>
-    {{- if .Preview}}
-    <button type="button" class="play-btn" data-preview-src="/preview/{{.ID}}" aria-pressed="false" aria-label="Play a preview of {{.Title}}" title="Play 30-second preview">{{icon "play"}}{{icon "pause"}}</button>
-    {{- end}}
+    {{- template "playbtn" .}}
   </li>
   {{- end}}
 </ol>
-<script type="application/json" class="items-data">{{.Items}}</script>
 {{end}}
+
+{{/* Shared bits of an entry. */}}
+{{define "art"}}{{if .Item.Image}}<img src="{{.Item.Image}}" alt="" loading="lazy" decoding="async">{{else}}<span class="art-fallback">{{icon .Icon}}</span>{{end}}{{end}}
+
+{{define "itemsub"}}
+{{- if .Badge}}
+{{- with .Subtitle}}<span class="item-sub">{{.}}</span>{{end}}
+<span class="item-tags"><span class="badge">{{.Badge}}</span>{{with .Year}}<span class="item-year">{{.}}</span>{{end}}</span>
+{{- else if or .Subtitle .Year}}
+<span class="item-sub">{{.Subtitle}}{{if and .Subtitle .Year}}<span class="dot" aria-hidden="true">·</span>{{end}}{{.Year}}</span>
+{{- end}}
+{{- end}}
+
+{{define "playbtn"}}{{if .Preview}}<button type="button" class="play-btn" data-preview-src="/preview/{{.ID}}" aria-pressed="false" aria-label="Play a preview of {{.Title}}" title="Play 30-second preview">{{icon "play"}}{{icon "pause"}}</button>{{end}}{{end}}

web/templates/partials/ranked.html

@@ -0,0 +1,72 @@
+{{/*
+  ranked draws a list in its style. Takes: Items, Category, Style, Title,
+  and optionally AllLink/Total (home page: link to the full list).
+  Podium and Spotlight feature #1, so a page that doesn't start at #1 falls
+  back to a plain list.
+*/}}
+{{define "ranked"}}
+{{- $featured := and (or (eq .Style "podium") (eq .Style "spotlight")) (eq (index .Items 0).Rank 1)}}
+<div class="ranked ranked--{{if $featured}}{{.Style}}{{else}}{{flatLayout .Style}}{{end}} aspect-{{.Category.Aspect}}" data-items data-list-title="{{.Title}}">
+  {{- if and $featured (eq .Style "podium")}}{{template "podium" .}}
+  {{- else if $featured}}{{template "spotlight" .}}
+  {{- else}}{{template "items" (dict "Items" .Items "Category" .Category "Layout" (flatLayout .Style))}}
+  {{- end}}
+  <script type="application/json" class="items-data">{{.Items}}</script>
+</div>
+{{end}}
+
+{{define "podium"}}
+{{- $c := .Category}}
+{{- $top := first 3 .Items}}
+<ol class="podium podium--{{len $top}}">
+  {{- range $top}}
+  <li class="podium-spot podium-spot--{{.Rank}}">
+    <button type="button" class="item-btn podium-card" data-item="{{.ID}}">
+      <span class="item-art">{{template "art" (dict "Item" . "Icon" $c.Icon)}}</span>
+      <span class="item-body">
+        <span class="item-title"><span class="sr-only">#{{.Rank}}: </span>{{.Title}}</span>
+        {{- template "itemsub" .}}
+      </span>
+    </button>
+    {{- template "playbtn" .}}
+    <span class="podium-step" aria-hidden="true"><span>{{.Rank}}</span></span>
+  </li>
+  {{- end}}
+</ol>
+{{- $rest := after 3 .Items}}
+{{- if $rest}}
+<details class="more">
+  <summary class="more-btn"><span class="more-closed">Show {{len $rest}} more</span><span class="more-open">Show less</span>{{icon "chevron-down"}}</summary>
+  {{template "items" (dict "Items" $rest "Category" $c "Layout" "rows")}}
+  {{- if .AllLink}}<a class="more-all" href="{{.AllLink}}">See all {{num .Total}}{{icon "arrow-right"}}</a>{{end}}
+</details>
+{{- else if .AllLink}}
+<a class="more-all" href="{{.AllLink}}">See all {{num .Total}}{{icon "arrow-right"}}</a>
+{{- end}}
+{{end}}
+
+{{define "spotlight"}}
+{{- $c := .Category}}
+{{- with index .Items 0}}
+<article class="spotlight">
+  {{- if .Image}}<div class="spotlight-bg" aria-hidden="true"><img src="{{.Image}}" alt=""></div>{{end}}
+  <div class="spotlight-art">
+    <button type="button" class="item-btn" data-item="{{.ID}}" aria-label="#1: {{.Title}}">
+      <span class="item-art">{{template "art" (dict "Item" . "Icon" $c.Icon)}}</span>
+    </button>
+    {{- template "playbtn" .}}
+  </div>
+  <div class="spotlight-body">
+    <p class="spotlight-rank">#1</p>
+    <h3 class="spotlight-title">{{.Title}}</h3>
+    {{- template "itemsub" .}}
+    {{- with .Note}}<blockquote class="spotlight-note">{{.}}</blockquote>
+    {{- else}}{{with .Description}}<p class="spotlight-desc">{{.}}</p>{{end}}{{end}}
+    <button type="button" class="btn btn--sm spotlight-more" data-item="{{.ID}}">More about it{{icon "arrow-right"}}</button>
+  </div>
+</article>
+{{- end}}
+{{- $rest := after 1 .Items}}
+{{- if $rest}}{{template "items" (dict "Items" $rest "Category" $c "Layout" "rows")}}{{end}}
+{{- if .AllLink}}<a class="more-all" href="{{.AllLink}}">See all {{num .Total}}{{icon "arrow-right"}}</a>{{end}}
+{{end}}