add stream button

_includes/header.css

@@ -30,7 +30,7 @@ header {
   margin-left: 1.9rem;
 }
 
-#mainNav a {
+.nav-item {
   position: relative;
   font-size: 16px;
   font-family: Aileron;
@@ -41,7 +41,7 @@ header {
   text-decoration: none;
 }
 
-#mainNav a::after {
+.nav-item::after {
   content: "";
   position: absolute;
   background: var(--color-primary);
@@ -53,7 +53,26 @@ header {
   transition: opacity .3s ease-out;
 }
 
-#mainNav a:hover::after,
+.nav-item:hover::after,
-#mainNav .nav-active a::after {
+.nav-item.active::after {
   opacity: 1;
 }
+
+.nav-item-stream {
+  padding: .75rem 1.4rem;
+  border: 2px solid var(--color-primary);
+  border-radius: 3rem;
+  color: var(--color-primary);
+  font-family: Aileron;
+  font-weight: 500;
+  letter-spacing: 2px;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition: .2s ease-out;
+  transition-property: color, background-color;
+}
+
+.nav-item-stream:hover {
+  color: var(--color-livestream-active);
+  background-color: var(--color-primary);
+}

_includes/header.njk

@@ -7,10 +7,14 @@
       {% set navPages = collections.mainNav | pageLang | eleventyNavigation %}
       <ul>
         {%- for entry in navPages -%}
-        <li{% if entry.url == page.url %} class="nav-active"{% endif %}>
+        <li>
-          <a href="{{ entry.url }}">{{ entry.title }}</a>
+          <a class="nav-item {%- if entry.url == page.url %} active{% endif %}"
+            href="{{ entry.url }}">{{ entry.title }}</a>
         </li>
         {%- endfor %}
+        <li>
+          <a class="nav-item-stream" href="https://stream.ifsr.de/" target="_blank" rel="noopener">Stream</a>
+        </li>
       </ul>
     </nav>
   </div>

_includes/page.css

@@ -66,5 +66,6 @@ p {
   --page-width: 1280px;
   --color-text: #495057;
   --color-primary: {{ eseColor }};
+  --color-livestream-active: #fff;
 }