cdnutterandClaude Opus 5.5
ddf2157e63
- 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>
36 lines
1.7 KiB
HTML
36 lines
1.7 KiB
HTML
{{define "items"}}
|
|
<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">
|
|
{{- 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>
|
|
{{- template "itemsub" .}}
|
|
{{- with .Note}}<span class="item-note">{{.}}</span>{{end}}
|
|
</span>
|
|
</button>
|
|
{{- template "playbtn" .}}
|
|
</li>
|
|
{{- end}}
|
|
</ol>
|
|
{{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}}
|