twisla/roro9stack
Public Access
1
0
Fork 0
Code Issues 34 Pull Requests Actions Packages Releases 29 Activity

Site: an Apps page, and a front page that points to it
Site / build (pull_request) Successful in 12s
Details

Browse Source 
The front page's App cards were nine, and had stopped at v0.18.0: no
SSH, no Shell, no games, no compass, no MeshCore. A new page, /apps/,
has all twelve in the Launcher's order and the planned messenger, each
with its icon, what it does, a fact, its guide page, and a screen from
the device (ten taken from it now). The front page keeps six of them,
links each to its row, and says how many there are; the menu's Apps goes
to the page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0162FokPdvY2KsS4NBfwyWPk
This commit is contained in:
twisla
2026-10-15 12:36:13 +02:00
co-authored by Claude Opus 5.5
parent a618eee38e
commit f1c497794b
16 changed files with 170 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/static/css/site.css
+24 -2
View File
@@ -142,11 +142,32 @@ section { padding-top: 64px; padding-bottom: 64px; }
.card .fact::before { content: ""; width: 8px; height: 8px; background: var(--cyan); flex: none; }
.card.planned .tag { color: var(--orangetext); }
.card.planned .fact::before { background: var(--orange); }
.ic { width: 48px; height: 48px; flex: none; background-image: var(--icons); background-repeat: no-repeat; background-size: 144px 192px; image-rendering: pixelated; }
.ic { width: 48px; height: 48px; flex: none; background-image: var(--icons); background-repeat: no-repeat; background-size: 144px 288px; image-rendering: pixelated; }
.i0 { background-position: 0 0; } .i1 { background-position: -48px 0; } .i2 { background-position: -96px 0; }
.i3 { background-position: 0 -48px; } .i4 { background-position: -48px -48px; } .i5 { background-position: -96px -48px; }
.i6 { background-position: 0 -96px; } .i7 { background-position: -48px -96px; } .i8 { background-position: -96px -96px; }
.i9 { background-position: 0 -144px; }
.i9 { background-position: 0 -144px; } .i10 { background-position: -48px -144px; } .i11 { background-position: -96px -144px; }
.i12 { background-position: 0 -192px; }
/* The Apps page: an App a row, its words beside a screen from the device. */
.apps { display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
.app { background: var(--s2); padding: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 32px; align-items: center; scroll-margin-top: 96px; }
.app-text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.app .card-top { justify-content: flex-start; gap: 16px; }
.app .tag { font: 500 12px/16px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cyantext); }
.app h2 { font-size: 24px; line-height: 28px; }
.app h2 a { color: inherit; text-decoration: none; }
.app h2 a:hover, .app h2 a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.app p { color: var(--muted); }
.app .fact { display: flex; align-items: center; gap: 8px; font: 500 12px/16px var(--mono); letter-spacing: .04em; }
.app .fact::before { content: ""; width: 8px; height: 8px; background: var(--cyan); flex: none; }
.app.planned .tag { color: var(--orangetext); }
.app.planned .fact::before { background: var(--orange); }
.app-guide { font-size: 14px; }
.app-shot { margin: 0; }
.app-shot img { display: block; width: 100%; height: auto; }
.cards-more { margin-top: 24px; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover, .card h3 a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.cards-note { margin-top: 24px; font-size: 14px; line-height: 20px; color: var(--muted); }
/* Real screenshots */
@@ -225,6 +246,7 @@ footer small { display: block; max-width: 760px; }
section { padding-top: 48px; padding-bottom: 48px; }
.slab, .updates, .cta { padding: 24px; }
.panel, .card { padding: 24px; }
.app { grid-template-columns: minmax(0, 1fr); padding: 24px; gap: 24px; }
.hero .caption { margin-top: -24px; }
.num-row .big { font-size: 48px; line-height: 48px; min-width: 120px; }
}