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

chore(site): post-carbonize cleanup for Why panel 04

Browse Source 
Per reference/live.md's carbonize instructions (which I should have
followed immediately after the accept event):
- Moved the inline @scope CSS into public/css/workflow.css, rewritten
  to use the real .why-visual--v2 class instead of
  [data-impeccable-variant="2"].
- Removed the <style data-impeccable-css="afb9794d"> block from index.html.
- Removed both impeccable-carbonize-start / -end marker comments.
- Unwrapped the <div data-impeccable-variant="2" style="display: contents">
  wrapper around the accepted variant content.
- Dropped the dead @scope rules for variants 1, 3, 4 entirely.

Only load-bearing element classes remain (why-visual--v2, v2-side,
v2-label, v2-canvas-*, v2-new-*) and they're all styled via the
central stylesheet now.
This commit is contained in:
Paul Bakaus
2026-04-22 12:38:56 -07:00
parent eeb35d42f4
commit 239b75ddad
3 changed files with 193 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/workflow.css
+163
View File
@@ -2508,3 +2508,166 @@
.why-dm-tile--color { grid-row: 1 / 3; }
.why-flow-step { font-size: 11px; padding: 4px 8px; }
}
/* ============================================
WHY panel 04 — split diagonal (canvas vs. agent+browser)
Carbonized from live session afb9794d.
============================================ */
.why-visual--v2 {
padding: 0;
gap: 0;
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
}
.why-visual--v2 .v2-side {
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.why-visual--v2 .v2-side--old {
background: oklch(94% 0 0);
position: relative;
}
.why-visual--v2 .v2-side--old::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(0deg, transparent 0 24px, oklch(0% 0 0 / 0.04) 24px 25px);
pointer-events: none;
}
.why-visual--v2 .v2-side--new {
background: var(--color-cream);
border-left: 1px solid var(--color-mist);
}
.why-visual--v2 .v2-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-ash);
z-index: 1;
}
.why-visual--v2 .v2-side--new .v2-label { color: var(--color-accent); }
.why-visual--v2 .v2-canvas-chrome {
display: flex;
gap: 6px;
align-items: center;
padding-bottom: 8px;
border-bottom: 1px solid oklch(86% 0 0);
z-index: 1;
}
.why-visual--v2 .v2-canvas-tool {
font-family: var(--font-mono);
font-size: 9px;
color: oklch(45% 0 0);
background: var(--color-paper);
padding: 3px 7px;
border-radius: 3px;
border: 1px solid oklch(86% 0 0);
}
.why-visual--v2 .v2-canvas-art {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 6px;
z-index: 1;
}
.why-visual--v2 .v2-canvas-file {
font-family: var(--font-mono);
font-size: 10px;
color: oklch(40% 0 0);
}
.why-visual--v2 .v2-canvas-mock {
width: 100%;
max-width: 120px;
height: 60px;
background: var(--color-paper);
border: 1px solid oklch(82% 0 0);
border-radius: 4px;
box-shadow: 0 4px 16px oklch(0% 0 0 / 0.08);
}
.why-visual--v2 .v2-canvas-stamp {
font-family: var(--font-display);
font-style: italic;
font-size: 11px;
color: oklch(50% 0 0);
}
.why-visual--v2 .v2-new-surface {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
}
.why-visual--v2 .v2-new-line {
font-family: var(--font-mono);
font-size: 12px;
color: var(--color-ink);
background: var(--color-paper);
border: 1px solid var(--color-mist);
padding: 8px 12px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 8px;
}
.why-visual--v2 .v2-new-line::before {
content: "/";
color: var(--color-accent);
font-weight: 500;
}
.why-visual--v2 .v2-new-browser {
flex: 1;
background: var(--color-paper);
border: 1px solid var(--color-mist);
border-radius: 4px;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 60px;
}
.why-visual--v2 .v2-new-browser-dots {
display: flex;
gap: 4px;
padding: 6px 8px;
background: var(--color-mist);
}
.why-visual--v2 .v2-new-browser-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: oklch(78% 0 0);
}
.why-visual--v2 .v2-new-browser-frame {
flex: 1;
background: linear-gradient(0deg, var(--color-cream) 0, transparent 40%), var(--color-paper);
position: relative;
}
.why-visual--v2 .v2-new-browser-frame::after {
content: "";
position: absolute;
left: 10px;
top: 10px;
width: 40%;
height: 8px;
border: 1.5px solid var(--color-accent);
border-radius: 3px;
}
.why-visual--v2 .v2-new-bar {
align-self: center;
background: var(--color-ink);
color: var(--color-paper);
padding: 4px 10px;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-top: -2px;
}
public/index.html
+27 -27
View File
@@ -393,37 +393,34 @@
</article>
<article class="why-panel" id="why-panel-3" role="tabpanel" data-index="3" hidden>
<div class="why-visual why-visual--flow">
<div class="why-flow-row why-flow-row--old">
<span class="why-flow-label">The old way</span>
<div class="why-flow-steps">
<span class="why-flow-step">Figma mock</span>
<span class="why-flow-arrow" aria-hidden="true">&rarr;</span>
<span class="why-flow-step">Handoff</span>
<span class="why-flow-arrow" aria-hidden="true">&rarr;</span>
<span class="why-flow-step">Ticket</span>
<span class="why-flow-arrow" aria-hidden="true">&rarr;</span>
<span class="why-flow-step">Engineer</span>
<span class="why-flow-arrow" aria-hidden="true">&rarr;</span>
<span class="why-flow-step">QA drift</span>
<div class="why-visual why-visual--v2">
<div class="v2-side v2-side--old">
<span class="v2-label">The old way</span>
<div class="v2-canvas-chrome">
<span class="v2-canvas-tool">Move</span>
<span class="v2-canvas-tool">Frame</span>
<span class="v2-canvas-tool">Comment</span>
</div>
<div class="v2-canvas-art">
<span class="v2-canvas-file">Checkout v7 (final) final FINAL.fig</span>
<div class="v2-canvas-mock"></div>
<span class="v2-canvas-stamp">shipped Q3 2024</span>
</div>
</div>
<div class="why-flow-row why-flow-row--new">
<span class="why-flow-label">With Impeccable</span>
<div class="why-flow-pair">
<div class="why-flow-tile why-flow-tile--agent">
<span class="why-flow-tile-kicker">Your AI agent</span>
<span class="why-flow-tile-title">/impeccable craft</span>
<span class="why-flow-tile-meta">Reads your codebase. Writes the change.</span>
</div>
<span class="why-flow-plus" aria-hidden="true">+</span>
<div class="why-flow-tile why-flow-tile--browser">
<span class="why-flow-tile-kicker">Your browser</span>
<span class="why-flow-tile-title">Live Mode</span>
<span class="why-flow-tile-meta">Pick, iterate, accept. On the real page.</span>
<div class="v2-side v2-side--new">
<span class="v2-label">With Impeccable</span>
<div class="v2-new-surface">
<div class="v2-new-line">impeccable craft checkout</div>
<div class="v2-new-browser">
<div class="v2-new-browser-dots">
<span class="v2-new-browser-dot"></span>
<span class="v2-new-browser-dot"></span>
<span class="v2-new-browser-dot"></span>
</div>
<div class="v2-new-browser-frame"></div>
</div>
<span class="v2-new-bar">pick · prompt · accept</span>
</div>
<span class="why-flow-surface-foot">Two surfaces you already have open. Zero handoff.</span>
</div>
</div>
<h3 class="why-panel-title">Design where the work actually happens.</h3>
@@ -1047,5 +1044,8 @@
<script type="module" src="./app.js"></script>
<!-- impeccable-live-start -->
<script src="http://localhost:8400/live.js"></script>
<!-- impeccable-live-end -->
</body>
</html>
public/privacy.html
+3
View File
@@ -77,5 +77,8 @@
<h2>Contact</h2>
<p>Questions about this policy? Open an issue on <a href="https://github.com/pbakaus/impeccable">GitHub</a> or reach out to <a href="https://x.com/pbakaus">@pbakaus</a>.</p>
</main>
<!-- impeccable-live-start -->
<script src="http://localhost:8400/live.js"></script>
<!-- impeccable-live-end -->
</body>
</html>