.compress-all.js

@@ -1,32 +0,0 @@
-const glob = require("glob");
-const minify = require('@node-minify/core');
-const htmlMinifier = require('@node-minify/html-minifier');
-const crass = require('@node-minify/crass');
-
-console.log('compress all html and css files');
-
-glob("dist/**/*.html", function (er, files) {
-    files.forEach(file => {
-        console.log(file);
-        minify({
-            compressor: htmlMinifier,
-            input: file,
-            output: file,
-            options: {
-                collapseWhitespace: true,
-                conservativeCollapse: true
-            },
-        });
-    })
-});
-
-glob("dist/**/*.css", function (er, files) {
-    files.forEach(file => {
-        console.log(file);
-        minify({
-            compressor: crass,
-            input: file,
-            output: file
-        });
-    })
-});

.eleventy.js

@@ -1,9 +1,28 @@
-const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
+const pluginRev = require("eleventy-plugin-rev");
+const pluginSass = require("eleventy-sass");
+const pluginTinyHtml = require("@sardine/eleventy-plugin-tinyhtml");
+const pluginNavigation = require("@11ty/eleventy-navigation");
 
 module.exports = function (eleventyConfig) {
-    eleventyConfig.addWatchTarget("./src/scss/");
+    eleventyConfig.addPlugin(pluginRev);
+    eleventyConfig.addPlugin(pluginTinyHtml);
+    eleventyConfig.addPlugin(pluginSass, {
+        sass: {
+            loadPaths: ["node_modules"],
+            style: "compressed",
+            sourceMap: false,
+        },
+        compileOptions: {
+            permalink: function (contents, inputPath) {
+                return (data) => {
+                    return data.page.filePathStem.replace(/^\/scss\//, "/css/") + ".css";
+                };
+            }
+        },
+        rev: true
+    });
+    eleventyConfig.addPlugin(pluginNavigation);
 
-    eleventyConfig.addPlugin(eleventyNavigationPlugin);
     eleventyConfig.setUseGitIgnore(false);
     eleventyConfig.addPassthroughCopy({
         "src/img": "img",
@@ -19,7 +38,7 @@ module.exports = function (eleventyConfig) {
     });
 
     eleventyConfig.addFilter("sum", function (value) {
-        return value.map(d => d.amount).reduce((a, b) => a + b);
+        return value.map(d => d.amount).reduce((a, b) => a + b, 0);
     });
 
     eleventyConfig.addFilter("amount", function (value) {
@@ -43,6 +62,10 @@ module.exports = function (eleventyConfig) {
             .length;
     });
 
+    eleventyConfig.addFilter('getServiceById', (services, serviceId) => {
+        return services.find(s => s.id === serviceId);
+    });
+
     return {
         // Pre-process *.md files with: (default: `liquid`)
         markdownTemplateEngine: "njk",

package.json

@@ -3,12 +3,9 @@
   "version": "1.0.0",
   "description": "website for sp-codes.de",
   "scripts": {
-    "compile-sass": "node-sass --output-style compressed --importer=node_modules/node-sass-tilde-importer src/scss/main.scss -o dist/css/",
+    "minify-css": "uncss -n -H dist/ -o dist/css/main-*.css dist/**/*.html dist/**/**/*.html dist/**/**/**/*.html dist/**/**/**/**/*.html dist/**/**/**/**/**/*.html",
-    "minify-css": "uncss -n -H dist/ -o dist/css/main.css dist/**/*.html dist/**/**/*.html dist/**/**/**/*.html",
+    "start": "eleventy --serve --watch",
-    "watch:eleventy": "eleventy --serve",
+    "build": "eleventy && npm run move-index && npm run minify-css",
-    "watch:sass": "npm-run-all compile-sass minify-css -- --watch",
-    "start": "npm-run-all compile-sass minify-css --parallel watch:*",
-    "build": "npm run compile-sass && eleventy && npm run move-index && npm run minify-css && node .compress-all.js",
     "move-index": "cpx dist/de/index.html dist/"
   },
   "author": "samuel-p",
@@ -17,7 +14,7 @@
     "url": "https://git.sp-codes.de/samuel-p/sp-codes.de"
   },
   "optionalDependencies": {
-    "browser-sync": "^2.27.10"
+    "browser-sync": "^2.27.11"
   },
   "devDependencies": {
     "@11ty/eleventy": "^1.0.2",
@@ -25,15 +22,17 @@
     "@node-minify/core": "^7.1.0",
     "@node-minify/crass": "^7.1.0",
     "@node-minify/html-minifier": "^7.1.0",
+    "@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
     "cpx": "^1.5.0",
+    "eleventy-plugin-rev": "^1.0.2",
+    "eleventy-sass": "^2.1.6",
     "glob": "^8.0.3",
     "minify": "^9.1.0",
-    "node-sass": "^8.0.0",
+    "postcss": "^8.4.21",
-    "node-sass-tilde-importer": "^1.0.2",
+    "sass": "^1.57.1",
-    "npm-run-all": "^4.1.5",
     "uncss": "^0.17.3"
   },
   "dependencies": {
-    "bootstrap": "^4.6.2"
+    "bootstrap": "^5.2.3"
   }
 }

src/_data/donations.json

@@ -1,7 +1,18 @@
 [
+  {
+    "year": 2023,
+    "donations": []
+  },
   {
     "year": 2022,
     "donations": [
+      {
+        "date": "15.12.2022",
+        "amount": 20,
+        "via": "banktransfer",
+        "from": "ub1x",
+        "first": false
+      },
       {
         "date": "16.11.2021",
         "amount": 25,

src/_includes/layouts/article.njk

@@ -0,0 +1,101 @@
+---
+layout: base.njk
+---
+
+<div class="row">
+    <div class="col-lg-8 col-12 article-content">
+        {% if tags %}
+        <div class="mb-2">
+            {% for tag in tags %}
+            <span class="badge bg-primary text-black">{{tag}}</span>
+            {% endfor %}
+        </div>
+        {% endif %}
+        {{ content | safe }}
+    </div>
+    <div class="col-lg-4 col-12">
+        {% if series %}
+        <div class="tab-card">
+            <div class="title">Alle Teile dieser Serie</div>
+            <div class="card">
+                {%- for post in collections.all %}
+                {% if post.data.series == series %}
+                <div class="p-2">
+                    <a href="{{ post.url | url }}"
+                       class="list-group-item list-group-item-action{% if post.url == page.url %} fw-bold{% endif %}">
+                        {{ post.data.title }}
+                    </a>
+                </div>
+                {% endif %}
+                {%- endfor %}
+            </div>
+        </div>
+        {% endif %}
+        {% set service = services | getServiceById(service) %}
+        {% if service %}
+        <div class="tab-card">
+            <div class="title">Zugehöriger Dienst</div>
+            <div class="card service">
+                <a class="link" {% if service.beta !=true %} href="/{{locale}}/services/{{service.id}}" {% endif %}></a>
+                {% if service.beta == true %}
+                <div class="beta">TEST-PHASE</div>
+                {% endif %}
+                <div class="inner">
+                    <i class="{{service.icon}} i-4x i-fw"></i>
+                    <h2 class="mt-2 mb-1">{{service.name}}{% if service.url %} <a href="{{service.url}}"
+                                                                                  target="_blank"><i
+                            class="i-external-link"></i></a>{% endif %}</h2>
+                    {% if service.status %}
+                    <div class="mb-2">
+                        <a href="https://status.sp-codes.de" target="_blank">
+                            <img alt="{{strings.state[locale]}}"
+                                 src="https://shields.sp-codes.de/endpoint?label={{strings.state[locale]}}&url=https%3A%2F%2Fstatus.sp-codes.de%2Fapi%2Fbadge%3Fservice%3D{{service.status}}%26operational%3D{{strings.operational[locale]}}%26outage%3D{{strings.outage[locale]}}%26maintenance%3D{{strings.maintenance[locale]}}">
+                        </a>
+                    </div>
+                    {% endif %}
+                    <div>{{service.summary[locale]}}</div>
+                </div>
+            </div>
+        </div>
+        {% endif %}
+        <div class="tab-card">
+            <div class="title">Du hast eine Frage dazu?</div>
+            <div class="card">
+                <p>
+                    Komm gerne in der Matrix-Gruppe vorbei und lass uns diskutieren. Ich freue mich auf dein Feedback!
+                </p>
+                <a href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a>
+            </div>
+        </div>
+        <div class="tab-card">
+            <div class="title">Über mich</div>
+            <div class="card">
+                <p>
+                    Mein Name ist Samuel Philipp und ich bin ein Software Engineer aus Magdeburg. In meiner Freizeit
+                    hoste ich verschiedene freie <a href="/de/services/">Dienste</a>. Hier schreibe ich Artikel rund um
+                    Sicherheit und Datenschutz.
+                </p>
+                <a href="https://samuel-philipp.de">Mehr erfahren</a>
+            </div>
+        </div>
+        <div class="tab-card">
+            <div class="title">Schreib mir deine Meinung</div>
+            <div class="card">
+                <div class="d-flex justify-content-center flex-wrap my-3 contact-links">
+                    <div class="m-2"><a href="mailto:mail@sp-codes.de">
+                        <span class="d-none d-md-inline-block i-envelope i-4x i-fw"></span>
+                        <span class="d-inline-block d-md-none i-envelope i-2x i-fw"></span>
+                    </a></div>
+                    <div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
+                        <span class="d-none d-md-inline-block i-matrix i-4x i-fw"></span>
+                        <span class="d-inline-block d-md-none i-matrix i-2x i-fw"></span>
+                    </a></div>
+                    <div class="m-2"><a rel="me" href="https://social.sp-codes.de/@samuel_p">
+                        <span class="d-none d-md-inline-block i-mastodon i-4x i-fw"></span>
+                        <span class="d-inline-block d-md-none i-mastodon i-2x i-fw"></span>
+                    </a></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/_includes/layouts/base.njk

@@ -33,19 +33,19 @@ title: sp-codes
     <meta name="twitter:image" content="https://sp-codes.de/img/sp-codes.jpg">
     <link rel="shortcut icon" href="favicon.ico">
     <link rel="icon" type="image/png" href="favicon.png">
-    <link rel="stylesheet" href="/css/main.css">
+    <link rel="stylesheet" href="{{ '/css/main.css' | rev }}">
     <script async defer data-website-id="47b8022b-0537-4bb2-baa5-455a87a36ff5" data-domains="sp-codes.de" src="https://umami.sp-codes.de/umami.js"></script>
 </head>
 <body>
 <nav class="nav menu border-bottom">
     <div class="toggle">
-        <label for="menu" class="m-0"><span class="i-bars mr-1"></span>{{ strings.menu[locale] }}</label>
+        <label for="menu" class="m-0"><span class="i-bars me-1"></span>{{ strings.menu[locale] }}</label>
 
         <div class="flex-grow-1"></div>
 
         {% for language in site.languages %}
         <div {% if language.code== locale %} class="active" {% endif %}>
-            <a href="{% translatedUrl locale, language.code %}" class="ml-3">
+            <a href="{% translatedUrl locale, language.code %}" class="ms-3">
                 <span class="fi-{{ language.icon }}" title="{{ language.label }}"></span>
             </a>
         </div>
@@ -57,8 +57,8 @@ title: sp-codes
         {%- for entry in collections.all | eleventyNavigation %}
         {% if not entry.url.startsWith("https") and entry.url.includes(locale) or entry.locale == locale %}
         <div class="item{% if entry.url == page.url %} active{% endif %}">
-            <a href="{{ entry.url | url }}" class="mr-3">
+            <a href="{{ entry.url | url }}" class="me-3">
-                {% if entry.icon %}<span class="{{ entry.icon }} mr-1"></span>{% endif %}{{ entry.title }}
+                {% if entry.icon %}<span class="{{ entry.icon }} me-1"></span>{% endif %}{{ entry.title }}
             </a>
         </div>
         {% endif %}
@@ -70,7 +70,7 @@ title: sp-codes
     <div class="lang-large">
         {% for language in site.languages %}
         <div {% if language.code== locale %} class="active" {% endif %}>
-            <a href="{% translatedUrl locale, language.code %}" class="ml-3">
+            <a href="{% translatedUrl locale, language.code %}" class="ms-3">
                 <span class="fi-{{ language.icon }}" title="{{ language.label }}"></span>
             </a>
         </div>
@@ -84,19 +84,19 @@ title: sp-codes
 </div>
 <div class="d-flex justify-content-start flex-wrap p-2 menu border-top">
     <div class="d-flex justify-content-start flex-wrap">
-        <div class="mr-3">Made with <span class="i-heart highlight"></span> in Germany</div>
+        <div class="me-3">Made with <span class="i-heart highlight"></span> in Germany</div>
-        <div class="mr-3"><a href="https://samuel-philipp.de"><span class="i-copyright mr-1"></span>Samuel Philipp</a></div>
+        <div class="me-3"><a href="https://samuel-philipp.de"><span class="i-copyright me-1"></span>Samuel Philipp</a></div>
     </div>
     <div class="flex-sm-grow-1"></div>
     <div class="d-flex justify-content-sm-start flex-wrap">
-        <div class="mr-3"><a href="/{{locale}}/imprint"><span class="i-info-circle mr-1"></span>{{strings.imprint[locale]}}</a>
+        <div class="me-3"><a href="/{{locale}}/imprint"><span class="i-info-circle me-1"></span>{{strings.imprint[locale]}}</a>
         </div>
-        <div class="mr-3"><a href="/{{locale}}/privacy"><span class="i-user-secret mr-1"></span>{{strings.privacy[locale]}}</a>
+        <div class="me-3"><a href="/{{locale}}/privacy"><span class="i-user-secret me-1"></span>{{strings.privacy[locale]}}</a>
         </div>
-        <div class="mr-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/sp-codes.de"><span
+        <div class="me-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/sp-codes.de"><span
-                class="i-code mr-1"></span>{{strings.code[locale]}}</a></div>
+                class="i-code me-1"></span>{{strings.code[locale]}}</a></div>
         <div><a target="_blank" href="https://umami.sp-codes.de/share/gaJcXEyG/sp-codes.de"><span
-                class="i-chart-line mr-1"></span>{{strings.stats[locale]}}</a></div>
+                class="i-chart-line me-1"></span>{{strings.stats[locale]}}</a></div>
     </div>
 </div>
 </body>

src/_includes/layouts/services.njk

@@ -1,7 +1,7 @@
 ---
 layout: base.njk
 ---
-<a class="float-right mt-3" href="https://status.sp-codes.de" target="_blank"><strong><i class="i-heartbeat mr-2"></i>Status</strong></a>
+<a class="float-end mt-3" href="https://status.sp-codes.de" target="_blank"><strong><i class="i-heartbeat me-2"></i>Status</strong></a>
 
 {{ content | safe }}
 

src/_includes/profiles.html

@@ -26,6 +26,10 @@
 </div>
 <div class="d-flex justify-content-center mb-3">
     <div class="lead text-center">
+        {% if locale == 'de' %}
         <a href="https://samuel-philipp.de">samuel-philipp.de</a>
+        {% elseif locale == 'en' %}
+        <a href="https://samuel-philipp.com">samuel-philipp.com</a>
+        {% endif %}
     </div>
 </div>

src/de/about.md

@@ -0,0 +1,11 @@
+---
+key: about
+eleventyNavigation:
+  key: about
+  title: Über mich
+  icon: i-user-secret
+  url: https://samuel-philipp.de/
+  locale: de
+  order: 1
+permalink: false
+---

src/de/articles.html

@@ -0,0 +1,35 @@
+---
+layout: base.njk
+key: articles
+title: Artikel
+eleventyNavigation:
+  key: articles
+  title: Artikel
+  icon: i-book
+  order: 5
+---
+
+<h1><i class="i-book"></i> Artikel</h1>
+
+<p class="mb-5">Hier findest du eine Übersicht aller Artikel, die ich auf dieser Webseite veröffentlicht habe.</p>
+
+{% set tags = ['Matrix', 'Searx'] %}
+
+{%- for tag in tags %}
+<h3>Artikel zu {{tag}}:</h3>
+<ul class="mb-5">
+    {%- for post in collections[ tag ] %}
+    <li>
+        <a href="{{ post.url | url }}">
+            {{ post.data.title }}
+        </a>
+    </li>
+    {%- endfor %}
+</ul>
+{%- endfor %}
+
+
+<p class="mb-5">Gelegentlich kann es sein, dass ich die Zeit finde, einen neuen Artikel zu schreiben. Um keinen zu verpassen, folge
+    mir gerne auf Mastodon. Dort werde ich neue Artikel oder Aktualisierungen bereits veröffentlichter Artikel posten.</p>
+
+{% include "profiles.html" %}

src/de/blog.md

@@ -1,11 +0,0 @@
----
-key: blog
-eleventyNavigation:
-  key: blog
-  title: Blog
-  icon: i-book
-  url: https://samuels-blog.de/
-  locale: de
-  order: 1
-permalink: false
----

src/de/services/jitsi.md

@@ -11,6 +11,14 @@ __Seit Juli 2020 betreibe ich eine eigene Jitsi-Meet Instanz. Du findest sie unt
 
 Gerne darfst du die Instanz mit anderen Leuten nutzen.
 
+Wenn du einen eigenen Jitsi-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma <a href="https://ossrox.org" target="_blank">Ossrox</a> damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.
+
+<div class="text-center mb-3">
+    <a href="https://ossrox.org/store/jitsi" target="_blank">
+        <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
+    </a>
+</div>
+
 ## Weitere nützliche Links
 
 * [Jitsi Webseite](https://jitsi.org/)

src/de/services/matrix.md

@@ -7,7 +7,7 @@ title: Matrix
 # <i class="i-comments"></i> Matrix
 
 [Matrix](https://matrix.org) ist eine moderne, quelloffene Software für dezentrale Kommunikation (wie E-Mail). Matrix
-bietet von Haus aus Sprach- und Videoanrufe, inklusive Ende-zu-Ende Verschlüsselung und vieles mehr. Das Entscheidende
+bietet von Haus aus Sprach- und Videoanrufe, inklusive Ende-zu-Ende-Verschlüsselung und vieles mehr. Das Entscheidende
 ist, dass es nicht den einen Matrix-Server gibt, den alle Nutzer:innen verwenden müssen, wie das beispielsweise bei
 WhatsApp, Telegram und vielen anderen verbreiteten Messengern der Fall ist.
 
@@ -41,10 +41,10 @@ Auf meinem Blog findest du eine Artikelserie für einen einfachen Einstieg in Ma
 <div class="col-12 col-md-10 col-lg-8">
 <div class="card-list">
 <div class="card">
-<a href="https://samuels-blog.de/werde-teil-der-matrix-matrix-teil-1/">Teil 1: Werde Teil der Matrix</a>
+<a href="/de/services/matrix/setup/part-1/">Teil 1: Werde Teil der Matrix</a>
 </div>
 <div class="card">
-<a href="https://samuels-blog.de/sichere-chats-mit-matrix-matrix-teil-2/">Teil 2: Sichere Chats mit Matrix</a>
+<a href="/de/services/matrix/setup/part-2/">Teil 2: Sichere Chats mit Matrix</a>
 </div>
 </div>
 </div>

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

@@ -0,0 +1,171 @@
+---
+layout: article.njk
+title: Werde Teil der Matrix - Matrix Teil 1
+service: matrix
+series: matrix-setup
+tags:
+  - Tutorial
+  - Matrix
+  - Messenger
+  - Verschlüsselung
+  - Element
+  - FluffyChat
+---
+
+# Werde Teil der Matrix - Matrix Teil 1
+
+[Matrix](https://matrix.org) ist ein dezentraler Messenger. Dezentral bedeutet, es gibt nicht den einen Server, den alle
+verwenden müssen, sondern jede:r kann sich einen eigenen Matrix-Server aussuchen. In etwa so wie bei E-Mail.
+
+In diesem Beitrag möchte ich nun erklären, wie man sich dort anmelden kann und mit welchen Apps man mit seinen Liebsten
+in Kontakt treten kann. In den folgenden Artikeln dieser Serie werde ich auf weitere Themen, wie Ende-zu-Ende
+Verschlüsselung, Kontakt-Verifizierung und das Erstellen von privaten und öffentlichen Gruppen, eingehen.
+
+## Anbieter wählen
+
+Zunächst muss man sich einen Server-Anbieter auswählen, bei dem man sich registrieren möchte. Im Matrix-Netzwerk spricht
+man auch vom Homeserver, also der Server, bei dem man "zu Hause" ist, bzw. sein Konto hat. Hierfür kann man im Internet
+suchen oder eine der folgenden öffentlichen Listen verwenden, um einen Provider zu finden, der den eigenen Vorstellungen
+entspricht:
+
+* [joinmatrix.org](https://joinmatrix.org/servers)
+* [hello-matrix.net](https://www.hello-matrix.net/public_servers.php)
+* [the-federation.info](https://the-federation.info/protocol/matrix)
+
+Wichtig hierbei ist auch, dass der Servername immer ein Teil der eigenen Matrix-ID sein wird, also dem Anmeldenamen, mit
+dem man sich anmeldet, oder über den Anderen mit dir in Kontakt treten können. (Also genau wie mit deiner E-Mail-Adresse
+auch.) Die Matrix-ID sieht also folgendermaßen aus:
+
+```
+@[name]:[server]
+```
+
+In diesem Beitrag werde ich [matrix.sp-codes.de](https://matrix.sp-codes.de) als Home-Server verwenden. Gerne kannst du
+dich auch dort registrieren. Da ich selber diesen Server nutze, ist meine Matrix-ID also
+diese: [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de)
+
+## App wählen
+
+Da Matrix ein quelloffenes Netzwerk ist, kann jede:r dazu beitragen und eigene Apps entwickeln. Dadurch gibt es nicht
+die eine App, die zwingend verwendet werden muss. Ich möchte deshalb hier kurz zwei Apps vorstellen, die meiner Ansicht
+nach gut für den Einstieg geeignet sind:
+
+### [Element](https://element.io/)
+
+Element ist die wohl am weitesten verbreitetste App im Matrix-Netzwerk. Die App ist für Android, iOS, PC und auch als
+Browser-Version verfügbar. Für Android kann Element über
+den [PlayStore](https://play.google.com/store/apps/details?id=im.vector.app) oder
+über [F-Droid](https://f-droid.org/packages/im.vector.app/) installiert werden. Für iOS kann die App über
+den [AppStore](https://apps.apple.com/app/vector/id1083446067) heruntergeladen werden. Um die Desktop-Version zu
+installieren, schau am besten auf der offiziellen [Seite](https://element.io/get-started) nach.
+
+Alle Versionen (Android, iOS, Desktop und Web) sind kostenlos und Open-Source. Das heißt, jede:r kann den Quellcode
+einsehen, Fehler melden und an Verbesserungen mitarbeiten.
+
+Da der Quellcode frei verfügbar ist, können auch andere Apps erstellt werden, die auf Element basieren. Einer davon ist
+SchildiChat.
+
+[SchildiChat](https://f-droid.org/packages/de.spiritcroc.riotx/) ist ein Messenger, der auf Element basiert und ein paar
+kleinere Änderungen mit sich bringt. Darunter eine andere Darstellung der Chatverläufe mit Sprechblasen. SchildiChat ist
+nur für Android verfügbar.
+
+### [FluffyChat](https://fluffychat.im/)
+
+Eine andere, einfach zu bedienende App ist FluffyChat. Auch FluffyChat ist
+für [Android](https://play.google.com/store/apps/details?id=chat.fluffy.fluffychat), [iOS](https://testflight.apple.com/join/hL6Tyyaj),
+Desktop und als [Browser-Anwendung](https://web.fluffychat.im/) verfügbar. Um FluffyChat zu installieren, schau am
+besten direkt auf der Webseite [fluffychat.im](https://fluffychat.im/) vorbei. Wie Element, ist auch FluffyChat
+Open-Source. FluffyChat versucht sich in der Bedienung und im Design an herkömmlichen Messengern zu orientieren.
+
+### Mehr Apps
+
+Es gibt noch einige Apps mehr, die teilweise auch noch in der Entwicklung sind. Eine weitere Auswahl an Apps findest du
+auf der folgenden Seite: [https://matrix.org/clients/](https://matrix.org/clients/)
+
+## Anmelden
+
+Nachdem du dich nun für einen vertrauenswürdigen Anbieter entschieden und eine App installiert hast, die dir zusagt,
+kannst du dir nun einen Account anlegen. Im Folgenden werde ich die App Element unter Android verwenden, das Vorgehen
+wird aber in anderen Apps ähnlich sein.
+
+Nach der Startseite wählst du zunächst „Andere“ und gibst anschließend die Server-Adresse deines Anbieters ein. Nun
+wählst du deinen Anmeldenamen und ein sicheres Passwort, gibst beides in die entsprechenden Felder ein und schon wird
+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 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">
+<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">
+<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">
+<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>
+
+## Kontakte hinzufügen
+
+Nachdem du nun deinen Account erstellt hast, ist es an der Zeit, mit deinen Liebsten Kontakt aufzunehmen. Frage sie
+hierfür beispielsweise nach ihrer Matrix-ID. Gerne kannst du auch mir eine Nachricht zukommen
+lassen: [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de)
+
+Um einen neuen Chat zu starten, tippe auf den grünen Button unten rechts und anschließend auf „Mit matrix-ID
+hinzufügen“. Nun gibst du die Matrix-ID deines:deiner Chatpartner:in ein, wählst den ersten Treffer aus der Liste aus
+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 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">
+<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">
+<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">
+<a href="/img/matrix/setup/part-1/9chat.png">
+<img src="/img/matrix/setup/part-1/9chat.png">
+<small>Chatten.</small>
+</a>
+</div>
+</div>
+
+## Wie geht’s weiter?
+
+Im [nächsten Artikel](http://localhost:8080/de/services/matrix/setup/part-2/) dieser Serie werde ich über
+Ende-zu-Ende-Verschlüsselung und Verifikation der Kontakte schreiben. Bis dahin viel Spaß beim Chatten.
+
+Falls du jetzt schon weiter lesen willst, kann ich dir die folgenden Links empfehlen, allerdings teilweise auf Englisch:
+
+* [https://element.io/help](https://element.io/help)
+* [https://matrix.org/faq/](https://matrix.org/faq/)
+* [https://matrix.org/docs/guides/](https://matrix.org/docs/guides/)
+* [https://www.freie-messenger.de/sys_matrix/](https://www.freie-messenger.de/sys_matrix/)

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

@@ -0,0 +1,174 @@
+---
+layout: article.njk
+title: Sichere Chats mit Matrix – Matrix Teil 2
+service: matrix
+series: matrix-setup
+tags:
+  - Tutorial
+  - Matrix
+  - Messenger
+  - Verschlüsselung
+  - Element
+---
+
+# Sichere Chats mit Matrix – Matrix Teil 2
+
+Im [ersten Teil](/de/services/matrix/setup/part-1/) der Matrix-Serie habe ich erklärt, wie du dir einen Matrix-Account anlegen und mit deinen Kontakten einen Chat beginnen kannst. In diesem Teil möchte ich nun darauf aufbauen und erklären, was es mit Ende-zu-Ende-Verschlüsselung und der Verifizierung von Kontakten auf sich hat. Wenn Matrix also neu für dich ist, würde ich dir empfehlen, dir zunächst den [ersten Teil](/de/services/matrix/setup/part-1/) anzuschauen und anschließend hier weiterzulesen.
+
+## Ende-zu-Ende-Verschlüsselung aktivieren
+
+Durch [Ende-zu-Ende-Verschlüsselung](https://de.wikipedia.org/wiki/Ende-zu-Ende-Verschl%C3%BCsselung) wird sichergestellt, dass die Nachrichten, die du schreibst, auf deinem Gerät verschlüsselt und erst auf dem Gerät der Person, die die Nachrichten empfängt, entschlüsselt werden können. Dadurch ist es also selbst für den:die Server-Betreiber:in unmöglich, deine Nachrichten zu lesen. Deshalb ist es empfehlenswert, Ende-zu-Ende-Verschlüsselung zu nutzen.
+
+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.
+
+## Kontakte verifizieren
+
+Zusätzlich zur Ende-zu-Ende-Verschlüsselung kannst du mithilfe der Kontaktverifizierung sicherstellen, dass du mit der richtigen Person schreibst und du nicht Opfer eines [Man-In-The-Middle-Angriffs](https://de.wikipedia.org/wiki/Man-in-the-Middle-Angriff) wirst.
+
+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
+
+Um in Matrix zu chatten, kannst du beliebig viele Apps auf verschiedenen Geräten, dem Handy, am PC, im Browser, etc. nutzen. Damit du aber nicht alle deine Geräte mit allen Geräten deiner Kontakte verifizieren musst, gibt es seit einiger Zeit das sogenannte Cross Signing. Hierfür verifiziert jede:r seine:ihre eigenen Geräte selbst. Die Verifizierung funktioniert wie die der Kontakte. Wenn du dich an einem neuen Gerät anmeldest, bekommst du in Element auf deinen anderen Geräten eine Benachrichtigung. Damit kannst du direkt die Verifizierung initiieren.
+
+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.
+
+## Fehler beheben
+
+Wenn du Probleme damit haben solltest, dass die Schlüsselsicherung oder das Cross Signing nicht richtig funktioniert, kann es hilfreich sein, das Schlüsselbackup und / oder die Schlüsselsicherung in den Einstellungen zurückzusetzen. Das kannst du in den Einstellungen unter „Sicherheit & Privatsphäre“ erledigen. Nutze die Option „Backup zurücksetzen“ und / oder „Wiederherstellung verschlüsselter Nachrichten“ und dann „Sicherung löschen“. Bei weiteren Problemen schreibe gerne einen Kommentar.
+
+## Wie geht’s weiter?
+
+Ich hoffe, dieser Teil war nicht zu technisch / theoretisch und du konntest die einzelnen Punkte nachvollziehen. Im nächsten Teil dieser Serie werde ich über Gruppen und Kanäle in Matrix berichten und einige interessante davon vorstellen. Wenn du Vorschläge dafür hast, kannst du sie mir gerne zukommen lassen. Bis dahin viel Spaß beim sicheren Chatten mit deinen Freund:innen.

src/de/services/searx.md

@@ -15,7 +15,7 @@ __Seit November 2019 betreibe ich eine öffentliche Searx Instanz.__ Schau gerne
 
 __Hier gehts zu Searx: [searx.sp-codes.de](https://searx.sp-codes.de)__
 
-Wenn du Searx als Standardsuchmaschine nutzen willst, findest du auf meinem Blog eine Anleitung dafür: [Nur noch Searx](https://samuels-blog.de/nur-noch-searx/)
+Wenn du Searx als Standardsuchmaschine nutzen willst, findest du hier eine Anleitung dafür: [Nur noch Searx](/de/services/searx/setup/)
 
 ## Weitere nützliche Links
 

src/de/services/searx/setup.md

@@ -0,0 +1,56 @@
+---
+layout: article.njk
+title: Nur noch Searx
+service: searx
+tags:
+  - Tutorial
+  - Searx
+  - Standardsuchmaschine
+  - Browser
+  - Firefox
+  - Chrome
+---
+
+# Nur noch Searx
+
+In diesem Artikel möchte ich kurz beschreiben, wie ihr Searx (oder jede beliebige andere Suchmaschine) in eurem Browser als Standard festlegen könnt.
+
+Zunächst nochmal eine kurze Erläuterung, was Searx eigentlich ist: Searx ist eine sogenannte Meta-Suchmaschine. Das heißt, sie nutzt andere Suchmaschinen, um ihre Ergebnisse zu einer Suchanfrage bereitzustellen. Allerdings wird nur der Suchtext selber zu den fremden Suchmaschinen weitergeleitet, wodurch diese die Anfrage keiner bestimmten Person mehr zuordnen können. Dadurch und da Searx Open-Source ist, bietet Searx mehr Privatsphäre als andere Suchmaschinen.
+
+Einige andere Searx-Instanzen, die du bei Interesse nutzen kannst:
+
+* [searx.info](https://searx.info/)
+* [search.disroot.org](https://search.disroot.org/)
+
+Eine größere Übersicht findest du auch auf der folgenden Seite: [searx.space](https://searx.space)
+
+Um nun standardmäßig Searx als Suchmaschine zu nutzen, musst du Folgendes in deinem Browser einstellen:
+
+## Firefox
+
+In Firefox musst du als Erstes die Searx Webseite (z.B. [searx.sp-codes.de](https://searx.sp-codes.de)) öffnen. Jetzt kannst du am Ende der Suchleiste auf den Button mit den drei Punkten klicken und anschließend auf _Suchmaschine hinzufügen_.
+
+![Firefox Dropdown](/img/searx/setup/firefox-1.png)
+
+Wenn das erledigt ist, gehst du in die Einstellungen und wählst in der linken Leiste Suche aus. Nun kannst du im Bereich _Standardsuchmaschine_ deine Searx-Instanz aus der Liste auswählen. Das war’s.
+
+![Firefox Standardsuchmaschine](/img/searx/setup/firefox-2.png)
+
+## Chrome
+
+Öffne zunächst die Webseite von Searx (z.B. [searx.sp-codes.de](https://searx.sp-codes.de)) und gehe anschließend in die Browsereinstellungen. Wähle in der linken Leiste _Suchmaschine_ und dann _Suchmaschinen verwalten_. In der unteren Liste müsstest du nun Searx finden, kannst bei dem entsprechenden Eintrag auf die drei Punkte und im Menü auf _Als Standard festlegen_ klicken. Fertig.
+
+![Chrome Standardsuchmaschine](/img/searx/setup/chrome-1.png)
+
+Um deine neue Einstellung zu testen, gib einfach einen beliebigen Suchtext in die Adresszeile ein und drücke _Enter_.
+
+## Andere Browser
+
+In diesem Beitrag habe ich mich auf die beiden am häufigsten genutzten Browser beschränkt. Du kannst aber natürlich auch in vielen anderen Browsern Searx als Standardsuchmaschine festlegen. Hier habe ich die Erklärungen für ein paar andere Browser zusammen getragen:
+
+* [Microsoft Edge](https://support.microsoft.com/de-de/help/4556712/change-your-default-search-engine-in-microsoft-edge)
+* [Safari](https://support.apple.com/de-de/guide/safari/ibrwe75c2a3c/mac)
+* [Opera](https://help.opera.com/de/latest/search/)
+* [Brave](https://support.brave.com/hc/en-us/articles/360017479752-How-do-I-set-my-default-search-engine-)
+
+Solle es in einem Browser nicht möglich sein die Standardsuchmaschine zu ändern, z.B. in Handybrowsern kannst du meistens Searx als Startseite einrichten und dann direkt dort das Suchfeld nutzen.

src/en/about.md

@@ -0,0 +1,11 @@
+---
+key: about
+eleventyNavigation:
+  key: about
+  title: About me
+  icon: i-user-secret
+  url: https://samuel-philipp.com/
+  locale: en
+  order: 1
+permalink: false
+---

src/en/blog.md

@@ -1,11 +0,0 @@
----
-key: blog
-eleventyNavigation:
-  key: blog
-  title: Blog
-  icon: i-book
-  url: https://samuels-blog.de/
-  locale: en
-  order: 1
-permalink: false
----

src/en/services/jitsi.md

@@ -11,6 +11,14 @@ __Since July 2020 I run my own Jitsi-Meet instance. You can find it at [jitsi.sp
 
 You are welcome to use the instance with other people.
 
+If you want to have your own Jitsi server for you, your family or your company, I would be happy to support you with my company <a href="https://ossrox.org" target="_blank">Ossrox</a>. Please have a look at our services on our website or send me a message.
+
+<div class="text-center mb-3">
+    <a href="https://ossrox.org/store/jitsi" target="_blank">
+        <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
+    </a>
+</div>
+
 ## More useful links
 
 * [Jitsi Website](https://jitsi.org/)

src/en/services/matrix.md

@@ -31,10 +31,10 @@ On my blog (German) you will find an article series for an easy start to Matrix:
 <div class="col-12 col-md-10 col-lg-8">
 <div class="card-list">
 <div class="card">
-<a href="https://samuels-blog.de/werde-teil-der-matrix-matrix-teil-1/">Part 1: Werde Teil der Matrix</a>
+<a href="/de/services/matrix/setup/part-1/">Part 1: Werde Teil der Matrix</a>
 </div>
 <div class="card">
-<a href="https://samuels-blog.de/sichere-chats-mit-matrix-matrix-teil-2/">Part 2: Sichere Chats mit Matrix</a>
+<a href="/de/services/matrix/setup/part-2/">Part 2: Sichere Chats mit Matrix</a>
 </div>
 </div>
 </div>

src/scss/main.scss

@@ -1,22 +1,21 @@
+$primary: #fea500;
+$primary_dark: #e5a52e;
+
 @import "logo";
+
 $icomoon-font-path: "../font";
 @import "icons/style";
+
 $flag-icon-path: '../img';
 @import "icons/flags";
 
-@import "node_modules/bootstrap/scss/bootstrap-grid";
+@import "bootstrap/scss/bootstrap-grid";
-@import "node_modules/bootstrap/scss/bootstrap-reboot";
+@import "bootstrap/scss/bootstrap-reboot";
-@import "node_modules/bootstrap/scss/utilities/align";
+@import "bootstrap/scss/bootstrap-utilities";
-@import "node_modules/bootstrap/scss/utilities/spacing";
+@import "bootstrap/scss/badge";
-@import "node_modules/bootstrap/scss/utilities/display";
+@import "bootstrap/scss/functions";
-@import "node_modules/bootstrap/scss/utilities/text";
+@import "bootstrap/scss/variables";
-@import "node_modules/bootstrap/scss/utilities/float";
+@import "bootstrap/scss/mixins/_breakpoints";
-@import "node_modules/bootstrap/scss/functions";
-@import "node_modules/bootstrap/scss/variables";
-@import "node_modules/bootstrap/scss/mixins/_breakpoints";
-
-$primary: #fea500;
-$primary_dark: #e5a52e;
 
 html, body {
   height: 100%;
@@ -27,7 +26,6 @@ html, body {
 body {
   background-image: url("../img/bg.jpg");
   color: #fff;
-  font-weight: 300;
   min-height: 100vh;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
@@ -93,7 +91,7 @@ a {
   }
 }
 
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
   .nav {
     display: block;
     padding: 0;
@@ -133,6 +131,11 @@ a {
 .menu {
   a {
     color: #fff;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
   .active a {
@@ -251,7 +254,7 @@ code {
 pre {
   background-color: $primary;
   color: #000;
-  padding: 1px 3px;
+  padding: 10px 15px;
   border-radius: 4px;
 
   code {
@@ -295,3 +298,47 @@ table.table {
   margin: 5px;
   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;
+
+  .title {
+    background-color: $primary;
+    color: #000;
+    font-weight: bold;
+    padding: 5px 10px;
+    border: 1px solid #fff;
+    border-bottom: none;
+  }
+}