skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-12 06:06:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add docs starter rail dividers

Browse Source
This commit is contained in:
Paul Bakaus
2026-06-08 15:44:27 -07:00
parent 3fbf64698c
commit 55a54c0fbd
2 changed files with 49 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/pages/docs/index.astro
+20 -10
View File
@@ -117,16 +117,26 @@ 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 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>
<span class="docs-start-rail-label">{step.label}</span>
<code class="docs-start-rail-command">{step.command}</code>
<span class="docs-start-rail-line">{step.line}</span>
</li>
))}
</ol>
<div class="docs-start-rail-sequence">
<div class="docs-start-rail-divider docs-start-rail-divider--top" aria-hidden="true">
<div class="ksd-divider ksd-divider--double-notch"></div>
</div>
<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>
<span class="docs-start-rail-label">{step.label}</span>
<code class="docs-start-rail-command">{step.command}</code>
<span class="docs-start-rail-line">{step.line}</span>
</li>
))}
</ol>
<div class="docs-start-rail-divider docs-start-rail-divider--bottom" aria-hidden="true">
<div class="ksd-divider ksd-divider--double-notch"></div>
</div>
</div>
<p class="docs-start-rail-note">Full walkthrough: <a href="/tutorials/getting-started">Getting started</a>.</p>
</section>
site/styles/docs-kinpaku.css
+29 -2
View File
@@ -17,6 +17,7 @@
============================================================================ */
@import "./kinpaku-tokens.css";
@import "./divider-patterns.css";
/* ============================================================================
@@ -372,14 +373,36 @@ html.light .docs-kinpaku {
/* Quick start rail ----------------------------------------------------- */
.docs-kinpaku .docs-start-rail-sequence {
display: grid;
gap: clamp(12px, 1.8vw, 18px);
}
.docs-kinpaku .docs-start-rail-divider {
color: var(--docs-accent);
opacity: 0.86;
}
html.light .docs-kinpaku .docs-start-rail-divider {
opacity: 0.58;
}
.docs-kinpaku .docs-start-rail-divider .ksd-divider {
color: currentColor;
}
.docs-kinpaku .docs-start-rail-divider--top .ksd-divider {
transform: scaleY(-1);
}
.docs-kinpaku .docs-start-rail-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--ks-rule);
border-bottom: 1px solid var(--ks-rule);
border-top: 0;
border-bottom: 0;
}
@media (max-width: 940px) {
@@ -491,6 +514,10 @@ html.light .docs-kinpaku {
padding-inline: 0;
}
.docs-kinpaku .docs-start-rail-step:last-child {
border-bottom: 0;
}
.docs-kinpaku .docs-start-rail-command {
min-height: 0;
}