.eleventy.js

@@ -1,6 +1,6 @@
 const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
 
-module.exports = function(eleventyConfig) {
+module.exports = function (eleventyConfig) {
     eleventyConfig.addWatchTarget("./src/scss/");
 
     eleventyConfig.addPlugin(eleventyNavigationPlugin);
@@ -11,10 +11,39 @@ module.exports = function(eleventyConfig) {
         "node_modules/@fortawesome/fontawesome-free/webfonts/": "font",
         "node_modules/flag-icon-css/flags/4x3/(de|us)*": "flags"
     });
-    eleventyConfig.addShortcode("translatedUrl", function(currentLocale, newLocale) {
+    eleventyConfig.addShortcode("translatedUrl", function (currentLocale, newLocale) {
         return this.page.url.replace(new RegExp(`\/${currentLocale}\/`), `/${newLocale}/`);
     });
 
+    eleventyConfig.addFilter('year', function (value) {
+        return value * 12;
+    });
+
+    eleventyConfig.addFilter("sum", function (value) {
+        return value.map(d => d.amount).reduce((a, b) => a + b);
+    });
+
+    eleventyConfig.addFilter("amount", function (value) {
+        // TODO update language dynamically
+        return value.toLocaleString('de', {minimumFractionDigits: 2});
+    });
+
+    eleventyConfig.addFilter("banktransfers", function (donations) {
+        return donations
+            .flatMap(y => y.donations)
+            .filter(d => d.via === 'banktransfer')
+            .filter(d => d.first)
+            .length;
+    });
+
+    eleventyConfig.addFilter("cash", function (donations) {
+        return donations
+            .flatMap(y => y.donations)
+            .filter(d => d.via === 'cash')
+            .filter(d => d.first)
+            .length;
+    });
+
     return {
         dir: {
             input: "src",

package.json

@@ -19,7 +19,7 @@
     "browser-sync": "^2.26.14"
   },
   "devDependencies": {
-    "@11ty/eleventy": "^0.12.1",
+    "@11ty/eleventy": "^1.0.0-canary.32",
     "@11ty/eleventy-navigation": "^0.2.0",
     "cpx": "^1.5.0",
     "node-sass": "^6.0.0",

src/_data/donations.json

@@ -1,10 +1,68 @@
-{
+[
-  "banktransfer": {
+  {
-    "number": 5,
+    "year": 2021,
-    "color": "success"
+    "donations": [
+      {
+        "date": "01.06.2021",
+        "amount": 20,
+        "via": "banktransfer",
+        "from": "Rumo",
+        "first": true
       },
-  "cash": {
+      {
-    "number": 0,
+        "date": "26.04.2021",
-    "color": "inactive"
+        "amount": 8.96,
+        "via": "banktransfer",
+        "from": null,
+        "first": false
+      },
+      {
+        "date": "23.03.2021",
+        "amount": 30,
+        "via": "banktransfer",
+        "from": null,
+        "first": true
+      },
+      {
+        "date": "19.02.2021",
+        "amount": 20,
+        "via": "banktransfer",
+        "from": null,
+        "first": true
+      },
+      {
+        "date": "02.02.2021",
+        "amount": 9.01,
+        "via": "opencollective",
+        "from": "Dennis H.",
+        "first": true
+      },
+      {
+        "date": "20.01.2021",
+        "amount": 10,
+        "via": "banktransfer",
+        "from": null,
+        "first": true
+      },
+      {
+        "date": "17.01.2021",
+        "amount": 4.41,
+        "via": "opencollective",
+        "from": "Michael Haak",
+        "first": true
       }
-}
+    ]
+  },
+  {
+    "year": 2020,
+    "donations": [
+      {
+        "date": "04.12.2020",
+        "amount": 10,
+        "via": "banktransfer",
+        "from": null,
+        "first": true
+      }
+    ]
+  }
+]

src/_data/expenses.json

@@ -0,0 +1,50 @@
+[
+  {
+    "name": {
+      "en": "Websites",
+      "de": "Webseiten"
+    },
+    "type": "Webhosting",
+    "provider": "netcup",
+    "amount": 1.99
+  },
+  {
+    "name": "Diana",
+    "type": "VPS",
+    "provider": "Hetzner",
+    "amount": 2.96
+  },
+  {
+    "name": "Ceres",
+    "type": "VPS",
+    "provider": "netcup",
+    "amount": 5.5
+  },
+  {
+    "name": "Venus",
+    "type": "VPS",
+    "provider": "netcup",
+    "amount": 3.33
+  },
+  {
+    "name": "Luna",
+    "type": "Root-Server",
+    "provider": "netcup",
+    "amount": 14
+  },
+  {
+    "name": "Vesta",
+    "type": "Root-Server",
+    "provider": "netcup",
+    "amount": 11.49
+  },
+  {
+    "name": {
+      "en": "Additional IPv4",
+      "de": "Zusätzliche IPv4"
+    },
+    "type": "IPv4",
+    "provider": "netcup",
+    "amount": 1
+  }
+]

src/_data/services.json

@@ -2,7 +2,7 @@
   {
     "id": "searx",
     "name": "Searx",
-    "icon": "fas fa-search",
+    "icon": "si si-search",
     "url": "https://searx.sp-codes.de",
     "status": "https://searx.sp-codes.de",
     "summary": {
@@ -13,7 +13,7 @@
   {
     "id": "matrix",
     "name": "Matrix",
-    "icon": "fas fa-comments",
+    "icon": "si si-comments",
     "url": "https://chat.sp-codes.de",
     "status": "https://matrix.sp-codes.de/_matrix/static/",
     "summary": {
@@ -24,7 +24,7 @@
   {
     "id": "jitsi",
     "name": "Jitsi Meet",
-    "icon": "fas fa-users",
+    "icon": "si si-users",
     "url": "https://jitsi.sp-codes.de",
     "status": "https://jitsi.sp-codes.de",
     "summary": {
@@ -35,7 +35,7 @@
   {
     "id": "mastodon",
     "name": "Mastodon",
-    "icon": "fab fa-mastodon",
+    "icon": "si si-mastodon",
     "url": "https://social.sp-codes.de",
     "status": "https://social.sp-codes.de/health",
     "beta": true,
@@ -47,7 +47,7 @@
   {
     "id": "gitea",
     "name": "Gitea",
-    "icon": "fas fa-code",
+    "icon": "si si-gitea",
     "url": "https://git.sp-codes.de",
     "status": "https://git.sp-codes.de",
     "summary": {
@@ -58,7 +58,7 @@
   {
     "id": "connectivitycheck",
     "name": "Captive Portal Check",
-    "icon": "fas fa-wifi",
+    "icon": "si si-wifi",
     "status": "https://connectivitycheck.sp-codes.de/generate204",
     "summary": {
       "de": "Eine datenschutzfreundliches Tool, um Anmeldeseiten in WLAN-Netzwerken zu erkennen.",
@@ -68,7 +68,7 @@
   {
     "id": "firefox-sync",
     "name": "Firefox Sync",
-    "icon": "fab fa-firefox-browser",
+    "icon": "si si-firefox-browser",
     "status": "https://sync.firefox.sp-codes.de/token/",
     "summary": {
       "de": "Ein Service um Firefox Einstellungen, Lesezeichen, offene Tabs und vieles mehr über verschiedene Geräte zu synchronisieren.",
@@ -78,7 +78,7 @@
   {
     "id": "shields",
     "name": "Shields",
-    "icon": "fas fa-tags",
+    "icon": "si si-tags",
     "url": "https://shields.sp-codes.de",
     "status": "https://shields.sp-codes.de",
     "summary": {
@@ -89,7 +89,7 @@
   {
     "id": "translate",
     "name": "LibreTranslate",
-    "icon": "fas fa-language",
+    "icon": "si si-language",
     "url": "https://translate.sp-codes.de",
     "status": "https://translate.sp-codes.de",
     "beta": true,
@@ -101,7 +101,7 @@
   {
     "id": "invidious",
     "name": "Invidious",
-    "icon": "fab fa-youtube",
+    "icon": "si si-youtube",
     "url": "https://invidious.sp-codes.de",
     "status": "https://invidious.sp-codes.de",
     "summary": {
@@ -112,7 +112,7 @@
   {
     "id": "nitter",
     "name": "Nitter",
-    "icon": "fab fa-twitter",
+    "icon": "si si-twitter",
     "url": "https://nitter.sp-codes.de",
     "status": "https://nitter.sp-codes.de",
     "summary": {

src/_data/strings.json

@@ -38,5 +38,49 @@
   "maintenance": {
     "de": "Wartung",
     "en": "Maintenance"
+  },
+  "date": {
+    "de": "Datum",
+    "en": "Date"
+  },
+  "amount": {
+    "de": "Betrag",
+    "en": "Amount"
+  },
+  "via": {
+    "de": "Via",
+    "en": "Via"
+  },
+  "from": {
+    "de": "Von",
+    "en": "Form"
+  },
+  "banktransfer": {
+    "de": "Überweisung",
+    "en": "Bank transfer"
+  },
+  "total": {
+    "de": "Gesamt",
+    "en": "Total"
+  },
+  "name": {
+    "de": "Name",
+    "en": "Name"
+  },
+  "type": {
+    "de": "Typ",
+    "en": "Type"
+  },
+  "provider": {
+    "de": "Anbieter",
+    "en": "Provider"
+  },
+  "month": {
+    "de": "Monat",
+    "en": "Month"
+  },
+  "year": {
+    "de": "Jahr",
+    "en": "Year"
   }
 }

src/_includes/donations-current.html

@@ -0,0 +1,36 @@
+<div class="table-container">
+    <table class="table">
+        <thead>
+        <tr>
+            <th>{{strings.date[locale]}}</th>
+            <th>{{strings.via[locale]}}</th>
+            <th>{{strings.from[locale]}}</th>
+            <th>{{strings.amount[locale]}}</th>
+        </tr>
+        </thead>
+        <tbody>
+        {% for donation in donations[0].donations %}
+        <tr>
+            <td>{{donation.date}}</td>
+            {% if donation.via == 'opencollective' %}
+            <td><a href="https://opencollective.com/sp-codes" rel="nofollow">Open Collective</a></td>
+            {% else %}
+            <td>{{strings[donation.via][locale]}}</td>
+            {% endif %}
+            {% if donation.from %}
+            <td>{{donation.from}}</td>
+            {% else %}
+            <td>***</td>
+            {% endif %}
+            <td>{{donation.amount | amount}} €</td>
+        </tr>
+        {% endfor %}
+        </tbody>
+        <tfoot>
+        <tr>
+            <th colspan="3">{{strings.total[locale]}}</th>
+            <th>{{donations[0].donations | sum | amount}} €</th>
+        </tr>
+        </tfoot>
+    </table>
+</div>

src/_includes/donations.html

@@ -0,0 +1,40 @@
+{% for year in donations %}
+<h2>{{year.year}}</h2>
+
+<div class="table-container">
+    <table class="table">
+        <thead>
+        <tr>
+            <th>{{strings.date[locale]}}</th>
+            <th>{{strings.via[locale]}}</th>
+            <th>{{strings.from[locale]}}</th>
+            <th>{{strings.amount[locale]}}</th>
+        </tr>
+        </thead>
+        <tbody>
+        {% for donation in year.donations %}
+        <tr>
+            <td>{{donation.date}}</td>
+            {% if donation.via == 'opencollective' %}
+            <td><a href="https://opencollective.com/sp-codes" rel="nofollow">Open Collective</a></td>
+            {% else %}
+            <td>{{strings[donation.via][locale]}}</td>
+            {% endif %}
+            {% if donation.from %}
+            <td>{{donation.from}}</td>
+            {% else %}
+            <td>***</td>
+            {% endif %}
+            <td>{{donation.amount | amount}} €</td>
+        </tr>
+        {% endfor %}
+        </tbody>
+        <tfoot>
+        <tr>
+            <th colspan="3">{{strings.total[locale]}}</th>
+            <th>{{year.donations | sum | amount}} €</th>
+        </tr>
+        </tfoot>
+    </table>
+</div>
+{% endfor %}

src/_includes/expenses-current.html

@@ -0,0 +1,35 @@
+<div class="table-container">
+    <table class="table">
+        <thead>
+        <tr>
+            <th>{{strings.name[locale]}}</th>
+            <th>{{strings.type[locale]}}</th>
+            <th>{{strings.provider[locale]}}</th>
+            <th>{{strings.amount[locale]}} / {{strings.month[locale]}}</th>
+            <th>{{strings.amount[locale]}} / {{strings.year[locale]}}</th>
+        </tr>
+        </thead>
+        <tbody>
+        {% for expense in expenses %}
+        <tr>
+            {% if expense.name[locale] %}
+            <td>{{expense.name[locale]}}</td>
+            {% else %}
+            <td>{{expense.name}}</td>
+            {% endif %}
+            <td>{{expense.type}}</td>
+            <td>{{expense.provider}}</td>
+            <td>{{expense.amount | amount}} €</td>
+            <td>{{expense.amount | year | amount}} €</td>
+        </tr>
+        {% endfor %}
+        </tbody>
+        <tfoot>
+        <tr>
+            <th colspan="3">{{strings.total[locale]}}</th>
+            <th>{{expenses | sum | amount}} €</th>
+            <th>{{expenses | sum | year | amount}} €</th>
+        </tr>
+        </tfoot>
+    </table>
+</div>

src/_includes/layouts/base.njk

@@ -40,7 +40,7 @@ title: sp-codes
 <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>
+        <label for="menu" class="m-0"><span class="si si-bars mr-1"></span>{{ strings.menu[locale] }}</label>
 
         <div class="flex-grow-1"></div>
 
@@ -59,7 +59,7 @@ title: sp-codes
         {% 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 }}
+                {% if entry.icon %}<span class="{{ entry.icon }} mr-1"></span>{% endif %}{{ entry.title }}
             </a>
         </div>
         {% endif %}

src/_includes/layouts/services.njk

@@ -6,5 +6,5 @@ layout: base.njk
 {{ content | safe }}
 
 <div class="row justify-content-center">
-  {% include 'services-extended.html' %}
+  {% include "services-extended.html" %}
 </div>

src/_includes/licenses.html

@@ -0,0 +1,8 @@
+<ul>
+    <li><a href="https://simpleicons.org/">Simple Icons</a> (<a href="https://github.com/simple-icons/simple-icons/blob/develop/LICENSE.md">CC0</a>)</li>
+    <li><a href="https://fontawesome.com/">Font Awesome</a> (<a href="https://github.com/FortAwesome/Font-Awesome/blob/master/LICENSE.txt">CC BY 4.0 / SIL OFL 1.1 / MIT</a>)</li>
+    <li><a href="https://flagicons.lipis.dev/">flag-icon-css</a> (<a href="https://github.com/lipis/flag-icon-css/blob/master/LICENSE">MIT</a>)</li>
+    <li><a href="https://getbootstrap.com/">Bootstrap</a> (<a href="https://github.com/twbs/bootstrap/blob/main/LICENSE">MIT</a>)</li>
+    <li><a href="https://www.11ty.dev/">11ty</a> (<a href="https://github.com/11ty/eleventy/blob/master/LICENSE">MIT</a>)</li>
+    <li><a href="https://github.com/sass/node-sass">node-sass</a> (<a href="https://github.com/sass/node-sass/blob/master/LICENSE">MIT</a>)</li>
+</ul>

src/_includes/profiles.html

@@ -1,18 +1,28 @@
 <div class="d-flex justify-content-center flex-wrap my-3 contact-links">
-    <div class="m-2"><a href="mailto:mail@sp-codes.de"><span
+    <div class="m-2"><a href="mailto:mail@sp-codes.de">
-            class="fas fa-fw fa-4x fa-envelope"></span></a></div>
+        <span class="d-none d-md-block si si-envelope si-4x"></span>
+        <span class="d-block d-md-none si si-envelope si-2x"></span>
+    </a></div>
     <div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
-        <span class="si si-matrix"></span>
+        <span class="d-none d-md-block si si-matrix si-4x"></span>
+        <span class="d-block d-md-none si si-matrix si-2x"></span>
+    </a></div>
+    <div class="m-2"><a rel="me" href="https://social.sp-codes.de/@samuel_p">
+        <span class="d-none d-md-block si si-mastodon si-4x"></span>
+        <span class="d-block d-md-none si si-mastodon si-2x"></span>
+    </a></div>
+    <div class="m-2"><a href="https://stackoverflow.com/users/9662601/samuel-p">
+        <span class="d-none d-md-block si si-stackoverflow si-4x"></span>
+        <span class="d-block d-md-none si si-stackoverflow si-2x"></span>
     </a></div>
-    <div class="m-2"><a rel="me" href="https://social.sp-codes.de/@samuel_p"><span
-            class="fab fa-fw fa-4x fa-mastodon"></span></a></div>
-    <div class="m-2"><a href="https://stackoverflow.com/users/9662601/samuel-p"><span
-            class="fab fa-fw fa-4x fa-stack-overflow"></span></a></div>
     <div class="m-2"><a href="https://git.sp-codes.de/samuel-p">
-        <span class="si si-gitea"></span>
+        <span class="d-none d-md-block si si-gitea si-4x"></span>
+        <span class="d-block d-md-none si si-gitea si-2x"></span>
+    </a></div>
+    <div class="m-2"><a href="https://github.com/samuel-p">
+        <span class="d-none d-md-block si si-github si-4x"></span>
+        <span class="d-block d-md-none si si-github si-2x"></span>
     </a></div>
-    <div class="m-2"><a href="https://github.com/samuel-p"><span
-            class="fab fa-fw fa-4x fa-github"></span></a></div>
 </div>
 <div class="d-flex justify-content-center mb-3">
     <div class="lead text-center">

src/_includes/services-extended.html

@@ -6,7 +6,7 @@
         <div class="beta">TEST-PHASE</div>
         {% endif %}
         <div class="inner">
-            <i class="{{service.icon}} fa-4x"></i>
+            <i class="{{service.icon}} si-4x"></i>
             <h2 class="mt-2 mb-1">{{service.name}}{% if service.url %} <a href="{{service.url}}" target="_blank"><i
                     class="fas fa-external-link-alt"></i></a>{% endif %}</h2>
             {% if service.status %}

src/_includes/services-simple.html

@@ -6,7 +6,7 @@
             {% if service.beta == true %}
             <div class="beta">TEST-PHASE</div>
             {% endif %}
-            <i class="{{service.icon}} fa-fw fa-2x"></i>
+            <i class="{{service.icon}} si-2x"></i>
             <h2 class="mt-2">{{service.name}}{% if service.url %} <a href="{{service.url}}" target="_blank"><i
                     class="fas fa-external-link-alt"></i></a>{% endif %}</h2>
         </div>

src/de/all-donations.html

@@ -0,0 +1,10 @@
+---
+layout: base.njk
+key: all-donations
+title: Unterstützen
+---
+<h1><i class="si si-hand-holding-heart"></i> Alle Spenden</h1>
+
+<p><a href="/{{locale}}/donate/">&#10132; Unterstützen</a></p>
+
+{% include donations.html %}

src/de/blog.md

@@ -3,7 +3,7 @@ key: blog
 eleventyNavigation:
   key: blog
   title: Blog
-  icon: book
+  icon: si si-book
   url: https://blog.sp-codes.de/
   locale: de
   order: 1

src/de/contact.html

@@ -5,38 +5,38 @@ title: Kontakt
 eleventyNavigation:
   key: contact
   title: Kontakt
-  icon: comment-dots
+  icon: si si-comment-dots
   order: 3
 ---
-<h1><i class="fas fa-comment-dots"></i> Kontaktmöglichkeiten</h1>
+<h1><i class="si si-comment-dots"></i> Kontaktmöglichkeiten</h1>
 <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-foreground"></span></div>
+            <div class="pr-3"><span class="si si-envelope si-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="fab fa-fw fa-4x fa-mastodon text-foreground"></span></div>
+            <div class="pr-3"><span class="si si-mastodon si-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">
-            <div class="pr-3"><span class="si si-matrix"></span></div>
+            <div class="pr-3"><span class="si si-matrix si-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="si si-xmpp"></span></div>
+            <div class="pr-3"><span class="si si-xmpp si-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="si si-threema"></span></div>
+            <div class="pr-3"><span class="si si-threema si-4x"></span></div>
             <div>Schreibe mir auf Threema an die ID <strong>YSCU6F6U</strong></div>
         </a>
     </div>

src/de/donate.html

@@ -5,19 +5,19 @@ title: Unterstützen
 eleventyNavigation:
   key: donate
   title: Unterstützen
-  icon: hand-holding-heart
+  icon: si si-hand-holding-heart
   order: 4
 ---
-<h1><i class="fas fa-hand-holding-heart"></i> Unterstützen</h1>
+<h1><i class="si si-hand-holding-heart"></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 über die
     folgenden Wege unterstützen<sup>1</sup>:</p>
 
-<div class="row justify-content-center">
+<div class="row justify-content-center mb-5">
     <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>
+            <h2><i class="si si-comments fa-fw m-2"></i>Empfehlen</h2>
             <div>Gerne darfst du meine Dienste und meine Blog-Beiträge weiter empfehlen. Ich freue mich sehr, wenn ich
                 euch damit eine Freude machen kann.
             </div>
@@ -29,7 +29,7 @@ eleventyNavigation:
                 einen Dauerauftrag.
                 <div class="mt-3 text-center">
                     <img alt="Banküberweisung {{ strings.supporters[locale] }}"
-                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations.banktransfer.number }}-{{ donations.banktransfer.color }}">
+                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations | banktransfers }}-active">
                 </div>
             </div>
         </div>
@@ -39,12 +39,12 @@ eleventyNavigation:
                     href="/{{locale}}/imprint">Impressum</a> senden.
                 <div class="mt-3 text-center">
                     <img alt="Bargeld {{ strings.supporters[locale] }}"
-                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations.cash.number }}-{{ donations.cash.color }}">
+                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations | cash }}-inactive">
                 </div>
             </div>
         </div>
         <div class="card mb-3">
-            <h2><i class="si h2si si-opencollective m-2"></i>Open Collective</h2>
+            <h2><i class="si si-opencollective m-2"></i>Open Collective</h2>
             <div>Gerne kannst du mir auch über <a href="https://opencollective.com/sp-codes" target="_blank">Open
                 Collective</a> einen kleinen Betrag zukommen lassen. Wenn du willst, kannst du mich dort auch mit einer
                 regelmäßigen Spende unterstützen.
@@ -72,11 +72,13 @@ eleventyNavigation:
     </div>
 </div>
 
-<div class="mt-4">
+<h2>Aktuelle Ausgaben</h2>
-    <p>Eine aktuelle Liste aller eingegangenen Spenden pflege ich <a target="_blank"
+{% include expenses-current.html %}
-                                                                     href="https://git.sp-codes.de/sp-codes/expenses-donations/src/branch/master/donations.md">hier</a>.
+
-    </p>
+<h2>Spenden {{donations[0].year}}</h2>
-</div>
+{% include donations-current.html %}
+
+<p><a href="/{{locale}}/all-donations/">&#10132; Alle Spenden</a></p>
 
 <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,

src/de/imprint.html

@@ -25,3 +25,8 @@ title: Impressum
         <li><a href="https://sp-magic.de">sp-magic.de</a></li>
     </ul>
 </div>
+<div class="mb-3 pt-4 border-top">
+    <h2>Lizenzen</h2>
+    <p>Diese Webseite nutzt die folgenden Bibliotheken mit ihren entsprechenden Lizenzen:</p>
+    {% include licenses.html %}
+</div>

src/de/index.html

@@ -5,7 +5,7 @@ title: Home
 eleventyNavigation:
   key: home
   title: Home
-  icon: home
+  icon: si si-home
 ---
 <div class="row justify-content-center py-4 border-top">
     <div class="col-lg-8 col-md-10 col-12">

src/de/services.html

@@ -5,10 +5,10 @@ title: Dienste
 eleventyNavigation:
   key: services
   title: Dienste
-  icon: server
+  icon: si si-server
   order: 2
 ---
-<h1><i class="fas fa-server"></i> Dienste</h1>
+<h1><i class="si si-server"></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>

src/de/services/connectivitycheck.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: connectivitycheck
 title: Captive Portal Check
 ---
-# <i class="fas fa-wifi"></i> Captive Portal Check
+# <i class="si si-wifi"></i> Captive Portal Check
 
 Ein Captive Portal ist eine Anmeldeseite in öffentlichen WLAN-Netzwerken, um den Internet-Zugriff an die Zustimmung bestimmter Nutzungsregeln zu binden. Wenn du in einem öffentlichen Netzwerk eine Anmeldeseite angezeigt bekommst, nutzt dein Gerät dafür einen Captive Portal Check. Dieser ermöglicht es dem Gerät, herauszufinden, ob du einen direkten Internetzugang hast oder nicht. Unter Android wird hierfür beispielsweise eine Anfrage an einen Google-Server gestellt.
 

src/de/services/firefox-sync.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: firefox-sync
 title: Firefox Sync
 ---
-# <i class="fab fa-firefox-browser"></i> Firefox Sync
+# <i class="si si-firefox-browser"></i> Firefox Sync
 
 Nutzt du Firefox auf mehreren Geräten zum Surfen? Dann kannst du mit Firefox Sync deine Browserdaten (Lesezeichen, offene Tabs, die Suchhistorie, uvm.) zwischen all deinen Geräten synchronisieren.
 

src/de/services/gitea.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: gitea
 title: Gitea
 ---
-# <i class="fas fa-code"></i> Gitea
+# <i class="si si-gitea"></i> Gitea
 
 Gitea ist eine einfache Code-Hosting-Plattform wie GitHub oder GitLab. Sie ist opensource und wird kontinuierlich weiterentwickelt. __Seit Ende 2019 betreibe ich eine eigene Gitea Instanz, in der ich meine Projekte verwalte.__ So zum Beispiel auch diese Webseite. Schau dir gerne mal den Quelltext an und lass mir Feedback da.
 

src/de/services/invidious.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: invidious
 title: Invidious
 ---
-# <i class="fab fa-youtube"></i> Invidious
+# <i class="si si-youtube"></i> Invidious
 
 Invidious ist ein alternatives Frontend für YouTube. 
 Da nur die nötigsten Verbindungen zu YouTube aufgebaut werden und viele sogar vom Server selber übernommen werden, erhöht Invidious die Privatsphäre der Nutzer:innen.

src/de/services/jitsi.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: jitsi
 title: Jitsi Meet
 ---
-# <i class="fas fa-users"></i> Jitsi Meet
+# <i class="si si-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.
 

src/de/services/matrix.md

@@ -4,7 +4,7 @@ key: matrix
 title: Matrix
 ---
 
-# <i class="fas fa-comments"></i> Matrix
+# <i class="si si-comments"></i> Matrix
 
 [Matrix](https://matrix.org) ist eine moderne, quelloffene Software für dezentrale Kommunikation (wie E-Mail). Matrix
 bietet von Haus aus Sprach- und Videoanrufe, inklusive Ende-zu-Ende Verschlüsselung und vieles mehr. Das Entscheidende

src/de/services/nitter.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: nitter
 title: Nitter
 ---
-# <i class="fab fa-twitter"></i> Nitter
+# <i class="si si-twitter"></i> Nitter
 
 Eine freies und quelloffenes Twitter-Frontend, das auf Privatsphäre der Nutzer ausgerichtet ist. Die Verbindungen zu Twitter werden vom Server selber übernommen, um Tracking über IP oder JavaScript zu verhindern.
 

src/de/services/searx.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: searx
 title: Searx
 ---
-# <i class="fas fa-search"></i> Searx
+# <i class="si si-search"></i> Searx
 
 Searx ist eine freie Metasuchmaschine, das heißt sie nutzt für die Suche öffentliche Suchmaschinen, wie Google, DuckDuckGo, StartPage und viele andere. 
 

src/de/services/shields.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: shields
 title: Shields
 ---
-# <i class="fas fa-tags"></i> Shields
+# <i class="si si-tags"></i> Shields
 
 Shields ist ein Service für prägnante, konsistente und lesbare Badges im SVG- und Rasterformat. Über eine URL können sie sehr einfach in Readmes oder jede andere Webseite eingebunden werden. Außerdem werden Integrationen zu verschiedenen Diensten oder Netzwerken bereitgestellt.
 

src/en/all-donations.html

@@ -0,0 +1,10 @@
+---
+layout: base.njk
+key: all-donations
+title: Unterstützen
+---
+<h1><i class="si si-hand-holding-heart"></i> All Donations</h1>
+
+<p><a href="/{{locale}}/donate/">&#10132; Donate</a></p>
+
+{% include donations.html %}

src/en/blog.md

@@ -3,7 +3,7 @@ key: blog
 eleventyNavigation:
   key: blog
   title: Blog
-  icon: book
+  icon: si si-book
   url: https://blog.sp-codes.de/
   locale: en
   order: 1

src/en/contact.html

@@ -5,36 +5,36 @@ title: Contact
 eleventyNavigation:
   key: contact
   title: Contact
-  icon: comment-dots
+  icon: si si-comment-dots
   order: 3
 ---
-<h1><i class="fas fa-comment-dots"></i> Contact Information</h1>
+<h1><i class="si si-comment-dots"></i> Contact Information</h1>
 <p>You want to contact me, report a problem, have a question about a service or would like to support me? Please
     send me your message in any of the following ways. I am looking forward to receive your message.</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-foreground"></span></div>
+            <div class="pr-3"><span class="si si-envelope si-4x"></span></div>
             <div>Send me an email to <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="fab fa-fw fa-4x fa-mastodon text-foreground"></span></div>
+            <div class="pr-3"><span class="si si-mastodon si-4x"></span></div>
             <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">
-            <div class="pr-3"><span class="si si-matrix"></span></div>
+            <div class="pr-3"><span class="si si-matrix si-4x"></span></div>
             <div>Write me on Matrix to <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="si si-xmpp"></span></div>
+            <div class="pr-3"><span class="si si-xmpp si-4x"></span></div>
             <div>Write me on XMPP to <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="si si-threema"></span></div>
+            <div class="pr-3"><span class="si si-threema si-4x"></span></div>
             <div>Write me on Threema to the ID <strong>YSCU6F6U</strong></div>
         </a>
     </div>

src/en/donate.html

@@ -5,10 +5,10 @@ title: Donate
 eleventyNavigation:
   key: donate
   title: Donate
-  icon: hand-holding-heart
+  icon: si si-hand-holding-heart
   order: 4
 ---
-<h1><i class="fas fa-hand-holding-heart"></i> Donate</h1>
+<h1><i class="si si-hand-holding-heart"></i> Donate</h1>
 
 <p>All public services can be used for free. If you still want to contribute to the costs for server infrastructure or
     send me a small donation for my blog, you can support me in the following ways<sup>1</sup>:</p>
@@ -16,7 +16,7 @@ eleventyNavigation:
 <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>Recommend</h2>
+            <h2><i class="si si-comments m-2"></i>Recommend</h2>
             <div>You are welcome to recommend my services and my blog posts. I am very glad if I can make you happy with
                 it.
             </div>
@@ -27,7 +27,7 @@ eleventyNavigation:
                 will then send you my bank details as soon as possible. I am especially happy about a standing order.
                 <div class="mt-3 text-center">
                     <img alt="Bank transfer {{ strings.supporters[locale] }}"
-                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations.banktransfer.number }}-{{ donations.banktransfer.color }}">
+                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations | banktransfers }}-active">
                 </div>
             </div>
         </div>
@@ -37,12 +37,12 @@ eleventyNavigation:
                     href="/en/imprint">imprint</a>.
                 <div class="mt-3 text-center">
                     <img alt="Cash {{ strings.supporters[locale] }}"
-                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations.cash.number }}-{{ donations.cash.color }}">
+                         src="https://shields.sp-codes.de/badge/{{ strings.supporters[locale] }}-{{ donations | cash }}-inactive">
                 </div>
             </div>
         </div>
         <div class="card mb-3">
-            <h2><i class="si h2si si-opencollective m-2"></i>Open Collective</h2>
+            <h2><i class="si si-opencollective m-2"></i>Open Collective</h2>
             <div>You are also welcome to send me a small amount via <a href="https://opencollective.com/sp-codes"
                                                                        target="_blank">Open Collective</a>. If you like
                 you can also support me with a regular donation.
@@ -70,9 +70,13 @@ eleventyNavigation:
     </div>
 </div>
 
-<div class="mt-4">
+<h2>Current Expenses</h2>
-    <p>I maintain a list of all received donations <a target="_blank" href="https://git.sp-codes.de/sp-codes/expenses-donations/src/branch/master/donations.md">here</a>.</p>
+{% include expenses-current.html %}
-</div>
+
+<h2>Donations {{donations[0].year}}</h2>
+{% include donations-current.html %}
+
+<p><a href="/{{locale}}/all-donations/">&#10132; All Donations</a></p>
 
 <div class="border-top mt-5 pt-2">
     <p><small><sup>1</sup> The payments made are donations in terms of § 516 BGB, not tax-deductible donations in terms

src/en/imprint.html

@@ -25,3 +25,8 @@ title: sp-codes
         <li><a href="https://sp-magic.de">sp-magic.de</a></li>
     </ul>
 </div>
+<div class="mb-3 pt-4 border-top">
+    <h2>Licenses</h2>
+    <p>This Website uses the following libraries with their respective licenses:</p>
+    {% include licenses.html %}
+</div>

src/en/index.html

@@ -5,7 +5,7 @@ title: Home
 eleventyNavigation:
   key: home
   title: Home
-  icon: home
+  icon: si si-home
 ---
 <div class="row justify-content-center py-4 border-top">
     <div class="col-lg-8 col-md-10 col-12">

src/en/services.html

@@ -5,10 +5,10 @@ title: Services
 eleventyNavigation:
   key: services
   title: Services
-  icon: server
+  icon: si si-server
   order: 2
 ---
-<h1><i class="fas fa-server"></i> Services</h1>
+<h1><i class="si si-server"></i> Services</h1>
 <p>In my spare time I provide various open source services for free. Here you can find an overview of the individual
     services and a short description for each of them. All services are hosted in Germany. Feel free to use it.</p>
 

src/en/services/connectivitycheck.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: connectivitycheck
 title: Captive Portal Check
 ---
-# <i class="fas fa-wifi"></i> Captive Portal Check
+# <i class="si si-wifi"></i> Captive Portal Check
 
 A captive portal is a login page in public WLAN networks to restrict Internet access to the approval of certain terms of use. When you see a login page on a public network, your device uses a captive portal check. This allows the device to find out whether you have direct Internet access or not. In Android, for example, your device sends a request to a Google server.
 

src/en/services/firefox-sync.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: firefox-sync
 title: Firefox Sync
 ---
-# <i class="fab fa-firefox-browser"></i> Firefox Sync
+# <i class="si si-firefox-browser"></i> Firefox Sync
 
 Do you use Firefox on more than one device for surfing? Then Firefox Sync lets you synchronize your browser data (bookmarks, open tabs, search history, and more) between all your devices.
 

src/en/services/gitea.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: gitea
 title: Gitea
 ---
-# <i class="fas fa-code"></i> Gitea
+# <i class="si si-gitea"></i> Gitea
 
 Gitea is a simple code hosting platform like GitHub or GitLab. It is open source and under continuous development. __Since the end of 2019 I have my own Gitea instance, to manage my projects.__ For example this website. Feel free to have a look at the source code and leave some feedback.
 

src/en/services/invidious.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: invidious
 title: Invidious
 ---
-# <i class="fab fa-youtube"></i> Invidious
+# <i class="si si-youtube"></i> Invidious
 
 Invidious is an alternative YouTube-Frontend. It establishes only the most necessary connections to YouTube and many of them are even made by the server itself. So Invidious increases the privacy of the users.
 

src/en/services/jitsi.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: jitsi
 title: Jitsi Meet
 ---
-# <i class="fas fa-users"></i> Jitsi Meet
+# <i class="si si-users"></i> Jitsi Meet
 
 Jitsi-Meet is a platform for video conferences. You can start fully encrypted video chats without registration. Additionally, Jitsi-Meet offers the possibility to share the screen with other participants, invite new users with a simple link and send messages in the integrated chat.
 

src/en/services/matrix.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: matrix
 title: Matrix
 ---
-# <i class="fas fa-comments"></i> Matrix
+# <i class="si si-comments"></i> Matrix
 
 Matrix is a modern, open source software for decentralized communication (like e-mail). Matrix offers end-to-end encryption, voice and video calls and much more. However, the most important thing is that there is not one Matrix server that all users have to use, like WhatsApp, Telegram and many other popular messengers.
 

src/en/services/nitter.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: nitter
 title: Nitter
 ---
-# <i class="fab fa-twitter"></i> Nitter
+# <i class="si si-twitter"></i> Nitter
 
 A free and open source Twitter frontend that is focussed on user privacy. Connections to Twitter are handled by the server itself to prevent tracking by IP or JavaScript.
 

src/en/services/searx.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: searx
 title: Searx
 ---
-# <i class="fas fa-search"></i> Searx
+# <i class="si si-search"></i> Searx
 
 Searx is a free meta search engine, which uses other public search engines like Google, DuckDuckGo, StartPage and many others.
 

src/en/services/shields.md

@@ -3,7 +3,7 @@ layout: base.njk
 key: shields
 title: Shields
 ---
-# <i class="fas fa-tags"></i> Shields
+# <i class="si si-tags"></i> Shields
 
 Shields is a service for concise, consistent and legible badges in SVG and raster format. Via a URL they can be easily embedded in readmes or any other website. In addition, integrations to various services or networks are provided.
 

src/img/gitea.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000"><title>Gitea icon</title><path d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z"/></svg>

src/img/icon/bars.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#fff"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>

src/img/icon/book.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="#fff"><path d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"/></svg>

src/img/icon/comment-dots.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#fff"><path d="M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32zM128 272c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 0c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"></path></svg>

src/img/icon/comments.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="#fff"><path d="M416 192c0-88.4-93.1-160-208-160S0 103.6 0 192c0 34.3 14.1 65.9 38 92-13.4 30.2-35.5 54.2-35.8 54.5-2.2 2.3-2.8 5.7-1.5 8.7S4.8 352 8 352c36.6 0 66.9-12.3 88.7-25 32.2 15.7 70.3 25 111.3 25 114.9 0 208-71.6 208-160zm122 220c23.9-26 38-57.7 38-92 0-66.9-53.5-124.2-129.3-148.1.9 6.6 1.3 13.3 1.3 20.1 0 105.9-107.7 192-240 192-10.8 0-21.3-.8-31.7-1.9C207.8 439.6 281.8 480 368 480c41 0 79.1-9.2 111.3-25 21.8 12.7 52.1 25 88.7 25 3.2 0 6.1-1.9 7.3-4.8 1.3-2.9.7-6.3-1.5-8.7-.3-.3-22.4-24.2-35.8-54.5z"></path></svg>

src/img/icon/envelope.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#fff"><path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg>

src/img/icon/firefox-browser.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><title>Firefox Browser</title><path d="M8.824 7.287c.008 0 .004 0 0 0zm-2.8-1.4c.006 0 .003 0 0 0zm16.754 2.161c-.505-1.215-1.53-2.528-2.333-2.943.654 1.283 1.033 2.57 1.177 3.53l.002.02c-1.314-3.278-3.544-4.6-5.366-7.477-.091-.147-.184-.292-.273-.446a3.545 3.545 0 01-.13-.24 2.118 2.118 0 01-.172-.46.03.03 0 00-.027-.03.038.038 0 00-.021 0l-.006.001a.037.037 0 00-.01.005L15.624 0c-2.585 1.515-3.657 4.168-3.932 5.856a6.197 6.197 0 00-2.305.587.297.297 0 00-.147.37c.057.162.24.24.396.17a5.622 5.622 0 012.008-.523l.067-.005a5.847 5.847 0 011.957.222l.095.03a5.816 5.816 0 01.616.228c.08.036.16.073.238.112l.107.055a5.835 5.835 0 01.368.211 5.953 5.953 0 012.034 2.104c-.62-.437-1.733-.868-2.803-.681 4.183 2.09 3.06 9.292-2.737 9.02a5.164 5.164 0 01-1.513-.292 4.42 4.42 0 01-.538-.232c-1.42-.735-2.593-2.121-2.74-3.806 0 0 .537-2 3.845-2 .357 0 1.38-.998 1.398-1.287-.005-.095-2.029-.9-2.817-1.677-.422-.416-.622-.616-.8-.767a3.47 3.47 0 00-.301-.227 5.388 5.388 0 01-.032-2.842c-1.195.544-2.124 1.403-2.8 2.163h-.006c-.46-.584-.428-2.51-.402-2.913-.006-.025-.343.176-.389.206-.406.29-.787.616-1.136.974-.397.403-.76.839-1.085 1.303a9.816 9.816 0 00-1.562 3.52c-.003.013-.11.487-.19 1.073-.013.09-.026.181-.037.272a7.8 7.8 0 00-.069.667l-.002.034-.023.387-.001.06C.386 18.795 5.593 24 12.016 24c5.752 0 10.527-4.176 11.463-9.661.02-.149.035-.298.052-.448.232-1.994-.025-4.09-.753-5.844z"/></svg>

src/img/icon/github.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

src/img/icon/hand-holding-heart.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="#fff"><path d="M275.3 250.5c7 7.4 18.4 7.4 25.5 0l108.9-114.2c31.6-33.2 29.8-88.2-5.6-118.8-30.8-26.7-76.7-21.9-104.9 7.7L288 36.9l-11.1-11.6C248.7-4.4 202.8-9.2 172 17.5c-35.3 30.6-37.2 85.6-5.6 118.8l108.9 114.2zm290 77.6c-11.8-10.7-30.2-10-42.6 0L430.3 402c-11.3 9.1-25.4 14-40 14H272c-8.8 0-16-7.2-16-16s7.2-16 16-16h78.3c15.9 0 30.7-10.9 33.3-26.6 3.3-20-12.1-37.4-31.6-37.4H192c-27 0-53.1 9.3-74.1 26.3L71.4 384H16c-8.8 0-16 7.2-16 16v96c0 8.8 7.2 16 16 16h356.8c14.5 0 28.6-4.9 40-14L564 377c15.2-12.1 16.4-35.3 1.3-48.9z"></path></svg>

src/img/icon/home.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="#fff"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"></path></svg>

src/img/icon/language.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="#fff"><path d="M152.1 236.2c-3.5-12.1-7.8-33.2-7.8-33.2h-.5s-4.3 21.1-7.8 33.2l-11.1 37.5H163zM616 96H336v320h280c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24zm-24 120c0 6.6-5.4 12-12 12h-11.4c-6.9 23.6-21.7 47.4-42.7 69.9 8.4 6.4 17.1 12.5 26.1 18 5.5 3.4 7.3 10.5 4.1 16.2l-7.9 13.9c-3.4 5.9-10.9 7.8-16.7 4.3-12.6-7.8-24.5-16.1-35.4-24.9-10.9 8.7-22.7 17.1-35.4 24.9-5.8 3.5-13.3 1.6-16.7-4.3l-7.9-13.9c-3.2-5.6-1.4-12.8 4.2-16.2 9.3-5.7 18-11.7 26.1-18-7.9-8.4-14.9-17-21-25.7-4-5.7-2.2-13.6 3.7-17.1l6.5-3.9 7.3-4.3c5.4-3.2 12.4-1.7 16 3.4 5 7 10.8 14 17.4 20.9 13.5-14.2 23.8-28.9 30-43.2H412c-6.6 0-12-5.4-12-12v-16c0-6.6 5.4-12 12-12h64v-16c0-6.6 5.4-12 12-12h16c6.6 0 12 5.4 12 12v16h64c6.6 0 12 5.4 12 12zM0 120v272c0 13.3 10.7 24 24 24h280V96H24c-13.3 0-24 10.7-24 24zm58.9 216.1L116.4 167c1.7-4.9 6.2-8.1 11.4-8.1h32.5c5.1 0 9.7 3.3 11.4 8.1l57.5 169.1c2.6 7.8-3.1 15.9-11.4 15.9h-22.9a12 12 0 0 1-11.5-8.6l-9.4-31.9h-60.2l-9.1 31.8c-1.5 5.1-6.2 8.7-11.5 8.7H70.3c-8.2 0-14-8.1-11.4-15.9z"></path></svg>

src/img/icon/mastodon.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><title>Mastodon</title><path d="M23.193 7.88c0-5.207-3.411-6.733-3.411-6.733C18.062.357 15.108.025 12.041 0h-.076c-3.069.025-6.02.357-7.74 1.147 0 0-3.412 1.526-3.412 6.732 0 1.193-.023 2.619.015 4.13.124 5.092.934 10.11 5.641 11.355 2.17.574 4.034.695 5.536.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.13.54c-2.165-.075-4.449-.234-4.799-2.892a5.5 5.5 0 0 1-.048-.745s2.125.52 4.818.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.508.475-6.508zm-4.024 6.709h-2.497v-6.12c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.313v3.349h-2.484v-3.35c0-1.537-.602-2.313-1.802-2.313-1.085 0-1.628.655-1.628 1.945v6.119H4.831V8.285c0-1.29.328-2.314.987-3.07.68-.759 1.57-1.147 2.674-1.147 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.305z"/></svg>

src/img/icon/search.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#fff"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg>

src/img/icon/server.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="#fff"><path d="M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"></path></svg>

src/img/icon/stackoverflow.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><title>Stack Overflow</title><path d="M15.725 0l-1.72 1.277 6.39 8.588 1.716-1.277L15.725 0zm-3.94 3.418l-1.369 1.644 8.225 6.85 1.369-1.644-8.225-6.85zm-3.15 4.465l-.905 1.94 9.702 4.517.904-1.94-9.701-4.517zm-1.85 4.86l-.44 2.093 10.473 2.201.44-2.092-10.473-2.203zM1.89 15.47V24h19.19v-8.53h-2.133v6.397H4.021v-6.396H1.89zm4.265 2.133v2.13h10.66v-2.13H6.154Z"/></svg>

src/img/icon/tags.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="#fff"><path d="M497.941 225.941L286.059 14.059A48 48 0 0 0 252.118 0H48C21.49 0 0 21.49 0 48v204.118a48 48 0 0 0 14.059 33.941l211.882 211.882c18.744 18.745 49.136 18.746 67.882 0l204.118-204.118c18.745-18.745 18.745-49.137 0-67.882zM112 160c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm513.941 133.823L421.823 497.941c-18.745 18.745-49.137 18.745-67.882 0l-.36-.36L527.64 323.522c16.999-16.999 26.36-39.6 26.36-63.64s-9.362-46.641-26.36-63.64L331.397 0h48.721a48 48 0 0 1 33.941 14.059l211.882 211.882c18.745 18.745 18.745 49.137 0 67.882z"></path></svg>

src/img/icon/twitter.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><title>Twitter</title><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>

src/img/icon/users.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="#fff"><path d="M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z"></path></svg>

src/img/icon/wifi.svg

@@ -0,0 +1 @@
+<svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" fill="#fff"><path d="M634.91 154.88C457.74-8.99 182.19-8.93 5.09 154.88c-6.66 6.16-6.79 16.59-.35 22.98l34.24 33.97c6.14 6.1 16.02 6.23 22.4.38 145.92-133.68 371.3-133.71 517.25 0 6.38 5.85 16.26 5.71 22.4-.38l34.24-33.97c6.43-6.39 6.3-16.82-.36-22.98zM320 352c-35.35 0-64 28.65-64 64s28.65 64 64 64 64-28.65 64-64-28.65-64-64-64zm202.67-83.59c-115.26-101.93-290.21-101.82-405.34 0-6.9 6.1-7.12 16.69-.57 23.15l34.44 33.99c6 5.92 15.66 6.32 22.05.8 83.95-72.57 209.74-72.41 293.49 0 6.39 5.52 16.05 5.13 22.05-.8l34.44-33.99c6.56-6.46 6.33-17.06-.56-23.15z"></path></svg>

src/img/icon/youtube.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><title>YouTube</title><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>

src/img/matrix.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000"><title>Matrix icon</title><path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 0 0-.18-.66 1.106 1.106 0 0 0-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 0 0-.48.499 1.946 1.946 0 0 0-.231.696 5.56 5.56 0 0 0-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 0 0-.143-.688 1.052 1.052 0 0 0-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.337-.439.595-.12.259-.18.6-.18 1.02v4.966H5.46V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/></svg>

src/img/opencollective.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000"><title>Open Collective icon</title><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12c2.54 0 4.894-.79 6.834-2.135l-3.107-3.109a7.715 7.715 0 1 1 0-13.512l3.107-3.109A11.943 11.943 0 0 0 12 0zm9.865 5.166l-3.109 3.107A7.67 7.67 0 0 1 19.715 12a7.682 7.682 0 0 1-.959 3.727l3.109 3.107A11.943 11.943 0 0 0 24 12c0-2.54-.79-4.894-2.135-6.834z"/></svg>

src/img/threema.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000"><title>Threema icon</title><path d="M11.998 20.486a1.757 1.757 0 1 1 0 3.514 1.757 1.757 0 0 1 0-3.514zm-6.335 0a1.757 1.757 0 1 1 0 3.514 1.757 1.757 0 0 1 0-3.514zm12.671 0a1.757 1.757 0 1 1 0 3.514 1.757 1.757 0 0 1 0-3.514zM12 0c5.7 0 10.322 4.066 10.322 9.082 0 5.016-4.622 9.083-10.322 9.083a11.45 11.45 0 0 1-4.523-.917l-5.171 1.293 1.105-4.42c-1.094-1.442-1.733-3.175-1.733-5.039C1.678 4.066 6.3 0 12 0zm-.001 4.235A2.926 2.926 0 0 0 9.072 7.16v1.17h-.115a.47.47 0 0 0-.47.47v4.126c0 .26.21.471.47.471h6.086c.26 0 .47-.21.47-.47V8.798a.47.47 0 0 0-.47-.47h-.115v-1.17a2.927 2.927 0 0 0-2.93-2.924zm0 1.17c.972 0 1.758.786 1.758 1.754v1.17h-3.514v-1.17c0-.968.786-1.754 1.756-1.754z"/></svg>

src/img/xmpp.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000"><title>XMPP icon</title><path d="M24 3.186l-3.217 1.248-.976.325-3.122.925c.014.18.014.361.014.555 0 3.422-1.744 7.59-4.63 10.573-2.805-2.972-4.49-7.066-4.49-10.434 0-.194 0-.375.014-.555l-3.11-.921v-.009l-.861-.306L0 3.172c.146 5.747 4.867 11.701 10.542 15.02-1.3 1.014-2.766 1.788-4.365 2.192v.319c.434-.054.852-.14 1.271-.225.15-.027.3-.048.451-.08l.047-.012c1.36-.29 2.722-.776 4.052-1.408.397.195.797.38 1.2.548.109.05.22.095.33.142.201.086.407.159.612.236 1.25.474 2.568.809 3.96.924v-.305c-1.68-.425-3.211-1.264-4.56-2.355C19.194 14.904 23.853 8.975 24 3.186z"/></svg>

src/scss/icons.scss

@@ -1,37 +1,55 @@
 .si, .si::before {
   display: inline-block;
-  margin: 0 8px;
+  width: 1.25em;
-  width: 4em;
-  height: 4em;
   line-height: 1;
   box-sizing: border-box;
 }
 
-@media (max-width: 767.98px) {
+.si-2x {
-  .si, .si::before {
+  font-size: 2em;
-    margin: 0 4px;
-    width: 2em;
-    height: 2em;
-  }
 }
 
-.h2si, .h2si::before {
+.si-3x {
-  margin: 0;
+  font-size: 3em;
-  width: 30px;
+}
-  height: 24px;
+
+.si-4x {
+  font-size: 4em;
+}
+
+.si::before {
+  content: '\200b';
+  background-repeat: no-repeat;
+  background-position: center;
 }
 
 @mixin svg-icon($name) {
   .si-#{$name}::before {
-    content: '\200b';
+    background-image: url("../img/icon/#{$name}.svg");
-    background-image: url("../img/#{$name}-white.svg");
-    background-repeat: no-repeat;
-    background-position: center;
   }
 }
 
-@include svg-icon('matrix');
+@include svg-icon('bars');
+@include svg-icon('book');
+@include svg-icon('comment-dots');
+@include svg-icon('comments');
+@include svg-icon('envelope');
+@include svg-icon('firefox-browser');
 @include svg-icon('gitea');
-@include svg-icon('xmpp');
+@include svg-icon('github');
-@include svg-icon('threema');
+@include svg-icon('hand-holding-heart');
+@include svg-icon('home');
+@include svg-icon('language');
+@include svg-icon('mastodon');
+@include svg-icon('matrix');
 @include svg-icon('opencollective');
+@include svg-icon('search');
+@include svg-icon('stackoverflow');
+@include svg-icon('server');
+@include svg-icon('tags');
+@include svg-icon('threema');
+@include svg-icon('twitter');
+@include svg-icon('users');
+@include svg-icon('wifi');
+@include svg-icon('xmpp');
+@include svg-icon('youtube');

src/scss/main.scss

@@ -228,12 +228,6 @@ a {
   }
 
   &.flat {
-    color: $primary !important;
-
-    &:hover {
-      color: $primary_dark !important;
-    }
-
     .inner {
       flex-direction: row;
       text-decoration: none;
@@ -241,10 +235,6 @@ a {
       h2 {
         margin-left: 0.5rem;
       }
-
-      a {
-        color: #fff;
-      }
     }
   }
 }
@@ -278,7 +268,23 @@ pre {
     max-width: 96px;
     max-height: 96px;
   }
-  .fa-4x {
+}
-    font-size: 2em;
+
+.table-container {
+  overflow-y: auto;
+}
+
+table.table {
+  width: 100%;
+  margin-bottom: 16px;
+  background-color: #111;
+
+  tr:nth-child(2n) {
+    background-color: #ffffff0b;
+  }
+
+  td, th {
+    padding: 6px 13px;
+    border: 1px solid #444;
   }
 }