replaced some more icons with svg

some more improvements
This commit is contained in:
Samuel Philipp 2021-06-09 00:58:35 +02:00
parent d3ec7b9852
commit 848289cdc0
Signed by untrusted user: samuel-p
GPG key ID: 2AD495D17760CB4E
23 changed files with 47 additions and 43 deletions

View file

@ -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": {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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 Normal file
View file

@ -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 Normal file
View file

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

View file

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

View file

@ -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 Normal file
View file

@ -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 Normal file
View file

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

View file

@ -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');