Browse Source

major improvements

added expenses and donations
replaced some icons with svgs
pull/67/head
Samuel Philipp 12 months ago
parent
commit
a5aa3cc014
Signed by: samuel-p
GPG Key ID: 2AD495D17760CB4E
  1. 36
      .eleventy.js
  2. 74
      src/_data/donations.json
  3. 50
      src/_data/expenses.json
  4. 8
      src/_data/services.json
  5. 44
      src/_data/strings.json
  6. 34
      src/_includes/donations-current.html
  7. 38
      src/_includes/donations.html
  8. 33
      src/_includes/expenses-current.html
  9. 2
      src/_includes/layouts/services.njk
  10. 30
      src/_includes/profiles.html
  11. 4
      src/_includes/services-extended.html
  12. 4
      src/_includes/services-simple.html
  13. 10
      src/de/all-donations.html
  14. 8
      src/de/contact.html
  15. 20
      src/de/donate.html
  16. 4
      src/de/index.html
  17. 2
      src/de/services/gitea.md
  18. 2
      src/de/services/jitsi.md
  19. 2
      src/de/services/matrix.md
  20. 10
      src/en/all-donations.html
  21. 8
      src/en/contact.html
  22. 16
      src/en/donate.html
  23. 4
      src/en/index.html
  24. 2
      src/en/services/gitea.md
  25. 2
      src/en/services/jitsi.md
  26. 2
      src/en/services/matrix.md
  27. BIN
      src/img/bg-light.png
  28. 1
      src/img/gitea.svg
  29. 0
      src/img/icon/gitea.svg
  30. 1
      src/img/icon/jitsi.svg
  31. 1
      src/img/icon/mastodon.svg
  32. 0
      src/img/icon/matrix.svg
  33. 0
      src/img/icon/opencollective.svg
  34. 0
      src/img/icon/threema.svg
  35. 0
      src/img/icon/xmpp.svg
  36. 1
      src/img/matrix.svg
  37. 1
      src/img/opencollective.svg
  38. 1
      src/img/threema.svg
  39. 1
      src/img/xmpp.svg
  40. 41
      src/scss/icons.scss
  41. 26
      src/scss/main.scss

36
.eleventy.js

@ -1,6 +1,10 @@
const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
module.exports = function(eleventyConfig) {
module.exports = function (eleventyConfig) {
eleventyConfig.setLiquidOptions({
dynamicPartials: true,
// strict_filters: true,
});
eleventyConfig.addWatchTarget("./src/scss/");
eleventyConfig.addPlugin(eleventyNavigationPlugin);
@ -11,10 +15,38 @@ 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, locale) {
return value.toLocaleString(locale, {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",

74
src/_data/donations.json

@ -1,10 +1,68 @@
{
"banktransfer": {
"number": 5,
"color": "success"
[
{
"year": 2021,
"donations": [
{
"date": "01.06.2021",
"amount": 20,
"via": "banktransfer",
"from": "Rumo",
"first": true
},
{
"date": "26.04.2021",
"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
}
]
},
"cash": {
"number": 0,
"color": "inactive"
{
"year": 2020,
"donations": [
{
"date": "04.12.2020",
"amount": 10,
"via": "banktransfer",
"from": null,
"first": true
}
]
}
}
]

50
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
}
]

8
src/_data/services.json

@ -13,7 +13,7 @@
{
"id": "matrix",
"name": "Matrix",
"icon": "fas fa-comments",
"si": "matrix",
"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",
"si": "jitsi",
"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",
"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",
"si": "gitea",
"url": "https://git.sp-codes.de",
"status": "https://git.sp-codes.de",
"summary": {

44
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"
}
}

34
src/_includes/donations-current.html

@ -0,0 +1,34 @@
<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(locale)}} €</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th colspan="3">{{strings.total[locale]}}</th>
<th>{{donations[0].donations | sum | amount(locale)}} €</th>
</tr>
</tfoot>
</table>

38
src/_includes/donations.html

@ -0,0 +1,38 @@
{% for year in donations %}
<h2>{{year.year}}</h2>
<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(locale)}} €</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th colspan="3">{{strings.total[locale]}}</th>
<th>{{year.donations | sum | amount(locale)}} €</th>
</tr>
</tfoot>
</table>
{% endfor %}

