sscoble/speckl
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

fix: landing page layout — centered content, 2×2 feature grid, tighter spacing

Browse source 
- Hero: reduced padding, centered glow effect properly
- Sections: max-width 960px for better wide-screen centering
- Features: 2×2 grid (was auto-fit causing orphaned 4th card)
- Roadmap: 4-column grid (was flex causing wrap issues)
- Diagram: centered with display:block + margin:auto
- Philosophy: 3-column grid (was auto-fit)
- All grids: proper responsive breakpoints at 768px and 1024px
- Tighter vertical spacing throughout
This commit is contained in:
Scott Scoble 2026-04-29 16:24:07 -07:00
parent 1f5ee67404
commit e5a817a0ca
1 changed files with 99 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

160
landing/index.html
View file

@ -11,7 +11,7 @@
<meta property="og:description" content="Write what your system should do. Prove it. Ship with full traceability.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://speckl.scoble.me/">
<meta property="og:image" content="https://speckl.scoble.me/docs/diagrams/architecture.svg">
<meta property="og:image" content="https://speckl.scoble.me/favicon.svg">
<style>
:root {
--bg: #0a0a0f;
@ -23,6 +23,7 @@
--accent-glow: rgba(74, 158, 255, 0.3);
--border: #2a2a35;
--code-bg: #0d0d12;
--max-width: 960px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
@ -35,8 +36,9 @@
min-height: 100vh;
}
/* ===== HERO ===== */
.hero {
padding: 8rem 1.5rem 6rem;
padding: 6rem 2rem 5rem;
text-align: center;
background: linear-gradient(180deg, var(--bg) 0%, var(--bg-elevated) 100%);
position: relative;
@ -46,36 +48,48 @@
.hero::before {
content: '';
position: absolute;
top: -50%; left: -50%; width: 200%; height: 200%;
background: radial-gradient(circle at 30% 30%, var(--accent-glow) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(100,100,255,0.1) 0%, transparent 40%);
top: 0; left: 50%; width: 800px; height: 800px;
transform: translate(-50%, -40%);
background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%);
pointer-events: none;
}
.hero-content { position: relative; max-width: 800px; margin: 0 auto; }
.hero-content {
position: relative;
max-width: var(--max-width);
margin: 0 auto;
}
.hero h1 {
font-size: clamp(2.5rem, 8vw, 4.5rem);
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-tagline {
font-size: clamp(1.1rem, 3vw, 1.4rem);
font-size: clamp(1.05rem, 2.5vw, 1.3rem);
color: var(--text-muted);
margin-bottom: 2.5rem;
margin-bottom: 2rem;
font-weight: 300;
line-height: 1.7;
}
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-cta {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
/* ===== BUTTONS ===== */
.btn {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.875rem 1.75rem; border-radius: 0.5rem;
font-size: 1rem; font-weight: 500; text-decoration: none;
padding: 0.75rem 1.5rem; border-radius: 0.5rem;
font-size: 0.95rem; font-weight: 500; text-decoration: none;
transition: all 0.2s ease; border: none; cursor: pointer;
}
@ -85,33 +99,41 @@
.btn-secondary { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--border); }
section { padding: 5rem 1.5rem; max-width: 1100px; margin: 0 auto; }
/* ===== SECTIONS ===== */
section {
padding: 4rem 2rem;
max-width: var(--max-width);
margin: 0 auto;
}
section + section { border-top: 1px solid var(--border); }
h2 { font-size: 1.875rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--text); }
h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--accent); }
h2 { font-size: 1.75rem; font-weight: 600; margin-bottom: 1.25rem; color: var(--text); }
h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--accent); }
p { color: var(--text-muted); margin-bottom: 1rem; }
/* ===== FEATURES (2×2 grid) ===== */
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
margin-top: 1.5rem;
}
.feature-card {
background: var(--bg-card); border: 1px solid var(--border);
border-radius: 0.75rem; padding: 1.5rem;
border-radius: 0.75rem; padding: 1.25rem;
transition: border-color 0.2s ease;
}
.feature-card:hover { border-color: var(--accent); }
/* ===== CODE BLOCK ===== */
.code-block {
background: var(--code-bg); border: 1px solid var(--border);
border-radius: 0.75rem; padding: 1.5rem; margin: 1.5rem 0;
border-radius: 0.75rem; padding: 1.25rem; margin: 1.5rem 0;
overflow-x: auto;
font-family: 'SF Mono', Monaco, monospace;
font-size: 0.875rem; line-height: 1.7;
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
font-size: 0.85rem; line-height: 1.65;
}
.code-block pre {
margin: 0; padding: 0; background: transparent; border: none;
@ -123,70 +145,86 @@
.code-block .st { color: #f1fa8c; }
.code-block .cm { color: #6272a4; }
.diagram-container { margin: 2rem 0; }
/* ===== ARCHITECTURE DIAGRAM ===== */
.diagram-container { margin: 1.5rem 0; }
.diagram-container h3 {
text-align: center;
font-size: 1.25rem;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1rem;
margin-bottom: 0.75rem;
color: var(--text);
}
/* ===== PHILOSOPHY ===== */
.philosophy-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem; margin-top: 2rem;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 1.5rem;
}
.philosophy-item { text-align: center; }
.philosophy-icon {
width: 48px; height: 48px; margin: 0 auto 1rem;
width: 44px; height: 44px; margin: 0 auto 0.75rem;
background: var(--bg-elevated); border: 1px solid var(--border);
border-radius: 0.75rem; display: flex; align-items: center; justify-content: center;
font-size: 1.5rem;
border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;
font-size: 1.25rem;
}
/* ===== ROADMAP ===== */
.roadmap {
display: flex; gap: 0; margin-top: 2rem; flex-wrap: wrap;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: 1.5rem;
}
.roadmap-phase {
flex: 1; min-width: 200px; padding: 1.5rem;
padding: 1.25rem;
background: var(--bg-card); border: 1px solid var(--border);
}
.roadmap-phase:first-child { border-radius: 0.75rem 0 0 0.75rem; }
.roadmap-phase:last-child { border-radius: 0 0.75rem 0.75rem 0; }
.roadmap-phase + .roadmap-phase { border-left: none; }
.roadmap-phase:first-child { border-radius: 0.5rem 0 0 0.5rem; }
.roadmap-phase:last-child { border-radius: 0 0.5rem 0.5rem 0; }
.roadmap-phase h4 {
color: var(--accent); font-size: 0.875rem; text-transform: uppercase;
letter-spacing: 0.05em; margin-bottom: 0.5rem;
color: var(--accent); font-size: 0.8rem; text-transform: uppercase;
letter-spacing: 0.05em; margin-bottom: 0.4rem;
}
.roadmap-phase p { font-size: 0.9rem; margin: 0; }
.roadmap-phase p { font-size: 0.85rem; margin: 0; }
/* ===== FOOTER ===== */
footer {
text-align: center; padding: 3rem 1.5rem;
text-align: center; padding: 2.5rem 2rem;
border-top: 1px solid var(--border);
color: var(--text-muted); font-size: 0.875rem;
color: var(--text-muted); font-size: 0.85rem;
}
footer a { color: var(--accent); text-decoration: none; }
footer a:hover { text-decoration: underline; }
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.roadmap { flex-direction: column; }
.roadmap-phase, .roadmap-phase:first-child, .roadmap-phase:last-child {
border-radius: 0; border-left: 1px solid var(--border);
}
.roadmap-phase:first-child { border-radius: 0.75rem 0.75rem 0 0; }
.roadmap-phase:last-child { border-radius: 0 0 0.75rem 0.75rem; }
.features { grid-template-columns: 1fr; }
.philosophy-grid { grid-template-columns: 1fr; }
.roadmap { grid-template-columns: 1fr; }
.roadmap-phase { border-radius: 0 !important; }
.roadmap-phase + .roadmap-phase { border-left: 1px solid var(--border); border-top: none; }
.roadmap-phase:first-child { border-radius: 0.5rem 0.5rem 0 0 !important; }
.roadmap-phase:last-child { border-radius: 0 0 0.5rem 0.5rem !important; }
}
@media (max-width: 375px) {
.hero { padding: 4rem 1rem 3rem; }
@media (min-width: 769px) and (max-width: 1024px) {
.features { grid-template-columns: repeat(2, 1fr); }
.roadmap { grid-template-columns: repeat(2, 1fr); }
.roadmap-phase:nth-child(2) { border-radius: 0 0.5rem 0 0; }
.roadmap-phase:nth-child(3) { border-radius: 0 0 0 0.5rem; border-top: none; border-left: 1px solid var(--border); }
}
@media (max-width: 480px) {
.hero { padding: 4rem 1.25rem 3rem; }
.hero h1 { font-size: 2rem; }
.hero-tagline { font-size: 1rem; }
.btn { padding: 0.75rem 1.25rem; font-size: 0.9rem; }
section { padding: 3.5rem 1rem; }
.code-block { padding: 1rem; }
.code-block pre { font-size: 0.8rem; }
h2 { font-size: 1.5rem; }
.btn { padding: 0.625rem 1.25rem; font-size: 0.875rem; }
section { padding: 3rem 1.25rem; }
.code-block { padding: 1rem; font-size: 0.8rem; }
h2 { font-size: 1.4rem; }
}
</style>
</head>
@ -199,7 +237,7 @@
<div class="hero-cta">
<a href="https://codeberg.org/sscoble/speckl" class="btn btn-primary">Source Code</a>
<a href="https://codeberg.org/sscoble/speckl/src/branch/main/docs/whitepapers/dark-provenance.md" class="btn btn-secondary">Read the Whitepaper</a>
<a href="https://discord.gg/scbJjGQx" class="btn btn-secondary">Join Discord Community</a>
<a href="https://discord.gg/scbJjGQx" class="btn btn-secondary">Join Discord</a>
</div>
</div>
</header>
@ -207,10 +245,10 @@
<section id="what">
<h2>What is Speckl?</h2>
<p>Speckl is a multi-agent software development system where the primary artifact is the <em>specification</em>, not the code. Every behavior traces back to its source of intent — automatically.</p>
<div class="diagram-container">
<h3>System Architecture</h3>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 320" style="width: 100%; max-width: 600px; height: auto; border-radius: 0.75rem; border: 1px solid var(--border); background: var(--code-bg);">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 320" style="width: 100%; max-width: 600px; display: block; margin: 0 auto; border-radius: 0.75rem; border: 1px solid var(--border); background: var(--code-bg);">
<defs>
<marker id="arr" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto" fill="#3b82f6">
<polygon points="0 0, 10 3.5, 0 7"/>
@ -246,7 +284,7 @@
<text x="435" y="295" text-anchor="middle" fill="#6ee7b7" font-family="system-ui, sans-serif" font-size="11">(emit)</text>
</svg>
</div>
<div class="features">
<div class="feature-card">
<h3>🎯 Specification-First</h3>
@ -290,7 +328,7 @@
<section id="philosophy">
<h2>Why Specifications?</h2>
<div class="philosophy-grid">
<div class="philosophy-item">
<div class="philosophy-icon">📦</div>
@ -312,7 +350,7 @@
<section id="roadmap">
<h2>Roadmap</h2>
<div class="roadmap">
<div class="roadmap-phase">
<h4>Phase A — Now</h4>
@ -323,11 +361,11 @@
<p><strong>Consulting:</strong> Hands-on engagements with regulated-industry teams.</p>
</div>
<div class="roadmap-phase">
<h4>Phase C — 3-9mo</h4>
<h4>Phase C — 3–9mo</h4>
<p><strong>SaaS:</strong> Spec editor, live Z3 verification, provenance graph browser.</p>
</div>
<div class="roadmap-phase">
<h4>Phase D — 9-18mo</h4>
<h4>Phase D — 9–18mo</h4>
<p><strong>Compliance API:</strong> Audit reports, traceability matrices.</p>
</div>
</div>
@ -339,4 +377,4 @@
</footer>
</body>
</html>
</html>