From cab9ba28cfba9d90d0a6c4c00dbba852825f66c2 Mon Sep 17 00:00:00 2001 From: Christophe Besson Date: Fri, 11 Sep 2026 13:05:21 +0200 Subject: feat(hub): say what MeshBay is on the sign-in page The browser sign-in page now carries the project's pitch beside the form: what MeshBay is, the applications, what it is for, and what meshbay.org does and never sees, with links to the downloads and the legal pages. Text on the left and the form on the right on a desktop; one column, form first, below 1000px. Not shown in the desktop application, whose user has already downloaded it. All ten catalogues carry the text. Every claim is held to MESHBAY_DESIGN.md 2.3: the page says content never reaches the hub, not that the hub can read nothing (T3), and "end-to-end" means device to node. Signed out there is no sidebar, so the 960px main column sat at the left of the window and the sign-in, register and reset forms were centred in it (x=290 in 1440). `.page-center` pages now lift that cap. test_welcome_layout_measured.py measures the real stylesheet in Chrome: no horizontal overflow from 320 to 1440px, form first on narrow screens, form right of the text on desktops, pair centred in the window. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01D9MCBBWSm9GhBESmqzJxNy --- .../meshbay-hub/src/meshbay_hub/static/style.css | 159 ++++++++++++++++++++- 1 file changed, 157 insertions(+), 2 deletions(-) (limited to 'packages/meshbay-hub/src/meshbay_hub/static/style.css') diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css index d51e5b0..ff6fe57 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/style.css +++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css @@ -478,8 +478,11 @@ a:hover { text-decoration: underline; } exactly that much — 48px, and a scrollbar on sign-in at every window size. Measured, not deduced: `.page-center` ended at 795 and `main` at 819. The page brings its own 24px, so dropping main's here changes nothing - visible and removes the duplicated arithmetic rather than adding more. */ -.main:has(> .page-center) { padding: 0; } + visible and removes the duplicated arithmetic rather than adding more. + `max-width` goes too: signed out there is no sidebar, so the 960px column sat + at the left of the window and a "centred" form was centred in that — at + x=290 in a 1440px window. */ +.main:has(> .page-center) { padding: 0; max-width: none; } /* ── Sticky chrome ────────────────────────────────────────────────────────── */ @@ -631,6 +634,158 @@ a:hover { text-decoration: underline; } color: var(--text-dim); } +/* ── Welcome (sign-in page, browser only) ─────────────────────────────────── */ + +/* What MeshBay is on the left, the form on the right and level with the + title; stacked, form first, once the text would be narrower than the form. + The form comes first in the markup (first on a phone, first to the + keyboard) and `row-reverse` is what moves it right. Headings are + `.welcome-pitch .welcome-h` rather than a bare class so they outrank + `.main h2`. */ +.welcome { + display: flex; + flex-direction: row-reverse; + align-items: flex-start; + justify-content: center; + gap: 96px; + width: 100%; + max-width: 1180px; +} +.welcome > .login-card { flex: 0 0 380px; } + +.welcome-pitch { + flex: 1 1 0; + min-width: 0; + max-width: 660px; + color: var(--text-secondary); + font-size: 0.95rem; + line-height: 1.5; +} +.welcome-pitch p { margin-bottom: 10px; } + +.welcome-apps, .welcome-uses, .welcome-never { list-style: none; } + +.welcome-title { + margin-bottom: 10px; + color: var(--text); + font-size: 1.9em; + font-weight: 700; + line-height: 1.2; + letter-spacing: -0.02em; + text-wrap: balance; +} +.welcome-lead { font-size: 1.05em; } + +.welcome-apps { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; } +.welcome-apps li { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 5px 12px; + border: 1px solid var(--border); + border-radius: 999px; + background: var(--bg-surface); + color: var(--text); + font-size: 0.88em; +} +.welcome-apps .icon { color: var(--accent); } + +.welcome-e2e { + display: flex; + align-items: flex-start; + gap: 10px; + padding: 8px 14px; + border-left: 3px solid var(--accent); + border-radius: 0 6px 6px 0; + background: var(--accent-bg); + color: var(--text); +} +.welcome-e2e .icon { margin-top: 0.3em; color: var(--accent); } + +.welcome-pitch .welcome-h { + margin: 18px 0 8px; + color: var(--text-dim); + font-size: 0.78em; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.welcome-uses { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; } +.welcome-uses li { + display: flex; + align-items: flex-start; + gap: 10px; + color: var(--text); + font-size: 0.92em; + line-height: 1.45; +} +.welcome-use-icon { + display: inline-flex; + flex: 0 0 auto; + align-items: center; + justify-content: center; + width: 32px; + height: 32px; + border-radius: 8px; + background: var(--accent-bg); + color: var(--accent); + font-size: 17px; +} + +.welcome-hub { + margin-top: 18px; + padding: 12px 18px; + border: 1px solid var(--border); + border-radius: 8px; + background: var(--bg-surface); + font-size: 0.92em; +} +.welcome-pitch .welcome-hub .welcome-h { margin-top: 0; } +.welcome-pitch .welcome-hub-never { margin-bottom: 6px; color: var(--text); font-weight: 600; } +.welcome-never { display: flex; flex-direction: column; gap: 4px; color: var(--text); } +.welcome-never li { display: flex; align-items: flex-start; gap: 8px; } +.welcome-never .icon { margin-top: 0.3em; color: var(--success); } +.welcome-pitch .welcome-hub-free { + margin: 10px 0 0; + padding-top: 8px; + border-top: 1px solid var(--border); + color: var(--text); + font-weight: 500; +} + +.welcome-links { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 12px 20px; + margin-top: 14px; +} +.welcome-cta { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 18px; + border-radius: 6px; + background: var(--accent); + color: var(--accent-text); + font-size: 0.95em; + font-weight: 600; +} +.welcome-cta:hover { background: var(--accent-hover); text-decoration: none; } +.welcome-legal { color: var(--text-secondary); font-size: 0.9em; } +.welcome-legal:hover { color: var(--accent); } + +@media (max-width: 1000px) { + .welcome { flex-direction: column; align-items: center; gap: 36px; } + .welcome > .login-card { flex: none; } + .welcome-pitch { flex: none; width: 100%; max-width: 520px; } +} +@media (max-width: 520px) { + .welcome-title { font-size: 1.6em; } + .welcome-uses { grid-template-columns: 1fr; } +} + /* ── Form elements ────────────────────────────────────────────────────────── */ input[type="text"], -- cgit v1.2.3