Files
canon/web/templates/pages/home.html
T
cdnutterandClaude Opus 5.5 ddf2157e63 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>
2026-09-25 11:18:44 -07:00

46 lines
2.1 KiB
HTML

{{define "bodyclass"}}page-home{{end}}
{{define "content"}}
{{$name := or .Site.OwnerName .Site.Title}}
<section class="profile container">
<div class="avatar avatar--lg">
{{- if .Site.AvatarURL}}<img src="{{.Site.AvatarURL}}" alt="">{{else}}<span>{{initial $name}}</span>{{end -}}
</div>
<div class="profile-text">
<h1 class="profile-name">{{$name}}</h1>
{{with .Site.Tagline}}<p class="profile-tagline">{{.}}</p>{{end}}
{{with .Data}}{{if .Sections}}
<p class="profile-stats"><strong>{{num .TotalItems}}</strong> {{plural .TotalItems "favorite" "favorites"}} across <strong>{{.TotalLists}}</strong> {{plural .TotalLists "list" "lists"}}</p>
{{end}}{{end}}
</div>
</section>
{{if .Data.Sections}}
{{if gt (len .Data.Sections) 1}}
<nav class="jump container" aria-label="Lists">
{{range .Data.Sections}}<a class="chip" href="#{{.List.Slug}}">{{icon .Category.Icon}}<span>{{.List.Title}}</span></a>{{end}}
</nav>
{{end}}
{{range .Data.Sections}}
<section class="shelf container" id="{{.List.Slug}}" aria-labelledby="h-{{.List.Slug}}">
<header class="shelf-head">
<span class="shelf-icon">{{icon .Category.Icon}}</span>
<div class="shelf-titles">
<h2 id="h-{{.List.Slug}}"><a href="/l/{{.List.Slug}}">{{.List.Title}}</a></h2>
{{with .List.Description}}<p class="shelf-desc">{{.}}</p>{{end}}
</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 "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}}
<section class="empty container">
<div class="empty-art">{{icon "deck"}}</div>
<h2>Nothing ranked yet</h2>
<p>This collection is still being curated. Check back soon.</p>
{{if .LoggedIn}}<a class="btn btn--primary" href="/admin">{{icon "plus"}}Start a list</a>{{end}}
</section>
{{end}}
{{end}}
{{define "scripts"}}<script type="module" src="/static/js/public.js?v={{.AssetVer}}"></script>{{end}}