wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

configutation first for better readability

Browse source
This commit is contained in:
madrilene 2024-09-19 09:41:57 +02:00
parent b6008ecfb3
commit 80ed2b1b96
1 changed files with 28 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/assets/css/global/blocks/nav-main.css → src/assets/css/global/blocks/main-nav.css
View file

@ -9,22 +9,32 @@
} }
.mainnav ul { .mainnav ul {
/* configuration */
--gutter: var(--space-xs); --gutter: var(--space-xs);
--cluster-vertical-alignment: normal; --cluster-vertical-alignment: normal;
background: var(--nav-list-background, var(--color-bg)); --nav-list-background: var(--color-bg);
box-shadow: var(--nav-list-shadow, -5px 0 11px 0 hsl(0 0% 0% / 0.2)); --nav-list-shadow: -5px 0 11px 0 hsl(0 0% 0% / 0.2);
--nav-list-layout: column;
--nav-list-height: 100dvh;
--nav-list-padding: var(--space-s);
--nav-list-position: fixed;
--nav-list-width: min(18rem, 100vw);
--nav-list-visibility: hidden;
background: var(--nav-list-background);
box-shadow: var(--nav-list-shadow);
display: flex; display: flex;
flex-direction: var(--nav-list-layout, column); flex-direction: var(--nav-list-layout);
flex-wrap: wrap; flex-wrap: wrap;
block-size: var(--nav-list-height, 100dvh); block-size: var(--nav-list-height);
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: var(--nav-list-padding, var(--space-s)); padding: var(--nav-list-padding);
position: var(--nav-list-position, fixed); position: var(--nav-list-position);
inset-block-start: 0; inset-block-start: 0;
inset-inline-end: 0; inset-inline-end: 0;
inline-size: var(--nav-list-width, min(18rem, 100vw)); inline-size: var(--nav-list-width);
visibility: var(--nav-list-visibility, hidden); visibility: var(--nav-list-visibility);
} }
.mainnav [aria-expanded='false'] + ul { .mainnav [aria-expanded='false'] + ul {
@ -74,13 +84,19 @@
} }
.mainnav a { .mainnav a {
background: var(--nav-item-background, transparent); /* configuration */
color: var(--nav-item-text-color, var(--color-text)); --nav-item-background: transparent;
padding: var(--nav-item-padding, var(--space-xs) var(--space-2xs)); --nav-item-text-color: var(--color-text);
--nav-item-padding: var(--space-xs) var(--space-2xs);
--nav-item-decoration-color: transparent;
background: var(--nav-item-background);
color: var(--nav-item-text-color);
padding: var(--nav-item-padding);
display: block; display: block;
border-radius: var(--border-radius); border-radius: var(--border-radius);
text-decoration-line: underline; text-decoration-line: underline;
text-decoration-color: var(--nav-item-decoration-color, transparent); text-decoration-color: var(--nav-item-decoration-color);
text-decoration-thickness: 3px; text-decoration-thickness: 3px;
text-underline-offset: 0.2em; text-underline-offset: 0.2em;
} }