src/_data/services.json

@@ -9,11 +9,15 @@
       "de": "Die offene Plattform für sichere und dezentrale Kommunikation.",
       "en": "The open platform for secure and decentralized communication."
     },
+    "description": {
+      "de": "<p>Seit Anfang 2020 betreibe ich einen öffentlichen Matrix-Server: <a href=\"https://matrix.sp-codes.de\">matrix.sp-codes.de</a> und eine öffentliche Element-Web Instanz: <a href=\"https://chat.sp-codes.de\" target=\"_blank\">chat.sp-codes.de</a></p><p>Die Serverregeln kannst du gerne <a href=\"https://matrix.sp-codes.de/_matrix/consent\" target=\"_blank\">hier</a> nachlesen. Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus. Ich freue mich auf deine Nachricht an <a href=\"https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de\" target=\"_blank\">@samuel-p:matrix.sp-codes.de</a>.</p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://chat.sp-codes.de/#/register\">Jetzt registrieren</a></div>",
+      "en": ""
+    },
     "ossrox": {
       "url": "https://ossrox.org/store/matrix",
       "description": {
         "de": "Wenn du einen eigenen Matrix-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma Ossrox damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.",
-        "en": "If you want to have your own matrix server for you, your family or your company, I would be happy to support you with my company Ossrox. Please have a look at our services on our website or send me a message."
+        "en": "If you want to have your own Matrix server for you, your family or your company, I would be happy to support you with my company Ossrox. Please have a look at our services on our website or send me a message."
       }
     }
   },
