mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +03:00
Restructure Visual Mode right column as editorial blocks, add extension thumbnail
The Visual Mode section had three competing cards in the right column
(25 deterministic checks, Three ways to use it, Get the Chrome extension)
all wrapped in bordered/backgrounded containers. The live detection
overlay iframe on the left is the visual anchor for the section — the
right column should be quieter editorial blocks, not three cards
fighting for attention.
Layout changes
- Strip card chrome from .visual-mode-feature: no padding, background,
or border-radius. Just an eyebrow label + paragraph in editorial flow.
- Strip card chrome from .detection-callout: no padding, background,
border, border-radius, or hover-transform theatrics.
- Bump .visual-mode-details gap from spacing-md to spacing-xl so the
three blocks breathe with editorial space instead of feeling stacked.
- Bump body text from 0.8125rem to 0.9375rem for readability without
the card padding.
Extension callout
- Add extension-detection.png — a tight 600×508 crop of the Chrome
extension's DevTools panel showing detected anti-patterns ("AI color
palette", "Overused font", "Quality issues", "Low contrast text").
Reads at thumbnail size and clearly shows the extension UI in action.
- Whole callout is a single anchor (entire row clickable).
- 88×88 image thumbnail on the left with a subtle border that shifts
to accent on hover.
- NEW eyebrow stacked above the "Get the Chrome extension →" CTA, both
left-aligned next to the thumbnail.
The result: the iframe carries the visual weight, the right column
becomes a quiet editorial sidebar, and the extension CTA gets just
enough visual punch (the thumbnail) without competing with the demo.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
06ef4f3c14
commit
d63855341a
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
+37
-32
@@ -1343,32 +1343,36 @@ code {
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* Details sidebar */
|
||||
/* Details sidebar — editorial blocks, no cards.
|
||||
The live detection overlay (left iframe) is the visual anchor for the
|
||||
whole section; the right column should be quiet text + a single image
|
||||
for the Chrome extension CTA. Hierarchy via typography + space, not
|
||||
bordered containers. */
|
||||
.visual-mode-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
gap: var(--spacing-xl);
|
||||
padding: var(--spacing-md) 0;
|
||||
}
|
||||
|
||||
.visual-mode-feature {
|
||||
padding: var(--spacing-md);
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.visual-mode-feature-label {
|
||||
display: block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.625rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--color-accent);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.visual-mode-feature p {
|
||||
font-size: 0.8125rem;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.55;
|
||||
color: var(--color-charcoal);
|
||||
margin: 0;
|
||||
@@ -1376,7 +1380,7 @@ code {
|
||||
|
||||
.visual-mode-feature code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8125rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
@@ -2619,40 +2623,41 @@ code {
|
||||
}
|
||||
|
||||
|
||||
/* Detection callout — image hero with NEW badge + CTA below.
|
||||
The whole callout is a single anchor so the entire card is clickable. */
|
||||
/* Detection callout — flat editorial CTA, no card chrome.
|
||||
Image thumbnail on the left, NEW eyebrow + CTA stacked on the right.
|
||||
The whole element is a clickable anchor. Hover shifts color, no
|
||||
transform or shadow theatrics. */
|
||||
.detection-callout {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
border: 1px solid var(--color-mist);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: var(--color-paper);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.detection-callout:hover {
|
||||
border-color: var(--color-accent);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 32px -8px var(--color-accent-dim);
|
||||
}
|
||||
|
||||
.detection-callout-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: var(--color-cream);
|
||||
border-bottom: 1px solid var(--color-mist);
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
flex-shrink: 0;
|
||||
object-fit: cover;
|
||||
object-position: top left;
|
||||
border: 1px solid var(--color-mist);
|
||||
border-radius: 6px;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.detection-callout:hover .detection-callout-image {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.detection-callout-inner {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detection-badge {
|
||||
|
||||
+27
-28
@@ -3676,32 +3676,32 @@ code {
|
||||
.visual-mode-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
gap: var(--spacing-xl);
|
||||
padding: var(--spacing-md) 0;
|
||||
}
|
||||
.visual-mode-feature {
|
||||
padding: var(--spacing-md);
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
.visual-mode-feature-label {
|
||||
display: block;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.625rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--color-accent);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
.visual-mode-feature p {
|
||||
font-size: 0.8125rem;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.55;
|
||||
color: var(--color-charcoal);
|
||||
margin: 0;
|
||||
}
|
||||
.visual-mode-feature code {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8125rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.solution-section {
|
||||
@@ -4710,34 +4710,33 @@ code {
|
||||
font-weight: 600;
|
||||
}
|
||||
.detection-callout {
|
||||
display: block;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
border: 1px solid var(--color-mist);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
background: var(--color-paper);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
.detection-callout:hover {
|
||||
border-color: var(--color-accent);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 32px -8px var(--color-accent-dim);
|
||||
}
|
||||
.detection-callout-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: var(--color-cream);
|
||||
border-bottom: 1px solid var(--color-mist);
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
flex-shrink: 0;
|
||||
object-fit: cover;
|
||||
object-position: top left;
|
||||
border: 1px solid var(--color-mist);
|
||||
border-radius: 6px;
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
.detection-callout:hover .detection-callout-image {
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
.detection-callout-inner {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.detection-badge {
|
||||
font-family: var(--font-mono);
|
||||
|
||||
+1
-1
@@ -290,7 +290,7 @@
|
||||
<p>The <strong>Chrome extension</strong> on any site, embedded in <code>/critique</code> during an AI design review, or standalone via <code>npx impeccable live</code>.</p>
|
||||
</div>
|
||||
<a href="https://chromewebstore.google.com/" class="detection-callout" target="_blank" rel="noopener">
|
||||
<img src="assets/extension-detection.png" alt="Impeccable Chrome extension flagging anti-patterns on a live page" class="detection-callout-image" loading="lazy" width="1200" height="652">
|
||||
<img src="assets/extension-detection.png" alt="Impeccable Chrome extension panel listing detected anti-patterns" class="detection-callout-image" loading="lazy" width="600" height="508">
|
||||
<div class="detection-callout-inner">
|
||||
<span class="detection-badge">New!</span>
|
||||
<span class="detection-cmd">Get the Chrome extension →</span>
|
||||
|
||||
Reference in New Issue
Block a user