From 26c699ca92cea4e22199d604da221f668fcece39 Mon Sep 17 00:00:00 2001
From: gerjanvangeest <Gerjan.van.Geest@ing.com>
Date: Tue, 1 Jul 2025 17:01:08 +0200
Subject: [PATCH] chore: update portal styling

---
 public/styles/lion/layout.css        |  21 +-
 public/styles/lion/markdown.css      |   3 +-
 public/styles/lion/variables.css     |  87 +++------
 src/components/ui-portal-footer.js   |   8 +-
 src/components/ui-portal-main-nav.js | 280 ++++++++++++++++-----------
 src/pages/index.astro                |   2 +-
 6 files changed, 216 insertions(+), 185 deletions(-)

diff --git a/public/styles/lion/layout.css b/public/styles/lion/layout.css
index 65a1595dd..e942ac682 100644
--- a/public/styles/lion/layout.css
+++ b/public/styles/lion/layout.css
@@ -11,7 +11,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 16px;
-  color: var(--text-color);
+  color: var(--primary-text-color);
   background-color: var(--page-background);
   display: flex;
   flex-flow: column;
@@ -149,14 +149,14 @@ body[data-layout='layout-home'] #main-header {
 
 #main-header a {
   text-decoration: none;
-  color: var(--text-color);
+  color: var(--primary-text-color);
   transition: color 0.3s ease-in-out;
   font-weight: bold;
   order: 2;
 }
 
 #main-header a:hover {
-  color: var(--secondary-color-lighter);
+  color: var(--primary-color);
 }
 
 body[data-layout='layout-home'] #main-header a:hover {
