fixed menu for small screens

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": { "imprint": {
"de": "Impressum", "de": "Impressum",
"en": "Imprint" "en": "Imprint"

View file

@ -36,17 +36,12 @@ title: sp-codes
<script async defer data-domain="sp-codes.de" src="https://plausible.sp-codes.de/js/plausible.js"></script> <script async defer data-domain="sp-codes.de" src="https://plausible.sp-codes.de/js/plausible.js"></script>
</head> </head>
<body> <body>
<div class="d-flex justify-content-start flex-wrap p-2 menu border-bottom"> <nav class="nav menu border-bottom">
{%- for entry in collections.all | eleventyNavigation %} <div class="toggle">
{% if not entry.url.startsWith("https") and entry.url.includes(locale) or entry.locale == locale %} <label for="menu" class="m-0"><span class="fas fa-bars fa-fw mr-1"></span>{{ strings.menu[locale] }}</label>
<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> <div class="flex-grow-1"></div>
{% for language in site.languages %} {% for language in site.languages %}
{% set translatedUrl = "/" + language.code + "/" %} {% set translatedUrl = "/" + language.code + "/" %}
{% for item in collections.all %} {% for item in collections.all %}
@ -61,6 +56,38 @@ title: sp-codes
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
<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="content">
<div class="container"> <div class="container">
{{ content | safe }} {{ content | safe }}
@ -73,10 +100,14 @@ title: sp-codes
</div> </div>
<div class="flex-sm-grow-1"></div> <div class="flex-sm-grow-1"></div>
<div class="d-flex justify-content-sm-start flex-wrap"> <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}}/imprint"><span class="fas fa-info-circle mr-1"></span>{{strings.imprint[locale]}}</a>
<div class="mr-3"><a href="/{{locale}}/privacy"><span class="fas fa-user-secret mr-1"></span>{{strings.privacy[locale]}}</a></div> </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 class="mr-3"><a href="/{{locale}}/privacy"><span class="fas fa-user-secret mr-1"></span>{{strings.privacy[locale]}}</a>
<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 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> </div>
</body> </body>

View file

@ -8,7 +8,7 @@ eleventyNavigation:
icon: server icon: server
order: 2 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 <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 Übersicht der einzelnen Services und jeweils eine kurze Beschreibung. Alle Services werden in Deutschland
gehostet. Fühl dich frei, davon Gebrauch zu machen.</p> 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/) 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 ## Weitere nützliche Links
* [Verschiedene Apps](https://matrix.org/clients) * [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/display";
@import "node_modules/bootstrap/scss/utilities/text"; @import "node_modules/bootstrap/scss/utilities/text";
@import "node_modules/bootstrap/scss/utilities/float"; @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"; $fa-font-path: "../font";
@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome"; @import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@ -54,6 +57,67 @@ a {
border: 2px solid #000; 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 { .menu {
a { a {
color: #fff; color: #fff;
@ -111,7 +175,8 @@ a {
.beta { .beta {
position: absolute; position: absolute;
top: 0; top: 0;
right: -1rem; font-weight: bold; right: -1rem;
font-weight: bold;
background-color: #fea500; background-color: #fea500;
color: #000000; color: #000000;
padding: .5rem 1rem; padding: .5rem 1rem;