cdnutter/canon
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compact home page entries; set up Compose for Arcane git sync

Browse Source 
Podium, Spotlight and Grid render smaller on the home page on desktop so
one entry no longer fills the screen; list pages keep full size.

Compose now builds on every deploy (pull_policy: build), stores data in
the canon-data named volume outside the synced folder (CANON_DATA_PATH
overrides), and takes optional bind/port/version settings.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
cdnutterandClaude Opus 5.5 committed 2026-09-30 14:13:47 -07:00
1 parent 33053d1c5f
commit 218bb296ee
4 files changed
+71 -3
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/static/css/app.css
+25
View File
@@ -166,6 +166,10 @@ code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; bac
.items { list-style: none; margin: 0; padding: 0; }
.items--grid { display: grid; gap: 22px 18px; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); }
.aspect-square .items--grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
@media (min-width: 641px) {
.page-home .items--grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.page-home .aspect-square .items--grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 640px) {
.items--grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px 12px; }
.aspect-square .items--grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
@@ -325,6 +329,21 @@ code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; bac
.podium-card { padding-bottom: 10px; }
}
/* The home page is a preview of every list, so its podium is compact; the
list page keeps the full-size one. */
@media (min-width: 641px) {
.page-home .podium { max-width: 580px; gap: 0 16px; }
.page-home .podium--2 { max-width: 390px; }
.page-home .podium--1 { grid-template-columns: minmax(0, 190px); }
.page-home .podium-card { gap: 10px; padding-bottom: 10px; }
.page-home .podium-card .item-title { font-size: 14.5px; }
.page-home .podium-spot--1 .item-title { font-size: 16px; }
.page-home .podium-step { font-size: 22px; }
.page-home .podium-spot--1 .podium-step { height: 56px; font-size: 28px; }
.page-home .podium-spot--2 .podium-step { height: 40px; }
.page-home .podium-spot--3 .podium-step { height: 28px; font-size: 18px; }
}
/* "Show N more" under a podium: the browser's own <details>, so it works
without JavaScript. */
.more { padding-top: 18px; }
@@ -372,6 +391,12 @@ code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; bac
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.spotlight-more { margin-top: 10px; }
@media (min-width: 641px) {
.page-home .spotlight, .page-home .aspect-square .spotlight { grid-template-columns: 150px 1fr; gap: 24px; padding: 18px; }
.page-home .spotlight-rank { font-size: 32px; }
.page-home .spotlight-title { font-size: clamp(20px, 2.2vw, 26px); }
.page-home .spotlight-desc, .page-home .spotlight-note { -webkit-line-clamp: 3; font-size: 14.5px; }
}
@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; }