skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-16 08:06:24 +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/styles.css
+20 -8
View File
@@ -129,10 +129,11 @@
}
.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 {
height: 100%;
@@ -172,6 +173,19 @@
.fisheye-item.is-active .fisheye-slash {
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;
}
.magazine-viewport {
position: relative;
height: 520px;
@@ -210,7 +224,6 @@
justify-content: center;
gap: var(--spacing-md);
padding-right: var(--spacing-lg);
border-right: 1px solid var(--color-mist);
}
.spread-category-label {
font-family: var(--font-body);
@@ -221,6 +234,7 @@
color: var(--spread-accent);
}
.spread-command-name {
white-space: nowrap;
font-family: var(--font-display);
font-size: clamp(3rem, 5.5vw, 5.5rem);
font-weight: 600;
@@ -228,8 +242,6 @@
color: var(--color-ink);
margin: 0;
letter-spacing: -0.02em;
word-break: break-word;
hyphens: auto;
}
.spread-command-name .spread-slash {
color: var(--spread-accent);
@@ -259,8 +271,9 @@
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
flex-wrap: nowrap;
margin-top: var(--spacing-xs);
overflow: hidden;
}
.spread-flow-label {
font-family: var(--font-body);
@@ -362,7 +375,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);
}
.spread-demo-area .demo-container {