eleven / ocho Public

home: center the card + hint together (kill the big gap) (#328)

The shared body is a stretch grid — fine for the single-card ceremony pages,
but with two children on the landing (card + hint) it pushed them to opposite
ends of the viewport. Scope align-content:center to the landing body so the two
center as one group, hint just below the card.

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Paul Campbell 4 months ago e0f40aef89be76b23a9a57d6eef95dd6b3420cb1 parent 2e81e66

1 file changed, +5 −1

home/web/pages/index.html +5 −1

diff --git a/home/web/pages/index.html b/home/web/pages/index.html

index 038e2fa..3a3c9d0 100644

--- a/home/web/pages/index.html

+++ b/home/web/pages/index.html

@@ -12,6 +12,10 @@

<style>

/* The landing is a single centered card: the Eleven mark, one button, and a

reassuring line. Your spaces appear only once you've signed in. */

+ /* Center the card + hint as one group. The shared body is a stretch grid

+ (fine for the single-card ceremony pages); with two children here it would

+ otherwise push them to opposite ends of the viewport. */

+ body.landing { align-content: center; }

.brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; }

/* The real app icon (web/static/icon-*.png, copied into home's static). The

PNG is already a rounded superellipse; the radius just cleans the edge. */

@@ -55,7 +59,7 @@

.addform-label { font-size: .8rem; color: var(--muted); margin: 0; width: 100%; }

</style>

</head>

-<body>

+<body class="landing">