Skip to content

Commit f3fcc60

Browse files
sanityclaude
sanity
and
claude
committed
Fix responsive layout for AI slides at smaller resolutions
Add media queries to scale down content on screens with max-height 800px: - AI-Accelerated Development: smaller fonts and padding for boxes - Freenet for AI Agents: smaller fonts to fit all bullet points Tested at 1920x1080 and 1024x768. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 8f1b3cc commit f3fcc60

File tree

2 files changed

+60
-41
lines changed

2 files changed

+60
-41
lines changed

‎hugo-site/static/slides/ai/accelerated-development.html‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,47 @@
11
<section style="display: flex; flex-direction: column; height: 100vh;">
2-
<h2 style="flex-shrink: 0; margin-bottom: 0.3em;">AI-Accelerated Development</h2>
2+
<h2 style="flex-shrink: 0; margin-bottom: 0.2em;">AI-Accelerated Development</h2>
33

4-
<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
5-
<p style="font-size: 1.1em; margin-bottom: 0.5em; color: rgba(255,255,255,0.9); text-align: center;">
6-
Rebuild every internet service, decentralized.
7-
</p>
8-
<p style="font-size: 0.95em; margin-bottom: 1em; color: rgba(255,255,255,0.7); text-align: center;">
9-
That's a lot of work. <span style="color: #43e97b;">AI changes the economics.</span>
10-
</p>
4+
<style>
5+
.ai-dev-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0; }
6+
.ai-dev-content .tagline { font-size: 1em; margin-bottom: 0.3em; color: rgba(255,255,255,0.9); text-align: center; }
7+
.ai-dev-content .subline { font-size: 0.85em; margin-bottom: 0.8em; color: rgba(255,255,255,0.7); text-align: center; }
8+
.ai-dev-boxes { display: flex; gap: 1em; max-width: 90%; }
9+
.ai-dev-box { flex: 1; border-radius: 10px; padding: 0.8em; }
10+
.ai-dev-box p.title { font-size: 0.8em; font-weight: 600; margin-bottom: 0.3em; }
11+
.ai-dev-box ul { font-size: 0.65em; color: rgba(255,255,255,0.8); margin: 0; padding-left: 1em; }
12+
.ai-dev-box .note { font-size: 0.65em; margin-top: 0.4em; font-style: italic; }
13+
@media (max-height: 800px) {
14+
.ai-dev-content .tagline { font-size: 0.9em; }
15+
.ai-dev-content .subline { font-size: 0.75em; margin-bottom: 0.5em; }
16+
.ai-dev-box { padding: 0.6em; }
17+
.ai-dev-box p.title { font-size: 0.7em; }
18+
.ai-dev-box ul { font-size: 0.55em; }
19+
.ai-dev-box .note { font-size: 0.55em; }
20+
}
21+
</style>
1122

12-
<div style="display: flex; gap: 1.5em; max-width: 90%;">
13-
<!-- dapp-builder box -->
14-
<div style="flex: 1; background: rgba(67,233,123,0.1); border: 2px solid rgba(67,233,123,0.4); border-radius: 12px; padding: 1em;">
15-
<p style="font-size: 0.9em; font-weight: 600; color: #43e97b; margin-bottom: 0.4em;">dapp-builder skill</p>
16-
<ul style="font-size: 0.7em; color: rgba(255,255,255,0.8); margin: 0; padding-left: 1em;">
23+
<div class="ai-dev-content">
24+
<p class="tagline">Rebuild every internet service, decentralized.</p>
25+
<p class="subline">That's a lot of work. <span style="color: #43e97b;">AI changes the economics.</span></p>
26+
27+
<div class="ai-dev-boxes">
28+
<div class="ai-dev-box" style="background: rgba(67,233,123,0.1); border: 2px solid rgba(67,233,123,0.4);">
29+
<p class="title" style="color: #43e97b;">dapp-builder skill</p>
30+
<ul>
1731
<li>Claude scaffolds Freenet apps</li>
1832
<li>River architecture patterns</li>
1933
<li>Contract → Delegate → UI</li>
2034
</ul>
2135
</div>
2236

23-
<!-- AI slop box -->
24-
<div style="flex: 1; background: rgba(79,172,254,0.1); border: 2px solid rgba(79,172,254,0.4); border-radius: 12px; padding: 1em;">
25-
<p style="font-size: 0.9em; font-weight: 600; color: #4facfe; margin-bottom: 0.4em;">"But isn't AI code garbage?"</p>
26-
<ul style="font-size: 0.7em; color: rgba(255,255,255,0.8); margin: 0; padding-left: 1em;">
37+
<div class="ai-dev-box" style="background: rgba(79,172,254,0.1); border: 2px solid rgba(79,172,254,0.4);">
38+
<p class="title" style="color: #4facfe;">"But isn't AI code garbage?"</p>
39+
<ul>
2740
<li><em>Unverified</em> code is garbage</li>
2841
<li>Solution: CI + comprehensive tests</li>
2942
<li>AI drafts, tests verify, humans review</li>
3043
</ul>
31-
<p style="font-size: 0.7em; color: #4facfe; margin-top: 0.5em; font-style: italic;">
32-
Same quality bar. Higher velocity.
33-
</p>
44+
<p class="note" style="color: #4facfe;">Same quality bar. Higher velocity.</p>
3445
</div>
3546
</div>
3647
</div>