@@ -26,6 +30,17 @@
     "summary": {
       "de": "Einfache Videokonferenzen mit Leichtigkeit.",
       "en": "Easy video conferencing with ease."
+    },
+    "description": {
+      "de": "<p>Seit Juli 2020 betreibe ich eine eigene Jitsi-Meet Instanz. Du findest sie unter <a href=\"https://jitsi.sp-codes.de\">jitsi.sp-codes.de</a>.</p><p>Gerne darfst du die Instanz mit anderen Leuten nutzen.</p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://jitsi.sp-codes.de\">Meeting starten</a></div>",
+      "en": ""
+    },
+    "ossrox": {
+      "url": "https://ossrox.org/store/jitsi",
+      "description": {
+        "de": "Wenn du einen eigenen Jitsi-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma Ossrox damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.",
+        "en": ""
+      }
     }
   },
   {
@@ -37,6 +52,17 @@
     "summary": {
       "de": "Das soziale Netzwerk für dezentrale und sichere Interaktion.",
       "en": "The social network for decentralized and secure interaction."
+    },
+    "description": {
+      "de": "<p>Seit Mai 2021 betreibe ich eine öffentliche Mastodon-Instanz: <a href=\"https://social.sp-codes.de\">social.sp-codes.de</a></p><p>Die Serverregeln und weitere Informationen kannst du gerne <a href=\"https://social.sp-codes.de/about\">hier</a> nachlesen. Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus. Ich freue mich auf deine Nachricht an <a href=\"https://social.sp-codes.de/@samuel_p\">@samuel_p@matrix.sp-codes.de</a>.</p><div class=\"text-center mt-2\"><a class=\"btn btn-primary\" target=\"_blank\" href=\"https://social.sp-codes.de/auth/sign_up\">Jetzt registrieren</a></div>",
+      "en": ""
+    },
+    "ossrox": {
+      "url": "https://ossrox.org/store/mastodon",
+      "description": {
+        "de": "Wenn du einen eigenen Mastodon-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma Ossrox damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.",
+        "en": ""
+      }
     }
   },
   {

src/_includes/layouts/article.njk

@@ -86,7 +86,7 @@ layout: base.njk
                         <span class="d-none d-md-inline-block i-envelope i-4x i-fw"></span>
                         <span class="d-inline-block d-md-none i-envelope i-2x i-fw"></span>
                     </a></div>
-                    <div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
+                    <div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de">
                         <span class="d-none d-md-inline-block i-matrix i-4x i-fw"></span>
                         <span class="d-inline-block d-md-none i-matrix i-2x i-fw"></span>
                     </a></div>

src/_includes/layouts/service.njk

@@ -14,14 +14,12 @@ layout: base.njk
             <div class="tab-card">
                 <div class="title"><h1 class="text-center fw-bold">sp-codes</h1></div>
                 <div class="card">
-                    Seit Anfang 2020 betreibe ich einen öffentlichen Matrix-Server: <a href="https://matrix.sp-codes.de">matrix.sp-codes.de</a> und eine öffentliche Element-Web Instanz: <a href="https://chat.sp-codes.de" target="_blank">chat.sp-codes.de</a>
+                    {{ service.description[locale] | safe }}
-                    <div class="text-center mt-2">
-                        <a class="btn btn-primary" target="_blank" href="https://chat.sp-codes.de/#/register">Jetzt registrieren</a>
-                    </div>
                 </div>
             </div>
             {% if service.ossrox %}
             <div class="tab-card ossrox">
+                <a href="{{ service.ossrox.url }}" class="link"></a>
                 <div class="title"><img class="ossrox" src="/img/ossrox-white.svg" alt="Ossrox"></div>
                 <div class="card">
                     {{ service.ossrox.description[locale] }}

src/_includes/profiles.html

@@ -4,7 +4,7 @@
         <span class="d-none d-md-inline-block i-envelope i-2x i-fw"></span>
         <span class="d-inline-block d-md-none i-envelope i-2x i-fw"></span>
     </a></div>
-    <div><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
+    <div><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de">
         <span class="d-none d-md-inline-block i-matrix i-2x i-fw"></span>
         <span class="d-inline-block d-md-none i-matrix i-2x i-fw"></span>
     </a></div>

src/de/contact.html

@@ -12,32 +12,52 @@ eleventyNavigation:
 <p>Du möchtest mit mir in Kontakt treten, mir einen Fehler mitteilen, hast eine Frage zu einem Dienst oder möchtest
     mich unterstützen? Schick mir gerne deine Nachricht auf einem der folgenden Wege. Ich freue mich von dir zu
     hören.</p>
-<div class="row justify-content-center">
+<div class="row justify-content-center contact-links">
     <div class="col-12 col-md-10 col-lg-8">
         <a class="card mb-3 d-flex align-items-center text-decoration-none" href="mailto:mail@sp-codes.de">
-            <div class="pr-3"><span class="i-envelope text-foreground i-fw i-4x"></span></div>
+            <div class="pr-3"><span class="i-envelope i-fw i-4x"></span></div>
             <div>Schicke mir eine E-Mail an <strong>mail@sp-codes.de</strong></div>
         </a>
         <a class="card mb-3 d-flex align-items-center text-decoration-none"
            href="https://social.sp-codes.de/@samuel_p">
-            <div class="pr-3"><span class="i-mastodon text-foreground i-fw i-4x"></span></div>
+            <div class="pr-3"><span class="i-mastodon i-fw i-4x"></span></div>
             <div>Folge mir auf Mastodon oder schicke mir dort eine Nachricht an
                 <strong>@samuel_p@social.sp-codes.de</strong></div>
         </a>
         <a class="card mb-3 d-flex align-items-center text-decoration-none"
-           href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
+           href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de">
-            <div class="pr-3"><span class="i-matrix text-foreground i-fw i-4x"></span></div>
+            <div class="pr-3"><span class="i-matrix i-fw i-4x"></span></div>
             <div>Schreibe mir auf Matrix an <strong>@samuel-p:matrix.sp-codes.de</strong></div>
         </a>
         <a class="card mb-3 d-flex align-items-center text-decoration-none"
            href="https://blabber.im/i/samuel-p/dismail.de">
-            <div class="pr-3"><span class="i-xmpp text-foreground i-fw i-4x"></span></div>
+            <div class="pr-3"><span class="i-xmpp i-fw i-4x"></span></div>
             <div>Schreibe mir auf XMPP an <strong>samuel-p@dismail.de</strong></div>
         </a>
         <a class="card mb-3 d-flex align-items-center text-decoration-none"
            href="https://threema.id/YSCU6F6U">
-            <div class="pr-3"><span class="i-threema text-foreground i-fw i-4x"></span></div>
+            <div class="pr-3"><span class="i-threema i-fw i-4x"></span></div>
             <div>Schreibe mir auf Threema an die ID <strong>YSCU6F6U</strong></div>
         </a>
     </div>
 </div>
+
+<p>Sollte ich einmal nicht erreichbar sein, melde dich gerne im Matrix-Chat oder nutze die Verteiler-Adressen, die auch
+    an meine Moderatoren weitergeleitet werden.</p>
+<div class="row justify-content-center contact-links">
+    <div class="col-12 col-md-10 col-lg-8">
+        <a class="card mb-3 d-flex align-items-center text-decoration-none"
+           href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">
+            <div class="pr-3"><span class="i-matrix i-fw i-4x"></span></div>
+            <div><strong>#sp-codes:matrix.sp-codes.de</strong></div>
+        </a>
+        <a class="card mb-3 d-flex align-items-center text-decoration-none" href="mailto:help@sp-codes.de">
+            <div class="pr-3"><span class="i-envelope i-fw i-4x"></span></div>
+            <div><strong>help@sp-codes.de</strong></div>
+        </a>
+        <a class="card mb-3 d-flex align-items-center text-decoration-none" href="mailto:abuse@sp-codes.de">
+            <div class="pr-3"><span class="i-envelope i-fw i-4x"></span></div>
+            <div><strong>abuse@sp-codes.de</strong></div>
+        </a>
+    </div>
+</div>

src/de/index.html

@@ -19,7 +19,7 @@ eleventyNavigation:
         <p class="mb-2">
             Schön, dass du hergefunden hast. sp-codes stellt verschiedene Open-Source-Tools zur allgemeinen Verfügung. Alle Dienste sind kostenlos und werbe-frei. Wenn du zum weiteren Fortbestand des Projekts beitragen willst, freue ich mich über deine Unterstützung! Schau dich gerne um und entdecke das Angebot!
         </p>
-        <h5 class="mb-2 fw-bold">Werde gerne Teil unserer tollen Community!</h5>
+        <h5 class="mb-2 fw-bold">Werde Teil unserer tollen Community!</h5>
         <p class="mb-2">
             Für alle, die die Dienste nutzen und Interessierte gibt es einen öffentlichen Matrix-Raum als Austauschort für Fragen, Ideen und Probleme: <strong><a
                 href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a></strong>
@@ -56,7 +56,10 @@ eleventyNavigation:
         </p>
         <p class="text-center">
             <a href="https://ossrox.org" target="_blank">
+                <picture>
+                    <source srcset="/img/ossrox.svg" media="(prefers-color-scheme: light)">
                     <img class="ossrox-logo" src="/img/ossrox-white.svg" alt="Ossrox">
+                </picture>
             </a>
         </p>
     </div>

src/de/services/jitsi.md

@@ -1,24 +1,10 @@
 ---
-layout: base.njk
+layout: service.njk
 key: jitsi
 title: Jitsi Meet
 ---
-# <i class="i-users"></i> Jitsi Meet
-
 Jitsi-Meet ist eine Plattform für Videokonferenzen. Ohne Anmeldung können vollständig verschlüsselte Video-Chats gestartet werden. Zusätzlich bietet Jitsi-Meet die Möglichkeit den Bildschirm für die anderen Teilnehmer:innen freizugeben, neue Benutzer:innen einfach per Link einzuladen und Nachrichten im integrierten Chat zu verschicken.
 
-__Seit Juli 2020 betreibe ich eine eigene Jitsi-Meet Instanz. Du findest sie unter [jitsi.sp-codes.de](https://jitsi.sp-codes.de/).__
-
-Gerne darfst du die Instanz mit anderen Leuten nutzen.
-
-Wenn du einen eigenen Jitsi-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma <a href="https://ossrox.org" target="_blank">Ossrox</a> damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.
-
-<div class="text-center mb-3">
-    <a href="https://ossrox.org/store/jitsi" target="_blank">
-        <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
-    </a>
-</div>
-
 ## Weitere nützliche Links
 
 * [Jitsi Webseite](https://jitsi.org/)

src/de/services/mastodon.md

@@ -1,31 +1,12 @@
 ---
-layout: base.njk
+layout: service.njk
 key: mastodon
 title: Mastodon
 ---
-# <i class="i-mastodon"></i> Mastodon
-
 Mastodon ist ein verteilter Mikroblogging-Dienst, ähnlich wie Twitter. Allerdings basiert der Dienst nicht auf einer zentralen Plattform, sondern besteht aus vielen verschiedenen, dezentralen Instanzen, die von Privatpersonen, Vereinen oder sonstigen Stellen eigenverantwortlich betrieben werden. Dadurch machen sich die Nutzer:innen nicht von einem einzigen Anbieter abhängig, sondern können frei entscheiden, mit wem sie welche Informationen teilen.
 
 Da Mastodon auf offenen Web-Protokollen und freier, quelloffener Software basiert, kann auch mit anderen Diensten, wie Pleroma, PeerTube, Pixelfed, Friendica oder Hubzilla kommuniziert werden. Nutzer:innen können Text-, Bild-, Videonachrichten oder Umfragen also dienst- und serverübergreifend teilen.
 
-__Seit Mai 2021 betreibe ich eine öffentliche Mastodon-Instanz: [social.sp-codes.de](https://social.sp-codes.de/)__
-
-Die Serverregeln und weitere Informationen kannst du gerne [hier](https://social.sp-codes.de/about/more) nachlesen. Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus. Ich freue mich auf
-deine Nachricht an [@samuel_p@matrix.sp-codes.de](https://social.sp-codes.de/@samuel_p).
-
-<div class="text-center mb-3">
-<a class="card d-inline-block font-weight-bold" target="_blank" href="https://social.sp-codes.de/about">Jetzt registrieren</a>
-</div>
-
-Wenn du einen eigenen Mastodon-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma <a href="https://ossrox.org" target="_blank">Ossrox</a> damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.
-
-<div class="text-center mb-3">
-    <a href="https://ossrox.org/store/mastodon" target="_blank">
-        <img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
-    </a>
-</div>
-
 ## Interessante Accounts
 
 * [Bundesbeauftragte für Datenschutz und Informationsfreiheit](https://social.bund.de/@bfdi)

src/de/services/matrix.md

@@ -14,12 +14,9 @@ erstellen und trotzdem mit allen Matrix-Nutzern:innen kommunizieren, nicht nur m
 verschickten Nachrichten werden so nur auf den beteiligten Servern gespeichert. Auch die Anrufe laufen nur über die
 beteiligten Server.
 
-Die Serverregeln kannst du gerne [hier](https://matrix.sp-codes.de/_matrix/consent) nachlesen. Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus. Ich freue mich auf
-deine Nachricht an [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de).
-
 ## Einstieg
 
-Auf meinem Blog findest du eine Artikelserie für einen einfachen Einstieg in Matrix:
+Hier findest du eine Artikelserie für einen einfachen Einstieg in Matrix:
 
 <div class="row justify-content-center">
 <div class="col-12 col-md-10 col-lg-8">

src/de/services/matrix/setup/part-1.md

@@ -42,7 +42,7 @@ auch.) Die Matrix-ID sieht also folgendermaßen aus:
 
 In diesem Beitrag werde ich [matrix.sp-codes.de](https://matrix.sp-codes.de) als Home-Server verwenden. Gerne kannst du
 dich auch dort registrieren. Da ich selber diesen Server nutze, ist meine Matrix-ID also
-diese: [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de)
+diese: [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de)
 
 ## App wählen
 
@@ -124,7 +124,7 @@ das kann je nach Server-Auslastung ein bisschen dauern.
 
 Nachdem du nun deinen Account erstellt hast, ist es an der Zeit, mit deinen Liebsten Kontakt aufzunehmen. Frage sie
 hierfür beispielsweise nach ihrer Matrix-ID. Gerne kannst du auch mir eine Nachricht zukommen
-lassen: [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de)
+lassen: [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de)
 
 Um einen neuen Chat zu starten, tippe auf den grünen Button unten rechts und anschließend auf „Mit matrix-ID
 hinzufügen“. Nun gibst du die Matrix-ID deines:deiner Chatpartner:in ein, wählst den ersten Treffer aus der Liste aus

src/en/contact.html

@@ -23,7 +23,7 @@ eleventyNavigation:
             <div>Follow me on Mastodon or send me a message to <strong>@samuel_p@social.sp-codes.de</strong></div>
         </a>
         <a class="card mb-3 d-flex align-items-center text-decoration-none"
-           href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
+           href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de">
             <div class="pr-3"><span class="i-matrix text-foreground i-fw i-4x"></span></div>
             <div>Write me on Matrix to <strong>@samuel-p:matrix.sp-codes.de</strong></div>
         </a>

src/en/services/matrix.md

@@ -10,7 +10,7 @@ Users can choose a public server or create their own and still communicate with
 
 __Since the beginning of 2020 I run a public Matrix server: [matrix.sp-codes.de](https://matrix.sp-codes.de/) And a public Element-Web instance: [chat.sp-codes.de](https://chat.sp-codes.de/)__
 
-You can read the server rules [here](https://matrix.sp-codes.de/_matrix/consent) (German). Feel free to create an account on my server or choose one from the lists linked below. I look forward to hear from you [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de).
+You can read the server rules [here](https://matrix.sp-codes.de/_matrix/consent) (German). Feel free to create an account on my server or choose one from the lists linked below. I look forward to hear from you [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de?via=matrix.sp-codes.de).
 
 <div class="text-center mb-3">
 <a class="card d-inline-block font-weight-bold" target="_blank" href="https://chat.sp-codes.de/#/register">Register now</a>

src/scss/main.scss

@@ -104,8 +104,11 @@ a {
   margin: 0 auto;
   border-radius: 50%;
   overflow: hidden;
+  box-shadow: inset 0 0 6px 4px #fff;
 
   img {
+    position: relative;
+    z-index: -1;
     width: 100%;
     height: 100%;
   }
@@ -251,7 +254,7 @@ a {
     padding: .5rem 1rem;
     border-radius: 10px;
     transform: rotate(20deg);
-    box-shadow: -1px 8px 5px rgba(0, 0, 0, .7);
+    box-shadow: -1px 3px 5px rgba(255, 255, 255, .3);
   }
 
   .inner {
@@ -381,6 +384,16 @@ table.table {
 }
 
 .tab-card.ossrox {
+  position: relative;
+
+  .link {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+
   .title {
     background-color: #006269;
     color: #fff;
@@ -388,10 +401,6 @@ table.table {
     text-align: center;
   }
 
-  .card {
-
-  }
-
   img {
     max-width: 250px;
     max-height: 50px;
@@ -414,12 +423,20 @@ table.table {
     color: #000;
   }
 
+  a {
+    color: #555;
+
+    &:hover {
+      color: #333;
+    }
+  }
+
   .me-profile {
     border: 1px solid #000;
   }
 
   .nav {
-    background-color: #eee;
+    background-color: #bbb;
   }
 
   .menu {
@@ -427,4 +444,38 @@ table.table {
       color: #000;
     }
   }
+
+  .card {
+    background-color: #ccc;
+    border: 1px solid #000;
+  }
+
+  .card-list {
+    .card:last-child {
+      border-bottom: 1px solid #000;
+    }
+  }
+
+  .service {
+    .beta {
+      box-shadow: -1px 3px 5px rgba(0, 0, 0, .3);
+    }
+  }
+
+  table.table {
+    background-color: #eee;
+
+    tr:nth-child(2n) {
+      background-color: #0000000b;
+    }
+  }
+
+  .tab-card .title {
+    border: 1px solid #000;
+    border-bottom: none;
+  }
+
+  .contact-links a {
+    color: #000 !important;
+  }
 }