fixed menu for small screens
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Samuel Philipp 2020-12-06 01:23:45 +01:00
parent 538c4fea91
commit d76a96b0a5
5 changed files with 160 additions and 41 deletions

View File

@ -1,4 +1,8 @@
{
"menu": {
"de": "Menü",
"en": "Menu"
},
"imprint": {
"de": "Impressum",
"en": "Imprint"

View File

@ -35,49 +35,80 @@ title: sp-codes
<link rel="stylesheet" href="/css/main.css">
<script async defer data-domain="sp-codes.de" src="https://plausible.sp-codes.de/js/plausible.js"></script>
</head>
<body>
<div class="d-flex justify-content-start flex-wrap p-2 menu border-bottom">
{%- for entry in collections.all | eleventyNavigation %}
{% if not entry.url.startsWith("https") and entry.url.includes(locale) or entry.locale == locale %}
<div {% if entry.url == page.url %} class="active"{% endif %}>
<a href="{{ entry.url | url }}" class="mr-3">
{% if entry.icon %}<span class="fas fa-{{ entry.icon }} mr-1"></span>{% endif %}{{ entry.title }}
</a>
</div>
{% endif %}
{%- endfor %}
<div class="flex-grow-1"></div>
{% for language in site.languages %}
{% set translatedUrl = "/" + language.code + "/" %}
{% for item in collections.all %}
<body>
<nav class="nav menu border-bottom">
<div class="toggle">
<label for="menu" class="m-0"><span class="fas fa-bars fa-fw mr-1"></span>{{ strings.menu[locale] }}</label>
<div class="flex-grow-1"></div>
{% for language in site.languages %}
{% set translatedUrl = "/" + language.code + "/" %}
{% for item in collections.all %}
{% if item.data.key == key and item.data.locale == language.code and not item.data.hidden %}
{% set translatedUrl = item.url %}
{% set translatedUrl = item.url %}
{% endif %}
{% endfor%}
<div {% if language.code == locale %} class="active"{% endif %}>
<a href="{{ translatedUrl | url }}" class="ml-3">
<span class="flag-icon flag-icon-{{ language.icon }}" title="{{ language.label }}"></span>
</a>
</div>
{% endfor %}
{% endfor%}
<div {% if language.code== locale %} class="active" {% endif %}>
<a href="{{ translatedUrl | url }}" class="ml-3">
<span class="flag-icon flag-icon-{{ language.icon }}" title="{{ language.label }}"></span>
</a>
</div>
{% endfor %}
</div>
<div class="content">
<div class="container">
<input type="checkbox" id="menu"/>
<div class="items">
{%- 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="fas fa-{{ entry.icon }} fa-fw mr-1"></span>{% endif %}{{ entry.title }}
</a>
</div>
{% endif %}
{%- endfor %}
</div>
<div class="flex-grow-1"></div>
<div class="lang-large">
{% for language in site.languages %}
{% set translatedUrl = "/" + language.code + "/" %}
{% for item in collections.all %}
{% if item.data.key == key and item.data.locale == language.code and not item.data.hidden %}
{% set translatedUrl = item.url %}
{% endif %}
{% endfor%}
<div {% if language.code== locale %} class="active" {% endif %}>
<a href="{{ translatedUrl | url }}" class="ml-3">
<span class="flag-icon flag-icon-{{ language.icon }}" title="{{ language.label }}"></span>
</a>
</div>
{% endfor %}
</div>
</nav>
<div class="content">
<div class="container">
{{ content | safe }}
</div>
</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="fas fa-heart highlight"></span> in Germany</div>
<div class="mr-3"><span class="far fa-copyright mr-1"></span>Samuel Philipp</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="fas fa-info-circle mr-1"></span>{{strings.imprint[locale]}}</a></div>
<div class="mr-3"><a href="/{{locale}}/privacy"><span class="fas fa-user-secret mr-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="fas fa-code mr-1"></span>{{strings.code[locale]}}</a></div>
<div><a target="_blank" href="https://plausible.sp-codes.de/sp-codes.de"><span class="fas fa-chart-line mr-1"></span>{{strings.stats[locale]}}</a></div>
</div>
</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="fas fa-heart highlight"></span> in Germany</div>
<div class="mr-3"><span class="far fa-copyright mr-1"></span>Samuel Philipp</div>
</div>
</body>
<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="fas fa-info-circle mr-1"></span>{{strings.imprint[locale]}}</a>
</div>
<div class="mr-3"><a href="/{{locale}}/privacy"><span class="fas fa-user-secret mr-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="fas fa-code mr-1"></span>{{strings.code[locale]}}</a></div>
<div><a target="_blank" href="https://plausible.sp-codes.de/sp-codes.de"><span
class="fas fa-chart-line mr-1"></span>{{strings.stats[locale]}}</a></div>
</div>
</div>
</body>
</html>

View File

@ -8,7 +8,7 @@ eleventyNavigation:
icon: server
order: 2
---
<h1>Dienste</h1>
<h1><i class="fas fa-server fa-fw mr-1"></i>Dienste</h1>
<p>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.</p>

View File

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

View File

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