added more images for articles

more improvements

.eleventy.js

@@ -1,12 +1,12 @@
 const pluginRev = require("eleventy-plugin-rev");
-const eleventySass = require("eleventy-sass");
-const tinyHTML = require('@sardine/eleventy-plugin-tinyhtml');
-const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
+const pluginSass = require("eleventy-sass");
+const pluginTinyHtml = require("@sardine/eleventy-plugin-tinyhtml");
+const pluginNavigation = require("@11ty/eleventy-navigation");
 
 module.exports = function (eleventyConfig) {
     eleventyConfig.addPlugin(pluginRev);
-    eleventyConfig.addPlugin(tinyHTML);
-    eleventyConfig.addPlugin(eleventySass, {
+    eleventyConfig.addPlugin(pluginTinyHtml);
+    eleventyConfig.addPlugin(pluginSass, {
         sass: {
             loadPaths: ["node_modules"],
             style: "compressed",
@@ -21,7 +21,7 @@ module.exports = function (eleventyConfig) {
         },
         rev: true
     });
-    eleventyConfig.addPlugin(eleventyNavigationPlugin);
+    eleventyConfig.addPlugin(pluginNavigation);
 
     eleventyConfig.setUseGitIgnore(false);
     eleventyConfig.addPassthroughCopy({

src/de/services/matrix/setup/part-1.md

@@ -93,29 +93,29 @@ wählst du deinen Anmeldenamen und ein sicheres Passwort, gibst beides in die en
 dein Matrix-Account erstellt. Es kann sein, dass du während des Erstellens deines Accounts ein bisschen warten musst,
 das kann je nach Server-Auslastung ein bisschen dauern.
 
-<div class="row">
-<div class="col-lg-3 col-sm-6 col-12 my-3">
-<a class="d-flex flex-column h-100" href="/img/matrix/setup/part-1/1start.png">
-<img class="d-block w-100 m-0" src="/img/matrix/setup/part-1/1start.png">
-<small class="flex-grow-1 p-2 bg-primary text-black">Zuerst die App starten.</small>
+<div class="row img-gallery">
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/1start.png">
+<img src="/img/matrix/setup/part-1/1start.png">
+<small>Zuerst die App starten.</small>
 </a>
 </div>
-<div class="col-lg-3 col-sm-6 col-12 my-3">
-<a class="d-flex flex-column h-100" href="/img/matrix/setup/part-1/2anbieter.png">
-<img class="d-block w-100 m-0" src="/img/matrix/setup/part-1/2anbieter.png">
-<small class="flex-grow-1 p-2 bg-primary text-black">„Andere“ auswählen um einen eigenen Anbieter zu verwenden.</small>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/2anbieter.png">
+<img src="/img/matrix/setup/part-1/2anbieter.png">
+<small>„Andere“ auswählen um einen eigenen Anbieter zu verwenden.</small>
 </a>
 </div>
-<div class="col-lg-3 col-sm-6 col-12 my-3">
-<a class="d-flex flex-column h-100" href="/img/matrix/setup/part-1/3server-name.png">
-<img class="d-block w-100 m-0" src="/img/matrix/setup/part-1/3server-name.png">
-<small class="flex-grow-1 p-2 bg-primary text-black">Die Server-Adresse des Anbieters eingeben und „Registrieren“ oder „Anmelden“ auswählen.</small>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/3server-name.png">
+<img src="/img/matrix/setup/part-1/3server-name.png">
+<small>Die Server-Adresse des Anbieters eingeben und „Registrieren“ oder „Anmelden“ auswählen.</small>
 </a>
 </div>
-<div class="col-lg-3 col-sm-6 col-12 my-3">
-<a class="d-flex flex-column h-100" href="/img/matrix/setup/part-1/4anmelden.png">
-<img class="d-block w-100 m-0" src="/img/matrix/setup/part-1/4anmelden.png">
-<small class="flex-grow-1 p-2 bg-primary text-black">Benutzername und Passwort eingeben.</small>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/4anmelden.png">
+<img src="/img/matrix/setup/part-1/4anmelden.png">
+<small>Benutzername und Passwort eingeben.</small>
 </a>
 </div>
 </div>
@@ -131,29 +131,29 @@ hinzufügen“. Nun gibst du die Matrix-ID deines:deiner Chatpartner:in ein, wä
 und tippst anschließend auf „Erstellen“. Jetzt heißt es ein bisschen warten, bis dein:e Chatpartner:in deine Einladung
 angenommen hat.
 
-<div class="row">
-<div class="col-lg-3 col-sm-6 col-12 my-3">
-<a class="d-flex flex-column h-100" href="/img/matrix/setup/part-1/6home.png">
-<img class="d-block w-100 m-0" src="/img/matrix/setup/part-1/6home.png">
-<small class="flex-grow-1 p-2 bg-primary text-black">Einen neuen Chat mit dem grünen Button starten.</small>
+<div class="row img-gallery">
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/6home.png">
+<img src="/img/matrix/setup/part-1/6home.png">
+<small>Einen neuen Chat mit dem grünen Button starten.</small>
 </a>
 </div>
-<div class="col-lg-3 col-sm-6 col-12 my-3">
-<a class="d-flex flex-column h-100" href="/img/matrix/setup/part-1/7neu.png">
-<img class="d-block w-100 m-0" src="/img/matrix/setup/part-1/7neu.png">
-<small class="flex-grow-1 p-2 bg-primary text-black">„Mit Matrix-ID hinzufügen“ auswählen.</small>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/7neu.png">
+<img src="/img/matrix/setup/part-1/7neu.png">
+<small>„Mit Matrix-ID hinzufügen“ auswählen.</small>
 </a>
 </div>
-<div class="col-lg-3 col-sm-6 col-12 my-3">
-<a class="d-flex flex-column h-100" href="/img/matrix/setup/part-1/8matrix-id.png">
-<img class="d-block w-100 m-0" src="/img/matrix/setup/part-1/8matrix-id.png">
-<small class="flex-grow-1 p-2 bg-primary text-black">Matrix-ID eingeben und Chat erstellen.</small>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/8matrix-id.png">
+<img src="/img/matrix/setup/part-1/8matrix-id.png">
+<small>Matrix-ID eingeben und Chat erstellen.</small>
 </a>
 </div>
-<div class="col-lg-3 col-sm-6 col-12 my-3">
-<a class="d-flex flex-column h-100" href="/img/matrix/setup/part-1/9chat.png">
-<img class="d-block w-100 m-0" src="/img/matrix/setup/part-1/9chat.png">
-<small class="flex-grow-1 p-2 bg-primary text-black">Chatten.</small>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/9chat.png">
+<img src="/img/matrix/setup/part-1/9chat.png">
+<small>Chatten.</small>
 </a>
 </div>
 </div>

src/de/services/matrix/setup/part-2.md

@@ -21,8 +21,62 @@ Durch [Ende-zu-Ende-Verschlüsselung](https://de.wikipedia.org/wiki/Ende-zu-Ende
 
 Je nach App wird die Ende-zu-Ende-Verschlüsselung direkt beim Erstellen eines Chats aktiviert oder es wird dort die Möglichkeit zur Aktivierung gegeben. Wenn die Verschlüsselung nicht beim Erstellen aktiviert wird, sollte sie für private Chats danach aktiviert werden. In Element geht, das wie folgt:
 
+<div class="row img-gallery">
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/e2ee1.png">
+<img src="/img/matrix/setup/part-2/e2ee1.png">
+<small>Öffne das Chat-Menü durch Tippen auf den Namen in der oberen Leiste. Anschließend wählst du „Einstellungen“ aus.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/e2ee2.png">
+<img src="/img/matrix/setup/part-2/e2ee2.png">
+<small>In den Raum-Einstellungen wählst du dann „Ende-zu-Ende-Verschlüsselung aktivieren“ aus.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/e2ee3.png">
+<img src="/img/matrix/setup/part-2/e2ee3.png">
+<small>Nun kannst du die Ende-zu-Ende-Verschlüsselung aktivieren.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/e2ee4.png">
+<img src="/img/matrix/setup/part-2/e2ee4.png">
+<small>Ob die Ende-zu-Ende-Verschlüsselung aktiviert ist, kannst du unter „Sicherheit“ sehen.</small>
+</a>
+</div>
+</div>
+
 Wenn du in einem Chat die Ende-zu-Ende-Verschlüsselung aktiviert hast, ist es außerdem ratsam, die Schlüsselsicherung einzurichten. Dafür musst du ein zusätzliches Schlüsselpasswort verwenden. Mit diesem Passwort kannst du verschlüsselte Chats auch auf anderen Geräten wiederherstellen. Element wird dich dazu auffordern, ein Schlüsselpasswort zu setzen, wenn es notwendig ist:
 
+<div class="row img-gallery">
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/key1.png">
+<img src="/img/matrix/setup/part-2/key1.png">
+<small>Element zeigt die eine Benachrichtigung zum Setzen eines Schlüsselpassworts an.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/key2.png">
+<img src="/img/matrix/setup/part-2/key2.png">
+<small>Wenn du auf die Benachrichtigung klickst, öffnet sich diese Auswahl.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/key3.png">
+<img src="/img/matrix/setup/part-2/key3.png">
+<small>Wenn du „Benutze einen Sicherheitsschlüssel“ wählst, wird ein zufälliger Schlüssel generiert, den du an einem sicheren Ort aufbewahren solltest.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/key4.png">
+<img src="/img/matrix/setup/part-2/key4.png">
+<small>Wenn du „Benutze Sicherheitsphrase“ wählst, kannst du selber ein Passwort festlegen.</small>
+</a>
+</div>
+</div>
+
 Wenn du diese Benachrichtigung nicht bekommst, kannst du auch in den Einstellungen unter „Sicherheit & Privatsphäre“ > „Wiederherstellung verschlüsselter Nachrichten“ die Schlüsselsicherung einrichten. Außerdem kannst du dort die Schlüsselsicherung zurücksetzen, wenn du dein Schlüsselpasswort vergessen hast.
 
 Um die Schlüsselsicherung in einer neuen Sitzung wiederherzustellen, kannst du entweder die Sitzung von einem anderen Gerät verifizieren (siehe unten Cross Signing) oder du nutzt dein Schlüsselpasswort. Gehe hierfür in die Einstellungen und wähle unter „Sicherheit & Privatsphäre“ die Option „Wiederherstellung verschlüsselter Nachrichten“ und anschließend „Von Sicherung wiederherstellen“. Damit sollten alle Nachrichten in deinen verschlüsselten Chats auch in dieser Sitzung wieder lesbar sein.
@@ -33,6 +87,45 @@ Zusätzlich zur Ende-zu-Ende-Verschlüsselung kannst du mithilfe der Kontaktveri
 
 In Element kann die Kontakt-Verifizierung über einen QR-Code Scan oder über den Vergleich von Emojis oder eines Texts durchgeführt werden. Um einen Kontakt zu verifizieren, wähle den Chat mit der Person aus und tippe anschließend auf den Namen in der Titelzeile. Nun geht es wie folgt weiter:
 
+<div class="row img-gallery">
+<div class="col-lg-4 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/verifizieren1.png">
+<img src="/img/matrix/setup/part-2/verifizieren1.png">
+<small>Wähle im Chat-Menü „Personen“ aus und anschließend die Person, die du verifizieren willst.</small>
+</a>
+</div>
+<div class="col-lg-4 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/verifizieren2.png">
+<img src="/img/matrix/setup/part-2/verifizieren2.png">
+<small>In der Kontaktansicht kannst du nun „Verifizieren“ auswählen.</small>
+</a>
+</div>
+<div class="col-lg-4 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/verifizieren3.png">
+<img src="/img/matrix/setup/part-2/verifizieren3.png">
+<small>Starte die Verifizierung, indem du auf „Verifizierung beginnen“ tippst.</small>
+</a>
+</div>
+<div class="col-lg-4 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/verifizieren4.png">
+<img src="/img/matrix/setup/part-2/verifizieren4.png">
+<small>Anschließend kannst du direkt den QR-Code deines Kontakts scannen, wenn du die Möglichkeit hast. Wenn nicht, tippe auf „Kann nicht scannen“.</small>
+</a>
+</div>
+<div class="col-lg-4 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/verifizieren5.png">
+<img src="/img/matrix/setup/part-2/verifizieren5.png">
+<small>Wenn du nicht scannen kannst, kannst du deinen Kontakt mit einer Reihe zufälliger Emojis verifizieren.</small>
+</a>
+</div>
+<div class="col-lg-4 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/verifizieren6.png">
+<img src="/img/matrix/setup/part-2/verifizieren6.png">
+<small>Nachdem ihr euch erfolgreich verifiziert habt, seht ihr beide dieses grüne Schild.</small>
+</a>
+</div>
+</div>
+
 Die einzelnen Schritte der Verifizierung können eine Weile dauern. Warte deshalb etwas ab, bevor du die Verifizierung abbrichst. Um die Verifizierung eines Kontakts sicher durchzuführen, mache sie entweder wenn ihr euch real trefft oder tauscht die Emojis über einen unabhängigen, vertrauenswürdigen Kanal, z.B. am Telefon aus.
 
 ## Cross Signing
@@ -41,6 +134,33 @@ Um in Matrix zu chatten, kannst du beliebig viele Apps auf verschiedenen Geräte
 
 Alternativ kannst du auch alle deine Sitzungen in den Einstellungen verifizieren. Gehe hierfür in den Einstellungen auf „Sicherheit & Privatsphäre“ und dann auf „Zeige alle Sitzungen“. Dort siehst du nun, welche Sitzungen bereits verifiziert sind und du kannst die übrigen Sitzungen verifizieren.
 
+<div class="row img-gallery">
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/session1.png">
+<img src="/img/matrix/setup/part-2/session1.png">
+<small>Wähle aus der Liste die Sitzung, die du verifizieren willst.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/session2.png">
+<img src="/img/matrix/setup/part-2/session2.png">
+<small>Wähle nun wie du diese Sitzung verifizieren willst, z.B. mithilfe der Emojis.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/session3.png">
+<img src="/img/matrix/setup/part-2/session3.png">
+<small>Wie bei der Verifizierung deiner Kontakte musst du nun die Emojis auf beiden Geräten vergleichen.</small>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-2/session4.png">
+<img src="/img/matrix/setup/part-2/session4.png">
+<small>Nachdem du dein Gerät erfolgreich verifiziert hast, wird dieses grüne Schild angezeigt.</small>
+</a>
+</div>
+</div>
+
 Es ist wichtig, alle deine Sitzungen zu verifizieren, damit auch für deine Kontakte erkennbar ist, dass die Ende-zu-Ende-Verschlüsselung richtig funktioniert.
 
 Wenn du nicht willst, dass Element automatisch neuen Sitzungen deines Kontakts vertraut, kannst du in den Einstellungen unter „Sicherheit & Privatsphäre“ die Option „Nur zu verifizierten Sitzungen verschlüsseln“ aktivieren. Dann musst du jede Sitzung einzeln verifizieren.

src/scss/main.scss

@@ -264,14 +264,6 @@ pre {
   }
 }
 
-.article-content {
-  img {
-    display: block;
-    margin: 1rem auto;
-    max-width: 100%;
-  }
-}
-
 @media (max-width: 767.98px) {
   .logo {
     max-width: 96px;
@@ -307,6 +299,37 @@ table.table {
   max-width: 250px;
 }
 
+.article-content {
+  img {
+    display: block;
+    margin: 0 auto 1rem;
+    max-width: 100%;
+  }
+
+  .img-gallery {
+    --bs-gutter-x: 1rem;
+
+    a {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      padding-bottom: 1rem;
+
+      img {
+        width: 100%;
+        margin: 0;
+      }
+
+      small {
+        padding: .5rem;
+        flex-grow: 1;
+        background-color: $primary;
+        color: #000;
+      }
+    }
+  }
+}
+
 .tab-card {
   margin-bottom: 2rem;