Browse Source

replaced some more icons with svg

some more improvements
pull/67/head
Samuel Philipp 12 months ago
parent
commit
848289cdc0
Signed by: samuel-p
GPG Key ID: 2AD495D17760CB4E
  1. 22
      src/_data/services.json
  2. 4
      src/_includes/layouts/base.njk
  3. 6
      src/_includes/services-extended.html
  4. 6
      src/_includes/services-simple.html
  5. 2
      src/de/all-donations.html
  6. 2
      src/de/blog.md
  7. 4
      src/de/contact.html
  8. 6
      src/de/donate.html
  9. 2
      src/de/index.html
  10. 4
      src/de/services.html
  11. 2
      src/en/all-donations.html
  12. 2
      src/en/blog.md
  13. 4
      src/en/contact.html
  14. 6
      src/en/donate.html
  15. 2
      src/en/index.html
  16. 4
      src/en/services.html
  17. 1
      src/img/icon/bars.svg
  18. 1
      src/img/icon/book.svg
  19. 1
      src/img/icon/comment-dots.svg
  20. 1
      src/img/icon/hand-holding-heart.svg
  21. 1
      src/img/icon/home.svg
  22. 1
      src/img/icon/server.svg
  23. 6
      src/scss/icons.scss

22
src/_data/services.json

@ -2,7 +2,7 @@
{
"id": "searx",
"name": "Searx",
"si": "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",
"si": "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",
"si": "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",
"si": "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",
"si": "gitea",
"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",
"si": "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",
"si": "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",
"si": "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",
"si": "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",
"si": "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",
"si": "twitter",
"icon": "si si-twitter",
"url": "https://nitter.sp-codes.de",
"status": "https://nitter.sp-codes.de",
"summary": {

4
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 %}

6
src/_includes/services-extended.html

@ -6,11 +6,7 @@
<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 %}
<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 %}

6
src/_includes/services-simple.html

@ -6,11 +6,7 @@
{% 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 %}
<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>

2
src/de/all-donations.html

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

2
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

4
src/de/contact.html

@ -5,10 +5,10 @@ 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>

6
src/de/donate.html

@ -5,10 +5,10 @@ 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
@ -17,7 +17,7 @@ eleventyNavigation:
<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>

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

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

2
src/en/all-donations.html

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

2
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

4
src/en/contact.html

@ -5,10 +5,10 @@ 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">

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

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

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

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

After

Width:  |  Height:  |  Size: 451 B

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

After

Width:  |  Height:  |  Size: 542 B

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

After

Width:  |  Height:  |  Size: 545 B

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

After

Width:  |  Height:  |  Size: 623 B

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

After

Width:  |  Height:  |  Size: 595 B

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

After

Width:  |  Height:  |  Size: 970 B

6
src/scss/icons.scss

@ -29,17 +29,23 @@
}
}
@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('github');
@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');

Loading…
Cancel
Save