Split presentation into multiple files per slide
and style
This commit is contained in:
@@ -5,472 +5,35 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Jenseits von Big Tech – Präsentation</title>
|
<title>Jenseits von Big Tech – Präsentation</title>
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.5.0/reveal.min.css">
|
||||||
<style>
|
<link rel="stylesheet" href="styles.css">
|
||||||
:root {
|
|
||||||
--r-background-color: #ffffff;
|
|
||||||
--r-main-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
--r-main-font-size: 42px;
|
|
||||||
--r-main-color: #2c2c2c;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
background: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .slides {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal section {
|
|
||||||
padding: 60px !important;
|
|
||||||
height: 100%;
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
justify-content: center !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
|
|
||||||
text-transform: none;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #2c2c2c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h1 {
|
|
||||||
font-size: 3.77em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h2 {
|
|
||||||
font-size: 2.5em;
|
|
||||||
border-left: 4px solid #2980b9;
|
|
||||||
padding-left: 30px;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal h3 {
|
|
||||||
font-size: 1.6em;
|
|
||||||
color: #2980b9;
|
|
||||||
margin-top: 1em;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal p {
|
|
||||||
font-size: 1.3em;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: #2c2c2c;
|
|
||||||
margin: 0.3em 0;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ul {
|
|
||||||
margin: 0;
|
|
||||||
text-align: left;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal li {
|
|
||||||
font-size: 1.2em;
|
|
||||||
line-height: 1.8;
|
|
||||||
color: #2c2c2c;
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
text-align: left;
|
|
||||||
list-style: disc;
|
|
||||||
margin-left: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal ul ul, .reveal ol ol {
|
|
||||||
margin-left: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
font-size: 1.8em;
|
|
||||||
color: #2980b9;
|
|
||||||
margin-top: 0.5em;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.code {
|
|
||||||
background: #f5f5f5;
|
|
||||||
padding: 12px 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: 'Courier New', monospace;
|
|
||||||
font-size: 0.85em;
|
|
||||||
color: #2980b9;
|
|
||||||
border-left: 3px solid #2980b9;
|
|
||||||
margin: 15px 0;
|
|
||||||
text-align: left;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Title slide */
|
|
||||||
.reveal .title-slide {
|
|
||||||
background: linear-gradient(135deg, #2980b9 0%, #2980b9 100%);
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .title-slide h1 {
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .title-slide h2 {
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .title-slide .subtitle {
|
|
||||||
color: #e1f0ff;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Section slide */
|
|
||||||
.reveal .section-slide {
|
|
||||||
background: #2980b9;
|
|
||||||
text-align: center;
|
|
||||||
display: flex !important;
|
|
||||||
align-items: center !important;
|
|
||||||
justify-content: center !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .section-slide h1, .reveal .section-slide h2 {
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .section-slide .subtitle {
|
|
||||||
color: #e1f0ff;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Hide controls */
|
|
||||||
.reveal .controls {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reveal .progress {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.emoji {
|
|
||||||
margin-right: 0.3em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="reveal">
|
<div class="reveal">
|
||||||
<div class="slides">
|
<div class="slides">
|
||||||
|
<script src="slides/slide-01-title.js"></script>
|
||||||
<!-- 1. Title -->
|
<script src="slides/slide-02-windows-problem.js"></script>
|
||||||
<section class="title-slide">
|
<script src="slides/slide-03-solution-intro.js"></script>
|
||||||
<h1>Jenseits von Big Tech</h1>
|
<script src="slides/slide-04-vision.js"></script>
|
||||||
<p class="subtitle">Kontrolle über die eigenen Daten</p>
|
<script src="slides/slide-05-hardware.js"></script>
|
||||||
<aside class="notes">
|
<script src="slides/slide-06-docker.js"></script>
|
||||||
Guten Tag! Ich heiße [Name] und halte heute einen Vortrag über die Möglichkeiten, die Kontrolle über deine eigenen Daten zurückzugewinnen.
|
<script src="slides/slide-07-ansible.js"></script>
|
||||||
Es geht nicht um Paranoia oder Angst vor Big Tech – sondern darum, dass es einfach mehr Spaß macht, ein System zu haben, das dir wirklich gehört.
|
<script src="slides/slide-08-wireguard-dyndns.js"></script>
|
||||||
</aside>
|
<script src="slides/slide-09-nextcloud-intro.js"></script>
|
||||||
</section>
|
<script src="slides/slide-10-nextcloud-features.js"></script>
|
||||||
|
<script src="slides/slide-11-backups-intro.js"></script>
|
||||||
<!-- 2. Windows Problem -->
|
<script src="slides/slide-12-disaster-story.js"></script>
|
||||||
<section>
|
<script src="slides/slide-13-lessons.js"></script>
|
||||||
<h2>Der Windows-Albtraum</h2>
|
<script src="slides/slide-14-backup-setup.js"></script>
|
||||||
<ul>
|
<script src="slides/slide-15-phases-intro.js"></script>
|
||||||
<li><span class="emoji">📋</span>Datei > Speichern unter</li>
|
<script src="slides/slide-16-phase-1.js"></script>
|
||||||
<li><span class="emoji">☁️</span>OneDrive will einmischen</li>
|
<script src="slides/slide-17-phase-2.js"></script>
|
||||||
<li><span class="emoji">🔍</span>Defender scannt ungefragt</li>
|
<script src="slides/slide-18-phase-3.js"></script>
|
||||||
<li><span class="emoji">⏱️</span>50 Klicks bis zur Speicherung</li>
|
<script src="slides/slide-19-phase-4-plus.js"></script>
|
||||||
<li><span class="emoji">😤</span>"Das ist nicht mein System"</li>
|
<script src="slides/slide-20-reality-check.js"></script>
|
||||||
</ul>
|
<script src="slides/slide-21-benefits.js"></script>
|
||||||
<aside class="notes">
|
<script src="slides/slide-22-more-horizons.js"></script>
|
||||||
Kennt ihr das? Ihr versucht in Windows ne Datei zu speichern. Nach 50 Klicks ist sie gespeichert. Auf meiner Hardware. Die mir gehört. Und doch fühlt es sich an, als würde mir das System nicht gehören.
|
<script src="slides/slide-23-closing.js"></script>
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 3. Solution Intro -->
|
|
||||||
<section class="section-slide">
|
|
||||||
<h1>Es gibt was anderes</h1>
|
|
||||||
<p class="subtitle">Und nein, nicht paranoid.</p>
|
|
||||||
<aside class="notes">
|
|
||||||
Und ja – es gibt was anderes. Das ist Pragmatismus. Mein System. Meine Regeln.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 4. The Vision -->
|
|
||||||
<section>
|
|
||||||
<h2>Die Idee</h2>
|
|
||||||
<p style="font-size: 1.5em; color: #2980b9; margin-bottom: 0.5em;"><strong>Speicherung + Kalender + Kontakte + Office</strong></p>
|
|
||||||
<ul>
|
|
||||||
<li>✅ Einfach zu bedienen</li>
|
|
||||||
<li>✅ Einfach zu installieren</li>
|
|
||||||
<li>✅ Funktioniert besser</li>
|
|
||||||
<li>✅ Keine Bevormundung</li>
|
|
||||||
<li>✅ Es macht SPASS</li>
|
|
||||||
</ul>
|
|
||||||
<aside class="notes">
|
|
||||||
Stellt euch vor: Alles, was Google Drive können – auf einer Maschine, die euch gehört. Einfach zu bedienen, einfach zu installieren.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 5. Hardware -->
|
|
||||||
<section>
|
|
||||||
<h2>Hardware: Das brauchst du</h2>
|
|
||||||
<ul>
|
|
||||||
<li><span class="emoji">🖥️</span>Alter PC / Laptop (24/7)</li>
|
|
||||||
<li><span class="emoji">🍓</span>Raspberry Pi (stromsparend)</li>
|
|
||||||
<li><span class="emoji">💾</span>NAS (wenn fancy)</li>
|
|
||||||
<li><span class="emoji">☁️</span>Günstiger VPS (5€/Monat)</li>
|
|
||||||
</ul>
|
|
||||||
<p style="margin-top: 1.5em; font-style: italic;">Wichtig: Der Punkt ist "Anfangen"</p>
|
|
||||||
<aside class="notes">
|
|
||||||
Die gute Nachricht: Du brauchst nicht viel. Alle Optionen funktionieren gleich gut. Der Punkt ist: Anfangen.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 6. Docker -->
|
|
||||||
<section>
|
|
||||||
<h2>Docker: Alles in einer Box</h2>
|
|
||||||
<div class="code">$ docker run nextcloud</div>
|
|
||||||
<p><strong>Nextcloud läuft.</strong> Überall gleich. Keine Dependency-Hölle.</p>
|
|
||||||
<p style="margin-top: 1em;">Das Beste: Funktioniert auf Linux, Windows, Mac</p>
|
|
||||||
<aside class="notes">
|
|
||||||
Docker – Eine Box. In dieser Box läuft Nextcloud. Überall gleich. Fertig. Nextcloud läuft.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 7. Ansible -->
|
|
||||||
<section>
|
|
||||||
<h2>Ansible: Dein Setup ist Code</h2>
|
|
||||||
<ul>
|
|
||||||
<li>Dein System als Textdatei beschreiben</li>
|
|
||||||
<li>Automatisch ausrollen</li>
|
|
||||||
<li>Updates mit 1 Befehl</li>
|
|
||||||
</ul>
|
|
||||||
<p style="margin-top: 1.5em;">Kein "Setup-Wizard-Albtraum" mehr</p>
|
|
||||||
<aside class="notes">
|
|
||||||
Ansible ist dein Freund. Beschreib dein System in einer Textdatei. Ansible macht alle Klicks für dich. Automatisch.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 8. WireGuard + DynDNS -->
|
|
||||||
<section>
|
|
||||||
<h2>WireGuard + DynDNS</h2>
|
|
||||||
<h3>WireGuard: VPN, aber einfach</h3>
|
|
||||||
<ul style="margin-bottom: 1em;">
|
|
||||||
<li>Nur die, die ich kenne</li>
|
|
||||||
<li>Verschlüsselt, superschnell</li>
|
|
||||||
</ul>
|
|
||||||
<h3>DynDNS</h3>
|
|
||||||
<p>Meine IP ändert sich, mein Domain bleibt</p>
|
|
||||||
<aside class="notes">
|
|
||||||
Ich bin unterwegs und brauche meine Daten. WireGuard ist ein VPN, aber einfach. DynDNS macht, dass mein Domain gleich bleibt, auch wenn die IP sich ändert.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 9. Nextcloud Intro -->
|
|
||||||
<section class="section-slide">
|
|
||||||
<h1>Nextcloud</h1>
|
|
||||||
<p class="subtitle">Die Zentrale</p>
|
|
||||||
<aside class="notes">
|
|
||||||
Jetzt zum Herzstück: Nextcloud. Eine App. Vier Funktionen.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 10. Nextcloud Features -->
|
|
||||||
<section>
|
|
||||||
<h2>Nextcloud: 4 Funktionen</h2>
|
|
||||||
<h3><span class="emoji">📁</span>Speicherung</h3>
|
|
||||||
<p>Sync wie Google Drive, auf deiner Hardware</p>
|
|
||||||
<h3><span class="emoji">📅</span>Kalender & Kontakte</h3>
|
|
||||||
<p>CardDAV/CalDAV – überall kompatibel</p>
|
|
||||||
<h3><span class="emoji">📝</span>Office</h3>
|
|
||||||
<p>OnlyOffice/Collabora – echte Zusammenarbeit</p>
|
|
||||||
<h3><span class="emoji">🔓</span>Offen</h3>
|
|
||||||
<p>Keine Lock-in, offene Standards</p>
|
|
||||||
<aside class="notes">
|
|
||||||
Speicherung: Sync wie Google Drive, aber auf deiner Hardware. Kalender & Kontakte: CardDAV/CalDAV, überall kompatibel.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 11. Backups Intro -->
|
|
||||||
<section class="section-slide">
|
|
||||||
<h1>Backups</h1>
|
|
||||||
<p class="subtitle">Das wichtigste Stück</p>
|
|
||||||
<aside class="notes">
|
|
||||||
Wisst ihr, was schlimmer ist als kein Backup? Ein Backup, das nicht funktioniert. Ich weiß das, weil mir das passiert ist.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 12. The Disaster Story -->
|
|
||||||
<section>
|
|
||||||
<h2>Die Katastrophe</h2>
|
|
||||||
<ul>
|
|
||||||
<li>❌ Hardwareausfall bei meinen Eltern</li>
|
|
||||||
<li>❌ Backup 3 Monate ausgefallen</li>
|
|
||||||
<li>❌ KeePass-Passwörter werden gelöscht</li>
|
|
||||||
<li>✅ Aber: Backup auf Mamas Rechner – gerettet!</li>
|
|
||||||
</ul>
|
|
||||||
<p style="margin-top: 1.5em; font-weight: 600;">Lektionen gelernt:</p>
|
|
||||||
<aside class="notes">
|
|
||||||
Vor vier Jahren: Hardwareausfall. Ich greif zum Backup und… es funktioniert nicht. Mein Bruder hatte die Netzwerk-Einstellungen geändert. Backup-Freigabe weg.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 13. Lessons -->
|
|
||||||
<section>
|
|
||||||
<h2>Die Lektionen</h2>
|
|
||||||
<ul>
|
|
||||||
<li><strong>1️⃣ Nur getestete Backups sind Backups</strong></li>
|
|
||||||
<li><strong>2️⃣ Nie auf nur ein Ziel setzen</strong></li>
|
|
||||||
<li><strong>3️⃣ Backups müssen vor deinen Fehlern schützen</strong></li>
|
|
||||||
</ul>
|
|
||||||
<aside class="notes">
|
|
||||||
Erstens: Nur getestete Backups sind Backups. Zweitens: Nie auf nur ein Ziel setzen. Drittens: Mehrere Backups an mehreren Orten.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 14. Backup Setup -->
|
|
||||||
<section>
|
|
||||||
<h2>Das Backup-Setup</h2>
|
|
||||||
<p><strong>Borg (Linux) oder Duplicati (Windows)</strong></p>
|
|
||||||
<div class="code">$ borg create /mnt/backups::{now} /home/nextcloud</div>
|
|
||||||
<p><strong>Täglich automatisch,</strong> auf mehrere Standorte verteilt</p>
|
|
||||||
<aside class="notes">
|
|
||||||
Borg oder Duplicati – inkrementell, dedupliziert, verschlüsselt, automatisch täglich. Auf mehrere Orte verteilt.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 15. Phases Intro -->
|
|
||||||
<section class="section-slide">
|
|
||||||
<h1>Die Phasen</h1>
|
|
||||||
<p class="subtitle">Nicht alles auf einmal</p>
|
|
||||||
<aside class="notes">
|
|
||||||
Das klingt nach viel Arbeit. Das ist es nicht. Weil du nicht alles auf einmal machst. Einfach anfangen.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 16. Phase 1 -->
|
|
||||||
<section>
|
|
||||||
<h2>Phase 1: Wochenende</h2>
|
|
||||||
<ul>
|
|
||||||
<li>1. Docker installieren</li>
|
|
||||||
<li>2. Nextcloud starten (ein Befehl!)</li>
|
|
||||||
<li>3. 20 GB lokal synchronisieren</li>
|
|
||||||
<li style="margin-top: 0.5em;"><strong>✅ "Hey, das funktioniert ja!"</strong></li>
|
|
||||||
</ul>
|
|
||||||
<aside class="notes">
|
|
||||||
Samstag Morgen: Docker installieren, Nextcloud starten, 20 GB lokal hinzufügen. Das ist alles. Docker + Nextcloud.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 17. Phase 2 -->
|
|
||||||
<section>
|
|
||||||
<h2>Phase 2: Woche 2–4</h2>
|
|
||||||
<ul>
|
|
||||||
<li>Kalender/Kontakte importieren</li>
|
|
||||||
<li>Ansible-Playbook schreiben</li>
|
|
||||||
<li style="margin-top: 0.5em;"><strong>✅ "Das ist mein System jetzt"</strong></li>
|
|
||||||
</ul>
|
|
||||||
<aside class="notes">
|
|
||||||
Kalender/Kontakte importieren, Ansible-Playbook schreiben. Das Ergebnis: Das ist mein System jetzt.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 18. Phase 3 -->
|
|
||||||
<section>
|
|
||||||
<h2>Phase 3: Monat 2–3</h2>
|
|
||||||
<ul>
|
|
||||||
<li>Borg / Duplicati installieren</li>
|
|
||||||
<li>Backup-Cron schreiben</li>
|
|
||||||
<li>Backup testen (!)</li>
|
|
||||||
<li>RSync auf 2. Standort einrichten</li>
|
|
||||||
<li style="margin-top: 0.5em;"><strong>✅ "Das ist sicher"</strong></li>
|
|
||||||
</ul>
|
|
||||||
<aside class="notes">
|
|
||||||
Borg/Duplicati installieren, Backup-Cron schreiben, Backup testen (wichtig!), RSync auf 2. Standort.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 19. Phase 4+ -->
|
|
||||||
<section>
|
|
||||||
<h2>Phase 4+: Optional</h2>
|
|
||||||
<ul>
|
|
||||||
<li><span class="emoji">📧</span>E-Mail (sobald du DNS kannst)</li>
|
|
||||||
<li><span class="emoji">💬</span>Matrix, Mastodon, Vaultwarden</li>
|
|
||||||
<li><span class="emoji">🏠</span>Home Assistant</li>
|
|
||||||
<li><span class="emoji">🌐</span>Website mit Hugo + Nginx</li>
|
|
||||||
<li style="margin-top: 0.5em;"><strong>✅ "Ich hab Feuer gefangen!"</strong></li>
|
|
||||||
</ul>
|
|
||||||
<aside class="notes">
|
|
||||||
Wenn du Feuer gefangen hast: E-Mail selbst hosten, weitere Apps, Heimautomatisierung. Dein System, deine Regeln.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 20. Reality Check -->
|
|
||||||
<section class="section-slide">
|
|
||||||
<h1>Reality Check</h1>
|
|
||||||
<p class="subtitle">Das ist nicht für jeden</p>
|
|
||||||
<aside class="notes">
|
|
||||||
Das muss ich dir sagen: Das ist nicht für jeden. Du musst dich um Updates kümmern. Das ist kein Hobby für "einfach nur Klicks" Leute.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 21. Benefits -->
|
|
||||||
<section>
|
|
||||||
<h2>Aber dafür…</h2>
|
|
||||||
<ul>
|
|
||||||
<li>✅ Keine bevormundende Software</li>
|
|
||||||
<li>✅ Keine 100 Klicks zum Speichern</li>
|
|
||||||
<li>✅ Keine versteckten Algorithmen</li>
|
|
||||||
<li>✅ Funktioniert BESSER</li>
|
|
||||||
<li>✅ Du bist der Owner</li>
|
|
||||||
</ul>
|
|
||||||
<aside class="notes">
|
|
||||||
Keine Bevormundung, keine 100 Klicks, keine Algorithmen. Funktioniert besser. Du bist der Owner, nicht der Kunde.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 22. More Horizons -->
|
|
||||||
<section>
|
|
||||||
<h2>Wenn du Feuer gefangen hast…</h2>
|
|
||||||
<ul>
|
|
||||||
<li><span class="emoji">📧</span>E-Mail (Postfix + Dovecot)</li>
|
|
||||||
<li><span class="emoji">💬</span>Matrix (dezentrales Chat)</li>
|
|
||||||
<li><span class="emoji">📱</span>Mastodon (dein Twitter)</li>
|
|
||||||
<li><span class="emoji">🎮</span>Spiele-Server</li>
|
|
||||||
<li><span class="emoji">🤖</span>Home Assistant</li>
|
|
||||||
</ul>
|
|
||||||
<p style="margin-top: 1.5em; font-style: italic;">Dein System, deine Regeln</p>
|
|
||||||
<aside class="notes">
|
|
||||||
Weitere Self-Hosting-Projekte. Dein System, deine Regeln.
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<!-- 23. Closing -->
|
|
||||||
<section class="section-slide">
|
|
||||||
<h1 style="font-size: 3.5em;">Mein System gehört mir.</h1>
|
|
||||||
<p class="subtitle" style="font-size: 1.8em;">Und es funktioniert besser.</p>
|
|
||||||
<aside class="notes">
|
|
||||||
Es muss nicht so sein. Es gibt Alternativen. Sie sind einfacher als du denkst. Es macht MEHR Spaß.
|
|
||||||
Nicht: "Ihr MÜSST das machen!" Sondern: "Wenn euch das nervt, ihr wisst jetzt, es gibt Optionen."
|
|
||||||
Danke! Fragen?
|
|
||||||
</aside>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,10 @@
|
|||||||
|
document.write(`
|
||||||
|
<section class="title-slide">
|
||||||
|
<h1>Jenseits von Big Tech</h1>
|
||||||
|
<p class="subtitle">Kontrolle über die eigenen Daten</p>
|
||||||
|
<aside class="notes">
|
||||||
|
Guten Tag! Ich heiße [Name] und halte heute einen Vortrag über die Möglichkeiten, die Kontrolle über deine eigenen Daten zurückzugewinnen.
|
||||||
|
Es geht nicht um Paranoia oder Angst vor Big Tech – sondern darum, dass es einfach mehr Spaß macht, ein System zu haben, das dir wirklich gehört.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
document.write(`
|
||||||
|
<section>
|
||||||
|
<h2>Der Windows-Albtraum</h2>
|
||||||
|
<ul>
|
||||||
|
<li><span class="emoji">📋</span>Datei > Speichern unter</li>
|
||||||
|
<li><span class="emoji">☁️</span>OneDrive will einmischen</li>
|
||||||
|
<li><span class="emoji">🔍</span>Defender scannt ungefragt</li>
|
||||||
|
<li><span class="emoji">⏱️</span>50 Klicks bis zur Speicherung</li>
|
||||||
|
<li><span class="emoji">😤</span>"Das ist nicht mein System"</li>
|
||||||
|
</ul>
|
||||||
|
<aside class="notes">
|
||||||
|
Kennt ihr das? Ihr versucht in Windows ne Datei zu speichern. Nach 50 Klicks ist sie gespeichert. Auf meiner Hardware. Die mir gehört. Und doch fühlt es sich an, als würde mir das System nicht gehören.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
document.write(`
|
||||||
|
<section class="section-slide">
|
||||||
|
<h1>Es gibt was anderes</h1>
|
||||||
|
<p class="subtitle">Und nein, nicht paranoid.</p>
|
||||||
|
<aside class="notes">
|
||||||
|
Und ja – es gibt was anderes. Das ist Pragmatismus. Mein System. Meine Regeln.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
document.write(`
|
||||||
|
<section>
|
||||||
|
<h2>Die Idee</h2>
|
||||||
|
<p style="font-size: 1.5em; color: #2980b9; margin-bottom: 0.5em;"><strong>Speicherung + Kalender + Kontakte + Office</strong></p>
|
||||||
|
<ul>
|
||||||
|
<li>✅ Einfach zu bedienen</li>
|
||||||
|
<li>✅ Einfach zu installieren</li>
|
||||||
|
<li>✅ Funktioniert besser</li>
|
||||||
|
<li>✅ Keine Bevormundung</li>
|
||||||
|
<li>✅ Es macht SPASS</li>
|
||||||
|
</ul>
|
||||||
|
<aside class="notes">
|
||||||
|
Stellt euch vor: Alles, was Google Drive können – auf einer Maschine, die euch gehört. Einfach zu bedienen, einfach zu installieren.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
document.write(`
|
||||||
|
<section>
|
||||||
|
<h2>Hardware: Das brauchst du</h2>
|
||||||
|
<ul>
|
||||||
|
<li><span class="emoji">🖥️</span>Alter PC / Laptop (24/7)</li>
|
||||||
|
<li><span class="emoji">🍓</span>Raspberry Pi (stromsparend)</li>
|
||||||
|
<li><span class="emoji">💾</span>NAS (wenn fancy)</li>
|
||||||
|
<li><span class="emoji">☁️</span>Günstiger VPS (5€/Monat)</li>
|
||||||
|
</ul>
|
||||||
|
<p style="margin-top: 1.5em; font-style: italic;">Wichtig: Der Punkt ist "Anfangen"</p>
|
||||||
|
<aside class="notes">
|
||||||
|
Die gute Nachricht: Du brauchst nicht viel. Alle Optionen funktionieren gleich gut. Der Punkt ist: Anfangen.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
document.write(`
|
||||||
|
<section>
|
||||||
|
<h2>Docker: Alles in einer Box</h2>
|
||||||
|
<div class="code">$ docker run nextcloud</div>
|
||||||
|
<p><strong>Nextcloud läuft.</strong> Überall gleich. Keine Dependency-Hölle.</p>
|
||||||
|
<p style="margin-top: 1em;">Das Beste: Funktioniert auf Linux, Windows, Mac</p>
|
||||||
|
<aside class="notes">
|
||||||
|
Docker – Eine Box. In dieser Box läuft Nextcloud. Überall gleich. Fertig. Nextcloud läuft.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
document.write(`
|
||||||
|
<section>
|
||||||
|
<h2>Ansible: Dein Setup ist Code</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Dein System als Textdatei beschreiben</li>
|
||||||
|
<li>Automatisch ausrollen</li>
|
||||||
|
<li>Updates mit 1 Befehl</li>
|
||||||
|
</ul>
|
||||||
|
<p style="margin-top: 1.5em;">Kein "Setup-Wizard-Albtraum" mehr</p>
|
||||||
|
<aside class="notes">
|
||||||
|
Ansible ist dein Freund. Beschreib dein System in einer Textdatei. Ansible macht alle Klicks für dich. Automatisch.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
document.write(`
|
||||||
|
<section>
|
||||||
|
<h2>WireGuard + DynDNS</h2>
|
||||||
|
<h3>WireGuard: VPN, aber einfach</h3>
|
||||||
|
<ul style="margin-bottom: 1em;">
|
||||||
|
<li>Nur die, die ich kenne</li>
|
||||||
|
<li>Verschlüsselt, superschnell</li>
|
||||||
|
</ul>
|
||||||
|
<h3>DynDNS</h3>
|
||||||
|
<p>Meine IP ändert sich, mein Domain bleibt</p>
|
||||||
|
<aside class="notes">
|
||||||
|
Ich bin unterwegs und brauche meine Daten. WireGuard ist ein VPN, aber einfach. DynDNS macht, dass mein Domain gleich bleibt, auch wenn die IP sich ändert.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
document.write(`
|
||||||
|
<section class="section-slide">
|
||||||
|
<h1>Nextcloud</h1>
|
||||||
|
<p class="subtitle">Die Zentrale</p>
|
||||||
|
<aside class="notes">
|
||||||
|
Jetzt zum Herzstück: Nextcloud. Eine App. Vier Funktionen.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
document.write(`
|
||||||
|
<section>
|
||||||
|
<h2>Nextcloud: 4 Funktionen</h2>
|
||||||
|
<h3><span class="emoji">📁</span>Speicherung</h3>
|
||||||
|
<p>Sync wie Google Drive, auf deiner Hardware</p>
|
||||||
|
<h3><span class="emoji">📅</span>Kalender & Kontakte</h3>
|
||||||
|
<p>CardDAV/CalDAV – überall kompatibel</p>
|
||||||
|
<h3><span class="emoji">📝</span>Office</h3>
|
||||||
|
<p>OnlyOffice/Collabora – echte Zusammenarbeit</p>
|
||||||
|
<h3><span class="emoji">🔓</span>Offen</h3>
|
||||||
|
<p>Keine Lock-in, offene Standards</p>
|
||||||
|
<aside class="notes">
|
||||||
|
Speicherung: Sync wie Google Drive, aber auf deiner Hardware. Kalender & Kontakte: CardDAV/CalDAV, überall kompatibel.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
document.write(`
|
||||||
|
<section class="section-slide">
|
||||||
|
<h1>Backups</h1>
|
||||||
|
<p class="subtitle">Das wichtigste Stück</p>
|
||||||
|
<aside class="notes">
|
||||||
|
Wisst ihr, was schlimmer ist als kein Backup? Ein Backup, das nicht funktioniert. Ich weiß das, weil mir das passiert ist.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
document.write(`
|
||||||
|
<section>
|
||||||
|
<h2>Die Katastrophe</h2>
|
||||||
|
<ul>
|
||||||
|
<li>❌ Hardwareausfall bei meinen Eltern</li>
|
||||||
|
<li>❌ Backup 3 Monate ausgefallen</li>
|
||||||
|
<li>❌ KeePass-Passwörter werden gelöscht</li>
|
||||||
|
<li>✅ Aber: Backup auf Mamas Rechner – gerettet!</li>
|
||||||
|
</ul>
|
||||||
|
<p style="margin-top: 1.5em; font-weight: 600;">Lektionen gelernt:</p>
|
||||||
|
<aside class="notes">
|
||||||
|
Vor vier Jahren: Hardwareausfall. Ich greif zum Backup und… es funktioniert nicht. Mein Bruder hatte die Netzwerk-Einstellungen geändert. Backup-Freigabe weg.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
document.write(`
|
||||||
|
<section>
|
||||||
|
<h2>Die Lektionen</h2>
|
||||||
|
<ul>
|
||||||
|
<li><strong>1️⃣ Nur getestete Backups sind Backups</strong></li>
|
||||||
|
<li><strong>2️⃣ Nie auf nur ein Ziel setzen</strong></li>
|
||||||
|
<li><strong>3️⃣ Backups müssen vor deinen Fehlern schützen</strong></li>
|
||||||
|
</ul>
|
||||||
|
<aside class="notes">
|
||||||
|
Erstens: Nur getestete Backups sind Backups. Zweitens: Nie auf nur ein Ziel setzen. Drittens: Mehrere Backups an mehreren Orten.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
document.write(`
|
||||||
|
<section>
|
||||||
|
<h2>Das Backup-Setup</h2>
|
||||||
|
<p><strong>Borg (Linux) oder Duplicati (Windows)</strong></p>
|
||||||
|
<div class="code">$ borg create /mnt/backups::{now} /home/nextcloud</div>
|
||||||
|
<p><strong>Täglich automatisch,</strong> auf mehrere Standorte verteilt</p>
|
||||||
|
<aside class="notes">
|
||||||
|
Borg oder Duplicati – inkrementell, dedupliziert, verschlüsselt, automatisch täglich. Auf mehrere Orte verteilt.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
document.write(`
|
||||||
|
<section class="section-slide">
|
||||||
|
<h1>Die Phasen</h1>
|
||||||
|
<p class="subtitle">Nicht alles auf einmal</p>
|
||||||
|
<aside class="notes">
|
||||||
|
Das klingt nach viel Arbeit. Das ist es nicht. Weil du nicht alles auf einmal machst. Einfach anfangen.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
document.write(`
|
||||||
|
<section>
|
||||||
|
<h2>Phase 1: Wochenende</h2>
|
||||||
|
<ul>
|
||||||
|
<li>1. Docker installieren</li>
|
||||||
|
<li>2. Nextcloud starten (ein Befehl!)</li>
|
||||||
|
<li>3. 20 GB lokal synchronisieren</li>
|
||||||
|
<li style="margin-top: 0.5em;"><strong>✅ "Hey, das funktioniert ja!"</strong></li>
|
||||||
|
</ul>
|
||||||
|
<aside class="notes">
|
||||||
|
Samstag Morgen: Docker installieren, Nextcloud starten, 20 GB lokal hinzufügen. Das ist alles. Docker + Nextcloud.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
document.write(`
|
||||||
|
<section>
|
||||||
|
<h2>Phase 2: Woche 2–4</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Kalender/Kontakte importieren</li>
|
||||||
|
<li>Ansible-Playbook schreiben</li>
|
||||||
|
<li style="margin-top: 0.5em;"><strong>✅ "Das ist mein System jetzt"</strong></li>
|
||||||
|
</ul>
|
||||||
|
<aside class="notes">
|
||||||
|
Kalender/Kontakte importieren, Ansible-Playbook schreiben. Das Ergebnis: Das ist mein System jetzt.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
document.write(`
|
||||||
|
<section>
|
||||||
|
<h2>Phase 3: Monat 2–3</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Borg / Duplicati installieren</li>
|
||||||
|
<li>Backup-Cron schreiben</li>
|
||||||
|
<li>Backup testen (!)</li>
|
||||||
|
<li>RSync auf 2. Standort einrichten</li>
|
||||||
|
<li style="margin-top: 0.5em;"><strong>✅ "Das ist sicher"</strong></li>
|
||||||
|
</ul>
|
||||||
|
<aside class="notes">
|
||||||
|
Borg/Duplicati installieren, Backup-Cron schreiben, Backup testen (wichtig!), RSync auf 2. Standort.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
document.write(`
|
||||||
|
<section>
|
||||||
|
<h2>Phase 4+: Optional</h2>
|
||||||
|
<ul>
|
||||||
|
<li><span class="emoji">📧</span>E-Mail (sobald du DNS kannst)</li>
|
||||||
|
<li><span class="emoji">💬</span>Matrix, Mastodon, Vaultwarden</li>
|
||||||
|
<li><span class="emoji">🏠</span>Home Assistant</li>
|
||||||
|
<li><span class="emoji">🌐</span>Website mit Hugo + Nginx</li>
|
||||||
|
<li style="margin-top: 0.5em;"><strong>✅ "Ich hab Feuer gefangen!"</strong></li>
|
||||||
|
</ul>
|
||||||
|
<aside class="notes">
|
||||||
|
Wenn du Feuer gefangen hast: E-Mail selbst hosten, weitere Apps, Heimautomatisierung. Dein System, deine Regeln.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
document.write(`
|
||||||
|
<section class="section-slide">
|
||||||
|
<h1>Reality Check</h1>
|
||||||
|
<p class="subtitle">Das ist nicht für jeden</p>
|
||||||
|
<aside class="notes">
|
||||||
|
Das muss ich dir sagen: Das ist nicht für jeden. Du musst dich um Updates kümmern. Das ist kein Hobby für "einfach nur Klicks" Leute.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,15 @@
|
|||||||
|
document.write(`
|
||||||
|
<section>
|
||||||
|
<h2>Aber dafür…</h2>
|
||||||
|
<ul>
|
||||||
|
<li>✅ Keine bevormundende Software</li>
|
||||||
|
<li>✅ Keine 100 Klicks zum Speichern</li>
|
||||||
|
<li>✅ Keine versteckten Algorithmen</li>
|
||||||
|
<li>✅ Funktioniert BESSER</li>
|
||||||
|
<li>✅ Du bist der Owner</li>
|
||||||
|
</ul>
|
||||||
|
<aside class="notes">
|
||||||
|
Keine Bevormundung, keine 100 Klicks, keine Algorithmen. Funktioniert besser. Du bist der Owner, nicht der Kunde.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
document.write(`
|
||||||
|
<section>
|
||||||
|
<h2>Wenn du Feuer gefangen hast…</h2>
|
||||||
|
<ul>
|
||||||
|
<li><span class="emoji">📧</span>E-Mail (Postfix + Dovecot)</li>
|
||||||
|
<li><span class="emoji">💬</span>Matrix (dezentrales Chat)</li>
|
||||||
|
<li><span class="emoji">📱</span>Mastodon (dein Twitter)</li>
|
||||||
|
<li><span class="emoji">🎮</span>Spiele-Server</li>
|
||||||
|
<li><span class="emoji">🤖</span>Home Assistant</li>
|
||||||
|
</ul>
|
||||||
|
<p style="margin-top: 1.5em; font-style: italic;">Dein System, deine Regeln</p>
|
||||||
|
<aside class="notes">
|
||||||
|
Weitere Self-Hosting-Projekte. Dein System, deine Regeln.
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
@@ -0,0 +1,11 @@
|
|||||||
|
document.write(`
|
||||||
|
<section class="section-slide">
|
||||||
|
<h1 style="font-size: 3.5em;">Mein System gehört mir.</h1>
|
||||||
|
<p class="subtitle" style="font-size: 1.8em;">Und es funktioniert besser.</p>
|
||||||
|
<aside class="notes">
|
||||||
|
Es muss nicht so sein. Es gibt Alternativen. Sie sind einfacher als du denkst. Es macht MEHR Spaß.
|
||||||
|
Nicht: "Ihr MÜSST das machen!" Sondern: "Wenn euch das nervt, ihr wisst jetzt, es gibt Optionen."
|
||||||
|
Danke! Fragen?
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
`);
|
||||||
+163
@@ -0,0 +1,163 @@
|
|||||||
|
:root {
|
||||||
|
--r-background-color: #ffffff;
|
||||||
|
--r-main-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
--r-main-font-size: 42px;
|
||||||
|
--r-main-color: #2c2c2c;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal .slides {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal section {
|
||||||
|
padding: 60px !important;
|
||||||
|
height: 100%;
|
||||||
|
display: flex !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
|
||||||
|
text-transform: none;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #2c2c2c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
font-size: 3.77em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal h2 {
|
||||||
|
font-size: 2.5em;
|
||||||
|
border-left: 4px solid #2980b9;
|
||||||
|
padding-left: 30px;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal h3 {
|
||||||
|
font-size: 1.6em;
|
||||||
|
color: #2980b9;
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal p {
|
||||||
|
font-size: 1.3em;
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #2c2c2c;
|
||||||
|
margin: 0.3em 0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ul {
|
||||||
|
margin: 0;
|
||||||
|
text-align: left;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal li {
|
||||||
|
font-size: 1.2em;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: #2c2c2c;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
text-align: left;
|
||||||
|
list-style: disc;
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ul ul, .reveal ol ol {
|
||||||
|
margin-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle {
|
||||||
|
font-size: 1.8em;
|
||||||
|
color: #2980b9;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code {
|
||||||
|
background: #f5f5f5;
|
||||||
|
padding: 12px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: 'Courier New', monospace;
|
||||||
|
font-size: 0.85em;
|
||||||
|
color: #2980b9;
|
||||||
|
border-left: 3px solid #2980b9;
|
||||||
|
margin: 15px 0;
|
||||||
|
text-align: left;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Title slide */
|
||||||
|
.reveal .title-slide {
|
||||||
|
background: linear-gradient(135deg, #2980b9 0%, #2980b9 100%);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal .title-slide h1 {
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal .title-slide h2 {
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal .title-slide .subtitle {
|
||||||
|
color: #e1f0ff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section slide */
|
||||||
|
.reveal .section-slide {
|
||||||
|
background: #2980b9;
|
||||||
|
text-align: center;
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
flex-direction: column !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal .section-slide h1, .reveal .section-slide h2 {
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal .section-slide .subtitle {
|
||||||
|
color: #e1f0ff;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide controls */
|
||||||
|
.reveal .controls {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal .progress {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji {
|
||||||
|
margin-right: 0.3em;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user