33
src/_includes/expenses-current.html

@ -0,0 +1,33 @@
<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(locale)}} €</td>
<td>{{expense.amount | year | amount(locale)}} €</td>
</tr>
{% endfor %}
</tbody>
<tfoot>
<tr>
<th colspan="3">{{strings.total[locale]}}</th>
<th>{{expenses | sum | amount(locale)}} €</th>
<th>{{expenses | sum | year | amount(locale)}} €</th>
</tr>
</tfoot>
</table>

2
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>

30
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
class="fas fa-fw fa-4x fa-envelope"></span></a></div>
<div class="m-2"><a href="mailto:mail@sp-codes.de">
<span class="d-none d-md-block fas fa-fw fa-4x fa-envelope"></span>
<span class="d-block d-md-none fas fa-fw fa-2x fa-envelope"></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 fab fa-fw fa-4x fa-stack-overflow"></span>
<span class="d-block d-md-none fab fa-fw fa-2x fa-stack-overflow"></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 fab fa-fw fa-4x fa-github"></span>
<span class="d-block d-md-none fab fa-fw fa-2x fa-github"></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">

4
src/_includes/services-extended.html

@ -6,7 +6,11 @@
<div class="beta">TEST-PHASE</div>
{% endif %}
<div class="inner">
{% if service.si %}
<i class="si si-{{service.si}} fa-4x"></i>
{% else %}
<i class="{{service.icon}} fa-4x"></i>
{% endif %}
<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 %}

4
src/_includes/services-simple.html

@ -6,7 +6,11 @@
{% if service.beta == true %}
<div class="beta">TEST-PHASE</div>
{% endif %}
{% if service.si %}
<i class="si si-{{service.si}} fa-2x"></i>
{% else %}
<i class="{{service.icon}} fa-fw fa-2x"></i>
{% endif %}
<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>

10
src/de/all-donations.html

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

8
src/de/contact.html

@ -20,23 +20,23 @@ eleventyNavigation:
</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>

20
src/de/donate.html

