amadan
home: tighten the saved-spaces list spacing (#347)
The rows read airy: names inherited the card body's 1.5 line-height (a tall box for each bold name), and 8px row padding + a 2px name/url gap compounded the looseness. Tightened the vertical rhythm — name/url line- heights to ~1.25, row padding 8px→5px, drop the extra intra-row gap, and section-heading top margin 16px→12px — so a name+url reads as one compact block and the list sits closer together. No behaviour change.
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
1 file changed,
+7
−5
home/web/pages/index.html+7 −5
diff --git a/home/web/pages/index.html b/home/web/pages/index.html| index 1bcd864..417c52a 100644 |
| --- a/home/web/pages/index.html |
| +++ b/home/web/pages/index.html |
| @@ -44,7 +44,7 @@ |
| /* Section headings: "Starred" and "More" — only shown once some are starred. */ |
| .spaces-head { |
| font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; |
| - color: var(--muted); font-family: var(--font-display); margin: 16px 0 2px; |
| + color: var(--muted); font-family: var(--font-display); margin: 12px 0 3px; |
| } |
| .spaces-head:first-child { margin-top: 0; } |
| #spaces > p.empty { color: var(--muted); font-size: .9rem; margin: 6px 0 0; } |
| @@ -60,14 +60,16 @@ |
| ul.servers { list-style: none; margin: 0; padding: 0; } |
| ul.servers li { |
| display: flex; align-items: center; gap: 8px; |
| - padding: 8px 6px; border-radius: 10px; |
| + padding: 5px 6px; border-radius: 10px; |
| /* No separator lines: the hover wash (below) is the interactive cue, and the |
| lifted row + the gap it leaves carry the structure while dragging. */ |
| } |
| - .srv-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } |
| - ul.servers li a.name { font-weight: 600; color: var(--ink); text-decoration: none; } |
| + /* Tight line-heights so a name+url row reads as one compact block, not two |
| + airy lines (the card body sets 1.5, which is too loose for a list). */ |
| + .srv-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } |
| + ul.servers li a.name { font-weight: 600; line-height: 1.25; color: var(--ink); text-decoration: none; } |
| ul.servers li a.name:hover { text-decoration: underline; } |
| - ul.servers li .url { color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; } |
| + ul.servers li .url { color: var(--muted); font-size: .8rem; line-height: 1.3; overflow-wrap: anywhere; } |
| /* Star toggle: a quiet outline star that fills gold when on. */ |
| .star { |
| flex: none; background: none; border: none; padding: 2px; cursor: pointer; |