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

Address HN feedback: remove dark mode, case studies, simplify support

Browse Source 
- Remove dark mode toggle and all dark theme CSS
- Remove case studies/before-after section (controversial examples)
- Simplify support section to single "buy me a coffee" button
- Fix hero and antidote section padding to align with other sections
- Use overflow-x: clip instead of hidden to preserve position:sticky

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-01-16 09:58:00 -08:00
co-authored by Claude Opus 4.5
parent 656c59019b
commit 067eb4f235
4 changed files with 19 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
-76
View File
@@ -6,7 +6,6 @@ import { initLensEffect } from "./js/components/lens.js";
import { initFrameworkViz } from "./js/components/framework-viz.js";
import { initScrollReveal } from "./js/utils/reveal.js";
import { initAnchorScroll, initHashTracking } from "./js/utils/scroll.js";
import { initThemeToggle } from "./js/utils/theme.js";
// ============================================
// STATE
@@ -237,93 +236,18 @@ document.addEventListener("click", (e) => {
}
});
// ============================================
// CASE STUDIES TABS
// ============================================
function initCaseStudyTabs() {
const container = document.querySelector('.transformations-tabbed');
if (!container) return;
const tabs = container.querySelectorAll('.transformation-tab');
const panels = container.querySelectorAll('.transformation-panel');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const tabIndex = tab.dataset.tab;
// Update tabs
tabs.forEach(t => {
t.classList.remove('active');
t.setAttribute('aria-selected', 'false');
});
tab.classList.add('active');
tab.setAttribute('aria-selected', 'true');
// Update panels
panels.forEach(p => {
p.classList.remove('active');
});
const activePanel = container.querySelector(`[data-panel="${tabIndex}"]`);
if (activePanel) {
activePanel.classList.add('active');
}
});
});
}
// ============================================
// LIGHTBOX
// ============================================
function initLightbox() {
const lightbox = document.getElementById('image-lightbox');
if (!lightbox) return;
const lightboxImage = lightbox.querySelector('.lightbox-image');
const closeBtn = lightbox.querySelector('.lightbox-close');
// Click on transformation images to open lightbox
document.querySelectorAll('.transformation-before img, .transformation-after img').forEach(img => {
img.addEventListener('click', () => {
lightboxImage.src = img.src;
lightboxImage.alt = img.alt;
lightbox.classList.add('active');
document.body.style.overflow = 'hidden';
});
});
// Close lightbox
function closeLightbox() {
lightbox.classList.remove('active');
document.body.style.overflow = '';
}
closeBtn.addEventListener('click', closeLightbox);
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) closeLightbox();
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && lightbox.classList.contains('active')) {
closeLightbox();
}
});
}
// ============================================
// STARTUP
// ============================================
function init() {
initThemeToggle();
initAnchorScroll();
initHashTracking();
initLensEffect();
initScrollReveal();
initGlassTerminal();
initFrameworkViz();
initLightbox();
initCaseStudyTabs();
loadContent();
document.body.classList.add("loaded");
public/css/main.css
+4 -143
View File
@@ -107,136 +107,6 @@ button, input, textarea, select {
--cat-system-text: #44403c;
}
/* Dark Mode - Class-based for toggle support */
html.dark {
--color-ink: oklch(98% 0 0);
--color-text: oklch(98% 0 0);
--color-paper: oklch(10% 0 0);
--color-cream: oklch(12% 0.005 350);
--color-charcoal: oklch(92% 0 0);
--color-ash: oklch(65% 0 0);
--color-mist: oklch(20% 0 0);
--color-bg: oklch(12% 0.005 350);
--color-accent: oklch(68% 0.23 350);
--color-accent-hover: oklch(76% 0.23 350);
--color-accent-dim: oklch(68% 0.23 350 / 0.15);
--color-accent-soft: oklch(68% 0.23 350 / 0.25);
/* Framework category colors - Dark mode (muted backgrounds, brighter accents) */
--cat-diagnostic-bg: #2d1f3d;
--cat-diagnostic-border: #c084fc;
--cat-diagnostic-text: #e879f9;
--cat-quality-bg: #14332a;
--cat-quality-border: #4ade80;
--cat-quality-text: #86efac;
--cat-intensity-bg: #362a1a;
--cat-intensity-border: #fbbf24;
--cat-intensity-text: #fcd34d;
--cat-adaptation-bg: #1e293b;
--cat-adaptation-border: #60a5fa;
--cat-adaptation-text: #93c5fd;
--cat-enhancement-bg: #3b1f32;
--cat-enhancement-border: #f472b6;
--cat-enhancement-text: #f9a8d4;
--cat-system-bg: #1c1917;
--cat-system-border: #a8a29e;
--cat-system-text: #d6d3d1;
}
/* System preference fallback (when no explicit preference is set) */
@media (prefers-color-scheme: dark) {
html:not(.light):not(.dark) {
--color-ink: oklch(98% 0 0);
--color-text: oklch(98% 0 0);
--color-paper: oklch(10% 0 0);
--color-cream: oklch(12% 0.005 350);
--color-charcoal: oklch(92% 0 0);
--color-ash: oklch(65% 0 0);
--color-mist: oklch(20% 0 0);
--color-bg: oklch(12% 0.005 350);
--color-accent: oklch(68% 0.23 350);
--color-accent-hover: oklch(76% 0.23 350);
--color-accent-dim: oklch(68% 0.23 350 / 0.15);
--color-accent-soft: oklch(68% 0.23 350 / 0.25);
/* Framework category colors - Dark mode */
--cat-diagnostic-bg: #2d1f3d;
--cat-diagnostic-border: #c084fc;
--cat-diagnostic-text: #e879f9;
--cat-quality-bg: #14332a;
--cat-quality-border: #4ade80;
--cat-quality-text: #86efac;
--cat-intensity-bg: #362a1a;
--cat-intensity-border: #fbbf24;
--cat-intensity-text: #fcd34d;
--cat-adaptation-bg: #1e293b;
--cat-adaptation-border: #60a5fa;
--cat-adaptation-text: #93c5fd;
--cat-enhancement-bg: #3b1f32;
--cat-enhancement-border: #f472b6;
--cat-enhancement-text: #f9a8d4;
--cat-system-bg: #1c1917;
--cat-system-border: #a8a29e;
--cat-system-text: #d6d3d1;
}
}
/* Theme Toggle */
.theme-toggle {
position: fixed;
bottom: var(--spacing-md);
right: var(--spacing-md);
z-index: 10001;
display: flex;
align-items: center;
background: var(--color-cream);
border: 1px solid var(--color-mist);
border-radius: 100px;
padding: 4px;
gap: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.theme-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: transparent;
border-radius: 50%;
color: var(--color-ash);
cursor: pointer;
transition: all 0.2s ease;
}
.theme-toggle-btn:hover {
color: var(--color-charcoal);
background: var(--color-mist);
}
.theme-toggle-btn.active {
color: var(--color-paper);
background: var(--color-ink);
}
.theme-toggle-btn svg {
width: 16px;
height: 16px;
}
/* ============================================
SKIP LINK (Accessibility)
@@ -271,7 +141,7 @@ html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden; /* Prevent horizontal scroll from vw-based full-bleed sections */
overflow-x: clip; /* Prevent horizontal scroll without breaking position:sticky */
}
body {
@@ -280,7 +150,7 @@ body {
line-height: 1.625;
color: var(--color-text);
background: var(--color-paper);
overflow-x: hidden;
overflow-x: clip;
min-height: 100vh;
min-height: 100dvh;
}
@@ -436,13 +306,14 @@ code {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--spacing-xl) var(--spacing-lg);
padding: var(--spacing-xl) 0;
background: var(--color-paper);
}
.hero-combined-container {
max-width: var(--width-max);
margin: 0 auto;
padding: 0 var(--spacing-lg);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
@@ -1982,16 +1853,6 @@ code {
.antidote-section {
padding: var(--spacing-2xl) 0;
border-top: 1px solid var(--color-mist);
background: var(--color-cream);
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
padding-left: calc(50vw - 50% + var(--spacing-lg));
padding-right: calc(50vw - 50% + var(--spacing-lg));
}
.antidote-content {
max-width: var(--width-max);
margin: 0 auto;
}
/* Patterns - tabbed layout */
public/css/styles.css
+4 -117
View File
@@ -1983,111 +1983,6 @@ button, input, textarea, select {
--cat-system-border: #78716c;
--cat-system-text: #44403c;
}
html.dark {
--color-ink: oklch(98% 0 0);
--color-text: oklch(98% 0 0);
--color-paper: oklch(10% 0 0);
--color-cream: oklch(12% 0.005 350);
--color-charcoal: oklch(92% 0 0);
--color-ash: oklch(65% 0 0);
--color-mist: oklch(20% 0 0);
--color-bg: oklch(12% 0.005 350);
--color-accent: oklch(68% 0.23 350);
--color-accent-hover: oklch(76% 0.23 350);
--color-accent-dim: oklch(68% 0.23 350 / 0.15);
--color-accent-soft: oklch(68% 0.23 350 / 0.25);
--cat-diagnostic-bg: #2d1f3d;
--cat-diagnostic-border: #c084fc;
--cat-diagnostic-text: #e879f9;
--cat-quality-bg: #14332a;
--cat-quality-border: #4ade80;
--cat-quality-text: #86efac;
--cat-intensity-bg: #362a1a;
--cat-intensity-border: #fbbf24;
--cat-intensity-text: #fcd34d;
--cat-adaptation-bg: #1e293b;
--cat-adaptation-border: #60a5fa;
--cat-adaptation-text: #93c5fd;
--cat-enhancement-bg: #3b1f32;
--cat-enhancement-border: #f472b6;
--cat-enhancement-text: #f9a8d4;
--cat-system-bg: #1c1917;
--cat-system-border: #a8a29e;
--cat-system-text: #d6d3d1;
}
@media (prefers-color-scheme: dark) {
html:not(.light):not(.dark) {
--color-ink: oklch(98% 0 0);
--color-text: oklch(98% 0 0);
--color-paper: oklch(10% 0 0);
--color-cream: oklch(12% 0.005 350);
--color-charcoal: oklch(92% 0 0);
--color-ash: oklch(65% 0 0);
--color-mist: oklch(20% 0 0);
--color-bg: oklch(12% 0.005 350);
--color-accent: oklch(68% 0.23 350);
--color-accent-hover: oklch(76% 0.23 350);
--color-accent-dim: oklch(68% 0.23 350 / 0.15);
--color-accent-soft: oklch(68% 0.23 350 / 0.25);
--cat-diagnostic-bg: #2d1f3d;
--cat-diagnostic-border: #c084fc;
--cat-diagnostic-text: #e879f9;
--cat-quality-bg: #14332a;
--cat-quality-border: #4ade80;
--cat-quality-text: #86efac;
--cat-intensity-bg: #362a1a;
--cat-intensity-border: #fbbf24;
--cat-intensity-text: #fcd34d;
--cat-adaptation-bg: #1e293b;
--cat-adaptation-border: #60a5fa;
--cat-adaptation-text: #93c5fd;
--cat-enhancement-bg: #3b1f32;
--cat-enhancement-border: #f472b6;
--cat-enhancement-text: #f9a8d4;
--cat-system-bg: #1c1917;
--cat-system-border: #a8a29e;
--cat-system-text: #d6d3d1;
}
}
.theme-toggle {
position: fixed;
bottom: var(--spacing-md);
right: var(--spacing-md);
z-index: 10001;
display: flex;
align-items: center;
background: var(--color-cream);
border: 1px solid var(--color-mist);
border-radius: 100px;
padding: 4px;
gap: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.theme-toggle-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: transparent;
border-radius: 50%;
color: var(--color-ash);
cursor: pointer;
transition: all 0.2s ease;
}
.theme-toggle-btn:hover {
color: var(--color-charcoal);
background: var(--color-mist);
}
.theme-toggle-btn.active {
color: var(--color-paper);
background: var(--color-ink);
}
.theme-toggle-btn svg {
width: 16px;
height: 16px;
}
.skip-link {
position: absolute;
top: -100%;
@@ -2111,7 +2006,7 @@ html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
overflow-x: clip;
}
body {
font-family: var(--font-body);
@@ -2119,7 +2014,7 @@ body {
line-height: 1.625;
color: var(--color-text);
background: var(--color-paper);
overflow-x: hidden;
overflow-x: clip;
min-height: 100vh;
min-height: 100dvh;
}
@@ -2237,12 +2132,13 @@ code {
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--spacing-xl) var(--spacing-lg);
padding: var(--spacing-xl) 0;
background: var(--color-paper);
}
.hero-combined-container {
max-width: var(--width-max);
margin: 0 auto;
padding: 0 var(--spacing-lg);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
@@ -3529,15 +3425,6 @@ code {
.antidote-section {
padding: var(--spacing-2xl) 0;
border-top: 1px solid var(--color-mist);
background: var(--color-cream);
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
padding-left: calc(50vw - 50% + var(--spacing-lg));
padding-right: calc(50vw - 50% + var(--spacing-lg));
}
.antidote-content {
max-width: var(--width-max);
margin: 0 auto;
}
.patterns-categories {
margin-bottom: var(--spacing-xl);
public/index.html
+11 -142
View File
@@ -38,26 +38,6 @@
<!-- Grain Overlay -->
<div class="grain-overlay" aria-hidden="true"></div>
<!-- Theme Toggle -->
<div class="theme-toggle" role="group" aria-label="Theme switcher">
<button class="theme-toggle-btn" data-theme="light" aria-label="Light theme" title="Light theme">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="5"/>
<path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
</svg>
</button>
<button class="theme-toggle-btn" data-theme="system" aria-label="System theme" title="System theme">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="3" width="20" height="14" rx="2"/>
<path d="M8 21h8M12 17v4"/>
</svg>
</button>
<button class="theme-toggle-btn" data-theme="dark" aria-label="Dark theme" title="Dark theme">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
</svg>
</button>
</div>
<!-- 1. HERO - Combined with Problem Section -->
<section id="hero" class="hero-combined">
@@ -208,106 +188,11 @@
</div>
</section>
<!-- 5. CASE STUDIES -->
<section class="casestudies-section" id="casestudies">
<div class="section-header" data-reveal>
<span class="section-number">04</span>
<h2 class="section-title">See It In Action</h2>
<p class="section-subtitle">Sample projects transformed with Impeccable commands</p>
</div>
<div class="transformations-tabbed" data-reveal>
<!-- Tab buttons -->
<div class="transformation-tabs" role="tablist">
<button class="transformation-tab active" role="tab" aria-selected="true" data-tab="0">Landing Page</button>
<button class="transformation-tab" role="tab" aria-selected="false" data-tab="1">Form UX</button>
<button class="transformation-tab" role="tab" aria-selected="false" data-tab="2">Dashboard</button>
</div>
<!-- Tab panels -->
<div class="transformation-panels">
<article class="transformation-panel active" role="tabpanel" data-panel="0">
<div class="transformation-images">
<figure class="transformation-before">
<img src="assets/landing.before.webp" alt="Landing page before transformation" loading="lazy">
<figcaption>Before</figcaption>
</figure>
<span class="transformation-arrow">→</span>
<figure class="transformation-after">
<img src="assets/landing.after.webp" alt="Landing page after transformation" loading="lazy">
<figcaption>After</figcaption>
</figure>
</div>
<div class="transformation-info">
<h3 class="transformation-title">Landing Page Polish</h3>
<p class="transformation-desc">AI-generated landing page refined from generic template to memorable brand experience.</p>
<div class="transformation-commands">
<span class="transformation-command">/critique</span>
<span class="transformation-command">/polish</span>
<span class="transformation-command">/animate</span>
</div>
</div>
</article>
<article class="transformation-panel" role="tabpanel" data-panel="1">
<div class="transformation-images">
<figure class="transformation-before">
<img src="assets/form.before.webp" alt="Form before transformation" loading="lazy">
<figcaption>Before</figcaption>
</figure>
<span class="transformation-arrow">→</span>
<figure class="transformation-after">
<img src="assets/form.after.webp" alt="Form after transformation" loading="lazy">
<figcaption>After</figcaption>
</figure>
</div>
<div class="transformation-info">
<h3 class="transformation-title">Form UX Overhaul</h3>
<p class="transformation-desc">Complex multi-step form simplified and clarified for better completion rates.</p>
<div class="transformation-commands">
<span class="transformation-command">/simplify</span>
<span class="transformation-command">/clarify</span>
<span class="transformation-command">/harden</span>
</div>
</div>
</article>
<article class="transformation-panel" role="tabpanel" data-panel="2">
<div class="transformation-images">
<figure class="transformation-before">
<img src="assets/dashboard.before.webp" alt="Dashboard before transformation" loading="lazy">
<figcaption>Before</figcaption>
</figure>
<span class="transformation-arrow">→</span>
<figure class="transformation-after">
<img src="assets/dashboard.after.webp" alt="Dashboard after transformation" loading="lazy">
<figcaption>After</figcaption>
</figure>
</div>
<div class="transformation-info">
<h3 class="transformation-title">Dashboard Redesign</h3>
<p class="transformation-desc">Generic analytics dashboard transformed into a distinctive, scannable interface.</p>
<div class="transformation-commands">
<span class="transformation-command">/audit</span>
<span class="transformation-command">/normalize</span>
<span class="transformation-command">/bolder</span>
</div>
</div>
</article>
</div>
</div>
<!-- Lightbox for expanded view -->
<div class="lightbox" id="image-lightbox">
<button class="lightbox-close" aria-label="Close">&times;</button>
<img class="lightbox-image" src="" alt="">
</div>
</section>
<!-- 6. PLATFORMS -->
<!-- 5. PLATFORMS -->
<section class="platforms-section" id="downloads">
<div class="section-header" data-reveal>
<span class="section-number">05</span>
<span class="section-number">04</span>
<h2 class="section-title">Download for Your AI Harness</h2>
<p class="section-subtitle">Same design intelligence, adapted for your workflow. Download and start using in seconds.</p>
</div>
@@ -408,10 +293,10 @@
</div>
</section>
<!-- 7. FAQ -->
<!-- 6. FAQ -->
<section class="faq-section" id="faq">
<div class="section-header" data-reveal>
<span class="section-number">06</span>
<span class="section-number">05</span>
<h2 class="section-title">Frequently Asked Questions</h2>
</div>
@@ -463,30 +348,15 @@
<!-- 8. SUPPORT THE PROJECT -->
<section class="support-section" id="support">
<div class="support-content" data-reveal>
<h2 class="support-title">Support the Project</h2>
<p class="support-desc">Impeccable isn't backed by a company or VC. It's just me, building tools I wish existed. Your support keeps this independent and actively maintained.</p>
<h2 class="support-title">Buy me a coffee</h2>
<p class="support-desc">If Impeccable helped you ship something better, consider a one-time tip.</p>
<div class="support-tiers">
<a href="https://buy.stripe.com/7sYfZi0xK8Jm5i349W8Ra00" class="support-tier" target="_blank" rel="noopener">
<span class="tier-amount">$20</span>
<span class="tier-label">Supporter</span>
</a>
<a href="https://buy.stripe.com/28E5kE4O0gbO11N6i48Ra01" class="support-tier support-tier--popular" target="_blank" rel="noopener">
<span class="tier-badge">Popular</span>
<span class="tier-amount">$100</span>
<span class="tier-label">Sponsor</span>
</a>
<a href="https://buy.stripe.com/5kQ9AUbco0cQ4dZ7m88Ra02" class="support-tier" target="_blank" rel="noopener">
<span class="tier-amount">$10k</span>
<span class="tier-label">Patron</span>
</a>
</div>
<a href="https://buy.stripe.com/aFa3cwfsEe3G25R6i48Ra03" class="support-custom" target="_blank" rel="noopener">
Or choose your own amount →
<a href="https://buy.stripe.com/aFa3cwfsEe3G25R6i48Ra03" class="btn btn-secondary" target="_blank" rel="noopener">
<span>Leave a tip</span>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M5 12h14M12 5l7 7-7 7"/>
</svg>
</a>
<p class="support-note">Voluntary contribution. No expectation of influence or future maintenance.</p>
</div>
</section>
@@ -517,7 +387,6 @@
<a href="#antidote">Anti-Patterns</a>
<a href="#commands-section">Commands</a>
<a href="/cheatsheet">Cheatsheet</a>
<a href="#casestudies">Case Studies</a>
<a href="#downloads">Downloads</a>
<a href="https://github.com/pbakaus/impeccable">GitHub</a>
</div>