From 53c0550b8fb7a42cece963188b186545877a4c63 Mon Sep 17 00:00:00 2001 From: sunrisepeak Date: Fri, 14 Aug 2026 09:00:13 +0800 Subject: [PATCH] fix(css): give the install command its own top margin `.cmd` set only `margin-bottom`. Its top spacing came from `.iface` (`margin: 16px 0 4px`), which wraps it on indexes whose plugin declares an interface line. An index that declares none -- dsh-index is one; its packages are config layers, not things you import -- renders the install command directly after `.lede`, whose own margin is `6px 0 0`. With no margin between them the description and the command run together as one block, which is what a reader of that page reported. The command now owns its top margin. Consecutive commands stay tight at 6px, and inside `.iface` the wrapper still supplies the gap, so no existing layout moves. --- xpkgindex/static/css/site.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/xpkgindex/static/css/site.css b/xpkgindex/static/css/site.css index e120936..def3788 100644 --- a/xpkgindex/static/css/site.css +++ b/xpkgindex/static/css/site.css @@ -319,11 +319,19 @@ main.wrap { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 5px; } +/* The top margin is the command's own, not something an ancestor supplies. + It used to have none, and got its breathing room from `.iface` + (`margin: 16px 0 4px`). An index whose plugin declares no interface line + therefore rendered the install command flush against the lede, with the + description and the command reading as one run-together block. Consecutive + commands stay tight, and inside `.iface` the wrapper still owns the gap. */ .cmd { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--bg-code); border: 1px solid var(--line); - border-radius: var(--radius-sm); padding: 8px 10px; margin-bottom: 6px; + border-radius: var(--radius-sm); padding: 8px 10px; margin: 14px 0 6px; } +.cmd + .cmd { margin-top: 6px; } +.iface .cmd { margin-top: 0; } /* A command is one line at every width. Truncating with an ellipsis beats wrapping (a two-line command reads as two commands) and beats a scrollbar (you cannot see there is more). The copy button always copies the whole