ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: update portal styling

Browse source
This commit is contained in:
gerjanvangeest 2025-07-01 17:01:08 +02:00 committed by Thijs Louisse
parent 63f93ab51b
commit 26c699ca92
6 changed files with 216 additions and 185 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
public/styles/lion/layout.css
View file

@ -11,7 +11,7 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-size: 16px; font-size: 16px;
color: var(--text-color); color: var(--primary-text-color);
background-color: var(--page-background); background-color: var(--page-background);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -149,14 +149,14 @@ body[data-layout='layout-home'] #main-header {
#main-header a { #main-header a {
text-decoration: none; text-decoration: none;
color: var(--text-color); color: var(--primary-text-color);
transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out;
font-weight: bold; font-weight: bold;
order: 2; order: 2;
} }
#main-header a:hover { #main-header a:hover {
color: var(--secondary-color-lighter); color: var(--primary-color);
} }
body[data-layout='layout-home'] #main-header a:hover { body[data-layout='layout-home'] #main-header a:hover {
@ -274,7 +274,7 @@ rocket-navigation .light-dark-switch::part(label) {
rocket-navigation a { rocket-navigation a {
text-decoration: none; text-decoration: none;
color: var(--text-color); color: var(--primary-text-color);
} }
rocket-navigation a:hover { rocket-navigation a:hover {
@ -286,7 +286,7 @@ rocket-navigation > ul > li > ul li.current ul li.anchor.current::before {
content: ''; content: '';
height: 1.6em; height: 1.6em;
width: 3px; width: 3px;
background: var(--secondary-color); background: var(--primary-color);
position: absolute; position: absolute;
left: 0; left: 0;
margin-top: -2px; margin-top: -2px;
@ -358,7 +358,7 @@ rocket-navigation > ul {
/* same as header */ /* same as header */
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
color: var(--text-color); color: var(--primary-text-color);
font-weight: bold; font-weight: bold;
} }
@ -511,6 +511,7 @@ main > * {
font-weight: bold; font-weight: bold;
vertical-align: middle; vertical-align: middle;
padding: 8px 24px; padding: 8px 24px;
border: 1px solid var(--primary-color);
border-radius: 24px; border-radius: 24px;
background: var(--contrast-color-dark); background: var(--contrast-color-dark);
color: var(--contrast-color-light, #fff); color: var(--contrast-color-light, #fff);
@ -568,7 +569,7 @@ body[data-layout='layout-home'] section {
body[data-layout='layout-home'] .banner { body[data-layout='layout-home'] .banner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: var(--secondary-color); background-color: var(--primary-color);
padding-block-start: 96px; padding-block-start: 96px;
} }
@ -580,7 +581,7 @@ body[data-layout='layout-home'] .page-title--container {
} }
body[data-layout='layout-home'] .page-title { body[data-layout='layout-home'] .page-title {
color: var(--text-color); color: var(--primary-text-color);
font-size: 64px; font-size: 64px;
} }
@ -596,10 +597,6 @@ body[data-layout='layout-home'] .page-logo {
align-self: flex-end; 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'] .page-title,
body[data-layout='layout-home'] .reason-header, body[data-layout='layout-home'] .reason-header,
body[data-layout='layout-home'] .page-slogan { body[data-layout='layout-home'] .page-slogan {

3
public/styles/lion/markdown.css
View file

@ -354,7 +354,6 @@
.markdown-body h4, .markdown-body h4,
.markdown-body h5, .markdown-body h5,
.markdown-body h6 { .markdown-body h6 {
color: var(--text-color);
font-weight: 600; font-weight: 600;
line-height: 1.25; line-height: 1.25;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -367,7 +366,7 @@
.markdown-body h1, .markdown-body h1,
.markdown-body h2 { .markdown-body h2 {
border-bottom: 1px solid var(--primary-lines-color); border-bottom: 1px solid #eaecef;
padding-bottom: 0.3em; padding-bottom: 0.3em;
} }

87
public/styles/lion/variables.css
View file

@ -1,18 +1,14 @@
html { html {
/* Base colors */ /* Base colors */
--dandelion-100: #fff6cc; --dandilion-100: #fff6cc;
--dandelion-300: #ffe366; --dandilion-300: #ffe366;
--dandelion-500: #ffd100; --dandilion-500: #ffd100;
--dandelion-700: #997d00; --dandilion-700: #997d00;
--dandelion-900: #332a00; --dandilion-900: #332a00;
--blue-100: #b4c1ff;
--blue-300: #8197ff;
--blue-500: #002eff; --blue-500: #002eff;
--blue-700: #0025cc;
--blue-900: #0020b3;
--green-700: #8bcc00; --green-500: #00ff51;
--black: #080700; --black: #080700;
--white: #ffffff; --white: #ffffff;
@ -21,33 +17,27 @@ html {
--gray-300: #b3b3b3; --gray-300: #b3b3b3;
--gray-500: #808080; --gray-500: #808080;
--gray-700: #4d4d4d; --gray-700: #4d4d4d;
--gray-800: #282828;
--gray-900: #1a1a1a; --gray-900: #1a1a1a;
/* Alias tokens */ /* Alias tokens */
--primary-color: var(--blue-500); --primary-color: var(--dandilion-500);
--primary-color-lighter: var(--blue-300); --secondary-color: var(--blue-500);
--primary-color-darker: var(--blue-700); --primary-color-lighter: var(--dandilion-300);
--secondary-color: var(--dandelion-500); --primary-color-darker: var(--dandilion-700);
--secondary-color-lighter: var(--dandelion-300); --primary-text-color: var(--black);
--secondary-color-darker: var(--dandelion-700); --primary-icon-color: var(--dandilion-900);
--neutral-color: var(--gray-500); --primary-lines-color: var(--gray-300);
--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-text-inverse-color: var(--gray-100); --primary-text-inverse-color: var(--gray-100);
--markdown-link-color: var(--blue-500);
/* Contrast colors */ /* Contrast colors */
--contrast-color-light: var(--white); --contrast-color-light: var(--white);
--contrast-color-dark: var(--dandelion-900); --contrast-color-dark: var(--dandilion-900);
/* background-colors */ /* background-colors */
--page-background: var(--white); --page-background: var(--white);
--secondary-background: var(--gray-100); --secondary-background: var(--gray-100);
--footer-background: var(--neutral-color-lighter); --footer-background: rgba(0, 0, 0, 0.1);
/* typography */ /* typography */
--text-color: var(--black); --text-color: var(--black);
@ -57,36 +47,15 @@ html {
'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace; 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace;
/* controls */ /* controls */
--switch-unselected-color: var(--neutral-color); --switch-unselected-color: var(--gray-500);
--switch-selected-color: var(--green-700); --switch-selected-color: var(--green-500);
--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);
} }
html.dark { html.dark {
--primary-color: var(--blue-100); --primary-color: #e63946;
--primary-color-lighter: var(--blue-300); --primary-color-lighter: #e25761;
--primary-color-darker: var(--blue-100); --primary-color-darker: #a22831;
--secondary-color: var(--dandelion-700); --primary-text-color: var(--white);
--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-text-inverse-color: #2c3e50; --primary-text-inverse-color: #2c3e50;
/* Contrast colors */ /* Contrast colors */
@ -94,11 +63,19 @@ html.dark {
--contrast-color-dark: #1d3557; --contrast-color-dark: #1d3557;
/* background-colors */ /* background-colors */
--page-background: var(--gray-700); --page-background: #333;
--footer-background: var(--gray-900); --footer-background: #4f4f4f;
/* typography */ /* typography */
--text-color: white; --text-color: white;
/* controls */ /* controls */
--switch-unselected-color: #808080; --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;
} }

8
src/components/ui-portal-footer.js
View file

@ -29,7 +29,7 @@ export class UIPortalFooter extends LitElement {
#main-footer { #main-footer {
padding-inline: 96px; padding-inline: 96px;
} }
#footer-menu .content-area { #footer-menu .content-area {
flex-direction: row; flex-direction: row;
text-align: left; text-align: left;
@ -43,14 +43,10 @@ export class UIPortalFooter extends LitElement {
#footer-menu a { #footer-menu a {
text-decoration: none; text-decoration: none;
color: var(--text-color); color: var(--primary-text-color);
padding: 5px 0; padding: 5px 0;
display: block; display: block;
} }
#footer-menu a:hover {
text-decoration: underline;
}
`, `,
]; ];

280
src/components/ui-portal-main-nav.js
View file

@ -3,14 +3,9 @@ import { css, html, nothing } from 'lit';
import '@lion/ui/define/lion-icon.js'; import '@lion/ui/define/lion-icon.js';
import { UIBaseElement } from './shared/UIBaseElement.js'; import { UIBaseElement } from './shared/UIBaseElement.js';
import { addIconResolverForPortal } from './iconset-portal/addIconResolverForPortal.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();
addIconResolverForPortal();
} catch (e) {
// do nothing
// icons can be registered by somebody else?
}
// TODO: apply https://web.dev/website-navigation/ (aria-current="page" etc.) // TODO: apply https://web.dev/website-navigation/ (aria-current="page" etc.)
@ -20,7 +15,6 @@ try {
export class UIPortalMainNav extends UIBaseElement { export class UIPortalMainNav extends UIBaseElement {
static properties = { static properties = {
navData: { type: Array, attribute: 'nav-data' }, navData: { type: Array, attribute: 'nav-data' },
layoutWide: { type: Boolean, attribute: 'layout-wide' }, // true or false
}; };
constructor() { constructor() {
@ -30,31 +24,12 @@ export class UIPortalMainNav extends UIBaseElement {
*/ */
this.navData = []; this.navData = [];
this.layoutWide = false; 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() { get templateContext() {
return { return {
...super.templateContext, ...super.templateContext,
directives: { navItem: navItemDirective },
data: { navData: this.navData }, data: { navData: this.navData },
}; };
} }
@ -66,7 +41,7 @@ export class UIPortalMainNav extends UIBaseElement {
return html` <nav>${templates.navLevel(context, { children: data.navData })}</nav> `; return html` <nav>${templates.navLevel(context, { children: data.navData })}</nav> `;
}, },
navLevel(context, { children }) { navLevel(context, { children }) {
const { templates } = context; const { templates, directives } = context;
return html`<ul> return html`<ul>
${children.map( ${children.map(
@ -78,7 +53,7 @@ export class UIPortalMainNav extends UIBaseElement {
<li> <li>
${item.children.map( ${item.children.map(
child1 => html` child1 => html`
${this.getLink(child1)} <a ${directives.navItem(child1)}>${child1.name}</a>
${child1.children?.length ${child1.children?.length
? html` collapsible ? html` collapsible
<ul> <ul>
@ -99,14 +74,16 @@ export class UIPortalMainNav extends UIBaseElement {
</ul>`; </ul>`;
}, },
navItem(context, { item }) { navItem(context, { item }) {
return this.getLink(item); const { directives } = context;
return html`<a ${directives.navItem(item)}>${item.name}</a>`;
}, },
}; };
attributeChangedCallback(attrName, oldVal, newVal) { attributeChangedCallback(attrName, oldVal, newVal) {
super.attributeChangedCallback(attrName, oldVal, newVal); super.attributeChangedCallback(attrName, oldVal, newVal);
if (attrName === 'layout-wide') { if (attrName === 'nav-data') {
if (newVal === true || newVal === 'true') { if (this.navData.find(item => item.active)?.url !== '/') {
this.setAttribute('data-wide', 'true'); this.setAttribute('data-wide', 'true');
} else { } else {
this.removeAttribute('data-wide'); this.removeAttribute('data-wide');
@ -136,14 +113,11 @@ const baseUINavMarkup = {
return html` return html`
<nav data-part="nav"> <nav data-part="nav">
<input type="checkbox" id="burger-toggle" hidden /> ${data.shouldToggleL1
<label for="burger-toggle" class="burger"> ? html`<button popovertarget="l1-wrapper" data-part="l1-invoker">Open Menu</button>`
<span></span> : nothing}
<span></span>
<span></span>
</label>
<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 })} ${templates.navLevel(context, { children: data.navData, level: 1 })}
</div> </div>
</nav> </nav>
@ -155,7 +129,7 @@ const baseUINavMarkup = {
return html`<div return html`<div
data-part="level" data-part="level"
data-level="${level}" data-level="${level}"
data-has-active-child="${hasActiveChild}" ?data-:has-active-child="${hasActiveChild}"
> >
<ul data-part="list" data-level="${level}"> <ul data-part="list" data-level="${level}">
${children.map( ${children.map(
@ -172,27 +146,13 @@ const baseUINavMarkup = {
</li>`, </li>`,
)} )}
</ul> </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>`; </div>`;
}, },
navLevel3(context, { children, level, item }) { navLevel3(context, { children, level, item }) {
const { templates } = context; const { templates, directives } = context;
return html`<div> 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"> <ul data-part="list" class="second-level-list">
${children.map( ${children.map(
child => child =>
@ -218,11 +178,9 @@ const baseUINavMarkup = {
// </div>`; // </div>`;
}, },
navItem(context, { item, level }) { navItem(context, { item, level }) {
return html`<a const { directives } = context;
data-part="anchor"
data-level="${level}" return html`<a data-part="anchor" data-level="${level}" ${directives.navItem(item)}
href="${item.redirect || item.url}"
aria-current=${item.active ? 'page' : ''}
>${level === 1 >${level === 1
? html`<lion-icon ? html`<lion-icon
data-part="icon" data-part="icon"
@ -243,9 +201,8 @@ UIPortalMainNav.provideStylesAndMarkup({
/** 2 columns */ /** 2 columns */
styles: () => [ styles: () => [
sharedGlobalStyles, sharedGlobalStyles,
uiPortalMainNavBurgerCss,
css` css`
:host { :host([data-layout='inline-columns']) {
--_width-l0: var(--size-12); --_width-l0: var(--size-12);
--_width-l1: var(--size-13); --_width-l1: var(--size-13);
height: 100vh; height: 100vh;
@ -261,38 +218,35 @@ UIPortalMainNav.provideStylesAndMarkup({
width: calc(var(--_width-l0) + var(--_width-l1)); width: calc(var(--_width-l0) + var(--_width-l1));
} }
:host [data-part='nav'] { :host([data-layout='inline-columns']) [data-part='nav'] {
height: 100%; height: 100%;
} }
:host [data-part='level'][data-level='1'], :host([data-layout='inline-columns']) [data-part='level'][data-level='1'],
:host [data-part='level'][data-level='2'] { :host([data-layout='inline-columns']) [data-part='level'][data-level='2'] {
padding-block-start: var(--size-6); padding-block-start: var(--size-6);
padding-inline: var(--size-2); padding-inline: var(--size-2);
overflow-y: scroll; 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); width: var(--_width-l0);
height: 100vh; height: 100vh;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
overflow: hidden; overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
/** /**
* When a l0 child is active, or a l1 child => open correct l1 * 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='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 */ /** TODO: sr-only, because we want to present all links to the screen reader */
display: none; display: none;
} }
:host [data-part='level'][data-level='2'] { :host([data-layout='inline-columns']) [data-part='level'][data-level='2'] {
width: var(--_width-l1); width: var(--_width-l1);
position: absolute; position: absolute;
left: var(--_width-l0); left: var(--_width-l0);
@ -302,45 +256,45 @@ UIPortalMainNav.provideStylesAndMarkup({
height: 100%; height: 100%;
} }
:host [data-part='list'] { :host([data-layout='inline-columns']) [data-part='list'] {
list-style-type: none; list-style-type: none;
margin: 4px; margin: 4px;
padding: 0; padding: 0;
} }
:host [data-part='anchor'][data-level='1'] { :host([data-layout='inline-columns']) [data-part='anchor'][data-level='1'] {
display: block; display: block;
padding-block: var(--size-6); padding-block: var(--size-6);
padding-inline: 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; display: block;
padding-block: var(--size-3); padding-block: var(--size-3);
padding-inline: var(--size-6); 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); 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; display: block;
width: var(--size-7); width: var(--size-7);
height: var(--size-7); height: var(--size-7);
margin-bottom: var(--size-1); 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; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-block-end: 6px; margin-block-end: 6px;
} }
:host [data-part='anchor'] { :host([data-layout='inline-columns']) [data-part='anchor'] {
display: block; display: block;
color: var(--text-color); color: inherit;
text-decoration: inherit; text-decoration: inherit;
font-size: 1rem; font-size: 1rem;
fill: var(--primary-icon-color); fill: var(--primary-icon-color);
@ -348,38 +302,36 @@ UIPortalMainNav.provideStylesAndMarkup({
border-radius: var(--radius-4); border-radius: var(--radius-4);
} }
:host [data-part='anchor'][aria-current='page'][data-level='1'], :host([data-layout='inline-columns']) [data-part='anchor'][aria-current='page'] {
:host [data-part='anchor'][aria-current='page'][data-level='3']:last-child,
:host [data-part='anchor'][aria-current='page'][data-level='4'] {
font-weight: bold; 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-decoration: underline;
text-underline-offset: 0.3em; 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); outline: 2px solid var(--contrast-color-dark);
} }
:host [data-part='anchor'][data-level='2']:focus, :host([data-layout='inline-columns']) [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 {
outline-offset: 2px; outline-offset: 2px;
} }
:host [data-part='level'][data-level='2'] { :host([data-layout='inline-columns']) [data-part='level'][data-level='2'] {
display: none; 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; display: block;
} }
:host [data-part='level'][data-level='2'] { :host([data-layout='inline-columns']) [data-part='level'][data-level='2'] {
color: var(--text-color, #333); color: var(--primary-text-color, #333);
/* 14px/Regular */ /* 14px/Regular */
font-family: 'ING Me'; font-family: 'ING Me';
@ -390,19 +342,19 @@ UIPortalMainNav.provideStylesAndMarkup({
text-decoration: none; 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); border-radius: var(--radius-4);
background: var(--neutral-color-lightest); background: var(--primary-color-lighter, #f0f0f0);
padding-block-end: 12px;
margin-block: 6px; margin-block: 6px;
} }
:host [data-part='level'][data-level='3'] { :host([data-layout='inline-columns']) [data-part='level'][data-level='3'] {
overflow: hidden; overflow: hidden;
padding-block-end: 12px;
} }
:host [data-part='anchor'][data-level='3'], :host([data-layout='inline-columns']) [data-part='anchor'][data-level='3'],
:host [data-part='anchor'][data-level='4'] { :host([data-layout='inline-columns']) [data-part='anchor'][data-level='4'] {
/* 14px/Regular */ /* 14px/Regular */
font-family: 'ING Me'; font-family: 'ING Me';
font-size: 0.875rem; font-size: 0.875rem;
@ -410,22 +362,132 @@ UIPortalMainNav.provideStylesAndMarkup({
font-weight: 400; font-weight: 400;
line-height: 20px; /* 142.857% */ line-height: 20px; /* 142.857% */
text-decoration: none; text-decoration: none;
margin-left: var(--size-7); margin-left: var(--size-8);
padding-inline: var(--size-3); padding-inline: var(--size-2);
} }
:host [data-part='anchor'][data-level='3'][aria-current='page'], :host([data-layout='inline-columns']) [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='4'][aria-current='page'] {
font-weight: bold; font-weight: bold;
} }
:host [data-level='2'] > [aria-current='page'] { :host([data-layout='inline-columns']) [data-level='2'] > [aria-current='page'] {
background: transparent; background: transparent;
font-weight: bold; font-weight: bold;
} }
:host [data-part='list'][data-level='4'] { :host([data-layout='inline-columns']) [data-part='list'][data-level='4'] {
margin-left: var(--size-3); 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] {
} }
`, `,
], ],

2
src/pages/index.astro
View file

@ -24,7 +24,7 @@ const {
))} ))}
</div> </div>
</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>
<section> <section>