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

redesign(site): restructure "The Case" tabs, wrap panels in card

Browse Source 
- Reorder and relabel all 8 tabs (Prevents AI slop, Brand + Product design, Ships code not mockups, Fluent in DESIGN.md, etc.)
- Flip every panel to title → body → visual → meta so the claim leads and the visual serves as proof
- Move "The Case" section header above the tab layout, matching the other sections
- Let panel visuals span the full right column; cap only the text at 60ch
- Wrap the right-side content in a paper card; strip .why-visual chrome to avoid nested cards
- Add a heading to panel 02 (Prevents AI slop) so it matches the others

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-04-22 15:59:47 -07:00
co-authored by Claude Opus 4.7
parent 96c6565cae
commit 59769e316f
2 changed files with 114 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/workflow.css
+23 -20
View File
@@ -1378,8 +1378,8 @@
.why-layout {
display: grid;
grid-template-columns: minmax(280px, 360px) 1fr;
gap: var(--spacing-2xl);
grid-template-columns: minmax(240px, 300px) 1fr;
gap: var(--spacing-xl);
align-items: start;
}
@@ -1389,10 +1389,6 @@
gap: var(--spacing-lg);
}
.why-left .section-header {
margin-bottom: 0;
}
.why-tabs {
list-style: none;
padding: 0;
@@ -1463,15 +1459,24 @@
.why-panels {
position: relative;
min-height: 280px;
padding-left: var(--spacing-md);
background: var(--color-paper);
border: 1px solid var(--color-mist);
border-radius: 10px;
padding: var(--spacing-xl);
box-shadow: 0 1px 2px oklch(0.2 0 0 / 0.04);
}
.why-panel {
display: none;
max-width: 60ch;
animation: whyFadeIn 260ms var(--ease-out);
}
.why-panel-title,
.why-panel-body,
.why-panel-meta {
max-width: 60ch;
}
.why-panel.is-active {
display: block;
}
@@ -1617,12 +1622,11 @@
/* Visual frame — common base */
.why-visual {
background: var(--color-paper);
border: 1px solid var(--color-mist);
border-radius: 8px;
padding: var(--spacing-md);
background: transparent;
border: 0;
padding: 0;
margin-bottom: var(--spacing-md);
min-height: 240px;
min-height: 0;
display: flex;
align-items: stretch;
position: relative;
@@ -3984,26 +3988,25 @@
============================================ */
.why-visual--antidote {
padding: 0;
background: transparent;
border: 0;
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
grid-template-columns: minmax(0, 1fr) 340px;
gap: var(--spacing-lg);
align-items: start;
}
.why-visual--antidote .patterns-tabbed {
margin: 0;
min-width: 0;
width: 100%;
}
.why-visual--antidote .gallery-stack-container {
flex: none;
width: 100%;
max-width: none;
}
@media (max-width: 860px) {
.why-visual--antidote { grid-template-columns: 1fr; }
}