layout ng

This commit is contained in:
Samuel Philipp 2023-12-13 02:55:14 +01:00
parent 2a40582394
commit 805012ef26
22 changed files with 362 additions and 190 deletions

View file

@ -8,6 +8,13 @@
"summary": { "summary": {
"de": "Die offene Plattform für sichere und dezentrale Kommunikation.", "de": "Die offene Plattform für sichere und dezentrale Kommunikation.",
"en": "The open platform for secure and decentralized communication." "en": "The open platform for secure and decentralized communication."
},
"ossrox": {
"url": "https://ossrox.org/store/matrix",
"description": {
"de": "Wenn du einen eigenen Matrix-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma Ossrox damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.",
"en": "If you want to have your own matrix server for you, your family or your company, I would be happy to support you with my company Ossrox. Please have a look at our services on our website or send me a message."
}
} }
}, },
{ {

View file

@ -49,7 +49,7 @@ layout: base.njk
<div class="mb-2"> <div class="mb-2">
<a href="https://status.sp-codes.de" target="_blank"> <a href="https://status.sp-codes.de" target="_blank">
<img alt="{{strings.state[locale]}}" <img alt="{{strings.state[locale]}}"
src="https://shields.sp-codes.de/endpoint?label={{strings.state[locale]}}&url=https%3A%2F%2Fstatus.sp-codes.de%2Fapi%2Fbadge%3Fservice%3D{{service.status}}%26operational%3D{{strings.operational[locale]}}%26outage%3D{{strings.outage[locale]}}%26maintenance%3D{{strings.maintenance[locale]}}"> src="https://status.sp-codes.de/api/badge/1/status?label=Status&upLabel=Online&downLabel=Ausfall&maintenanceLabel=Wartung">
</a> </a>
</div> </div>
{% endif %} {% endif %}

View file

@ -39,13 +39,13 @@ title: sp-codes
<body> <body>
<nav class="nav menu border-bottom"> <nav class="nav menu border-bottom">
<div class="toggle"> <div class="toggle">
<label for="menu" class="m-0"><span class="i-bars me-1"></span>{{ strings.menu[locale] }}</label> <label for="menu" class="m-0"><span class="i-bars me-2"></span>{{ strings.menu[locale] }}</label>
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>
{% for language in site.languages %} {% for language in site.languages %}
<div {% if language.code== locale %} class="active" {% endif %}> <div {% if language.code == locale %} class="active" {% endif %}>
<a href="{% translatedUrl locale, language.code %}" class="ms-3"> <a href="{% translatedUrl locale, language.code %}" class="ms-4">
<span class="fi-{{ language.icon }}" title="{{ language.label }}"></span> <span class="fi-{{ language.icon }}" title="{{ language.label }}"></span>
</a> </a>
</div> </div>
@ -54,11 +54,14 @@ title: sp-codes
<input type="checkbox" id="menu"/> <input type="checkbox" id="menu"/>
<div class="items"> <div class="items">
<a class="logo mini fixed me-4" href="/{{locale}}/">
<img src="/img/sp-codes.svg" alt="sp-codes">
</a>
{%- for entry in collections.all | eleventyNavigation %} {%- for entry in collections.all | eleventyNavigation %}
{% if not entry.url.startsWith("https") and entry.url.includes(locale) or entry.locale == locale %} {% 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 %}"> <div class="item{% if entry.url == page.url %} active{% endif %}">
<a href="{{ entry.url | url }}" class="me-3"> <a href="{{ entry.url | url }}" class="me-4">
{% if entry.icon %}<span class="{{ entry.icon }} me-1"></span>{% endif %}{{ entry.title }} {% if entry.icon %}<span class="{{ entry.icon }} me-2"></span>{% endif %}{{ entry.title }}
</a> </a>
</div> </div>
{% endif %} {% endif %}
@ -67,10 +70,10 @@ title: sp-codes
<div class="flex-grow-1"></div> <div class="flex-grow-1"></div>
<div class="lang-large"> <div class="items lang-large">
{% for language in site.languages %} {% for language in site.languages %}
<div {% if language.code== locale %} class="active" {% endif %}> <div class="item{% if language.code == locale %} active{% endif %}"">
<a href="{% translatedUrl locale, language.code %}" class="ms-3"> <a href="{% translatedUrl locale, language.code %}" class="ms-4">
<span class="fi-{{ language.icon }}" title="{{ language.label }}"></span> <span class="fi-{{ language.icon }}" title="{{ language.label }}"></span>
</a> </a>
</div> </div>
@ -82,21 +85,21 @@ title: sp-codes
{{ content | safe }} {{ content | safe }}
</div> </div>
</div> </div>
<div class="d-flex justify-content-start flex-wrap p-2 menu border-top"> <div class="nav d-flex justify-content-start flex-wrap px-4 py-3 menu border-top">
<div class="d-flex justify-content-start flex-wrap"> <div class="d-flex justify-content-start flex-wrap">
<div class="me-3">Made with <span class="i-heart highlight"></span> in Germany</div> <div class="me-4">Made with <span class="i-heart highlight"></span> in Germany</div>
<div class="me-3"><a href="https://samuel-philipp.de"><span class="i-copyright me-1"></span>Samuel Philipp</a></div> <div class="me-4"><a href="https://samuel-philipp.de"><span class="i-copyright me-2"></span>Samuel Philipp</a></div>
</div> </div>
<div class="flex-sm-grow-1"></div> <div class="flex-sm-grow-1"></div>
<div class="d-flex justify-content-sm-start flex-wrap"> <div class="d-flex justify-content-sm-start flex-wrap">
<div class="me-3"><a href="/{{locale}}/imprint"><span class="i-info-circle me-1"></span>{{strings.imprint[locale]}}</a> <div class="me-4"><a href="/{{locale}}/imprint"><span class="i-info-circle me-2"></span>{{strings.imprint[locale]}}</a>
</div> </div>
<div class="me-3"><a href="/{{locale}}/privacy"><span class="i-user-secret me-1"></span>{{strings.privacy[locale]}}</a> <div class="me-4"><a href="/{{locale}}/privacy"><span class="i-user-secret me-2"></span>{{strings.privacy[locale]}}</a>
</div> </div>
<div class="me-3"><a target="_blank" href="https://git.sp-codes.de/samuel-p/sp-codes.de"><span <div class="me-4"><a target="_blank" href="https://git.sp-codes.de/samuel-p/sp-codes.de"><span
class="i-code me-1"></span>{{strings.code[locale]}}</a></div> class="i-code me-2"></span>{{strings.code[locale]}}</a></div>
<div><a target="_blank" href="https://umami.sp-codes.de/share/gaJcXEyG/sp-codes.de"><span <div><a target="_blank" href="https://umami.sp-codes.de/share/gaJcXEyG/sp-codes.de"><span
class="i-chart-line me-1"></span>{{strings.stats[locale]}}</a></div> class="i-chart-line me-2"></span>{{strings.stats[locale]}}</a></div>
</div> </div>
</div> </div>
</body> </body>

View file

@ -0,0 +1,35 @@
---
layout: base.njk
---
{% set service = services | getServiceById(key) %}
{% if service %}
<h1><i class="{{service.icon}}"></i> {{title}} <a href="https://status.sp-codes.de" class="float-end"><img alt="{{strings.state[locale]}}" src="https://status.sp-codes.de/api/badge/1/status?label=Status&upLabel=Online&downLabel=Ausfall&maintenanceLabel=Wartung"></a></h1>
<div class="row">
<div class="col-lg-8 col-12">
{{ content | safe }}
</div>
<div class="col-lg-4 col-12">
<div class="tab-card">
<div class="title"><h1 class="text-center fw-bold">sp-codes</h1></div>
<div class="card">
Seit Anfang 2020 betreibe ich einen öffentlichen Matrix-Server: <a href="https://matrix.sp-codes.de">matrix.sp-codes.de</a> und eine öffentliche Element-Web Instanz: <a href="https://chat.sp-codes.de" target="_blank">chat.sp-codes.de</a>
<div class="text-center mt-2">
<a class="btn btn-primary" target="_blank" href="https://chat.sp-codes.de/#/register">Jetzt registrieren</a>
</div>
</div>
</div>
{% if service.ossrox %}
<div class="tab-card ossrox">
<div class="title"><img class="ossrox" src="/img/ossrox-white.svg" alt="Ossrox"></div>
<div class="card">
{{service.ossrox.description[locale]}}
</div>
</div>
{% endif %}
</div>
</div>
{% else %}
Service not found
{% endif %}

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><defs><linearGradient id="a"><stop offset="0" stop-color="#fea500"></stop><stop offset="1" stop-color="#fea500" stop-opacity="0"></stop></linearGradient></defs><path d="M256 22l202.684 117.02v234.039L256 490.079 53.316 373.058v-234.04z" stroke="#fea500" stroke-width="13.856" stroke-linejoin="round" stroke-linecap="round" class="cEsZQnrx_0"></path><g><path d="M257.82 271.163q0 10.765-5.513 19.08-5.426 8.227-15.841 12.866-10.415 4.55-24.681 4.55-14.266 0-25.382-4.2-11.115-4.289-19.08-11.99l11.116-12.429q6.652 6.127 14.791 9.365 8.227 3.238 18.467 3.238 7.002 0 12.603-2.188 5.69-2.275 9.015-6.651 3.413-4.376 3.413-10.678 0-5.426-2.188-9.102t-7.527-6.564q-5.338-2.889-15.053-5.777-13.391-4.026-21.88-8.752-8.403-4.726-12.779-11.29-4.288-6.652-4.288-15.929 0-9.627 5.338-17.067 5.427-7.439 14.88-11.465 9.451-4.113 21.267-4.113 12.69 0 22.58 3.675 9.978 3.676 17.855 10.853l-10.678 12.078q-6.214-5.426-13.478-8.052-7.265-2.626-15.054-2.626-9.715 0-15.841 4.026-6.04 4.026-6.04 11.553 0 4.814 2.539 8.052 2.625 3.238 8.577 6.04 5.951 2.8 17.154 6.126 11.378 3.413 19.08 7.789 7.702 4.289 12.165 11.553 4.464 7.177 4.464 18.03z" fill="#fea500" stroke-width="0" class="cEsZQnrx_1"></path></g><g><path d="M336.3 261.862q0 20.305-12.691 30.108-12.603 9.714-34.484 9.714H274.51v43.06h-20.305V223.966h33.521q23.28 0 35.884 9.54 12.69 9.453 12.69 28.357zm-21.356.175q0-22.843-25.906-22.843h-14.529v47H289.3q12.253 0 18.905-5.602 6.74-5.602 6.74-18.555z" fill="#fea500" stroke-width="4.366" class="cEsZQnrx_2"></path></g><path d="M53.316 139.02l65.385 37.75L256 97.5V22M256 490.078V414.5l137.23-79.23 65.454 37.789" fill="none" stroke="#fea500" stroke-width="13.856" stroke-linecap="round" stroke-linejoin="round" class="cEsZQnrx_3"></path><path d="M256 22v75.5l137.3 79.27 65.384-37.75zM256 490.004V414.5l-137.23-79.23-65.454 37.789z" fill="#fea500" stroke="#fea500" stroke-width="13.856" stroke-linecap="round" stroke-linejoin="round" class="cEsZQnrx_4"></path></svg>

After

Width:  |  Height:  |  Size: 2 KiB

View file

@ -1,44 +1,45 @@
<div class="d-flex justify-content-center flex-wrap my-3 contact-links"> <!-- TODO -->
<div class="m-2"><a href="mailto:mail@sp-codes.de"> <div class="d-flex flex-wrap gap-3 my-3 contact-links">
<span class="d-none d-md-inline-block i-envelope i-4x i-fw"></span> <div><a href="mailto:mail@sp-codes.de">
<span class="d-none d-md-inline-block i-envelope i-2x i-fw"></span>
<span class="d-inline-block d-md-none i-envelope i-2x i-fw"></span> <span class="d-inline-block d-md-none i-envelope i-2x i-fw"></span>
</a></div> </a></div>
<div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de"> <div><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
<span class="d-none d-md-inline-block i-matrix i-4x i-fw"></span> <span class="d-none d-md-inline-block i-matrix i-2x i-fw"></span>
<span class="d-inline-block d-md-none i-matrix i-2x i-fw"></span> <span class="d-inline-block d-md-none i-matrix i-2x i-fw"></span>
</a></div> </a></div>
<div class="m-2"><a rel="me" href="https://social.sp-codes.de/@samuel_p"> <div><a rel="me" href="https://social.sp-codes.de/@samuel_p">
<span class="d-none d-md-inline-block i-mastodon i-4x i-fw"></span> <span class="d-none d-md-inline-block i-mastodon i-2x i-fw"></span>
<span class="d-inline-block d-md-none i-mastodon i-2x i-fw"></span> <span class="d-inline-block d-md-none i-mastodon i-2x i-fw"></span>
</a></div> </a></div>
<div class="m-2"><a rel="me" href="https://www.xing.com/profile/Samuel_Philipp"> <div><a rel="me" href="https://www.xing.com/profile/Samuel_Philipp">
<span class="d-none d-md-inline-block i-xing i-4x i-fw"></span> <span class="d-none d-md-inline-block i-xing i-2x i-fw"></span>
<span class="d-inline-block d-md-none i-xing i-2x i-fw"></span> <span class="d-inline-block d-md-none i-xing i-2x i-fw"></span>
</a></div> </a></div>
<div class="m-2"><a rel="me" href="https://www.linkedin.com/in/samuel-philipp"> <div><a rel="me" href="https://www.linkedin.com/in/samuel-philipp">
<span class="d-none d-md-inline-block i-linkedin i-4x i-fw"></span> <span class="d-none d-md-inline-block i-linkedin i-2x i-fw"></span>
<span class="d-inline-block d-md-none i-linkedin i-2x i-fw"></span> <span class="d-inline-block d-md-none i-linkedin i-2x i-fw"></span>
</a></div> </a></div>
<div class="m-2"><a href="https://git.sp-codes.de/samuel-p"> <div><a href="https://git.sp-codes.de/samuel-p">
<span class="d-none d-md-inline-block i-git i-4x i-fw"></span> <span class="d-none d-md-inline-block i-git i-2x i-fw"></span>
<span class="d-inline-block d-md-none i-git i-2x i-fw"></span> <span class="d-inline-block d-md-none i-git i-2x i-fw"></span>
</a></div> </a></div>
<div class="m-2"><a href="https://github.com/samuel-p"> <div><a href="https://github.com/samuel-p">
<span class="d-none d-md-inline-block i-github i-4x i-fw"></span> <span class="d-none d-md-inline-block i-github i-2x i-fw"></span>
<span class="d-inline-block d-md-none i-github i-2x i-fw"></span> <span class="d-inline-block d-md-none i-github i-2x i-fw"></span>
</a></div> </a></div>
<div class="m-2"><a href="https://stackoverflow.com/users/9662601/samuel-p"> <div><a href="https://stackoverflow.com/users/9662601/samuel-p">
<span class="d-none d-md-inline-block i-stackoverflow i-4x i-fw"></span> <span class="d-none d-md-inline-block i-stackoverflow i-2x i-fw"></span>
<span class="d-inline-block d-md-none i-stackoverflow i-2x i-fw"></span> <span class="d-inline-block d-md-none i-stackoverflow i-2x i-fw"></span>
</a></div> </a></div>
</div> </div>
<div class="d-flex justify-content-center mb-3"> <!--<div class="d-flex justify-content-center mb-3">-->
<div class="lead text-center"> <!-- <div class="lead text-center">-->
{% if locale == 'de' %} <!-- {% if locale == 'de' %}-->
<a href="https://samuel-philipp.de">samuel-philipp.de</a> <!-- <a href="https://samuel-philipp.de">samuel-philipp.de</a>-->
{% elseif locale == 'en' %} <!-- {% elseif locale == 'en' %}-->
<a href="https://samuel-philipp.com">samuel-philipp.com</a> <!-- <a href="https://samuel-philipp.com">samuel-philipp.com</a>-->
{% endif %} <!-- {% endif %}-->
</div> <!-- </div>-->
</div> <!--</div>-->

View file

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

View file

@ -1,34 +0,0 @@
---
layout: base.njk
key: articles
title: Artikel
eleventyNavigation:
key: articles
title: Artikel
icon: i-book
order: 5
---
<h1><i class="i-book"></i> Artikel</h1>
<p class="mb-5">Hier findest du eine Übersicht aller Artikel, die ich auf dieser Webseite veröffentlicht habe.</p>
{% set tags = ['Matrix'] %}
{%- for tag in tags %}
<h3>Artikel zu {{tag}}:</h3>
<ul class="mb-5">
{%- for post in collections[ tag ] %}
<li>
<a href="{{ post.url | url }}">
{{ post.data.title }}
</a>
</li>
{%- endfor %}
</ul>
{%- endfor %}
<p class="mb-5">Gelegentlich kann es sein, dass ich die Zeit finde, einen neuen Artikel zu schreiben. Um keinen zu verpassen, folge
mir gerne auf Mastodon. Dort werde ich neue Artikel oder Aktualisierungen bereits veröffentlichter Artikel posten.</p>
{% include "profiles.html" %}

View file

@ -1,5 +1,5 @@
--- ---
layout: home.njk layout: base.njk
key: home key: home
title: Home title: Home
eleventyNavigation: eleventyNavigation:
@ -7,50 +7,67 @@ eleventyNavigation:
title: Home title: Home
icon: i-home icon: i-home
--- ---
<div class="row justify-content-center py-4 border-top">
<div class="col-lg-8 col-md-10 col-12"> <div class="row py-5">
<h1 class="heading">Willkommen bei sp&#8209;codes!</h1> <div class="col-12 col-lg-4 m-3 m-lg-0 fill-col-inner">
<p class="lead text-center mb-2"> <div class="logo huge animated">
Schön, dass du hergefunden hast. Mein Name ist Samuel Philipp und ich bin ein Software Engineer aus {% include "logo-animated.html" %}
Magdeburg. Auf dieser Seite findest du Informationen über mich und eine Übersicht über die von mir </div>
bereitgestellten Dienste. Schau dich gerne um oder nutze die verschiedenen Tools. </div>
<div class="col-12 col-lg-8">
<h1>Willkommen bei sp&#8209;codes!</h1>
<p class="mb-2">
Schön, dass du hergefunden hast. sp-codes stellt verschiedene Open-Source-Tools zur allgemeinen Verfügung. Alle Dienste sind kostenlos und werbe-frei. Wenn du zum weiteren Fortbestand des Projekts beitragen willst, freue ich mich über deine Unterstützung! Schau dich gerne um und entdecke das Angebot!
</p> </p>
<p class="lead text-center mb-2"> <h5 class="mb-2 fw-bold">Werde gerne Teil unserer tollen Community!</h5>
Seit April 2022 biete ich mit meiner Firma <a href="https://ossrox.org" target="_blank">Ossrox</a> auch professionelles <p class="mb-2">
Hosting von Open-Source-Tools für Unternehmen, Privatpersonen und andere Organisationen an. Solltest du Für alle, die die Dienste nutzen und Interessierte gibt es einen öffentlichen Matrix-Raum als Austauschort für Fragen, Ideen und Probleme: <strong><a
daran Interesse haben, schau gerne auf unserer Webseite vorbei oder schreibe mir eine Nachricht. href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a></strong>
</p> </p>
<p class="lead text-center mb-2"> <p class="mb-2">
Um immer auf dem Laufenden zu bleiben, folge sp-codes auf Mastodon: <strong><a rel="me" href="https://social.sp-codes.de/@sp_codes">@sp_codes@social.sp-codes.de</a></strong>
</p>
</div>
</div>
<div class="row py-5">
<div class="col-12 col-lg-4 col-12 m-3 m-lg-0 fill-col-inner order-lg-1">
<div class="me-profile">
<img src="/img/samuel-1024-p.png" alt="Samuel Philipp">
</div>
</div>
<div class="col-12 col-lg-8 col-12">
<h1>Über mich</h1>
<p class="mb-2">
Mein Name ist Samuel Philipp und ich bin Full-Stack-Developer und SysAdmin. In meiner Freizeit betreibe ich alle angebotenen Dienste von sp-codes. Wenn du mehr über mich erfahren möchtest, schau gerne auf meiner persönlichen Webseite vorbei:
<a href="https://samuel-philipp.de">samuel-philipp.de</a>
</p>
<p class="mb-2">
Du hast einen Fehler gefunden, Verbesserungsvorschläge oder eine andere Frage? Nimm gerne über eine der folgenden Plattformen Kontakt mit mir auf. Ich freue mich auf deine Nachricht!
</p>
<p class="mb-2">
{% include "profiles.html" %}
</p>
<hr/>
<p class="mb-3">
Mit meiner Firma <a href="https://ossrox.org" target="_blank">Ossrox</a> biete ich professionelles Hosting
von Open-Source-Tools für Unternehmen, Privatpersonen und andere Organisationen an. Wenn du daran
interessiert bist, schau doch gerne auf unserer Webseite vorbei oder schreibe mir eine Nachricht.
</p>
<p class="text-center">
<a href="https://ossrox.org" target="_blank"> <a href="https://ossrox.org" target="_blank">
<img class="ossrox" src="/img/ossrox.svg" alt="Ossrox"> <img class="ossrox-logo" src="/img/ossrox-white.svg" alt="Ossrox">
</a> </a>
</p> </p>
</div> </div>
</div> </div>
<div class="row justify-content-center py-4 border-top">
<div class="col-lg-8 col-md-10 col-12"> <div class="row justify-content-center py-5">
<h1 class="heading"><a href="/{{locale}}/services">Dienste</a></h1> <div class="col">
<p class="lead text-center mb-2"> <h1 class="text-center">Tool-Übersicht</h1>
Für die Nutzer:innen der Dienste und Interessierte gibt es einen öffentlichen Matrix-Raum als <p class="text-center"><a href="/{{locale}}/services">Alle Dienste anzeigen</a></p>
Austauschort für Fragen, Ideen und Probleme: <strong><a
href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a></strong>
</p>
<p class="lead text-center mb-2">
Folge sp-codes auf Mastodon: <strong><a rel="me"
href="https://social.sp-codes.de/@sp_codes">@sp_codes@social.sp-codes.de</a></strong>
</p>
<div class="row justify-content-center"> <div class="row justify-content-center">
{% include "services-simple.html" %} {% include "services-extended.html" %}
</div> </div>
</div> </div>
</div> </div>
<div class="row justify-content-center pt-4 border-top">
<div class="col-lg-8 col-md-10 col-12">
<h1 class="heading">Profile & Kontakt</h1>
<p class="lead text-center mb-2">
Du hast einen Fehler gefunden, Verbesserungsvorschläge oder eine andere Frage? Nimm gerne
über eine der folgenden Plattformen Kontakt mit mir auf. Ich freue mich auf deine Nachricht!
</p>
</div>
</div>
{% include "profiles.html" %}

View file

@ -9,22 +9,18 @@ eleventyNavigation:
order: 2 order: 2
--- ---
<h1><i class="i-server"></i> Dienste</h1> <h1><i class="i-server"></i> Dienste</h1>
<p>In meiner Freizeit stelle ich verschiedene quelloffene Dienste für die freie Nutzung bereit. Hier findest du eine <p>In meiner Freizeit stelle ich eine Vielzahl von Open-Source-Diensten zur Verfügung, die kostenlos und werbe-frei
Übersicht der einzelnen Services und jeweils eine kurze Beschreibung. Alle Services werden in Deutschland genutzt werden können. Hier findest du einen Überblick über die verschiedenen Services sowie entsprechende
gehostet. Fühl dich frei, davon Gebrauch zu machen.</p> Beschreibungen und Anleitungen zu Nutzung. Alle Dienste werden in Deutschland gehostet. Du bist herzlich eingeladen,
sie zu nutzen.</p>
<p>Für die Nutzer:innen der Dienste gibt es einen öffentlichen Matrix-Raum als Austauschort für Fragen, Ideen und <p>Da die Dienste privat angeboten werden, kann leider keine dauerhafte Bereitstellung garantiert werden. Sollte ein
Probleme. Komm gerne vorbei, wenn du einen der hier aufgelisteten Dienste nutzt oder einfach so mal vorbeischauen Dienst eingestellt werden, wird dies für Dienste außerhalb der Test-Phase mindestens drei Monate im Voraus
willst:</p> angekündigt.</p>
<p>Für alle, die die Dienste nutzen und Interessierte gibt es einen öffentlichen Matrix-Raum als Austauschort für
Fragen, Ideen und Probleme. Komm gerne vorbei, wenn du einen der hier aufgelisteten Dienste nutzt oder einfach so
mal vorbeischauen willst:</p>
<h3 class="text-center"><a href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a> <h3 class="text-center"><a href="https://matrix.to/#/#sp-codes:matrix.sp-codes.de?via=matrix.sp-codes.de">#sp-codes:matrix.sp-codes.de</a>
</h3> </h3>
<div class="card text-center mb-3">
<p>Du willst dein eigenes Open-Source-Projekt umsetzen, um deine digitale Souveränität zurückzuerlangen? Gerne stehe
ich dir dafür persönlich mit meiner Firma zur Seite. Schau gerne auf <a href="https://ossrox.org" target="_blank">ossrox.org</a>
vorbei oder schreib mir eine Nachricht.</p>
<a href="https://ossrox.org" target="_blank">
<img src="/img/ossrox.svg" alt="Ossrox" width="250px">
</a>
</div>

View file

@ -1,11 +1,9 @@
--- ---
layout: base.njk layout: service.njk
key: matrix key: matrix
title: Matrix title: Matrix
--- ---
# <i class="i-comments"></i> Matrix
[Matrix](https://matrix.org) ist eine moderne, quelloffene Software für dezentrale Kommunikation (wie E-Mail). 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 bietet von Haus aus Sprach- und Videoanrufe, inklusive Ende-zu-Ende-Verschlüsselung und vieles mehr. Das Entscheidende
ist, dass es nicht den einen Matrix-Server gibt, den alle Nutzer:innen verwenden müssen, wie das beispielsweise bei ist, dass es nicht den einen Matrix-Server gibt, den alle Nutzer:innen verwenden müssen, wie das beispielsweise bei
@ -16,23 +14,9 @@ erstellen und trotzdem mit allen Matrix-Nutzern:innen kommunizieren, nicht nur m
verschickten Nachrichten werden so nur auf den beteiligten Servern gespeichert. Auch die Anrufe laufen nur über die verschickten Nachrichten werden so nur auf den beteiligten Servern gespeichert. Auch die Anrufe laufen nur über die
beteiligten Server. beteiligten Server.
__Seit Anfang 2020 betreibe ich einen öffentlichen Matrix-Server: [matrix.sp-codes.de](https://matrix.sp-codes.de/) und eine öffentliche Element-Web Instanz: [chat.sp-codes.de](https://chat.sp-codes.de/)__
Die Serverregeln kannst du gerne [hier](https://matrix.sp-codes.de/_matrix/consent) nachlesen. Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus. Ich freue mich auf Die Serverregeln kannst du gerne [hier](https://matrix.sp-codes.de/_matrix/consent) nachlesen. Melde dich gerne auf meinem Server an oder suche dir einen aus den unten verlinkten Listen heraus. Ich freue mich auf
deine Nachricht an [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de). deine Nachricht an [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de).
<div class="text-center mb-3">
<a class="card d-inline-block font-weight-bold" target="_blank" href="https://chat.sp-codes.de/#/register">Jetzt registrieren</a>
</div>
Wenn du einen eigenen Matrix-Server für dich, deine Familie oder deine Firma betreiben willst, unterstütze ich dich gerne mit meiner Firma <a href="https://ossrox.org" target="_blank">Ossrox</a> damit. Schau dir gerne unser Angebot dazu auf unserer Webseite an oder schreib mir eine Nachricht dazu.
<div class="text-center mb-3">
<a href="https://ossrox.org/store/matrix" target="_blank">
<img class="ossrox" src="/img/ossrox.svg" alt="Ossrox">
</a>
</div>
## Einstieg ## Einstieg
Auf meinem Blog findest du eine Artikelserie für einen einfachen Einstieg in Matrix: Auf meinem Blog findest du eine Artikelserie für einen einfachen Einstieg in Matrix:
@ -73,9 +57,8 @@ Hier möchte ich ein paar Gründe nennen, warum ich Matrix nutze und vielen ande
* [Verschiedene Apps](https://matrix.org/clients) * [Verschiedene Apps](https://matrix.org/clients)
* [Liste öffentlicher Räume](https://view.matrix.org/) * [Liste öffentlicher Räume](https://view.matrix.org/)
* Listen mit öffentlichen Matrix-Servern * Listen mit öffentlichen Matrix-Servern
* [hello-matrix.net](https://www.hello-matrix.net/public_servers.php) * [joinmatrix.org](https://joinmatrix.org/servers)
* [anchel.nl](https://publiclist.anchel.nl/) * [hello-matrix.net](https://www.hello-matrix.net/public_servers.php)
* [the-federation.info](https://the-federation.info/protocol/matrix) * [the-federation.info](https://the-federation.info/protocol/matrix)
* [FossMessenger](https://fediverse.blog/~/FossMessenger/matrix-server)
* [Matrix FAQ](https://matrix.org/faq/) * [Matrix FAQ](https://matrix.org/faq/)
* [Account umziehen](https://ems.element.io/tools/matrix-migration) * [Account umziehen](https://ems.element.io/tools/matrix-migration)

View file

@ -15,6 +15,11 @@ eleventyNavigation:
On this site you will find information about me and an overview of the services I provide. Feel free On this site you will find information about me and an overview of the services I provide. Feel free
to look around or use the various services. to look around or use the various services.
</p> </p>
<p class="lead text-center mb-2">
If you would like to find out more about me, please visit my personal website:
<a href="https://samuel-philipp.de">samuel-philipp.de</a>. There you will find my CV and other interests of
mine.
</p>
<p class="lead text-center mb-2"> <p class="lead text-center mb-2">
Since April 2022 I also offer professional hosting of open source tools for companies, private persons and Since April 2022 I also offer professional hosting of open source tools for companies, private persons and
other organizations with my company <a href="https://ossrox.org" target="_blank">Ossrox</a>. If you are other organizations with my company <a href="https://ossrox.org" target="_blank">Ossrox</a>. If you are

View file

@ -3,9 +3,8 @@ layout: base.njk
key: matrix key: matrix
title: Matrix title: Matrix
--- ---
# <i class="i-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. [Matrix](https://matrix.org) 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.
Users can choose a public server or create their own and still communicate with all Matrix users, not just those on their own server. The messages are only stored on the participating servers. Calls also go only through the participating servers. Users can choose a public server or create their own and still communicate with all Matrix users, not just those on their own server. The messages are only stored on the participating servers. Calls also go only through the participating servers.
@ -59,9 +58,8 @@ Here I want to give some reasons why I use Matrix and prefer it over many other
* [Various Apps](https://matrix.org/clients) * [Various Apps](https://matrix.org/clients)
* [List of public rooms](https://view.matrix.org/) * [List of public rooms](https://view.matrix.org/)
* Lists with public Matrix servers * Lists with public Matrix servers
* [joinmatrix.org](https://joinmatrix.org/servers)
* [hello-matrix.net](https://www.hello-matrix.net/public_servers.php) * [hello-matrix.net](https://www.hello-matrix.net/public_servers.php)
* [anchel.nl](https://publiclist.anchel.nl/)
* [the-federation.info](https://the-federation.info/protocol/matrix) * [the-federation.info](https://the-federation.info/protocol/matrix)
* [FossMessenger](https://fediverse.blog/~/FossMessenger/matrix-server)
* [Matrix FAQ](https://matrix.org/faq/) * [Matrix FAQ](https://matrix.org/faq/)
* [Migrate Account](https://ems.element.io/tools/matrix-migration) * [Migrate Account](https://ems.element.io/tools/matrix-migration)

72
src/img/ossrox-white.svg Normal file
View file

@ -0,0 +1,72 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="1053.0649"
height="192"
viewBox="0 0 278.62343 50.800001"
version="1.1"
id="svg5"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
sodipodi:docname="ossrox-white.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#ffffff"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.60399831"
inkscape:cx="629.14083"
inkscape:cy="182.11971"
inkscape:window-width="1920"
inkscape:window-height="1043"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="text1640"
units="px" />
<defs
id="defs2" />
<g
inkscape:label="Ebene 1"
inkscape:groupmode="layer"
id="layer1">
<g
aria-label="Ossrox"
id="text1640"
style="font-size:10.5833px;line-height:1.25;font-family:Orbitron;-inkscape-font-specification:'Orbitron, Normal';stroke-width:0.264583">
<path
d="m 8.4666724,50.800034 q -2.3283349,0 -4.3038918,-1.12889 Q 2.2577793,48.542254 1.1288896,46.637253 0,44.661696 0,42.333361 V 8.4666718 Q 0,6.1383369 1.1288896,4.2333356 2.2577793,2.2577787 4.1627806,1.128889 6.1383375,-6.1035156e-7 8.4666724,-6.1035156e-7 H 42.333362 q 2.328335,0 4.233336,1.12888961035156 1.975557,1.1288897 3.104447,3.1044466 1.128889,1.9050013 1.128889,4.2333362 V 42.333361 q 0,2.328335 -1.128889,4.303892 -1.12889,1.905001 -3.104447,3.033891 -1.905001,1.12889 -4.233336,1.12889 z m 0,-5.715004 H 42.333362 q 1.128889,0 1.905001,-0.776112 0.846667,-0.846667 0.846667,-1.975557 V 8.4666718 q 0,-1.1288897 -0.846667,-1.9050013 Q 43.462251,5.7150032 42.333362,5.7150032 H 8.4666724 q -1.1288897,0 -1.9755569,0.8466673 Q 5.7150038,7.3377821 5.7150038,8.4666718 V 42.333361 q 0,1.12889 0.7761117,1.975557 0.8466672,0.776112 1.9755569,0.776112 z"
style="font-size:70.5556px;fill:#ffffff;fill-opacity:1"
id="path25504" />
<path
d="m 66.53387,50.800034 q -2.328335,0 -4.303892,-1.12889 -1.905001,-1.199445 -3.104447,-3.104447 -1.128889,-1.975556 -1.128889,-4.303891 v -0.564445 h 5.785559 v 0.564445 q 0,1.128889 0.776112,1.975556 0.846667,0.776112 1.975557,0.776112 h 24.553349 q 1.12889,0 1.905002,-0.776112 0.846667,-0.846667 0.846667,-1.975556 v -6.279449 q 0,-1.12889 -0.846667,-1.905001 -0.776112,-0.846668 -1.905002,-0.846668 H 66.53387 q -2.328335,0 -4.303892,-1.128889 -1.905001,-1.199445 -3.104447,-3.104447 -1.128889,-1.975557 -1.128889,-4.303892 v -6.279448 q 0,-2.328335 1.128889,-4.233336 1.199446,-1.975557 3.104447,-3.104447 1.975557,-1.1994452 4.303892,-1.1994452 h 24.553349 q 2.398891,0 4.303892,1.1994452 1.975557,1.12889 3.104447,3.104447 1.199445,1.905001 1.199445,4.233336 v 0.564445 h -5.856115 v -0.564445 q 0,-1.12889 -0.846667,-1.905002 -0.776112,-0.846667 -1.905002,-0.846667 H 66.53387 q -1.12889,0 -1.975557,0.846667 -0.776112,0.776112 -0.776112,1.905002 v 6.279448 q 0,1.12889 0.776112,1.975557 0.846667,0.776112 1.975557,0.776112 h 24.553349 q 2.398891,0 4.303892,1.199445 1.975557,1.12889 3.104447,3.104447 1.199445,1.905001 1.199445,4.233336 v 6.279449 q 0,2.328335 -1.199445,4.303891 -1.12889,1.905002 -3.104447,3.104447 -1.905001,1.12889 -4.303892,1.12889 H 66.53387 Z"
style="font-size:70.5556px;fill:#ffffff;fill-opacity:1"
id="path25506" />
<path
d="m 114.93494,50.800034 q -2.32834,0 -4.30389,-1.12889 -1.905,-1.199445 -3.10445,-3.104447 -1.12889,-1.975556 -1.12889,-4.303891 v -0.564445 h 5.78556 v 0.564445 q 0,1.128889 0.77611,1.975556 0.84667,0.776112 1.97556,0.776112 h 24.55335 q 1.12889,0 1.905,-0.776112 0.84667,-0.846667 0.84667,-1.975556 v -6.279449 q 0,-1.12889 -0.84667,-1.905001 -0.77611,-0.846668 -1.905,-0.846668 h -24.55335 q -2.32834,0 -4.30389,-1.128889 -1.905,-1.199445 -3.10445,-3.104447 -1.12889,-1.975557 -1.12889,-4.303892 v -6.279448 q 0,-2.328335 1.12889,-4.233336 1.19945,-1.975557 3.10445,-3.104447 1.97555,-1.1994452 4.30389,-1.1994452 h 24.55335 q 2.39889,0 4.30389,1.1994452 1.97556,1.12889 3.10445,3.104447 1.19944,1.905001 1.19944,4.233336 v 0.564445 h -5.85611 v -0.564445 q 0,-1.12889 -0.84667,-1.905002 -0.77611,-0.846667 -1.905,-0.846667 h -24.55335 q -1.12889,0 -1.97556,0.846667 -0.77611,0.776112 -0.77611,1.905002 v 6.279448 q 0,1.12889 0.77611,1.975557 0.84667,0.776112 1.97556,0.776112 h 24.55335 q 2.39889,0 4.30389,1.199445 1.97556,1.12889 3.10445,3.104447 1.19944,1.905001 1.19944,4.233336 v 6.279449 q 0,2.328335 -1.19944,4.303891 -1.12889,1.905002 -3.10445,3.104447 -1.905,1.12889 -4.30389,1.12889 h -24.55335 z"
style="font-size:70.5556px;fill:#ffffff;fill-opacity:1"
id="path25508" />
<path
d="m 155.081,50.800034 v 0 -32.385022 q 0,-2.328335 1.12889,-4.233336 1.19944,-1.975557 3.10444,-3.104447 1.97556,-1.1994452 4.30389,-1.1994452 h 23.00113 v 5.7855592 h -23.00113 q -1.12889,0 -1.97555,0.846667 -0.77611,0.776112 -0.77611,1.905002 v 32.385022 z"
style="font-size:70.5556px;fill:#ffffff;fill-opacity:1"
id="path25510" />
<path
d="m 199.31921,50.800034 q -2.32833,0 -4.30389,-1.12889 -1.905,-1.199445 -3.10444,-3.104447 -1.12889,-1.975556 -1.12889,-4.303891 V 18.415012 q 0,-2.328335 1.12889,-4.233336 1.19944,-1.975557 3.10444,-3.104447 1.97556,-1.1994452 4.30389,-1.1994452 h 24.55335 q 2.39889,0 4.3039,1.1994452 1.97555,1.12889 3.10444,3.104447 1.19945,1.905001 1.19945,4.233336 v 23.847794 q 0,2.328335 -1.19945,4.303891 -1.12889,1.905002 -3.10444,3.104447 -1.90501,1.12889 -4.3039,1.12889 h -24.55335 z m 0,-5.78556 h 24.55335 q 1.12889,0 1.905,-0.776112 0.84667,-0.846667 0.84667,-1.975556 V 18.415012 q 0,-1.12889 -0.84667,-1.905002 -0.77611,-0.846667 -1.905,-0.846667 h -24.55335 q -1.12889,0 -1.97555,0.846667 -0.77612,0.776112 -0.77612,1.905002 v 23.847794 q 0,1.128889 0.77612,1.975556 0.84666,0.776112 1.97555,0.776112 z"
style="font-size:70.5556px;fill:#ffffff;fill-opacity:1"
id="path25512" />
<path
d="m 236.78408,50.800034 v 0 -0.07056 L 253.85854,29.986131 236.78408,9.9483394 v -0.070556 h 7.62001 L 257.66854,25.400016 271.00355,9.8777838 h 7.54945 v 0.070556 l -17.07446,20.0377916 17.14501,20.743347 v 0.07056 h -7.62 l -13.33501,-16.3689 -13.26445,16.3689 z"
style="font-size:70.5556px;fill:#ffffff;fill-opacity:1"
id="path25514" />
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
src/img/samuel-1024-p.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/img/samuel-1024.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.3 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.3 KiB

View file

@ -12,6 +12,7 @@ $flag-icon-path: '../img';
@import "bootstrap/scss/bootstrap-grid"; @import "bootstrap/scss/bootstrap-grid";
@import "bootstrap/scss/bootstrap-reboot"; @import "bootstrap/scss/bootstrap-reboot";
@import "bootstrap/scss/bootstrap-utilities"; @import "bootstrap/scss/bootstrap-utilities";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/badge"; @import "bootstrap/scss/badge";
@import "bootstrap/scss/functions"; @import "bootstrap/scss/functions";
@import "bootstrap/scss/variables"; @import "bootstrap/scss/variables";
@ -24,7 +25,8 @@ html, body {
} }
body { body {
background-image: url("../img/bg.jpg"); background-color: #222;
background-image: url("../img/bg2.jpg");
color: #fff; color: #fff;
min-height: 100vh; min-height: 100vh;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@ -34,6 +36,10 @@ ul {
list-style: disclosure-closed; list-style: disclosure-closed;
} }
p {
text-align: justify;
}
.content { .content {
flex: 1; flex: 1;
padding: 2%; padding: 2%;
@ -55,26 +61,65 @@ a {
} }
} }
.fill-col-inner {
display: flex;
align-items: center;
}
.logo { .logo {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
max-width: 128px; max-width: 128px;
max-height: 128px; max-height: 128px;
transition: transform .5s ease-in-out;
&:hover { &.fixed {
transform: rotate(360deg); width: 128px;
height: 128px;
}
&.huge {
width: 256px;
height: 256px;
max-width: 256px;
max-height: 256px;
}
&.mini.fixed {
width: 32px;
height: 32px;
}
}
@media (max-width: 767.98px) {
.logo {
max-width: 96px;
max-height: 96px;
}
}
.me-profile {
display: block;
height: 256px;
width: 256px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
img {
width: 100%;
height: 100%;
} }
} }
.nav { .nav {
display: flex; display: flex;
background-color: #111;
justify-content: start; justify-content: start;
flex-wrap: wrap; flex-wrap: wrap;
padding: .5rem; padding: 1rem 1.5rem;
.toggle { .toggle {
padding: .5rem; padding: 1rem 1.5rem;
display: none; display: none;
} }
@ -84,10 +129,11 @@ a {
.items { .items {
display: flex; display: flex;
} align-items: center;
.lang-large { .item {
display: flex; display: flex;
}
} }
} }
@ -105,6 +151,10 @@ a {
} }
} }
.logo {
display: none;
}
.items { .items {
display: none; display: none;
@ -113,7 +163,7 @@ a {
a { a {
display: block; display: block;
padding: 0.5rem; padding: .75rem 1.5rem;
} }
} }
} }
@ -123,7 +173,7 @@ a {
} }
.lang-large { .lang-large {
display: none; display: none !important;
} }
} }
} }
@ -151,14 +201,6 @@ a {
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
} }
.heading {
text-align: center;
a {
color: #fff;
}
}
.flex-grow { .flex-grow {
flex: 1; flex: 1;
} }
@ -264,13 +306,6 @@ pre {
} }
} }
@media (max-width: 767.98px) {
.logo {
max-width: 96px;
max-height: 96px;
}
}
.table-container { .table-container {
overflow-y: auto; overflow-y: auto;
} }
@ -290,15 +325,6 @@ table.table {
} }
} }
.ossrox {
background-color: #efefef;
border: 2px solid #000;
box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
padding: 5px;
margin: 5px;
max-width: 250px;
}
.article-content { .article-content {
img { img {
display: block; display: block;
@ -342,3 +368,63 @@ table.table {
border-bottom: none; border-bottom: none;
} }
} }
.side-banner {
float: right;
width: 30%;
margin-left: 1rem;
margin-bottom: 1rem;
}
.ossrox-logo {
max-width: 250px;
}
.tab-card.ossrox {
.title {
background-color: #006269;
color: #fff;
padding: .75rem;
text-align: center;
}
.card {
}
img {
max-width: 250px;
max-height: 50px;
}
}
//.ossrox {
// background-color: #efefef;
// border: 2px solid #000;
// box-shadow: 0 0 0 2px rgba(255, 255, 255, .7);
// padding: 5px;
// margin: 5px;
// max-width: 250px;
//}
@media (prefers-color-scheme: light) {
body {
background-color: #ddd;
background-image: url("../img/bgl.jpg");
color: #000;
}
.me-profile {
border: 1px solid #000;
}
.nav {
background-color: #eee;
}
.menu {
a {
color: #000;
}
}
}