‎hugo-site/static/slides/ai/freenet-for-agents.html‎

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,42 @@
11
<section style="display: flex; flex-direction: column; height: 100vh;">
2-
<h2 style="flex-shrink: 0; margin-bottom: 0.3em;">Freenet for AI Agents</h2>
2+
<h2 style="flex-shrink: 0; margin-bottom: 0.2em;">Freenet for AI Agents</h2>
33

4-
<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;">
5-
<p style="font-size: 1em; margin-bottom: 0.8em; color: rgba(255,255,255,0.9); text-align: center;">
6-
AI agents can deploy services <span style="color: #43e97b;">autonomously</span>
7-
</p>
4+
<style>
5+
.agents-content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0; }
6+
.agents-content .tagline { font-size: 0.9em; margin-bottom: 0.6em; color: rgba(255,255,255,0.9); text-align: center; }
7+
.agents-boxes { display: flex; gap: 1em; align-items: flex-start; max-width: 90%; }
8+
.agents-list ul { font-size: 0.7em; line-height: 1.5; margin: 0; padding-left: 1em; }
9+
.agents-vision { border-radius: 10px; padding: 0.7em; }
10+
.agents-vision .title { font-size: 0.75em; font-weight: 600; margin-bottom: 0.3em; }
11+
.agents-vision p { font-size: 0.65em; line-height: 1.4; margin: 0; }
12+
.agents-vision .spec { margin-top: 0.4em; font-weight: 500; }
13+
@media (max-height: 800px) {
14+
.agents-content .tagline { font-size: 0.8em; margin-bottom: 0.4em; }
15+
.agents-list ul { font-size: 0.6em; line-height: 1.4; }
16+
.agents-vision { padding: 0.5em; }
17+
.agents-vision .title { font-size: 0.65em; }
18+
.agents-vision p { font-size: 0.55em; }
19+
}
20+
</style>
821

9-
<div style="display: flex; gap: 1.5em; align-items: flex-start; max-width: 90%;">
10-
<!-- Benefits list -->
11-
<div style="flex: 1;">
12-
<ul style="font-size: 0.75em; line-height: 1.6; margin: 0; padding-left: 1em;">
22+
<div class="agents-content">
23+
<p class="tagline">AI agents can deploy services <span style="color: #43e97b;">autonomously</span></p>
24+
25+
<div class="agents-boxes">
26+
<div class="agents-list" style="flex: 1;">
27+
<ul>
1328
<li><strong style="color: #43e97b;">No infrastructure</strong> - no AWS, no keys</li>
1429
<li><strong style="color: #43e97b;">Self-describing</strong> - code IS interface</li>
1530
<li><strong style="color: #43e97b;">Real-time</strong> - subscribe, get updates</li>
1631
<li><strong style="color: #43e97b;">Permissionless</strong> - no ToS, no limits</li>
1732
</ul>
1833
</div>
1934

20-
<!-- Vision box -->
21-
<div style="flex: 1; background: linear-gradient(135deg, rgba(67,233,123,0.15), rgba(79,172,254,0.15)); border: 2px solid rgba(67,233,123,0.4); border-radius: 12px; padding: 0.8em;">
22-
<p style="font-size: 0.8em; font-weight: 600; color: #43e97b; margin-bottom: 0.4em;">The Vision</p>
23-
<p style="font-size: 0.7em; color: rgba(255,255,255,0.85); line-height: 1.5; margin: 0;">
24-
Deploy a contract, advertise its hash, other agents interact <em>immediately</em>.
25-
</p>
26-
<p style="font-size: 0.7em; color: rgba(255,255,255,0.85); line-height: 1.5; margin-top: 0.4em;">
27-
No servers. No docs. No approval.
28-
</p>
29-
<p style="font-size: 0.7em; color: #4facfe; margin-top: 0.5em; font-weight: 500;">
30-
Contract code IS the spec.
31-
</p>
35+
<div class="agents-vision" style="flex: 1; background: linear-gradient(135deg, rgba(67,233,123,0.15), rgba(79,172,254,0.15)); border: 2px solid rgba(67,233,123,0.4);">
36+
<p class="title" style="color: #43e97b;">The Vision</p>
37+
<p style="color: rgba(255,255,255,0.85);">Deploy a contract, advertise its hash, other agents interact <em>immediately</em>.</p>
38+
<p style="color: rgba(255,255,255,0.85); margin-top: 0.3em;">No servers. No docs. No approval.</p>
39+
<p class="spec" style="color: #4facfe;">Contract code IS the spec.</p>
3240
</div>
3341
</div>
3442
</div>

0 commit comments

Comments
 (0)