apex: updated styling to use latest menu structure

ESA-APEx · Jan 13, 2025 · 873de55 · 873de55
1 parent 52ebad6
commit 873de55
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 28 deletions.
diff --git a/themes/apex/public/index.html b/themes/apex/public/index.html
@@ -38,7 +38,7 @@
 
   <div>
     <div class="c-header__esa">
-      <img src="/assets//img/logos/logo-esa.svg" alt="ESA">
+      <img src="/assets/img/logos/logo-esa.svg" alt="ESA">
     </div>
   </div>
 </div>
@@ -77,8 +77,8 @@ <h5 class="visually-hidden" id="block-vitotheme-main-navigation-menu">Main navig
 
 
               <li class="has-children">
-                <a href="https://apex.staging.vito.be/project-tools" class="menu-link menu-bar-link"
-                   data-drupal-link-system-path="node/4">Project Tools</a>
+                <a href="https://apex.staging.vito.be/project-environments" class="menu-link menu-bar-link"
+                   data-drupal-link-system-path="node/4">Project Environments</a>
 
                 <div class="c-sub-menu js-mega-menu">
                   <div class="c-sub-menu__right">
@@ -156,9 +156,9 @@ <h6>
 
 
                         <h6>
-                          <a href="https://apex.staging.vito.be/services/collaborative-environments"
+                          <a href="https://apex.staging.vito.be/services/collaborative-workspaces"
                              class="stretched-link">
-                            Collaborative Environments
+                            Collaborative Workspaces
                           </a>
                         </h6>
                       </div>
@@ -244,7 +244,6 @@ <h6>
   </div>
 </div>
 
-
 <aside class="c-sidebar js-hamburger-menu">
   <div class="container">
     <div class="c-sidebar__inner">
@@ -261,8 +260,8 @@ <h5 class="visually-hidden" id="block-vitotheme-mainnavigation-2-menu">Main navi
                 Services</a>
             </li>
             <li>
-              <a href="https://apex.staging.vito.be/project-tools" data-drupal-link-system-path="node/4">Project
-                Tools</a>
+              <a href="https://apex.staging.vito.be/project-environments" data-drupal-link-system-path="node/4">Project
+                Environments</a>
             </li>
             <li>
               <a href="">Resources</a>
@@ -415,6 +414,10 @@ <h5 class="visually-hidden" id="block-vitotheme-footer-2-menu">Footer</h5>
                 <a href="https://apex.staging.vito.be/privacy-policy" data-drupal-link-system-path="node/27">Privacy
                   Policy</a>
               </li>
+              <li>
+                <a href="https://apex.staging.vito.be/cookie-policy" data-drupal-link-system-path="node/37">Cookie
+                  Policy</a>
+              </li>
               <li>
                 <a href="https://apex.staging.vito.be/terms-conditions" data-drupal-link-system-path="node/28">Terms
                   &amp; Conditions</a>

diff --git a/themes/apex/src/theme/components/_header.scss b/themes/apex/src/theme/components/_header.scss
@@ -116,11 +116,6 @@
   @include media-breakpoint-up(lg) {
     padding-block: 0;
   }
-
-  a:hover {
-    text-decoration: none;
-    color: var(--white);
-  }
 }
 
 .c-header__logo {
@@ -135,6 +130,11 @@
   @include media-breakpoint-up(lg) {
     font-size: var(--text-3xl);
   }
+
+  &:hover {
+    text-decoration: none;
+    color: var(--white);
+  }
 }
 
 .c-header__logo span {
@@ -161,7 +161,7 @@
     margin: 0;
   }
 
-  a {
+  a.menu-link {
     position: relative;
     display: block;
     padding-inline: 1rem;
@@ -172,10 +172,6 @@
     text-decoration: none;
   }
 
-  li {
-    opacity: 1 !important;
-  }
-
   li.has-children > a {
     position: relative;
     padding-inline-end: 1.25rem;

diff --git a/themes/apex/src/theme/components/_page.scss b/themes/apex/src/theme/components/_page.scss
@@ -1,6 +1,10 @@
 
 body {
   background-color: var(--darkblue);
+  padding-top: 16px !important;
+  padding-left: 12px !important;
+  padding-right: 12px !important;
+  line-height: var(--bs-body-line-height) !important;
 }
 
 body, h1, h2, h3, h4, h5, h6 {
@@ -47,3 +51,8 @@ body, h1, h2, h3, h4, h5, h6 {
 .visually-hidden {
   display: none;
 }
+
+div.container {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
diff --git a/themes/apex/src/theme/components/_sub-menu.scss b/themes/apex/src/theme/components/_sub-menu.scss
@@ -14,11 +14,7 @@
   color: var(--darkblue);
   box-shadow: .15rem .15rem 1.6rem .5rem rgba(0, 0, 0, 0.15);
   overflow: hidden;
-  z-index: 999;
-
-  h1, h2, h3, h4, h5, h6 {
-    color: var(--darkblue) !important;
-  }
+  z-index: 99;
 
   li.has-children:hover > & {
     transform: none;
@@ -108,8 +104,6 @@ li.has-children:hover > .c-sub-menu.c-sub-menu--basic {
 .c-sub-menu__all a {
   color: var(--darkblue) !important;
   text-decoration-color: var(--lightblue);
-  padding: 0 !important;
-  text-decoration: underline;
 }
 
 .c-sub-menu__topics {
@@ -132,6 +126,7 @@ li.has-children:hover > .c-sub-menu.c-sub-menu--basic {
   display: grid;
   background-color: var(--white);
   padding: 4.5rem 2.5rem;
+  width:100%;
 }
 
 .c-sub-menu__content {
@@ -199,8 +194,8 @@ li.has-children:hover > .c-sub-menu.c-sub-menu--basic {
     text-decoration:none;
     position: static;
     padding: 0;
-    color: inherit;
     font-size: 1.125rem;
+    font-weight: 100;
   }
 
   p {

diff --git a/themes/apex/src/theme/variables.scss b/themes/apex/src/theme/variables.scss
@@ -42,12 +42,14 @@ $logo-image-height: 100px;
   --text-2xl: 1.75rem;
   --text-xl: 1.5rem;
   --text-lg: 1.25rem;
-  --text-base: 1rem;
+  --text-base: 1.1rem;
   --text-sm: 0.875rem;
   --text-xs: 0.75rem;
   --font-family: 'ESANotes', Arial, sans-serif;
 
   --bs-heading-color: #003247 !important;
+  --bs-body-line-height: 1.25 !important;
+
 
 }
 

diff --git a/themes/apex/version.txt b/themes/apex/version.txt
@@ -1 +1 @@
-2.0.8
+2.1.0