suroh
/
work.suroh.tk
0
0
Fork 0
Code Pull Requests Actions Activity

finesse of css

This commit is contained in:
suroh 2023-10-28 21:38:58 +02:00
parent c45be77272
commit c972daa4cf
1 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
_includes/components/nav-primary.webc
View File

@ -1,6 +1,8 @@
<nav id="primary">
<nav-link link="/" data-name="<~"><~</nav-link>
<nav-link webc:for="c in categories" :category="c" :data-name="c"></nav-link>
<div class="pagelinks">
<nav-link webc:for="c in categories" :category="c" :data-name="c"></nav-link>
</div>
<button class="audioToggle"></button>
</nav>
@ -24,12 +26,30 @@
<script src="nav-primary.js" type="module"></script>
<style webc:scoped>
/* => HOST */
:host {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1em 0.25em;
margin-block: 0.5em 0.5em;
margin-inline: var(--page-margin-inline);
}
/* => CONTAINER */
nav {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
font-size: 1.5em;
}
nav-link[data-name="<~"] {
grid-column: 1 / span 1
}
.pagelinks {
display: flex;
gap: 0.25em;
margin: 1em var(--page-margin-inline) 0.5em;
font-size: 1.5em;
}
/* => AUDIO TOGGLE */
@ -57,7 +77,9 @@ nav {
/* => SUb NAV */
#sub {
display: grid;
grid-template: 1fr / 1fr;
grid-template: subgrid / 1fr;
grid-column: 2 / -1;
margin: 0;
}
#sub > ul {