eric/kestrelsnest-blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add shelves page to game library; refresh bggpipe export

Browse Source 
Port the export's physical shelf layout (.wall/.orow/.ocell) into the
scoped embed.css so /mygames/?g=shelves renders the wall in true
proportions, using the cream board color and accent-purple links for
legibility on the dark theme. Includes a fresh bggpipe re-export (new
Etherfields and Red Dragon Inn titles, updated art). embed.js/embed.css
are untouched by the export.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Eric Wagoner
2026-08-09 16:36:24 -04:00
co-authored by Claude Opus 4.8
parent f6611257b3
commit cfabb20537
339 changed files with 2022 additions and 608 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/games/embed.css
+36
View File
@@ -43,6 +43,42 @@
color: var(--accent); border-radius: 1rem; padding: 0 .5rem;
}
/* Game-title links sit on cream surfaces (shelf cells, detail, cards). Without
a scoped color they inherit the blog theme's green, which is low-contrast on
cream. Use the export's accent purple: 5.75:1 on cream (WCAG AA) and
consistent with the footer/zone links. Game-card tiles keep --ink (below). */
#games-embed .ogames a,
#games-embed .detail a,
#games-embed .card a {
color: var(--accent);
text-decoration: underline;
text-decoration-thickness: from-font;
}
#games-embed .ogames a:hover,
#games-embed .detail a:hover,
#games-embed .card a:hover {
color: var(--ink);
}
/* The /shelves/ page: a physical map of the wall. Each .wall is a vertical
stack of .orow rows; each .ocell sizes to its real-world width via an
inline flex-grow, so the drawing keeps the shelves' true proportions.
Ported from the export's style.css (.wall/.orow/.ocell/.ozone/.ogames). */
#games-embed .wall {
display: flex; flex-direction: column; gap: .5rem; margin: .7rem 0 1.4rem;
}
#games-embed .orow { display: flex; gap: .5rem; }
#games-embed .ocell {
/* Export uses #fff; on the dark blog theme that reads stark, so use the
same cream board color as the game cards and fact panels for consistency. */
flex-basis: 0; min-width: 0; background: var(--board);
border: 1px solid var(--line); border-radius: .6rem; padding: .5rem .6rem;
color: var(--ink);
}
#games-embed .ozone { font-size: .72rem; color: var(--accent); margin-left: .3rem; }
#games-embed .ogames { margin: .3rem 0 0; font-size: .82rem; line-height: 1.5; }
#games-embed .ocell .meta { color: var(--ink-soft); }
#games-embed .detail {
display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: flex-start; margin-top: 1rem;
}