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

Redesign hero, add theme toggle, fix dark mode

Browse Source 
- Remove GPU-intensive shader from hero section
- Combine hero with problem section for immediate impact
- Add before/after demo directly in first viewport
- Move "works with" logos inline with CTA
- Remove redundant "Common AI defaults" tags

- Add three-way theme toggle (light/system/dark)
- Persist theme preference to localStorage
- Position toggle in bottom-right corner

- Fix dark mode throughout:
  - Update glass terminal and source window backgrounds
  - Add CSS custom properties for framework category colors
  - Muted dark backgrounds with brighter text for cards

- Replace smooth scroll with instant jump for anchor links
- Remove Lenis smooth scroll library dependency

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-01-11 14:37:46 -08:00
co-authored by Claude Opus 4.5
parent a11df4f476
commit 6b77213f91
7 changed files with 376 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/workflow.css
+7 -12
View File
@@ -139,7 +139,7 @@
font-family: var(--font-mono);
font-size: 0.75rem;
padding: 5px 12px;
background: var(--color-mist);
background: var(--color-cream);
border: 1px solid var(--color-mist);
border-bottom: none;
border-radius: 6px 6px 0 0;
@@ -201,14 +201,12 @@
/* Source Window Content */
.source-window {
background: rgba(255, 255, 255, 0.95);
background: var(--color-paper);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--color-mist);
border-radius: 8px;
box-shadow:
0 20px 60px -10px rgba(0,0,0,0.15),
0 0 0 1px rgba(255,255,255,0.5) inset;
box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15);
height: 100%;
display: flex;
flex-direction: column;
@@ -216,7 +214,7 @@
}
.source-header {
background: rgba(0,0,0,0.02);
background: var(--color-cream);
padding: 12px 16px;
display: flex;
align-items: center;
@@ -259,15 +257,12 @@
}
.glass-terminal {
background: rgba(255, 255, 255, 0.9);
/* Glass effect handled by backdrop-filter if supported */
background: var(--color-paper);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--color-mist);
border-radius: 8px;
box-shadow:
0 20px 60px -10px rgba(0,0,0,0.15),
0 0 0 1px rgba(255,255,255,0.5) inset;
box-shadow: 0 20px 60px -10px rgba(0,0,0,0.15);
height: 100%;
display: flex;
flex-direction: column;
@@ -275,7 +270,7 @@
}
.terminal-header {
background: rgba(0,0,0,0.02);
background: var(--color-cream);
padding: 12px 16px;
display: flex;
align-items: center;