Merge pull request 'develop' (#140) from develop into main

Reviewed-on: samuel-p/sp-codes.de#140
This commit is contained in:
Samuel Philipp 2023-01-13 19:19:59 +00:00
commit 8b353870b9
51 changed files with 710 additions and 105 deletions

View file

@ -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
});
})
});

View file

@ -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",

View file

@ -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",
"watch:eleventy": "eleventy --serve",
"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",
"minify-css": "uncss -n -H dist/ -o dist/css/main-*.css dist/**/*.html dist/**/**/*.html dist/**/**/**/*.html dist/**/**/**/**/*.html dist/**/**/**/**/**/*.html",
"start": "eleventy --serve --watch",
"build": "eleventy && npm run move-index && npm run minify-css",
"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",
"node-sass-tilde-importer": "^1.0.2",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.21",
"sass": "^1.57.1",
"uncss": "^0.17.3"
},
"dependencies": {
"bootstrap": "^4.6.2"
"bootstrap": "^5.2.3"
}
}

View file

@ -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,

View file

@ -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>

View file

@ -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">
{% if entry.icon %}<span class="{{ entry.icon }} mr-1"></span>{% endif %}{{ entry.title }}
<a href="{{ entry.url | url }}" class="me-3">
{% 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="mr-3"><a href="https://samuel-philipp.de"><span class="i-copyright mr-1"></span>Samuel Philipp</a></div>
<div class="me-3">Made with <span class="i-heart highlight"></span> in Germany</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
class="i-code mr-1"></span>{{strings.code[locale]}}</a></div>
<div class="me-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/sp-codes.de"><span
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>

View file

@ -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 }}

View file

@ -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>

11
src/de/about.md Normal file
View file

@ -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
---

35
src/de/articles.html Normal file
View file

@ -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" %}

View file

@ -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
---

View file

@ -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/)

View file

@ -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>

View file

@ -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 gehts 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/)

View file

@ -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 gehts 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.

View file

@ -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

View file

@ -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 wars.
![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.

11
src/en/about.md Normal file
View file

@ -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
---

View file

@ -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
---

View file

@ -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/)

View file

@ -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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 122 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 149 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 108 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 174 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 159 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 129 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 128 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 149 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 164 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 186 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 158 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

View file

@ -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 "node_modules/bootstrap/scss/bootstrap-reboot";
@import "node_modules/bootstrap/scss/utilities/align";
@import "node_modules/bootstrap/scss/utilities/spacing";
@import "node_modules/bootstrap/scss/utilities/display";
@import "node_modules/bootstrap/scss/utilities/text";
@import "node_modules/bootstrap/scss/utilities/float";
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins/_breakpoints";
$primary: #fea500;
$primary_dark: #e5a52e;
@import "bootstrap/scss/bootstrap-grid";
@import "bootstrap/scss/bootstrap-reboot";
@import "bootstrap/scss/bootstrap-utilities";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins/_breakpoints";
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;
}
}