Improve docs starter rail alignment

This commit is contained in:
Paul Bakaus
2026-06-08 15:44:27 -07:00
parent b4e4fe1079
commit 3fbf64698c
2 changed files with 29 additions and 1 deletions
+1 -1
View File
@@ -117,7 +117,7 @@ const chains: { id: string; a: string; b: string; arrow: string; line: string }[
<p class="docs-start-rail-lede">Install, run setup, then try one command on an existing page.</p>
</header>
<ol class="docs-start-rail-steps" aria-label="Quick start steps">
<ol class="docs-start-rail-steps docs-start-rail-steps--number-gutter docs-start-rail-steps--inner-inset" aria-label="Quick start steps">
{startSteps.map((step, i) => (
<li class="docs-start-rail-step">
<span class="docs-start-rail-num">{String(i + 1).padStart(2, "0")}</span>
+28
View File
@@ -429,6 +429,34 @@ html.light .docs-kinpaku {
overflow-wrap: anywhere;
}
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-step {
grid-template-columns: minmax(34px, auto) minmax(0, 1fr);
grid-template-rows: auto auto auto;
column-gap: clamp(16px, 2vw, 24px);
row-gap: 9px;
padding: 22px clamp(18px, 2.8vw, 30px) 24px 0;
}
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-num {
grid-column: 1;
grid-row: 1 / 4;
padding-top: 1px;
}
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-label,
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-command,
.docs-kinpaku .docs-start-rail-steps--number-gutter .docs-start-rail-line {
grid-column: 2;
}
.docs-kinpaku .docs-start-rail-steps--inner-inset .docs-start-rail-step:first-child {
padding-left: 0;
}
.docs-kinpaku .docs-start-rail-steps--inner-inset .docs-start-rail-step:not(:first-child) {
padding-left: clamp(16px, 2.2vw, 24px);
}
.docs-kinpaku .docs-start-rail-line {
font-size: 0.9rem;
line-height: 1.5;