@@ -274,7 +274,7 @@ rocket-navigation .light-dark-switch::part(label) {
 
 rocket-navigation a {
   text-decoration: none;
-  color: var(--text-color);
+  color: var(--primary-text-color);
 }
 
 rocket-navigation a:hover {
@@ -286,7 +286,7 @@ rocket-navigation > ul > li > ul li.current ul li.anchor.current::before {
   content: '';
   height: 1.6em;
   width: 3px;
-  background: var(--secondary-color);
+  background: var(--primary-color);
   position: absolute;
   left: 0;
   margin-top: -2px;
@@ -358,7 +358,7 @@ rocket-navigation > ul {
 
   /* same as header */
   box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
-  color: var(--text-color);
+  color: var(--primary-text-color);
   font-weight: bold;
 }
 
@@ -511,6 +511,7 @@ main > * {
   font-weight: bold;
   vertical-align: middle;
   padding: 8px 24px;
+  border: 1px solid var(--primary-color);
   border-radius: 24px;
   background: var(--contrast-color-dark);
   color: var(--contrast-color-light, #fff);
@@ -568,7 +569,7 @@ body[data-layout='layout-home'] section {
 body[data-layout='layout-home'] .banner {
   display: flex;
   flex-direction: column;
-  background-color: var(--secondary-color);
+  background-color: var(--primary-color);
   padding-block-start: 96px;
 }
 
@@ -580,7 +581,7 @@ body[data-layout='layout-home'] .page-title--container {
 }
 
 body[data-layout='layout-home'] .page-title {
-  color: var(--text-color);
+  color: var(--primary-text-color);
   font-size: 64px;
 }
 
@@ -596,10 +597,6 @@ body[data-layout='layout-home'] .page-logo {
   align-self: flex-end;
 }
 
-html.dark body[data-layout='layout-home'] .page-logo {
-  filter: brightness(0.8);
-}
-
 body[data-layout='layout-home'] .page-title,
 body[data-layout='layout-home'] .reason-header,
 body[data-layout='layout-home'] .page-slogan {
diff --git a/public/styles/lion/markdown.css b/public/styles/lion/markdown.css
index 209076d03..a68dd4c18 100644
--- a/public/styles/lion/markdown.css
+++ b/public/styles/lion/markdown.css
@@ -354,7 +354,6 @@
 .markdown-body h4,
 .markdown-body h5,
 .markdown-body h6 {
-  color: var(--text-color);
   font-weight: 600;
   line-height: 1.25;
   margin-bottom: 1rem;
@@ -367,7 +366,7 @@
 
 .markdown-body h1,
 .markdown-body h2 {
-  border-bottom: 1px solid var(--primary-lines-color);
+  border-bottom: 1px solid #eaecef;
   padding-bottom: 0.3em;
 }
 
diff --git a/public/styles/lion/variables.css b/public/styles/lion/variables.css
index b1352afe6..ed6a42c94 100644
--- a/public/styles/lion/variables.css
+++ b/public/styles/lion/variables.css
@@ -1,18 +1,14 @@
 html {
   /* Base colors */
-  --dandelion-100: #fff6cc;
-  --dandelion-300: #ffe366;
-  --dandelion-500: #ffd100;
-  --dandelion-700: #997d00;
-  --dandelion-900: #332a00;
+  --dandilion-100: #fff6cc;
+  --dandilion-300: #ffe366;
+  --dandilion-500: #ffd100;
+  --dandilion-700: #997d00;
+  --dandilion-900: #332a00;
 
-  --blue-100: #b4c1ff;
-  --blue-300: #8197ff;
   --blue-500: #002eff;
-  --blue-700: #0025cc;
-  --blue-900: #0020b3;
 
-  --green-700: #8bcc00;
+  --green-500: #00ff51;
 
   --black: #080700;
   --white: #ffffff;
@@ -21,33 +17,27 @@ html {
   --gray-300: #b3b3b3;
   --gray-500: #808080;
   --gray-700: #4d4d4d;
-  --gray-800: #282828;
   --gray-900: #1a1a1a;
 
   /* Alias tokens */
-  --primary-color: var(--blue-500);
-  --primary-color-lighter: var(--blue-300);
-  --primary-color-darker: var(--blue-700);
-  --secondary-color: var(--dandelion-500);
-  --secondary-color-lighter: var(--dandelion-300);
-  --secondary-color-darker: var(--dandelion-700);
-  --neutral-color: var(--gray-500);
-  --neutral-color-lightest: var(--gray-100);
-  --neutral-color-lighter: var(--gray-300);
-  --neutral-color-darker: var(--gray-700);
-  --neutral-color-darkest: var(--gray-900);
-  --primary-icon-color: var(--dandelion-900);
-  --primary-lines-color: var(--gray-100);
+  --primary-color: var(--dandilion-500);
+  --secondary-color: var(--blue-500);
+  --primary-color-lighter: var(--dandilion-300);
+  --primary-color-darker: var(--dandilion-700);
+  --primary-text-color: var(--black);
+  --primary-icon-color: var(--dandilion-900);
+  --primary-lines-color: var(--gray-300);
   --primary-text-inverse-color: var(--gray-100);
+  --markdown-link-color: var(--blue-500);
 
   /* Contrast colors */
   --contrast-color-light: var(--white);
-  --contrast-color-dark: var(--dandelion-900);
+  --contrast-color-dark: var(--dandilion-900);
 
   /* background-colors */
   --page-background: var(--white);
   --secondary-background: var(--gray-100);
-  --footer-background: var(--neutral-color-lighter);
+  --footer-background: rgba(0, 0, 0, 0.1);
 
   /* typography */
   --text-color: var(--black);
@@ -57,36 +47,15 @@ html {
     'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace;
 
   /* controls */
-  --switch-unselected-color: var(--neutral-color);
-  --switch-selected-color: var(--green-700);
-
-  --sidebar-tag-background-color: var(--secondary-color);
-  --sidebar-tag-color: var(--text-color);
-
-  /* markdown */
-  --markdown-body: var(--text-color);
-  --markdown-link-color: var(--primary-color);
-  --markdown-octicon-link: var(--primary-color);
-  --markdown-syntax-background-color: var(--neutral-color);
-  --markdown-link-color: var(--primary-color);
-  --markdown-blockquote-color: var(--secondary-color-darker);
+  --switch-unselected-color: var(--gray-500);
+  --switch-selected-color: var(--green-500);
 }
 
 html.dark {
-  --primary-color: var(--blue-100);
-  --primary-color-lighter: var(--blue-300);
-  --primary-color-darker: var(--blue-100);
-  --secondary-color: var(--dandelion-700);
-  --secondary-color-lighter: var(--dandelion-900);
-  --secondary-color-darker: var(--dandelion-500);
-  --neutral-color: var(--gray-700);
-  --neutral-color-lightest: var(--gray-900);
-  --neutral-color-lighter: var(--gray-800);
-  --neutral-color-darker: var(--gray-500);
-  --neutral-color-darkest: var(--gray-300);
-  
-  --text-color: var(--white);
-  --primary-icon-color: var(--dandelion-100);
+  --primary-color: #e63946;
+  --primary-color-lighter: #e25761;
+  --primary-color-darker: #a22831;
+  --primary-text-color: var(--white);
   --primary-text-inverse-color: #2c3e50;
 
   /* Contrast colors */
@@ -94,11 +63,19 @@ html.dark {
   --contrast-color-dark: #1d3557;
 
   /* background-colors */
-  --page-background: var(--gray-700);
-  --footer-background: var(--gray-900);
+  --page-background: #333;
+  --footer-background: #4f4f4f;
+
   /* typography */
   --text-color: white;
 
   /* controls */
   --switch-unselected-color: #808080;
+  --switch-selected-color: #42b983;
+
+  /* markdown */
+  --markdown-octicon-link: white;
+  --markdown-syntax-background-color: #a0a0a0;
+  --markdown-link-color: #fb7881;
+  --markdown-blockquote-color: #c9e3ff;
 }
diff --git a/src/components/ui-portal-footer.js b/src/components/ui-portal-footer.js
index 63c483eb7..9a6488d38 100644
--- a/src/components/ui-portal-footer.js
+++ b/src/components/ui-portal-footer.js
@@ -29,7 +29,7 @@ export class UIPortalFooter extends LitElement {
         #main-footer {
           padding-inline: 96px;
         }
-
+        
         #footer-menu .content-area {
           flex-direction: row;
           text-align: left;
@@ -43,14 +43,10 @@ export class UIPortalFooter extends LitElement {
 
       #footer-menu a {
         text-decoration: none;
-        color: var(--text-color);
+        color: var(--primary-text-color);
         padding: 5px 0;
         display: block;
       }
-
-      #footer-menu a:hover {
-        text-decoration: underline;
-      }
     `,
   ];
 
diff --git a/src/components/ui-portal-main-nav.js b/src/components/ui-portal-main-nav.js
index a10ceca92..a560069ed 100644
--- a/src/components/ui-portal-main-nav.js
+++ b/src/components/ui-portal-main-nav.js
@@ -3,14 +3,9 @@ import { css, html, nothing } from 'lit';
 import '@lion/ui/define/lion-icon.js';
 import { UIBaseElement } from './shared/UIBaseElement.js';
 import { addIconResolverForPortal } from './iconset-portal/addIconResolverForPortal.js';
-import uiPortalMainNavBurgerCss from './ui-portal-main-nav-burger.css.js';
+import { navItemDirective } from '../directives/nav-item.js';
 
-try {
-  addIconResolverForPortal();
-} catch (e) {
-  // do nothing
-  // icons can be registered by somebody else?
-}
+addIconResolverForPortal();
 
 // TODO: apply https://web.dev/website-navigation/ (aria-current="page" etc.)
 
@@ -20,7 +15,6 @@ try {
 export class UIPortalMainNav extends UIBaseElement {
   static properties = {
     navData: { type: Array, attribute: 'nav-data' },
-    layoutWide: { type: Boolean, attribute: 'layout-wide' }, // true or false
   };
 
   constructor() {
@@ -30,31 +24,12 @@ export class UIPortalMainNav extends UIBaseElement {
      */
     this.navData = [];
     this.layoutWide = false;
-    this.getLink = item =>
-      html`<a href="${item.redirect || item.url}" aria-current=${item.active ? 'page' : ''}
-        >${item.name}</a
-      >`;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (window) {
-      // only on the client
-      window.setTimeout(() => {
-        // remove the second navigation
-        // its rendered twice due to lack of lit/ssr
-        // https://github.com/lit/lit/issues/4472
-        const $navs = this.renderRoot.querySelectorAll('[data-part="nav"]');
-        if ($navs.length > 1) {
-          $navs[1].remove();
-        }
-      });
-    }
   }
 
   get templateContext() {
     return {
       ...super.templateContext,
+      directives: { navItem: navItemDirective },
       data: { navData: this.navData },
     };
   }
@@ -66,7 +41,7 @@ export class UIPortalMainNav extends UIBaseElement {
       return html` <nav>${templates.navLevel(context, { children: data.navData })}</nav> `;
     },
     navLevel(context, { children }) {
-      const { templates } = context;
+      const { templates, directives } = context;
 
       return html`<ul>
         ${children.map(
@@ -78,7 +53,7 @@ export class UIPortalMainNav extends UIBaseElement {
                     <li>
                       ${item.children.map(
                         child1 => html`
-                          ${this.getLink(child1)}
+                          <a ${directives.navItem(child1)}>${child1.name}</a>
                           ${child1.children?.length
                             ? html` collapsible
                                 <ul>
@@ -99,14 +74,16 @@ export class UIPortalMainNav extends UIBaseElement {
       </ul>`;
     },
     navItem(context, { item }) {
-      return this.getLink(item);
+      const { directives } = context;
+
+      return html`<a ${directives.navItem(item)}>${item.name}</a>`;
     },
   };
 
   attributeChangedCallback(attrName, oldVal, newVal) {
     super.attributeChangedCallback(attrName, oldVal, newVal);
-    if (attrName === 'layout-wide') {
-      if (newVal === true || newVal === 'true') {
+    if (attrName === 'nav-data') {
+      if (this.navData.find(item => item.active)?.url !== '/') {
         this.setAttribute('data-wide', 'true');
       } else {
         this.removeAttribute('data-wide');
@@ -136,14 +113,11 @@ const baseUINavMarkup = {
 
       return html`
         <nav data-part="nav">
-          <input type="checkbox" id="burger-toggle" hidden />
-          <label for="burger-toggle" class="burger">
-            <span></span>
-            <span></span>
-            <span></span>
-          </label>
+          ${data.shouldToggleL1
+            ? html`<button popovertarget="l1-wrapper" data-part="l1-invoker">Open Menu</button>`
+            : nothing}
 
-          <div id="l1-wrapper" data-part="l1-wrapper">
+          <div ?popover="${data.shouldToggleL1}" id="l1-wrapper" data-part="l1-wrapper">
             ${templates.navLevel(context, { children: data.navData, level: 1 })}
           </div>
         </nav>
@@ -155,7 +129,7 @@ const baseUINavMarkup = {
       return html`<div
         data-part="level"
         data-level="${level}"
-        data-has-active-child="${hasActiveChild}"
+        ?data-:has-active-child="${hasActiveChild}"
       >
         <ul data-part="list" data-level="${level}">
           ${children.map(
@@ -172,27 +146,13 @@ const baseUINavMarkup = {
               </li>`,
           )}
         </ul>
-        ${level === 1
-          ? html`
-              <div class="nav-item-last">
-                <a href="/search" data-part="anchor" data-level="${level}">
-                  <lion-icon
-                    data-part="icon"
-                    data-level="${level}"
-                    icon-id="lion-portal:portal:search"
-                  ></lion-icon>
-                  <span>Search</span>
-                </a>
-              </div>
-            `
-          : nothing}
       </div>`;
     },
     navLevel3(context, { children, level, item }) {
-      const { templates } = context;
+      const { templates, directives } = context;
 
       return html`<div>
-        ${this.getLink(item)}
+        <a ${directives.navItem(item)} class="second-level-title">${item.name}</a>
         <ul data-part="list" class="second-level-list">
           ${children.map(
             child =>
@@ -218,11 +178,9 @@ const baseUINavMarkup = {
       // </div>`;
     },
     navItem(context, { item, level }) {
-      return html`<a
-        data-part="anchor"
-        data-level="${level}"
-        href="${item.redirect || item.url}"
-        aria-current=${item.active ? 'page' : ''}
+      const { directives } = context;
+
+      return html`<a data-part="anchor" data-level="${level}" ${directives.navItem(item)}
         >${level === 1
           ? html`<lion-icon
               data-part="icon"
@@ -243,9 +201,8 @@ UIPortalMainNav.provideStylesAndMarkup({
   /** 2 columns */
   styles: () => [
     sharedGlobalStyles,
-    uiPortalMainNavBurgerCss,
     css`
-      :host {
+      :host([data-layout='inline-columns']) {
         --_width-l0: var(--size-12);
         --_width-l1: var(--size-13);
         height: 100vh;
@@ -261,38 +218,35 @@ UIPortalMainNav.provideStylesAndMarkup({
         width: calc(var(--_width-l0) + var(--_width-l1));
       }
 
-      :host [data-part='nav'] {
+      :host([data-layout='inline-columns']) [data-part='nav'] {
         height: 100%;
       }
 
-      :host [data-part='level'][data-level='1'],
-      :host [data-part='level'][data-level='2'] {
+      :host([data-layout='inline-columns']) [data-part='level'][data-level='1'],
+      :host([data-layout='inline-columns']) [data-part='level'][data-level='2'] {
         padding-block-start: var(--size-6);
         padding-inline: var(--size-2);
         overflow-y: scroll;
       }
 
-      :host [data-part='level'][data-level='1'] {
+      :host([data-layout='inline-columns']) [data-part='level'][data-level='1'] {
         width: var(--_width-l0);
         height: 100vh;
         border-right: 1px solid #ccc;
         overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
       }
 
       /**
        * When a l0 child is active, or a l1 child => open correct l1
        */
-      :host
+      :host([data-layout='inline-columns'])
         [data-part='listitem']:not([data-\:active])
-        [data-part='level'][data-level='2']:not([data-has-active-child]) {
+        [data-part='level'][data-level='2']:not([data-\:has-active-child]) {
         /** TODO: sr-only, because we want to present all links to the screen reader */
         display: none;
       }
 
-      :host [data-part='level'][data-level='2'] {
+      :host([data-layout='inline-columns']) [data-part='level'][data-level='2'] {
         width: var(--_width-l1);
         position: absolute;
         left: var(--_width-l0);
@@ -302,45 +256,45 @@ UIPortalMainNav.provideStylesAndMarkup({
         height: 100%;
       }
 
-      :host [data-part='list'] {
+      :host([data-layout='inline-columns']) [data-part='list'] {
         list-style-type: none;
         margin: 4px;
         padding: 0;
       }
 
-      :host [data-part='anchor'][data-level='1'] {
+      :host([data-layout='inline-columns']) [data-part='anchor'][data-level='1'] {
         display: block;
         padding-block: var(--size-6);
         padding-inline: var(--size-6);
       }
 
-      :host [data-part='anchor'][data-level='2'] {
+      :host([data-layout='inline-columns']) [data-part='anchor'][data-level='2'] {
         display: block;
         padding-block: var(--size-3);
         padding-inline: var(--size-6);
       }
-
-      :host [data-part='anchor'][data-level='2'][aria-current='page']:not(:last-child) {
+      
+      :host([data-layout='inline-columns']) [data-part='anchor'][data-level='2'][aria-current='page'] {
         padding-block: var(--size-2);
       }
 
-      :host [data-part='icon'][data-level='1'] {
+      :host([data-layout='inline-columns']) [data-part='icon'][data-level='1'] {
         display: block;
         width: var(--size-7);
         height: var(--size-7);
         margin-bottom: var(--size-1);
       }
 
-      :host [data-part='anchor'][data-level='1'] {
+      :host([data-layout='inline-columns']) [data-part='anchor'][data-level='1'] {
         display: flex;
         flex-direction: column;
         align-items: center;
         margin-block-end: 6px;
       }
 
-      :host [data-part='anchor'] {
+      :host([data-layout='inline-columns']) [data-part='anchor'] {
         display: block;
-        color: var(--text-color);
+        color: inherit;
         text-decoration: inherit;
         font-size: 1rem;
         fill: var(--primary-icon-color);
@@ -348,38 +302,36 @@ UIPortalMainNav.provideStylesAndMarkup({
         border-radius: var(--radius-4);
       }
 
-      :host [data-part='anchor'][aria-current='page'][data-level='1'],
-      :host [data-part='anchor'][aria-current='page'][data-level='3']:last-child,
-      :host [data-part='anchor'][aria-current='page'][data-level='4'] {
+      :host([data-layout='inline-columns']) [data-part='anchor'][aria-current='page'] {
         font-weight: bold;
-        background-color: var(--secondary-color);
+        background-color: var(--primary-color-lighter);
       }
 
-      :host [data-part='anchor']:hover {
+      :host([data-layout='inline-columns']) [data-part='anchor']:hover {
         text-decoration: underline;
         text-underline-offset: 0.3em;
-        background-color: var(--secondary-color-lighter);
+        background-color: var(--primary-color);
       }
 
-      :host [data-part='anchor']:focus {
+      :host([data-layout='inline-columns']) [data-part='anchor']:focus {
         outline: 2px solid var(--contrast-color-dark);
       }
 
-      :host [data-part='anchor'][data-level='2']:focus,
-      :host [data-part='anchor'][data-level='2']:focus {
+      :host([data-layout='inline-columns']) [data-part='anchor'][data-level='2']:focus,
+      :host([data-layout='inline-columns']) [data-part='anchor'][data-level='2']:focus {
         outline-offset: 2px;
       }
 
-      :host [data-part='level'][data-level='2'] {
+      :host([data-layout='inline-columns']) [data-part='level'][data-level='2'] {
         display: none;
       }
 
-      :host [data-\\:active] [data-part='level'][data-level='2'] {
+      :host([data-layout='inline-columns']) [data-\\:active] [data-part='level'][data-level='2'] {
         display: block;
       }
 
-      :host [data-part='level'][data-level='2'] {
-        color: var(--text-color, #333);
+      :host([data-layout='inline-columns']) [data-part='level'][data-level='2'] {
+        color: var(--primary-text-color, #333);
 
         /* 14px/Regular */
         font-family: 'ING Me';
@@ -390,19 +342,19 @@ UIPortalMainNav.provideStylesAndMarkup({
         text-decoration: none;
       }
 
-      :host [data-part='listitem'][data-level='2'][data-\\:active] {
+      :host([data-layout='inline-columns']) [data-part='listitem'][data-level='2'][data-\\:active] {
         border-radius: var(--radius-4);
-        background: var(--neutral-color-lightest);
+        background: var(--primary-color-lighter, #f0f0f0);
+        padding-block-end: 12px;
         margin-block: 6px;
       }
 
-      :host [data-part='level'][data-level='3'] {
+      :host([data-layout='inline-columns']) [data-part='level'][data-level='3'] {
         overflow: hidden;
-        padding-block-end: 12px;
       }
 
-      :host [data-part='anchor'][data-level='3'],
-      :host [data-part='anchor'][data-level='4'] {
+      :host([data-layout='inline-columns']) [data-part='anchor'][data-level='3'],
+      :host([data-layout='inline-columns']) [data-part='anchor'][data-level='4'] {
         /* 14px/Regular */
         font-family: 'ING Me';
         font-size: 0.875rem;
@@ -410,22 +362,132 @@ UIPortalMainNav.provideStylesAndMarkup({
         font-weight: 400;
         line-height: 20px; /* 142.857% */
         text-decoration: none;
-        margin-left: var(--size-7);
-        padding-inline: var(--size-3);
+        margin-left: var(--size-8);
+        padding-inline: var(--size-2);
       }
 
-      :host [data-part='anchor'][data-level='3'][aria-current='page'],
-      :host [data-part='anchor'][data-level='4'][aria-current='page'] {
+      :host([data-layout='inline-columns']) [data-part='anchor'][data-level='3'][aria-current='page'],
+      :host([data-layout='inline-columns']) [data-part='anchor'][data-level='4'][aria-current='page'] {
         font-weight: bold;
       }
 
-      :host [data-level='2'] > [aria-current='page'] {
+      :host([data-layout='inline-columns']) [data-level='2'] > [aria-current='page'] {
         background: transparent;
         font-weight: bold;
       }
 
-      :host [data-part='list'][data-level='4'] {
-        margin-left: var(--size-3);
+      :host([data-layout='inline-columns']) [data-part='list'][data-level='4'] {
+        margin-left: var(--size-4);
+      }
+    `,
+    css`
+      /* ----------------------------
+       * part: root
+       */
+
+      :host([data-layout='floating-toggle']) {
+        --_width-l0: var(--size-11);
+        --_width-l1: var(--size-13);
+        height: 100vh;
+        /** Make this the positioning parent of l0 and l1 */
+        position: relative;
+        width: calc(var(--_width-l0) + var(--_width-l1));
+        display: block;
+        position: sticky;
+        top: 0;
+      }
+
+      /* ----------------------------
+       * part: nav
+       */
+
+      :host([data-layout='floating-toggle']) [data-part='nav'] {
+        height: 100%;
+      }
+
+      /* ----------------------------
+       * part: l1-wrapper
+       */
+
+      :host([data-layout='floating-toggle']) [data-part='l1-wrapper'] {
+        height: 100%;
+        width: 100%;
+      }
+
+      /* ----------------------------
+       * part: level
+       */
+
+      :host([data-layout='floating-toggle']) [data-part='level'] {
+        padding-top: var(--size-6);
+        overflow-y: scroll;
+      }
+
+      :host([data-layout='floating-toggle']) [data-part='level'][data-level='1'] {
+        width: var(--_width-l0);
+        height: 100%;
+        border-right: 1px solid var(--primary-lines-color);
+      }
+
+      /**
+         * When a l0 child is active, or a l1 child => open correct l1
+         */
+
+      :host([data-layout='floating-toggle'])
+        [data-part='listitem']:not([data-\:active])
+        [data-part='level'][data-level='2']:not([data-\:has-active-child]) {
+        /** TODO: sr-only, because we want to present all links to the screen reader */
+        display: none;
+      }
+
+      :host([data-layout='floating-toggle']) [data-part='level'][data-level='2'] {
+        width: var(--_width-l1);
+        position: fixed;
+        left: 0;
+        top: 0;
+        background-color: var(--page-background);
+        padding-inline: var(--size-6);
+        border-right: 1px solid var(--primary-lines-color);
+        height: 100%;
+      }
+
+      :host([data-layout='floating-toggle']) [data-part='list'] {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      :host([data-layout='floating-toggle']) [data-part='listitem'] {
+        display: block;
+        margin-bottom: var(--size-6);
+      }
+
+      :host([data-layout='floating-toggle']) [data-part='icon'][data-level='1'] {
+        display: block;
+        width: var(--size-7);
+        height: var(--size-7);
+        margin-bottom: var(--size-1);
+      }
+
+      :host([data-layout='floating-toggle']) [data-part='anchor'][data-level='1'] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+
+      :host([data-layout='floating-toggle']) [data-part='anchor'] {
+        color: inherit;
+        text-decoration: inherit;
+        font-size: 0.875rem;
+        fill: var(--primary-icon-color);
+      }
+
+      :host([data-layout='floating-toggle']) [data-part='anchor']:hover {
+        text-decoration: underline;
+        text-underline-offset: 0.3em;
+      }
+
+      :host([data-layout='floating-toggle']) [data-part='listitem'][data-\:active] {
       }
     `,
   ],
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0da49f811..7fe21047d 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -24,7 +24,7 @@ const {
         ))}
       </div>
     </div>
-    <img class="page-logo" src=`${import.meta.env.BASE_URL}/logo.svg`" alt="{title} Logo"/>
+    <img class="page-logo" src="/logo.svg" alt="{title} Logo"/>
   </section>
 
   <section>