scss/main.scss

@@ -40,7 +40,7 @@ a {
   color: #fea500;
 
   &:hover {
-    color: darken(#fea500, .5);
+    color: #d78c00;
   }
 }
 
@@ -121,6 +121,24 @@ a {
     top: 0;
     bottom: 0;
     right: 0;
+    color: #fea500 !important;
+
+    &[href]:hover {
+      color: #d78c00 !important;
+    }
+  }
+
+  .beta {
+    position: absolute;
+    top: 1rem;
+    right: 0;
+    font-weight: bold;
+    background-color: #fea500;
+    color: #000000;
+    padding: .5rem 1rem;
+    border-radius: 10px;
+    transform: rotate(20deg);
+    box-shadow: -1px 8px 5px rgba(0, 0, 0, .7);
   }
 
   .inner {
@@ -148,6 +166,11 @@ a {
       h2 {
         margin-left: 0.5rem;
       }
+
+      .beta {
+        top: 0;
+        right: -1rem;
+      }
     }
   }
 }

sites/_data/services.json

@@ -51,10 +51,21 @@
   {
     "id": "firefox-sync",
     "name": "Firefox Sync",
-    "icon": "fab fa-firefox",
+    "icon": "fab fa-firefox-browser",
     "summary": {
       "de": "Ein Service um Firefox Einstellungen, Lesezeichen, offene Tabs und vieles mehr über verschiedene Geräte zu synchronisieren.",
       "en": "A service to sync Firefox settings, bookmarks, open tabs and much more between multiple devices."
     }
+  },
+  {
+    "id": "jitsi",
+    "name": "Jitsi Meet",
+    "icon": "fas fa-users",
+    "url": "https://jitsi.sp-codes.de",
+    "beta": true,
+    "summary": {
+      "de": "Eine sichere, einfache und skalierbare Plattform für Videokonferenzen.",
+      "en": "A secure, simple and scalable platform for video conferencing."
+    }
   }
 ]

sites/_includes/layouts/services.njk

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

sites/_includes/services-extended.html

@@ -1,7 +1,10 @@
 {%- for service in services %}
 <div class="col-12 col-md-6 col-lg-4 p-3">
     <div class="service">
-        <a class="link" href="/{{locale}}/services/{{service.id}}"></a>
+        <a class="link" {% if service.beta != true %} href="/{{locale}}/services/{{service.id}}" {% endif %}></a>
+        {% if service.beta == true %}
+          <div class="beta">TEST-PHASE</div>
+        {% endif %}
         <div class="inner">
             <i class="{{service.icon}} fa-4x"></i>
             <h2 class="mt-2">{{service.name}}{% if service.url %} <a href="{{service.url}}" target="_blank"><i

sites/_includes/services-simple.html

@@ -1,7 +1,10 @@
 {%- for service in services %}
 <div class="col-12 col-md-6 p-3">
     <div class="service flat">
-        <a class="link inner" href="/{{locale}}/services/{{service.id}}">
+        <a class="link inner" href="/{{locale}}/services{% if service.beta != true %}/{{service.id}}{% endif %}">
+            {% if service.beta == true %}
+            <div class="beta">TEST-PHASE</div>
+            {% endif %}
             <i class="{{service.icon}} fa-fw fa-2x"></i>
             <h2 class="mt-2">{{service.name}}</h2>
         </a>

sites/de/index.html

@@ -20,7 +20,7 @@ eleventyNavigation:
 <div class="row justify-content-center py-4 border-top">
     <div class="col-lg-8 col-md-10 col-12">
         <h1 class="heading"><a href="/{{locale}}/services">Dienste</a></h1>
-        <div class="row">
+        <div class="row justify-content-center">
             {% include services-simple.html %}
         </div>
     </div>

sites/en/index.html

@@ -20,7 +20,7 @@ eleventyNavigation:
 <div class="row justify-content-center py-4 border-top">
     <div class="col-lg-8 col-md-10 col-12">
         <h1 class="heading"><a href="/{{locale}}/services">Services</a></h1>
-        <div class="row">
+        <div class="row justify-content-center">
             {% include services-simple.html %}
         </div>
     </div>