@ -14,7 +14,7 @@ eleventyNavigation:
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>
@ -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">
<p>Eine aktuelle Liste aller eingegangenen Spenden pflege ich <a target="_blank"
href="https://git.sp-codes.de/sp-codes/expenses-donations/src/branch/master/donations.md">hier</a>.
</p>
</div>
<h2>Aktuelle Ausgaben</h2>
{% include "expenses-current.html" %}
<h2>Spenden {{donations[0].year}}</h2>
{% 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,

4
src/de/index.html

@ -31,7 +31,7 @@ eleventyNavigation:
href="https://social.sp-codes.de/@sp_codes">@sp_codes@social.sp-codes.de</a></strong>
</p>
<div class="row justify-content-center">
{% include services-simple.html %}
{% include "services-simple.html" %}
</div>
</div>
</div>
@ -44,4 +44,4 @@ eleventyNavigation:
</p>
</div>
</div>
{% include profiles.html %}
{% include "profiles.html" %}

2
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.

2
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-jitsi"></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.

2
src/de/services/matrix.md

@ -4,7 +4,7 @@ key: matrix
title: Matrix
---
# <i class="fas fa-comments"></i> Matrix
# <i class="si si-matrix"></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

10
src/en/all-donations.html

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

8
src/en/contact.html

@ -19,22 +19,22 @@ eleventyNavigation:
</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>

16
src/en/donate.html

@ -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">
<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>
</div>
<h2>Current Expenses</h2>
{% include "expenses-current.html" %}
<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

4
src/en/index.html

@ -30,7 +30,7 @@ eleventyNavigation:
href="https://social.sp-codes.de/@sp_codes">@sp_codes@social.sp-codes.de</a></strong>
</p>
<div class="row justify-content-center">
{% include services-simple.html %}
{% include "services-simple.html" %}
</div>
</div>
</div>
@ -44,4 +44,4 @@ eleventyNavigation:
</div>
</div>
{% include profiles.html %}
{% include "profiles.html" %}

2
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.

2
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-jitsi"></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.

2
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-matrix"></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.

BIN
src/img/bg-light.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 65 KiB

1
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>

Before

Width:  |  Height:  |  Size: 1.8 KiB

0
src/img/gitea-white.svg → src/img/icon/gitea.svg

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

1
src/img/icon/jitsi.svg

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#fff"><title>Jitsi</title><path d="M18.948 7.828c-.638-.406-1.527-.346-1.8-.317l-.156.003c-.135-.058.004-.397.041-.753.051-.496-.131-1.177-.461-1.722-.159-.262-.216-.287-.098-.413.869-.928 1.005-1.956.729-2.812-.539-1.675-.648-1.939-.631-1.771.068.683-.084 1.637-.188 2.025-.148.55-.654 1.248-1.979 1.884-.311.149-1.565.74-1.788.998-.276.321-.344.644-.474 1.283-.138.676-.189 1.307-.027 2.03.031.141.063.246.081.329a.017.017 0 0 0-.002-.005c.037.147-.023.234-.105.286a1.455 1.455 0 0 1-.252.08l-.003.001c-.203.032-.398.067-.585.104-1.379.237-4.401.958-3.328 4.704.381 1.271 1.124 2.078 1.554 2.226l.015.005c.071.032.148.06.223.075.008.002.012.124-.004.296l-.011.074c-.06.434-.308 1.104-.673 1.113-.146.004-.79-.386-.972-.505-1.02-.67-1.384-1.048-2.108-1.129-.597-.067-1.939 1.093-1.968 3.549-.035 2.999.806 4.49.83 4.534.623-2.824 1.072-3.1 2.689-4.205.128-.087 1.647 1.191 2.012 1.184 1.827-.034 5.102.083 6.689-3.196.031-.063.549.474.595.473.019-.001 2.788-1.234 3.199-6.899.188-2.587-.536-3.206-1.044-3.529zm-2.172-1.846c.08.327.057.667-.041.947-.178.427-.45.651-.79.627a.812.812 0 0 1-.31-.11c-.378-.221-.583-.786-.422-1.225a.183.183 0 0 0 .01-.02c.042-.112.144-.237.275-.364.269-.238.797-.64.854-.64.072.002.341.443.424.785zm-.004-4.911c.006-.058.153.385.201.539.209.665.181.96.134 1.297-.122.858-.579 1.422-.924 1.766-.541.54-.668.618-.432.191.753-1.361.912-2.641 1.021-3.793zm-4.103 4.186c.097-.239.584-.503.989-.739.418-.244 1.747-.59 2.566-1.669.253-.333-.214 1.915-1.417 3.002-.406.367-1.522.557-2.485 1.242-.099.071.022-1.153.347-1.836zm-.258 1.993c.236-.196.664-.477 2.209-.987.191-.063.177.002.27.457.099.486.197.933 1.207 1.178.072.018-.328.772-.443.871-.225.36-1.415 1.392-1.919 1.294-.345-.067-1.087-.895-1.289-1.352-.145-.328-.405-1.154-.035-1.461zM8.11 11.537c.165-.783.783-1.18.801-1.196.313-.272.919-.518 1.55-.704.095-.025.154-.038.168-.041.39-.08.88-.213 1.204-.246.246-.025.549-.153.798.036.27.328.864.871 1.191.899.111.009.858-.224 2.083-1.321.153-.137.314-.272.484-.398l.049-.036c.376-.273.792-.5 1.244-.6.14-.031-.5.605.048 1.936.359.872 1.351 3.863 1.188 4.342-.097.286-.185.339-.432.225-.692-.321-1.544-1.269-3.181-1.908-1.319-.515-2.412-.503-3.12-.364-1.629.321-2.473 1.03-2.946 1.426-.072.061.701-.245 1.734-.362.936-.106 1.875-.004 3.037.786.742.621.561.573.226.666-1.28.356-3.719 1.092-4.57.968-.88-.129-1.966-2.388-1.556-4.108zm6.849 3.15c-1.028-1.225-2.201-1.604-2.948-1.654-.927-.062-1.594.057-2.226.267-.068.023 3.387-2.469 7.192.489.685.533 1.094.83 1.454 1.066.052.034-.917.29-1.081.336-1.575.261-2.008-.048-2.391-.504zm-.88.249c-.376.135-.903.321-1.477.499a61.891 61.891 0 0 1 1.477-.499zm-7.455 3.411c.06-.601.193-1.146.134-1.753-.001-.012 1.714 1.163 2.179 1.244.076.013-.801.812-1.697 1.188-.307-.04-.641-.428-.616-.679zm-1.882 4.935c-.092-.129-.694-2.51-.527-4.034.23-2.1 1.408-2.844 1.635-2.871.188-.022.56.1.386 2.198-.021.253 1.117 1.04 1.117 1.04-2.322 1.364-2.136 2.391-2.611 3.667zm4.754-2.535c-.117-.005-2.264-1.473-2.192-1.501 2.477-.964 2.656-2.467 2.827-2.849-.02-.032.484-.236 1.17-.491 1.104-.396 2.631-.891 3.158-1.086l.027-.008c.239-.069.249-.024.313.06.19.247.509.412.544.429.47.223 1.076.202 1.09.221.094.136.154 5.536-6.937 5.225zm7.31-2.681c-.021.001-.528-.472-.528-.472s.196-.427.295-.97c.08-.442.12-1.097.12-1.097s2.331-.278 2.435-1.082c.118-.918-.546-2.827-.645-3.139-.042-.132-.621-1.69-.706-2.093-.096-.454.087-1.187.36-1.294.643-.253 1.59.828 1.647 2.401.217 6.03-2.957 7.745-2.978 7.746z"/></svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

1
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>

After

Width:  |  Height:  |  Size: 976 B

0
src/img/matrix-white.svg → src/img/icon/matrix.svg

Before

Width:  |  Height:  |  Size: 957 B

After

Width:  |  Height:  |  Size: 957 B

0
src/img/opencollective-white.svg → src/img/icon/opencollective.svg

Before

Width:  |  Height:  |  Size: 433 B

After

Width:  |  Height:  |  Size: 433 B

0
src/img/threema-white.svg → src/img/icon/threema.svg

Before

Width:  |  Height:  |  Size: 782 B

After

Width:  |  Height:  |  Size: 782 B

0
src/img/xmpp-white.svg → src/img/icon/xmpp.svg

Before

Width:  |  Height:  |  Size: 659 B

After

Width:  |  Height:  |  Size: 659 B

1
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>

Before

Width:  |  Height:  |  Size: 957 B

1
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>

Before

Width:  |  Height:  |  Size: 433 B

1
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>

Before

Width:  |  Height:  |  Size: 782 B

1
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>

Before

Width:  |  Height:  |  Size: 659 B

41
src/scss/icons.scss

@ -1,37 +1,38 @@
.si, .si::before {
display: inline-block;
margin: 0 8px;
width: 4em;
height: 4em;
width: 1.25em;
line-height: 1;
box-sizing: border-box;
}
@media (max-width: 767.98px) {
.si, .si::before {
margin: 0 4px;
width: 2em;
height: 2em;
}
.si-2x {
font-size: 2em;
}
.si-3x {
font-size: 3em;
}
.h2si, .h2si::before {
margin: 0;
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/#{$name}-white.svg");
background-repeat: no-repeat;
background-position: center;
background-image: url("../img/icon/#{$name}.svg");
}
}
@include svg-icon('matrix');
@include svg-icon('gitea');
@include svg-icon('xmpp');
@include svg-icon('threema');
@include svg-icon('jitsi');
@include svg-icon('mastodon');
@include svg-icon('matrix');
@include svg-icon('opencollective');
@include svg-icon('threema');
@include svg-icon('xmpp');

26
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,19 @@ pre {
max-width: 96px;
max-height: 96px;
}
.fa-4x {
font-size: 2em;
}
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;
}
}

Loading…
Cancel
Save