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

Redesign: Move before/after demo to hero position in problem section

Browse Source 
- Before/after split comparison now appears immediately after the lead text
- Replaced verbose 6-card bias grid with compact horizontal tag row
- Demo is now the hero moment, biases are supporting context
- Better visual hierarchy and flow

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2025-12-16 15:14:34 -08:00
co-authored by Claude Opus 4.5
parent 73a3367e0a
commit 7bc51c2b3d
2 changed files with 43 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+28 -41
View File
@@ -1399,59 +1399,46 @@ code {
@import "./workflow.css";
/* ============================================
BIAS GRID (Problem Section Enhancement)
BIAS TAGS (Compact Problem Section)
============================================ */
.bias-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
.bias-tags {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
}
.bias-item {
.bias-tags-label {
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-ash);
}
.bias-tags-list {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
padding: var(--spacing-md);
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-xs);
}
.bias-tag {
font-size: 0.75rem;
font-weight: 500;
padding: 6px 12px;
background: var(--color-cream);
border: 1px solid var(--color-mist);
border-left: 3px solid var(--color-accent);
color: var(--color-charcoal);
transition: all var(--duration-fast) var(--ease-out);
}
.bias-item:hover {
.bias-tag:hover {
border-color: var(--color-accent);
transform: translateX(4px);
}
.bias-icon {
font-size: 1.25rem;
color: var(--color-accent);
font-weight: 300;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bias-content {
display: flex;
flex-direction: column;
gap: 2px;
}
.bias-content strong {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-ink);
}
.bias-content span {
font-size: 0.8125rem;
color: var(--color-ash);
}
/* ============================================