From d76a96b0a55af6fb509238506899bd9d0d6eacc7 Mon Sep 17 00:00:00 2001 From: samuel-p Date: Sun, 6 Dec 2020 01:23:45 +0100 Subject: [PATCH] fixed menu for small screens --- src/_data/strings.json | 4 ++ src/_includes/layouts/base.njk | 109 +++++++++++++++++++++------------ src/de/services.html | 2 +- src/de/services/matrix.md | 19 ++++++ src/scss/main.scss | 67 +++++++++++++++++++- 5 files changed, 160 insertions(+), 41 deletions(-) diff --git a/src/_data/strings.json b/src/_data/strings.json index 92da2e9..fbd342d 100644 --- a/src/_data/strings.json +++ b/src/_data/strings.json @@ -1,4 +1,8 @@ { + "menu": { + "de": "Menü", + "en": "Menu" + }, "imprint": { "de": "Impressum", "en": "Imprint" diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index 5877d82..49f09d8 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -35,49 +35,80 @@ title: sp-codes - -
- {%- for entry in collections.all | eleventyNavigation %} - {% if not entry.url.startsWith("https") and entry.url.includes(locale) or entry.locale == locale %} -
- - {% if entry.icon %}{% endif %}{{ entry.title }} - -
- {% endif %} - {%- endfor %} -
- {% for language in site.languages %} - {% set translatedUrl = "/" + language.code + "/" %} - {% for item in collections.all %} + + +
+
{{ content | safe }} -
-
-
-
Made with in Germany
-
Samuel Philipp
-
-
-
-
{{strings.imprint[locale]}}
-
{{strings.privacy[locale]}}
-
{{strings.code[locale]}}
-
{{strings.stats[locale]}}
-
+
+
+
+
Made with in Germany
+
Samuel Philipp
- +
+
+
{{strings.imprint[locale]}} +
+
{{strings.privacy[locale]}} +
+
{{strings.code[locale]}}
+
{{strings.stats[locale]}}
+
+
+ diff --git a/src/de/services.html b/src/de/services.html index 7ca6f69..00ba8a1 100644 --- a/src/de/services.html +++ b/src/de/services.html @@ -8,7 +8,7 @@ eleventyNavigation: icon: server order: 2 --- -

Dienste

+

Dienste

In meiner Freizeit stelle ich verschiedene quelloffene Dienste für die freie Nutzung bereit. Hier findest du eine Übersicht der einzelnen Services und jeweils eine kurze Beschreibung. Alle Services werden in Deutschland gehostet. Fühl dich frei, davon Gebrauch zu machen.

diff --git a/src/de/services/matrix.md b/src/de/services/matrix.md index 3c3b69f..1693e04 100644 --- a/src/de/services/matrix.md +++ b/src/de/services/matrix.md @@ -17,6 +17,25 @@ Melde dich gerne auf meinem Server an oder suche dir einen aus der unten verlink Auf meinem Blog findest du einen einfachen Einstieg in das Matrix-Netzwerk: [Werde Teil der Matrix](https://blog.sp-codes.de/werde-teil-der-matrix-matrix-teil-1/) +## Warum Matrix? + +Für die Anmeldung ist keine Handynummer oder Mailadresse nötig. Das Hinzufügen einer Mailadresse kann aber sinnvoll sein um ggfs. das Passwort wiederherstellen zu können. +Es gibt keine einfache Verbindung von dem Matrix Account zur eigenen Rechtsperson, außer wenn man das selbst so möchte. +Man kann mehrere Accounts anlegen und gleichzeitig nutzen. +Man kann die Nachrichten verschlüsseln (muss man aber nicht). +Es gibt sowohl für Desktop, als auch für mobile Devices attraktive Clients (App), welche sich im Aussehen und in der Bedienung nutzerfreundlich verhalten. Eine Übersicht ist hier zu finden: https://matrix.org/docs/projects/clients-matrix +Man kann sich selbst Daten von Endgerät zu Endgerät schicken (z.B. Handy nach PC). Je nachdem muss man dazu eine Gruppe erstellen mit nur sich selbst als Mitglied. +Die Server sind dezentral, wenn mal ein Server ausfällt, funktioniert das Netzwerk trotzdem noch. +Das System ist föderiert, das heißt, man kann sich von Server zu Server Nachrichten schicken, so wie man das von Email auch schon gewohnt ist. +Ihr könnt euch den Anbieter (Server) heraussuchen, der euch am besten gefällt. +Man kann sich selbst einen Server installieren +Das Protokoll (die Art wie Daten übertragen werden) ist offen, das heißt jeder kann sich Anwendungen schreiben, die dieses Protokoll verwenden. +Die Verschlüsselungsalgorithmen liegen offen und sind öffentlich analysierbar. Sie sind nicht patentgeschützt durch eine Firma. +Die Software ist oftmals Open Source, z.B. Clienten, Server +Es gibt Software von verschiedenen Entwickler:innen, man ist nicht ausschließlich von einem bestimmten Unternehmen abhängig +In Gruppenchats können den Teilnehmer unterschiedliche Berechtigungen zugewiesen werden. +Sprach- und Video-Telefonie sind eingebaut (per Jitsi). Auch Gruppenanrufe sind möglich. + ## Weitere nützliche Links * [Verschiedene Apps](https://matrix.org/clients) diff --git a/src/scss/main.scss b/src/scss/main.scss index 89efb69..7e83c86 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -5,6 +5,9 @@ @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"; $fa-font-path: "../font"; @import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome"; @@ -54,6 +57,67 @@ a { border: 2px solid #000; } +.nav { + display: flex; + justify-content: start; + flex-wrap: wrap; + padding: .5rem; + + .toggle { + padding: .5rem; + display: none; + } + + #menu { + display: none; + } + + .items { + display: flex; + } + + .lang-large { + display: flex; + } +} + +@include media-breakpoint-down(xs) { + .nav { + display: block; + padding: 0; + + .toggle { + display: flex; + + label:hover { + text-decoration: underline; + cursor: pointer; + } + } + + .items { + display: none; + + .item { + border-top: 1px solid #fff; + + a { + display: block; + padding: 0.5rem; + } + } + } + + input:checked ~ .items { + display: block; + } + + .lang-large { + display: none; + } + } +} + .menu { a { color: #fff; @@ -111,7 +175,8 @@ a { .beta { position: absolute; top: 0; - right: -1rem; font-weight: bold; + right: -1rem; + font-weight: bold; background-color: #fea500; color: #000000; padding: .5rem 1rem;