added donate page

added contact options to imprint
minor layout improvements

src/_includes/layouts/base.njk

@@ -40,8 +40,8 @@ title: sp-codes
     {%- 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-2">
+          <a href="{{ entry.url | url }}" class="mr-3">
-            {% if entry.icon %}<span class="fas fa-{{ entry.icon }} mr-2"></span>{% endif %}{{ entry.title }}
+            {% if entry.icon %}<span class="fas fa-{{ entry.icon }} mr-1"></span>{% endif %}{{ entry.title }}
           </a>
         </div>
       {% endif %}
@@ -69,14 +69,14 @@ title: sp-codes
     <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-2"></span>Samuel Philipp</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-2"></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>
-            <div class="mr-3"><a href="/{{locale}}/privacy"><span class="fas fa-user-secret mr-2"></span>{{strings.privacy[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-2"></span>{{strings.code[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-2"></span>{{strings.stats[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>

src/_includes/services-extended.html

@@ -1,6 +1,6 @@
 {%- for service in services %}
 <div class="col-12 col-md-6 col-lg-4 p-3">
-    <div class="service">
+    <div class="card service">
         <a class="link" {% if service.beta !=true %} href="/{{locale}}/services/{{service.id}}" {% endif %}></a>
         {% if service.beta == true %}
         <div class="beta">TEST-PHASE</div>

src/_includes/services-simple.html

@@ -1,6 +1,6 @@
 {%- for service in services %}
 <div class="col-12 col-md-6 p-3">
-    <div class="service flat">
+    <div class="card service flat">
         <a class="link" href="/{{locale}}/services{% if service.beta != true %}/{{service.id}}{% endif %}"></a>
         <div class="inner" href="/{{locale}}/services{% if service.beta != true %}/{{service.id}}{% endif %}">
             {% if service.beta == true %}

src/de/donate.html

@@ -0,0 +1,57 @@
+---
+layout: base.njk
+key: donate
+title: Unterstützen
+eleventyNavigation:
+  key: donate
+  title: Unterstützen
+  icon: hand-holding-heart
+  order: 4
+---
+<h1><i class="fas fa-hand-holding-heart fa-fw mr-1"></i>Unterstützen</h1>
+
+<p>Alle öffentlichen Dienste sind kostenfrei nutzbar. Wenn du dich trotzdem an den Unkosten für Server-Infrastruktur
+    beteiligen oder mir eine kleine Anerkennung für meinen Blog zukommen lassen willst, kannst du mich gerne über die
+    folgenden Wege unterstützen<sup>1</sup>:</p>
+
+<div class="row justify-content-center">
+    <div class="col-12 col-md-10 col-lg-8">
+        <div class="card mb-3">
+            <h2><i class="fas fa-comments fa-fw m-2"></i>Empfehlen</h2>
+            <div>Gerne darfst du meine Dienste und meine Blog-Beiträge weiter empfehlen, wenn sie dir gefallen. Ich
+                freue mich sehr, wenn ich euch damit eine Freude machen kann.
+            </div>
+        </div>
+        <div class="card mb-3">
+            <h2><i class="fas fa-credit-card fa-fw m-2"></i>Banküberweisung</h2>
+            <div>Wenn Du mir etwas überweisen willst, schreib mir einfach eine kurze <a href="/de/imprint">Nachricht</a>.
+                Ich schicke dir dann schnellstmöglich meine Bankverbindung zu.
+            </div>
+        </div>
+        <div class="card mb-3">
+            <h2><i class="fas fa-money-bill fa-fw m-2"></i>Bargeld</h2>
+            <div>Wer mir etwas Bargeld zukommen lassen möchte, darf das gerne an die Adresse aus dem <a
+                    href="/de/imprint">Impressum</a> senden.
+            </div>
+        </div>
+        <div class="card mb-3">
+            <h2><i class="fas fa-network-wired fa-fw m-2"></i>netcup</h2>
+            <div>Einige meiner Dienste hoste ich bei netcup. Wenn du einen eigenen Server oder eine Webseite bei netcup
+                betreiben willst, kannst du gerne den folgenden Link (auf dem Bild) nutzen. Dadurch erhalte ich bei
+                deiner Bestellung eine kleine Provision. Falls du ein Neukunde bist, erhältst du einen 5 € Gutschein für
+                deine Bestellung.
+            </div>
+            <div class="mt-3 text-center">
+                <a href="https://www.netcup.de/bestellen/gutschein_einloesen.php?gutschein=36nc16071208640"
+                   target="_blank">
+                    <img src="/img/netcup-setC-234x60.png" width="234" height="60" alt="zu netcup"/>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="border-top mt-5 pt-2">
+    <p><small><sup>1</sup> Bei den geleisteten Zahlungen handelt sich um Schenkungen im Sinne von § 516 BGB,
+        nicht um steuerlich absetzbare Spenden im Sinne des Steuerrechts.</small></p>
+</div>

src/de/imprint.html

@@ -3,13 +3,35 @@ layout: base.njk
 title: Impressum
 ---
 <h1>Impressum</h1>
-<div class="mb-3">
+<div class="mb-4">
     <h2>Angaben gemäß § 5 TMG:</h2>
-    <p>Samuel Philipp
+    <p>Samuel Philipp<br/>
         Otto-von-Guericke-Straße 40a<br/>
         39104 Magdeburg<br/>
         Deutschland</p>
-    <h2>Kontaktmöglichkeiten</h2>
+</div>
-    <p><strong>E-Mail-Adresse</strong>: <a href="mailto:info@sp-codes.de" target="_blank">info@sp-codes.de</a></p>
+<div class="mb-3 pt-4 border-top">
-    <!--<p><strong>Kontaktformular</strong>: <a href="https://sp-codes.de/contact" target="_blank">https://sp-codes.de/contact</a></p>-->
+    <h2>Kontaktmöglichkeiten</h2>
+    <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="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="fas fa-fw fa-4x fa-envelope text-white"></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.tchncs.de/@samuel_p">
+                <div class="pr-3"><span class="fab fa-fw fa-4x fa-mastodon text-white"></span></div>
+                <div>Folge mir auf Mastodon oder schicke mir dort eine Nachricht an
+                    <strong>@samuel_p@social.tchncs.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">
+                <div class="pr-3"><img class="matrix-icon" src="/img/matrix.png" alt=""></div>
+                <div>Schreibe mir auf Matrix an <strong>@samuel-p:matrix.sp-codes.de</strong></div>
+            </a>
+        </div>
+    </div>
 </div>

src/en/donate.html

@@ -0,0 +1,13 @@
+---
+layout: base.njk
+key: donate
+title: Donate
+eleventyNavigation:
+  key: donate
+  title: Donate
+  icon: hand-holding-heart
+  order: 3
+---
+<h1>Donate</h1>
+
+<i>tbd</i>

src/scss/main.scss

@@ -84,11 +84,16 @@ a {
   flex: 1;
 }
 
-.service {
+.card {
-  position: relative;
   background-color: #222;
   border: 1px solid #fff;
+  padding: 1rem;
+}
+
+.service {
+  position: relative;
   height: 100%;
+  padding: 0;
 
   .link {
     position: absolute;
@@ -140,7 +145,6 @@ a {
 
     .inner {
       flex-direction: row;
-      //pointer-events: all;
       text-decoration: none;
 
       h2 {
@@ -196,6 +200,7 @@ pre {
 
 @media (max-width: 767.98px) {
   .matrix-icon {
+    margin: 0 4px;
     width: 2em;
     height: 2em;
   }