Skip to content

Commit a2fe0cc

Browse files
justinprestonCopilot
justinpreston
and
Copilot
committed
Restructure portal: clean issue flow + utility band
Layout redesign: - Issues now breathe: 001(5)+002(7), 003(6)+004(6) — no utility cards jammed between - Bottom utility band with narrative flow: About → Code → Subscribe - Remove ABS Tech Strategy brand card - Subscribe: green→blue (Outlook), links to Outlook Newsletters - Hero headline: reduce from clamp(38-68px) to clamp(28-44px) - Hero margin tightened - Reduced whitespace in utility cards Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 662da0b commit a2fe0cc

1 file changed

Lines changed: 49 additions & 65 deletions

File tree

‎docs/index.html‎

Lines changed: 49 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -128,8 +128,8 @@
128128
}
129129

130130
[data-theme="light"] .card-subscribe {
131-
background: linear-gradient(145deg, rgba(16, 124, 16, 0.08), rgba(0, 0, 0, 0.02));
132-
border-color: rgba(16, 124, 16, 0.2);
131+
background: linear-gradient(145deg, rgba(0, 120, 212, 0.08), rgba(0, 0, 0, 0.02));
132+
border-color: rgba(0, 120, 212, 0.2);
133133
}
134134

135135
[data-theme="light"] .card-about {
@@ -295,7 +295,7 @@
295295

296296
/* ─── Hero section ─── */
297297
.hero-section {
298-
margin-bottom: 40px;
298+
margin-bottom: 28px;
299299
}
300300

301301
.hero-kicker {
@@ -321,12 +321,12 @@
321321

322322
.hero-headline {
323323
font-family: 'Sora', sans-serif;
324-
font-size: clamp(38px, 5vw, 68px);
324+
font-size: clamp(28px, 3.5vw, 44px);
325325
font-weight: 800;
326-
line-height: 1.05;
327-
letter-spacing: -2px;
326+
line-height: 1.1;
327+
letter-spacing: -1.5px;
328328
color: var(--text-primary);
329-
margin-bottom: 20px;
329+
margin-bottom: 16px;
330330
}
331331

332332
.hero-headline .accent {
@@ -703,7 +703,7 @@
703703
.card-subscribe {
704704
grid-column: span 4;
705705
grid-row: span 3;
706-
background: linear-gradient(145deg, rgba(16, 124, 16, 0.2) 0%, rgba(27, 27, 58, 0.9) 100%);
706+
background: linear-gradient(145deg, rgba(0, 120, 212, 0.2) 0%, rgba(27, 27, 58, 0.9) 100%);
707707
}
708708

709709
/* Sample code card */
@@ -823,7 +823,7 @@
823823
}
824824

825825
.subscribe-btn {
826-
background: linear-gradient(135deg, var(--green) 0%, var(--green-light) 100%);
826+
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-light) 100%);
827827
border: none;
828828
border-radius: var(--radius-sm);
829829
padding: 9px 14px;
@@ -1254,9 +1254,9 @@ <h1 class="hero-headline">
12541254
<!-- ─────────────── BENTO GRID ─────────────── -->
12551255
<!--
12561256
12-column layout:
1257-
Row 1–3 : 001 large (5) + 002 medium (4) + subscribe (3) = 12
1258-
Row 4–6 : 003 medium (4) + 004 medium (4) + sample-code (4) = 12
1259-
Row 7–8 : about (7) + brand (5) = 12
1257+
Row 1–3 : 001 large (5) + 002 large (7) = 12
1258+
Row 4–6 : 003 medium (6) + 004 medium (6) = 12
1259+
Row 7–8 : about (5) + sample-code (4) + subscribe (3) = 12
12601260
-->
12611261
<!--
12621262
ISSUE GATING — Issues are published weekly. To un-gate a new interactive:
@@ -1318,8 +1318,8 @@ <h2 class="card-title">Code-First Agent Delivery</h2>
13181318
<span class="diagram-label">Flow</span>
13191319
</a>
13201320

1321-
<!-- Issue 002: Scoped Multi-Source Search — span 4 -->
1322-
<a class="card card-conceptual card-medium span-4 row-3 arc-pair-b reveal" href="interactive/issue-002/" aria-label="Issue 002: Scoped Multi-Source Search — view interactive walkthrough">
1321+
<!-- Issue 002: Scoped Multi-Source Search — span 7 -->
1322+
<a class="card card-conceptual card-large span-7 row-3 arc-pair-b reveal" href="interactive/issue-002/" aria-label="Issue 002: Scoped Multi-Source Search — view interactive walkthrough">
13231323
<div class="hero-visual" aria-hidden="true">
13241324
<svg class="hv-nodes" style="width:180px;height:160px;" viewBox="0 0 180 160" fill="none" xmlns="http://www.w3.org/2000/svg">
13251325
<!-- Analyzer node top center -->
@@ -1362,22 +1362,10 @@ <h2 class="card-title">Scoped Multi-Source Search</h2>
13621362
<span class="diagram-label">Branch</span>
13631363
</a>
13641364

1365-
<!-- Subscribe card — span 3 -->
1366-
<a class="card card-subscribe span-3 row-3 reveal" href="https://outlook.office.com/newsletters/pages/550aceac3e3c9b4d815f25725e1ab1fd23/read?subscribe=footer" target="_blank" rel="noopener noreferrer" aria-label="Subscribe to The Cheat Code via Outlook Newsletters">
1367-
<div class="card-glow" style="width:120px;height:120px;top:-20px;left:-20px;background:rgba(16,124,16,0.4);"></div>
1368-
<div class="card-inner">
1369-
<div style="font-family:'Sora',sans-serif;font-weight:700;font-size:15px;letter-spacing:-0.3px;color:var(--text-primary);">Stay in the loop</div>
1370-
<p style="font-size:11px;color:var(--text-secondary);margin-top:6px;line-height:1.6;">New patterns drop every two weeks. Subscribe via Outlook Newsletters.</p>
1371-
<div style="margin-top:auto;padding-top:12px;">
1372-
<span class="subscribe-btn" style="display:inline-block;border-radius:var(--radius-sm);padding:9px 18px;">Subscribe in Outlook →</span>
1373-
</div>
1374-
</div>
1375-
</a>
1376-
1377-
<!-- ══════════ ROWS 8–10: ISSUE BAND 2 ══════════ -->
1365+
<!-- ══════════ ROWS 4–6: ISSUE BAND 2 ══════════ -->
13781366

1379-
<!-- Issue 003: Prompt-Chained Triage — span 4 -->
1380-
<a class="card card-practical card-medium span-4 row-3 arc-pair-a reveal" href="interactive/issue-003/" aria-label="Issue 003: Prompt-Chained Triage — view interactive walkthrough">
1367+
<!-- Issue 003: Prompt-Chained Triage — span 6 -->
1368+
<a class="card card-practical card-medium span-6 row-3 arc-pair-a reveal" href="interactive/issue-003/" aria-label="Issue 003: Prompt-Chained Triage — view interactive walkthrough">
13811369
<div class="hero-visual" aria-hidden="true">
13821370
<svg class="hv-nodes" style="width:190px;height:80px;" viewBox="0 0 190 80" fill="none" xmlns="http://www.w3.org/2000/svg">
13831371
<!-- Three pipeline stages -->
@@ -1417,8 +1405,8 @@ <h2 class="card-title">Prompt-Chained Triage</h2>
14171405
<span class="diagram-label">Pipeline</span>
14181406
</a>
14191407

1420-
<!-- Issue 004: Secure In-Boundary Processing — span 4 -->
1421-
<div class="card card-conceptual card-medium span-4 row-3 arc-pair-b reveal" aria-label="Issue 004: Secure In-Boundary Processing">
1408+
<!-- Issue 004: Secure In-Boundary Processing — span 6 -->
1409+
<div class="card card-conceptual card-medium span-6 row-3 arc-pair-b reveal" aria-label="Issue 004: Secure In-Boundary Processing">
14221410
<div class="hero-visual" aria-hidden="true">
14231411
<svg class="hv-nodes" style="width:170px;height:160px;" viewBox="0 0 170 160" fill="none" xmlns="http://www.w3.org/2000/svg">
14241412
<!-- Outer dashed trust boundary -->
@@ -1452,53 +1440,49 @@ <h2 class="card-title">Secure In-Boundary Processing</h2>
14521440
<span class="diagram-label">Boundary</span>
14531441
</div>
14541442

1455-
<!-- Sample Code card — span 4, coming soon -->
1456-
<div class="card card-code span-4 row-3 reveal" aria-label="Sample code coming soon">
1457-
<div class="card-glow" style="width:120px;height:120px;top:20px;right:20px;background:rgba(107,47,160,0.25);"></div>
1458-
<div class="card-inner">
1443+
<!-- ══════════ ROW 7–8: UTILITY BAND ══════════ -->
1444+
<!-- Narrative flow: Why you're here → What's available → Stay connected -->
1445+
1446+
<!-- About the Series — span 5 -->
1447+
<div class="card card-about span-5 row-2 reveal" aria-label="About The Cheat Code series">
1448+
<div class="card-glow" style="width:160px;height:160px;bottom:-40px;right:-20px;background:rgba(107,47,160,0.3);"></div>
1449+
<div class="card-inner" style="padding:18px 22px;">
1450+
<div style="font-size:10px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;color:var(--text-muted);font-family:'JetBrains Mono',monospace;margin-bottom:6px;">About the Series</div>
1451+
<p style="font-size:13px;color:var(--text-secondary);line-height:1.65;">
1452+
Each issue pairs a conceptual pattern with a practical build. Frontier architectures documented by the builders who shipped them — an ongoing archive from real customer engagements.
1453+
</p>
1454+
</div>
1455+
</div>
1456+
1457+
<!-- Sample Code — span 4 -->
1458+
<div class="card card-code span-4 row-2 reveal" aria-label="Sample code coming soon">
1459+
<div class="card-glow" style="width:100px;height:100px;top:10px;right:10px;background:rgba(107,47,160,0.25);"></div>
1460+
<div class="card-inner" style="padding:18px 22px;">
14591461
<div class="terminal-bar" aria-hidden="true">
14601462
<span class="terminal-dot dot-red"></span>
14611463
<span class="terminal-dot dot-yellow"></span>
14621464
<span class="terminal-dot dot-green"></span>
14631465
</div>
1464-
<div style="font-family:'Sora',sans-serif;font-weight:700;font-size:15px;letter-spacing:-0.3px;">Sample Code</div>
1465-
<p style="font-size:11px;color:var(--text-secondary);margin-top:4px;">Pattern starters, YAML configs, and reference architectures.</p>
1466-
<div class="code-preview" aria-hidden="true">
1467-
<span class="code-line"><span class="cm"># coming soon...</span></span>
1468-
<span class="code-line">&nbsp;</span>
1466+
<div style="font-family:'Sora',sans-serif;font-weight:700;font-size:14px;letter-spacing:-0.3px;">Sample Code</div>
1467+
<div class="code-preview" aria-hidden="true" style="margin-top:8px;">
14691468
<span class="code-line"><span class="kw">from</span> <span class="fn">cheatcode</span> <span class="kw">import</span> <span class="fn">patterns</span></span>
14701469
<span class="code-line"><span class="fn">agent</span> <span class="sym">=</span> <span class="fn">patterns</span><span class="sym">.</span><span class="fn">load</span><span class="sym">(</span><span class="str">"001"</span><span class="sym">)</span></span>
14711470
</div>
1472-
<div style="margin-top:10px;">
1473-
<span class="coming-soon-chip">Coming soon</span>
1474-
</div>
1471+
<span class="coming-soon-chip" style="margin-top:6px;">Coming soon</span>
14751472
</div>
14761473
</div>
14771474

1478-
<!-- ══════════ BOTTOM ROW: ABOUT + BRAND ══════════ -->
1479-
1480-
<!-- About the Series card — span 7 (left) -->
1481-
<div class="card card-about span-7 row-2 reveal" aria-label="About The Cheat Code series">
1482-
<div class="card-glow" style="width:200px;height:200px;bottom:-60px;right:-30px;background:rgba(107,47,160,0.3);"></div>
1483-
<div class="card-inner" style="flex-direction:row;align-items:center;gap:40px;">
1484-
<div style="flex:1;">
1485-
<div style="font-size:10px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;color:var(--text-muted);font-family:'JetBrains Mono',monospace;margin-bottom:8px;">About the Series</div>
1486-
<p style="font-size:13px;color:var(--text-secondary);line-height:1.7;max-width:560px;">
1487-
Each issue pairs a conceptual pattern with a practical build. Frontier architectures documented by the builders who shipped them — an ongoing archive from real customer engagements.
1488-
</p>
1475+
<!-- Subscribe via Outlook — span 3 -->
1476+
<a class="card card-subscribe span-3 row-2 reveal" href="https://outlook.office.com/newsletters/pages/550aceac3e3c9b4d815f25725e1ab1fd23/read?subscribe=footer" target="_blank" rel="noopener noreferrer" aria-label="Subscribe to The Cheat Code via Outlook Newsletters">
1477+
<div class="card-glow" style="width:100px;height:100px;top:-15px;left:-15px;background:rgba(0,120,212,0.4);"></div>
1478+
<div class="card-inner" style="padding:18px 22px;">
1479+
<div style="font-family:'Sora',sans-serif;font-weight:700;font-size:14px;letter-spacing:-0.3px;color:var(--text-primary);">Stay in the Loop</div>
1480+
<p style="font-size:11px;color:var(--text-secondary);margin-top:4px;line-height:1.5;">Subscribe to Outlook Newsletters. New patterns every two weeks.</p>
1481+
<div style="margin-top:auto;padding-top:8px;">
1482+
<span class="subscribe-btn" style="display:inline-block;border-radius:var(--radius-sm);padding:8px 16px;font-size:11px;">Subscribe in Outlook →</span>
14891483
</div>
14901484
</div>
1491-
</div>
1492-
1493-
<!-- ABS Brand card — span 5 (right) -->
1494-
<div class="card card-brand span-5 row-2 reveal" aria-label="ABS Tech Strategy branding">
1495-
<div class="card-inner">
1496-
<div class="brand-logo-area">
1497-
<div class="brand-logo-text">ABS Tech Strategy</div>
1498-
<div class="brand-logo-sub">AI Business Solutions</div>
1499-
</div>
1500-
</div>
1501-
</div>
1485+
</a>
15021486

15031487
</main>
15041488
<!-- ─────────────── END BENTO GRID ─────────────── -->

0 commit comments

Comments
 (0)