diff --git a/public/css/styles.css b/public/css/styles.css index b09f0ad03..177d39a04 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -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 { diff --git a/public/css/workflow.css b/public/css/workflow.css index 9d13c5029..100426ffd 100644 --- a/public/css/workflow.css +++ b/public/css/workflow.css @@ -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); } diff --git a/public/index.html b/public/index.html index 6493ebb52..c7adbcf9a 100644 --- a/public/index.html +++ b/public/index.html @@ -252,7 +252,7 @@
04

Get Started

-

Two steps to impeccable design.

+

Three steps to impeccable design.

@@ -348,10 +348,24 @@
- +
2 +
+

Teach it your design

+

Run once to set up your project's design context.

+
+
+
+ /impeccable teach +
+
+ + +
+
+ 3

Stay up to date

New skills, pattern updates, and design tips.

diff --git a/public/js/components/glass-terminal.js b/public/js/components/glass-terminal.js index 33b6e0953..926c7235f 100644 --- a/public/js/components/glass-terminal.js +++ b/public/js/components/glass-terminal.js @@ -79,26 +79,40 @@ function renderDesktopLayout(container, commands) { } magazineState.currentIndex = startIndex; - // Build ordered list with category separators for nav + // Filter out deprecated shims, then sort by category + const deprecated = new Set(['teach-impeccable', 'frontend-design', 'impeccable']); + const filteredCommands = commands.filter(c => !deprecated.has(c.id)); + + const categoryOrder = ['diagnostic', 'quality', 'adaptation', 'enhancement', 'intensity', 'system']; + const categoryLabelsShort = { + 'diagnostic': 'Diagnose', 'quality': 'Quality', 'adaptation': 'Adapt', + 'enhancement': 'Enhance', 'intensity': 'Intensity', 'system': 'System' + }; const grouped = {}; - commands.forEach(cmd => { + filteredCommands.forEach(cmd => { const cat = commandCategories[cmd.id] || 'other'; if (!grouped[cat]) grouped[cat] = []; grouped[cat].push(cmd); }); - - // Filter out deprecated shims - const deprecated = new Set(['teach-impeccable', 'frontend-design']); - const filteredCommands = commands.filter(c => !deprecated.has(c.id)); + const orderedCommands = []; + const headerIndices = []; + categoryOrder.forEach(cat => { + if (!grouped[cat]) return; + headerIndices.push({ index: orderedCommands.length, label: categoryLabelsShort[cat] || cat }); + orderedCommands.push(...grouped[cat]); + }); + // Use ordered list for everything + filteredCommands.length = 0; + filteredCommands.push(...orderedCommands); magazineState.commands = filteredCommands; - // Build spreads HTML + // Build spreads HTML (after ordering so indices match fisheye) const spreadsHTML = filteredCommands.map((cmd, i) => renderSpread(cmd, i, i === startIndex)).join(''); - // Build fisheye list const fisheyeHTML = filteredCommands.map((cmd, i) => { const cat = commandCategories[cmd.id] || 'other'; - return ``; + const isBeta = betaCommands.includes(cmd.id); + return ``; }).join(''); container.innerHTML = ` @@ -116,7 +130,7 @@ function renderDesktopLayout(container, commands) { initSpreadDemo(startIndex); // Set up interactions - setupFisheyeList(filteredCommands); + setupFisheyeList(filteredCommands, headerIndices); setupMagazineKeyboard(filteredCommands); setupMagazineIntersection(container); } @@ -246,7 +260,7 @@ function goToSpread(newIndex, commands) { }, 500); } -function setupFisheyeList(commands) { +function setupFisheyeList(commands, headerIndices = []) { const list = document.getElementById('fisheye-list'); const scroll = list?.querySelector('.fisheye-scroll'); const items = list ? [...list.querySelectorAll('.fisheye-item')] : []; @@ -318,8 +332,7 @@ function setupFisheyeList(commands) { let y = offset; items.forEach((item, i) => { const h = heights[i]; - const dist = Math.abs(i - center); - const scale = getScale(dist); + const scale = getScale(Math.abs(i - center)); const opacity = 0.25 + (scale - MIN_SCALE) / (1 - MIN_SCALE) * 0.75; item.style.top = `${y}px`;