_includes/header.css

@@ -30,7 +30,7 @@ header {
   margin-left: 1.9rem;
 }
 
-.nav-item {
+#mainNav a {
   position: relative;
   font-size: 16px;
   font-family: Aileron;
@@ -41,7 +41,7 @@ header {
   text-decoration: none;
 }
 
-.nav-item::after {
+#mainNav a::after {
   content: "";
   position: absolute;
   background: var(--color-primary);
@@ -53,26 +53,7 @@ header {
   transition: opacity .3s ease-out;
 }
 
-.nav-item:hover::after,
+#mainNav a:hover::after,
-.nav-item.active::after {
+#mainNav .nav-active a::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,14 +7,10 @@
       {% set navPages = collections.mainNav | pageLang | eleventyNavigation %}
       <ul>
         {%- for entry in navPages -%}
-        <li>
+        <li{% if entry.url == page.url %} class="nav-active"{% endif %}>
-          <a class="nav-item {%- if entry.url == page.url %} active{% endif %}"
+          <a href="{{ entry.url }}">{{ entry.title }}</a>
-            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,6 +66,5 @@ p {
   --page-width: 1280px;
   --color-text: #495057;
   --color-primary: {{ eseColor }};
-  --color-livestream-active: #fff;
 }