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

Redesign antidote section with detector summary and gallery link

Browse Source 
Replace the buried "Gallery of Shame" inline link with a compact
detector summary card showing all 16 auto-detected anti-patterns
as chips grouped by category (Borders, Typography, Color, Layout,
Motion). Prominent gallery link in the footer. Revised lead copy
to mention the automated detector.

Keeps the tabbed Do/Don't pattern reference below unchanged.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-03-18 08:58:49 -07:00
co-authored by Claude Opus 4.6
parent c751015fa1
commit 0ac2e2bd07
3 changed files with 165 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+108
View File
@@ -1982,6 +1982,114 @@ code {
text-decoration: underline;
}
/* Detector summary */
.detector-summary {
margin-bottom: var(--spacing-xl);
border: 1px solid var(--color-mist);
border-radius: 6px;
background: white;
overflow: hidden;
}
.detector-header {
padding: var(--spacing-sm) var(--spacing-md);
border-bottom: 1px solid var(--color-mist);
background: var(--color-cream);
}
.detector-label {
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-accent);
}
.detector-label code {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--color-accent);
}
.detector-categories {
padding: var(--spacing-md);
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.detector-category {
display: flex;
align-items: baseline;
gap: var(--spacing-sm);
}
.detector-category-name {
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-ash);
min-width: 5.5rem;
flex-shrink: 0;
}
.detector-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.detector-chip {
font-family: var(--font-mono);
font-size: 0.6875rem;
color: var(--color-charcoal);
background: var(--color-cream);
padding: 3px 10px;
border-radius: 3px;
border: 1px solid var(--color-mist);
white-space: nowrap;
line-height: 1.4;
}
.detector-footer {
padding: var(--spacing-sm) var(--spacing-md);
border-top: 1px solid var(--color-mist);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
flex-wrap: wrap;
}
.detector-count {
font-size: 0.8125rem;
color: var(--color-ash);
}
.detector-gallery-link {
font-size: 0.8125rem;
color: var(--color-accent);
text-decoration: none;
font-weight: 500;
}
.detector-gallery-link:hover {
text-decoration: underline;
}
@media (max-width: 600px) {
.detector-category {
flex-direction: column;
gap: 4px;
}
.detector-category-name {
min-width: auto;
}
}
/* ============================================
SOLUTION SECTION ENHANCEMENTS
============================================ */