forked from samuel-p/sp-codes.de
fixed menu for small screens
This commit is contained in:
parent
538c4fea91
commit
d76a96b0a5
5 changed files with 160 additions and 41 deletions
|
|
@ -1,4 +1,8 @@
|
||||||
{
|
{
|
||||||
|
"menu": {
|
||||||
|
"de": "Menü",
|
||||||
|
"en": "Menu"
|
||||||
|
},
|
||||||
"imprint": {
|
"imprint": {
|
||||||
"de": "Impressum",
|
"de": "Impressum",
|
||||||
"en": "Imprint"
|
"en": "Imprint"
|
||||||
|
|
|
||||||
|
|
@ -35,18 +35,13 @@ title: sp-codes
|
||||||
<link rel="stylesheet" href="/css/main.css">
|
<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>
|
<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 %}
|
||||||
|
|
@ -54,30 +49,66 @@ title: sp-codes
|
||||||
{% set translatedUrl = item.url %}
|
{% set translatedUrl = item.url %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor%}
|
{% endfor%}
|
||||||
<div {% if language.code == locale %} class="active"{% endif %}>
|
<div {% if language.code== locale %} class="active" {% endif %}>
|
||||||
<a href="{{ translatedUrl | url }}" class="ml-3">
|
<a href="{{ translatedUrl | url }}" class="ml-3">
|
||||||
<span class="flag-icon flag-icon-{{ language.icon }}" title="{{ language.label }}"></span>
|
<span class="flag-icon flag-icon-{{ language.icon }}" title="{{ language.label }}"></span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<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">
|
<div class="container">
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
</div>
|
</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 p-2 menu border-top">
|
||||||
<div class="d-flex justify-content-start flex-wrap">
|
<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">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 class="mr-3"><span class="far fa-copyright mr-1"></span>Samuel Philipp</div>
|
||||||
</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 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="mr-3"><a href="/{{locale}}/privacy"><span class="fas fa-user-secret mr-1"></span>{{strings.privacy[locale]}}</a>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
<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>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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)
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue