Merge pull request #555 from itk-dev/feature/early_inclusion_dialogue_navigation_underline

Add underline to active state in nav

Author: martinyde

CHANGELOG.md

@@ -6,6 +6,9 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+* [PR-555](https://github.com/itk-dev/deltag.aarhus.dk/pull/555)
+  * Add underline to active navigation.
+  * Adjust header witdt
 * [PR-556](https://github.com/itk-dev/deltag.aarhus.dk/pull/556)
   * Change OIDC container
 

web/themes/custom/hoeringsportal/assets/css/module/_header-v2.scss

@@ -37,6 +37,14 @@
       }
     }
 
+    @include media-breakpoint-up(xxl) {
+      &.with-image {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 1400px;
+      }
+    }
+
     .type {
       color: $petroleum;
     }

web/themes/custom/hoeringsportal/assets/css/module/_nav.scss

@@ -45,12 +45,23 @@ nav.navbar {
     }
 
     &.active {
-      color: $gray-700;
+      color: $primary;
+      text-decoration: underline;
+      text-underline-offset: 19px;
+      text-decoration-thickness: 5px;
+      transition: text-underline-offset 200ms ease-in;
+
+      @include media-breakpoint-down(md) {
+        text-underline-offset: 9px;
+        text-decoration-thickness: 3px;
+      }
     }
 
     @include media-breakpoint-up(md) {
       .scrolled & {
         padding-top: $spacer * 0.25;
+        text-underline-offset: 14px;
+        transition: text-underline-offset 200ms ease-out;
       }
     }
   }

web/themes/custom/hoeringsportal/templates/components/header-default.html.twig

@@ -18,7 +18,7 @@
   {% endblock %}
   {% block header_text_box %}
     <div class="content-wrapper position-relative {{ images ? 'with-image' : '' }} {{ type ?? 'type-default' }}">
-      <div class="container">
+      <div class="container px-md-5">
         {% if category %}
           <div class="small fw-semibold text-background-match">{{ category }}</div>
         {% endif %}