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

Polish live mode and slop pages

Browse Source
This commit is contained in:
Paul Bakaus
2026-06-17 17:38:07 +09:00
parent c7539c867d
commit 617b3a6e5e
5 changed files with 181 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/styles/light-mode.css
+22 -7
View File
@@ -776,6 +776,17 @@ html.light .slop-kinpaku .slop-layer {
border-color: var(--ks-rule);
}
html.light .slop-kinpaku .gallery-card:hover,
html.light .slop-kinpaku .rule-card:hover {
background: var(--ks-lacquer-raised);
border-color: oklch(49% 0.08 188 / 0.34);
}
html.light .slop-kinpaku .gallery-card:hover .gallery-card-title,
html.light .slop-kinpaku .rule-card:hover .rule-card-name {
color: var(--ks-champagne);
}
html.light .live-mode-kinpaku .live-mode-hero-panel,
html.light .live-mode-kinpaku .live-mode-step {
background: var(--ks-lacquer-raised);
@@ -1216,15 +1227,10 @@ html.light .docs-kinpaku .prose .docs-viz-flow-step + .docs-viz-flow-step::befor
color: var(--docs-accent);
}
html.light .live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant.is-active .docs-viz-variant-kicker,
html.light .live-mode-kinpaku .live-mode-stage-viz .docs-viz-accept-pill {
html.light .live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant.is-active .docs-viz-variant-kicker {
color: var(--ks-kinpaku-ink);
}
html.light .live-mode-kinpaku .live-mode-stage-viz .docs-viz-accept-pill {
border-color: var(--ks-kinpaku-deep);
}
/* Docs command demos — light surfaces (divider fix lives in docs-kinpaku.css) */
html.light .docs-kinpaku .docs-command-demo .split-container {
background:
@@ -1271,7 +1277,7 @@ html.light .site-header-github-star {
}
html.light .slop-kinpaku .skills-sidebar {
background: var(--ks-lacquer-raised);
background: transparent;
border-color: var(--ks-rule);
}
@@ -1607,6 +1613,15 @@ html.light .slop-kinpaku .slop-catalog-lede a:hover {
border-bottom-color: var(--ks-link-on-paper-hover);
}
html.light .slop-kinpaku :is(
.sub-page-lede,
.anti-patterns-legend-body,
.visual-mode-method-name,
.visual-mode-method-desc
) code {
background: oklch(25% 0.02 95 / 0.08);
}
html.light .cf-items a,
html.light .cf-faq-answer a {
color: var(--ks-link-on-paper);
site/styles/live-mode-kinpaku.css
+100 -22
View File
@@ -88,6 +88,10 @@
}
.live-mode-kinpaku .live-mode-page-title {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
font-family: var(--ks-font-display);
font-style: normal;
font-weight: var(--ks-type-display-weight);
@@ -99,6 +103,23 @@
text-wrap: balance;
}
.live-mode-kinpaku .live-mode-page-title-badge {
display: inline-flex;
align-items: center;
align-self: center;
padding: 3px 9px;
border: 1px solid oklch(70% 0.12 188 / 0.4);
border-radius: 2px;
background: oklch(70% 0.12 188 / 0.10);
color: var(--ks-patina);
font-family: var(--ks-mono);
font-size: 0.64rem;
font-weight: 500;
letter-spacing: 0.18em;
line-height: 1.2;
text-transform: uppercase;
}
.live-mode-kinpaku .live-mode-page-lede {
font-size: 1.1rem;
line-height: 1.65;
@@ -113,10 +134,11 @@
without blocking the demo. */
.live-mode-kinpaku .live-mode-page-alpha-note {
margin: 14px 0 0;
padding: 0;
padding: 0 0 0 14px;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: inset 2px 0 0 var(--ks-kinpaku);
font-size: 0.82rem;
line-height: 1.5;
color: var(--ks-text-muted);
@@ -305,8 +327,8 @@
.live-mode-kinpaku .live-demo-card--v1 {
background: var(--ks-lacquer-raised);
border: 0;
border-top: 3px solid var(--ks-kinpaku);
border-radius: 0;
box-shadow: inset 0 3px 0 var(--ks-kinpaku);
}
.live-mode-kinpaku .live-demo-card--v1 .live-demo-card-kicker {
@@ -368,8 +390,8 @@
.live-mode-kinpaku .live-demo-card--v3 {
background: oklch(11% 0.012 82);
border: 1px solid var(--ks-rule);
color: var(--ks-text);
border: 1px solid oklch(78% 0 0 / 0.16);
color: oklch(88% 0 0);
}
.live-mode-kinpaku .live-demo-card--v3 .live-demo-card-kicker {
@@ -380,7 +402,7 @@
font-family: var(--ks-font);
font-style: normal;
font-weight: 600;
color: var(--ks-champagne);
color: oklch(91% 0 0);
}
.live-mode-kinpaku .live-demo-card--v3 h3 em {
@@ -540,34 +562,58 @@
box-shadow: none;
}
/* Three-up variants strip (GENERATE card) — lacquer tiles, active gets
the kinpaku-tinted bg. */
.live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant {
background: var(--ks-lacquer-raised);
/* Generate card — measured rail with one clearly active take. The active
state uses solid kinpaku instead of a patina wash so it stays crisp in
light mode. */
.live-mode-kinpaku .live-mode-stage-viz--rail {
background: var(--ks-lacquer-deep);
}
.live-mode-kinpaku .viz-rail {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
width: 100%;
min-height: 62px;
border: 1px solid var(--ks-rule);
border-radius: 3px;
overflow: hidden;
background: var(--ks-lacquer-raised);
}
.live-mode-kinpaku .viz-rail-cell {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 8px;
color: var(--ks-text-muted);
box-shadow: none;
font-family: var(--ks-mono);
font-size: 8px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant.is-active {
background: oklch(78% 0.12 82 / 0.16);
border-color: var(--ks-kinpaku);
box-shadow: none;
.live-mode-kinpaku .viz-rail-cell + .viz-rail-cell {
box-shadow: inset 1px 0 0 var(--ks-rule);
}
.live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant-kicker {
color: var(--ks-text-muted);
.live-mode-kinpaku .viz-rail-cell.is-active {
background: var(--ks-kinpaku);
color: oklch(8% 0.006 95);
}
.live-mode-kinpaku .live-mode-stage-viz .docs-viz-variant.is-active .docs-viz-variant-kicker {
color: var(--ks-kinpaku);
.live-mode-kinpaku .viz-rail-mark {
width: 18px;
height: 2px;
background: currentColor;
}
/* Accept pill (ACCEPT card) — kinpaku gold ink on a subtle kinpaku wash. */
/* Accept pill (ACCEPT card) — patina on lacquer, not a pale gold wash. */
.live-mode-kinpaku .live-mode-stage-viz .docs-viz-accept-pill {
background: oklch(78% 0.12 82 / 0.16);
border: 1px solid var(--ks-kinpaku);
color: var(--ks-kinpaku);
background: oklch(8% 0.006 95);
border: 1px solid oklch(70% 0.12 188 / 0.58);
color: oklch(82% 0.07 188);
box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.05);
}
@@ -701,6 +747,38 @@
border-radius: 2px;
}
.live-mode-kinpaku .framework-list--matrix {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px;
background: var(--ks-rule);
border: 1px solid var(--ks-rule);
border-radius: 3px;
overflow: hidden;
}
.live-mode-kinpaku .framework-list--matrix li {
display: grid;
gap: 4px;
min-height: 54px;
padding: 9px 10px;
background: var(--ks-lacquer-raised);
border: 0;
border-radius: 0;
}
.live-mode-kinpaku .framework-list--matrix small {
color: var(--ks-patina-deep);
font-size: 0.62rem;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.live-mode-kinpaku .framework-list--matrix strong {
color: var(--ks-champagne);
font-weight: 500;
}
/* ============================================================================
7. FOOTER on dark surface
site/styles/slop-kinpaku.css
+44 -29
View File
@@ -275,12 +275,12 @@
.slop-kinpaku .sub-page-lede code {
font-family: var(--ks-mono);
font-size: 0.86em;
color: var(--ks-champagne);
background: var(--ks-graphite-2);
border: 1px solid var(--ks-rule);
padding: 1px 7px;
border-radius: 2px;
font-size: 0.84em;
color: var(--ks-code-fg);
background: var(--ks-code-bg);
border: 0;
padding: 0.14em 0.36em;
border-radius: var(--ks-code-radius);
}
.slop-kinpaku .sub-page-lede a {
@@ -386,6 +386,26 @@
color: var(--ks-lacquer-deep);
}
.slop-kinpaku .slop-era-toggle--ink {
background: color-mix(in oklch, var(--ks-graphite), transparent 28%);
border-color: color-mix(in oklch, var(--ks-rule), var(--ks-text) 10%);
}
.slop-kinpaku .slop-era-toggle--ink .slop-era-tab {
padding: 8px 17px;
color: var(--ks-text-muted);
}
.slop-kinpaku .slop-era-toggle--ink .slop-era-tab:hover {
color: var(--ks-text);
}
.slop-kinpaku .slop-era-toggle--ink .slop-era-tab.is-active {
background: color-mix(in oklch, var(--ks-champagne), var(--ks-lacquer-raised) 16%);
color: var(--ks-lacquer);
box-shadow: inset 0 0 0 1px oklch(70% 0.12 188 / 0.18);
}
/* Browser frame mock around the iframe. Lacquer-deep shell with kinpaku
chrome bar, matching the docs-kinpaku live-mode mock vocabulary. */
.slop-kinpaku .visual-mode-preview {
@@ -393,7 +413,7 @@
border: 1px solid var(--ks-rule);
border-radius: 4px;
overflow: hidden;
box-shadow: 0 24px 60px oklch(2% 0.004 95 / 0.55);
box-shadow: none;
}
.slop-kinpaku .visual-mode-preview-header {
@@ -497,11 +517,6 @@
object-position: top;
display: block;
filter: saturate(1.05);
transition: transform 320ms var(--ks-ease);
}
.slop-kinpaku .gallery-card:hover .gallery-card-thumb img {
transform: scale(1.04);
}
.slop-kinpaku .gallery-card-body {
@@ -623,12 +638,12 @@
.slop-kinpaku .anti-patterns-legend-body code {
font-family: var(--ks-mono);
font-size: 0.86em;
color: var(--ks-champagne);
background: var(--ks-graphite-2);
border: 1px solid var(--ks-rule);
padding: 1px 6px;
border-radius: 2px;
font-size: 0.84em;
color: var(--ks-code-fg);
background: var(--ks-code-bg);
border: 0;
padding: 0.14em 0.36em;
border-radius: var(--ks-code-radius);
}
.slop-kinpaku .anti-patterns-legend-layers {
@@ -922,11 +937,11 @@
.slop-kinpaku .visual-mode-method-name code {
font-family: var(--ks-mono);
font-size: 0.92em;
color: var(--ks-champagne);
background: var(--ks-graphite-2);
border: 1px solid var(--ks-rule);
padding: 1px 8px;
border-radius: 2px;
color: var(--ks-code-fg);
background: var(--ks-code-bg);
border: 0;
padding: 0.14em 0.36em;
border-radius: var(--ks-code-radius);
}
.slop-kinpaku .visual-mode-method-desc {
@@ -938,12 +953,12 @@
.slop-kinpaku .visual-mode-method-desc code {
font-family: var(--ks-mono);
font-size: 0.86em;
color: var(--ks-champagne);
background: var(--ks-graphite-2);
border: 1px solid var(--ks-rule);
padding: 1px 6px;
border-radius: 2px;
font-size: 0.84em;
color: var(--ks-code-fg);
background: var(--ks-code-bg);
border: 0;
padding: 0.14em 0.36em;
border-radius: var(--ks-code-radius);
}
.slop-kinpaku .visual-mode-method-desc a {