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

Refine Commands section: fisheye alignment, category ordering, install step

Browse Source 
- Shrink fisheye list to 400px and vertically center it so items align
  with magazine spread content area
- Sharpen fisheye mask gradient for cleaner edge fade
- Prevent spread-flow ("leads to" etc.) from wrapping to multiple lines
- Sort fisheye/spread commands by category order instead of arbitrary
- Add beta badges to fisheye items
- Remove border-right on spread-identity and border-top on demo caption
- Add "Teach it your design" as step 2 in Get Started section
- Make spread-command-name nowrap, remove word-break/hyphens

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-03-31 11:01:49 -07:00
co-authored by Claude Opus 4.6
parent 39930a4186
commit 107aa8b7e1
4 changed files with 84 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/workflow.css
+22 -8
View File
@@ -36,10 +36,11 @@
/* Fisheye command list */
.fisheye-list {
position: relative;
height: 520px;
height: 400px;
align-self: center;
overflow: hidden;
mask-image: linear-gradient(to bottom, transparent 2%, black 12%, black 88%, transparent 98%);
-webkit-mask-image: linear-gradient(to bottom, transparent 2%, black 12%, black 88%, transparent 98%);
mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
}
.fisheye-scroll {
@@ -84,6 +85,21 @@
color: var(--color-accent);
}
.fisheye-beta {
font-family: var(--font-body);
font-size: 0.45rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-ash);
border: 1px solid var(--color-mist);
border-radius: 3px;
padding: 1px 4px;
margin-left: 0.35em;
vertical-align: middle;
}
/* The viewport that clips to one spread at a time */
.magazine-viewport {
position: relative;
@@ -130,7 +146,6 @@
justify-content: center;
gap: var(--spacing-md);
padding-right: var(--spacing-lg);
border-right: 1px solid var(--color-mist);
}
.spread-category-label {
@@ -143,6 +158,7 @@
}
.spread-command-name {
white-space: nowrap;
font-family: var(--font-display);
font-size: clamp(3rem, 5.5vw, 5.5rem);
font-weight: 600;
@@ -150,8 +166,6 @@
color: var(--color-ink);
margin: 0;
letter-spacing: -0.02em;
word-break: break-word;
hyphens: auto;
}
.spread-command-name .spread-slash {
@@ -186,8 +200,9 @@
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
flex-wrap: nowrap;
margin-top: var(--spacing-xs);
overflow: hidden;
}
.spread-flow-label {
@@ -305,7 +320,6 @@
color: var(--color-ash);
text-align: center;
padding: var(--spacing-sm) var(--spacing-md);
border-top: 1px solid var(--color-mist);
background: var(--color-paper);
}