amadan
home: the create screen back link becomes a caret-in-circle icon (#370)
"‹ Spaces" (an underlined text link) becomes a quiet circular chevron button pinned to the card top-left, iOS-modal style. Same id + show/hide wiring; aria-label carries the destination.
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
1 file changed,
+12
−2
home/web/pages/index.html+12 −2
diff --git a/home/web/pages/index.html b/home/web/pages/index.html| index cb106e2..cb4c36e 100644 |
| --- a/home/web/pages/index.html |
| +++ b/home/web/pages/index.html |
| @@ -75,7 +75,17 @@ |
| /* Create screen: the goes-to-eleven fader (fader.js). Centered and spare — |
| one line, one instrument. Feel iterated in prototypes/space-lever.html. */ |
| #create { text-align: center; } |
| - .back { display: block; width: fit-content; text-align: left; margin: 0 0 6px; font-size: .9rem; } |
| + /* Back from the create screen: a caret in a quiet circle, pinned to the |
| + card's top-left corner (iOS-modal style) rather than a text link. */ |
| + .icon-back { |
| + position: absolute; top: 16px; left: 16px; |
| + width: 34px; height: 34px; border-radius: 50%; |
| + display: grid; place-items: center; padding: 0; border: none; cursor: pointer; |
| + background: var(--quiet); color: var(--ink); |
| + } |
| + .icon-back svg { display: block; } |
| + .icon-back:hover { filter: brightness(0.97); } |
| + .icon-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } |
| .create-title { |
| font-family: var(--font-display); font-size: 23px; font-weight: 700; |
| line-height: 1.2; letter-spacing: -0.015em; margin: 20px 0 4px; |
| @@ -279,7 +289,7 @@ |
| <!-- Create a space: a focused screen — one line, one button. On success the |
| pitch is replaced by a single-serve confirmation with a Done. --> |
| <div id="create" class="hidden screen"> |
| - <button id="create-back" class="back linkish" type="button">‹ Spaces</button> |
| + <button id="create-back" class="icon-back" type="button" aria-label="Back to your spaces"><svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><path d="M10 3 5 8l5 5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></button> |
| <div id="create-pitch"> |
| <h2 class="create-title">Slide to create</h2> |
| <p class="create-sub">Your new space will be created immediately.</p> |