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

refine(site): restructure "Get Started" around the skill first

Browse Source 
Step 1 is now skill-only (the outdated "powers visual mode" claim
and the global CLI install are gone). Chrome extension stays at
step 3, the CLI moves to a new optional step 4 with a link to npm,
and "Stay updated" shifts to step 5. Step 2 collapses its three
numbered sub-steps into a compact command/caption table so the
"Use it" panel matches step 1's height instead of towering over it.

Also: keep code chips and the npm link on one line each (nowrap)
so the caption wraps only on natural prose.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-04-22 19:38:33 -07:00
co-authored by Claude Opus 4.7
parent 2658baa461
commit d60de0fb97
2 changed files with 121 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+78
View File
@@ -2943,6 +2943,78 @@ code {
color: var(--color-accent);
}
/* Compact 3-row "try it" table. Replaces the numbered sub-steps
inside step 2 to condense vertical height. Each row: mono command
example + one-line caption. Collapses to stacked on narrow screens. */
.install-howto-rows {
margin: var(--spacing-lg) 0 0;
padding: 0;
display: flex;
flex-direction: column;
}
.install-howto-row {
display: grid;
grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
gap: var(--spacing-md);
align-items: baseline;
padding: var(--spacing-sm) 0;
border-bottom: 1px solid var(--color-mist);
}
.install-howto-row:first-child {
padding-top: 0;
}
.install-howto-row:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.install-howto-row dt {
margin: 0;
min-width: 0;
}
.install-howto-row dt code {
font-family: var(--font-mono);
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-ink);
background: var(--color-accent-dim);
padding: 3px 8px;
border-radius: 3px;
white-space: nowrap;
}
.install-howto-row dd {
margin: 0;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--color-ink);
}
.install-howto-row dd code {
font-family: var(--font-mono);
font-size: 0.8125em;
background: var(--color-mist);
padding: 1px 5px;
border-radius: 3px;
color: var(--color-ink);
white-space: nowrap;
}
.install-howto-row .install-path-slash {
color: var(--color-accent);
}
@media (max-width: 700px) {
.install-howto-row {
grid-template-columns: 1fr;
gap: 6px;
}
}
.install-howto-footer {
display: flex;
flex-wrap: wrap;
@@ -3432,6 +3504,7 @@ code {
font-size: 0.75rem;
color: var(--color-ash);
line-height: 1.5;
text-wrap: pretty;
}
.install-cmd-note code {
@@ -3441,6 +3514,11 @@ code {
padding: 2px 5px;
border-radius: 3px;
color: var(--color-ink);
white-space: nowrap;
}
.install-cmd-note a {
white-space: nowrap;
}