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": {
|
||||
"de": "Impressum",
|
||||
"en": "Imprint"
|
||||
|
|
|
|||
|
|
@ -35,18 +35,13 @@ 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 %}
|
||||
<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 %}
|
||||
|
|
@ -54,30 +49,66 @@ title: sp-codes
|
|||
{% set translatedUrl = item.url %}
|
||||
{% endif %}
|
||||
{% endfor%}
|
||||
<div {% if language.code == locale %} class="active"{% endif %}>
|
||||
<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">
|
||||
<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>
|
||||
<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 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>
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue