2633ca0e0d
Adds the complete "KI verstehen" presentation (36 slides), the Präsentations-Konfigurator (config.html + slides-manifest.js) for curating which slides to show, and updates DESIGN.md/PATTERNS.md/ deck-template.html to reflect the new house font (General Sans) and newly established patterns (chapter dividers, term tooltips, the mitmach game, ambient sound, and the slide configurator).
62 lines
3.0 KiB
HTML
62 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Font-Vorschau · Headline-Alternativen</title>
|
|
<link rel="preconnect" href="https://api.fontshare.com">
|
|
<link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=clash-display@700,600&f[]=general-sans@700,600&f[]=switzer@700,600&f[]=cabinet-grotesk@700,800&display=swap">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { background: #0A0A0F; color: #F5F5F2; font-family: sans-serif; padding: 60px 80px; }
|
|
.row { border-bottom: 1px solid #23232E; padding: 48px 0; }
|
|
.row:last-child { border-bottom: none; }
|
|
.label {
|
|
font-family: 'JetBrains Mono', monospace; font-size: 14px; letter-spacing: 0.2em;
|
|
text-transform: uppercase; color: #E4002B; margin-bottom: 16px;
|
|
display: flex; align-items: center; gap: 14px;
|
|
}
|
|
.label .tag { color: rgba(245,245,242,0.35); text-transform: none; letter-spacing: 0; }
|
|
.sample {
|
|
font-weight: 700; font-size: 92px; line-height: 0.96; letter-spacing: -0.035em;
|
|
max-width: 1300px;
|
|
}
|
|
.sample .accent { color: #E4002B; }
|
|
.sample-small {
|
|
font-weight: 600; font-size: 40px; letter-spacing: -0.02em; margin-top: 20px;
|
|
color: rgba(245,245,242,0.6);
|
|
}
|
|
h1 { font-family: 'JetBrains Mono', monospace; font-size: 20px; letter-spacing: 0.14em;
|
|
text-transform: uppercase; color: rgba(245,245,242,0.5); margin-bottom: 50px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Headline-Schrift · Vorschau in Deck-Größe (92px / 40px)</h1>
|
|
|
|
<div class="row">
|
|
<div class="label">Aktuell <span class="tag">Clash Display · 700</span></div>
|
|
<div class="sample" style="font-family: 'Clash Display', sans-serif;">MCP ist USB-C<br>für <span class="accent">KI-Anwendungen.</span></div>
|
|
<div class="sample-small" style="font-family: 'Clash Display', sans-serif;">Karten-Titel · Zahlen · Buttons</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="label">Option 1 <span class="tag">General Sans · 700 (Empfohlen)</span></div>
|
|
<div class="sample" style="font-family: 'General Sans', sans-serif;">MCP ist USB-C<br>für <span class="accent">KI-Anwendungen.</span></div>
|
|
<div class="sample-small" style="font-family: 'General Sans', sans-serif;">Karten-Titel · Zahlen · Buttons</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="label">Option 2 <span class="tag">Switzer · 700</span></div>
|
|
<div class="sample" style="font-family: 'Switzer', sans-serif;">MCP ist USB-C<br>für <span class="accent">KI-Anwendungen.</span></div>
|
|
<div class="sample-small" style="font-family: 'Switzer', sans-serif;">Karten-Titel · Zahlen · Buttons</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="label">Option 3 <span class="tag">Cabinet Grotesk · 700</span></div>
|
|
<div class="sample" style="font-family: 'Cabinet Grotesk', sans-serif;">MCP ist USB-C<br>für <span class="accent">KI-Anwendungen.</span></div>
|
|
<div class="sample-small" style="font-family: 'Cabinet Grotesk', sans-serif;">Karten-Titel · Zahlen · Buttons</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|