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 id="primary">
<nav-link link="/" data-name="<~"><~</nav-link> <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> <button class="audioToggle"></button>
</nav> </nav>
@ -24,12 +26,30 @@
<script src="nav-primary.js" type="module"></script> <script src="nav-primary.js" type="module"></script>
<style webc:scoped> <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 */ /* => CONTAINER */
nav { 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; display: flex;
gap: 0.25em; gap: 0.25em;
margin: 1em var(--page-margin-inline) 0.5em;
font-size: 1.5em;
} }
/* => AUDIO TOGGLE */ /* => AUDIO TOGGLE */
@ -57,7 +77,9 @@ nav {
/* => SUb NAV */ /* => SUb NAV */
#sub { #sub {
display: grid; display: grid;
grid-template: 1fr / 1fr; grid-template: subgrid / 1fr;
grid-column: 2 / -1;
margin: 0;
} }
#sub > ul { #sub > ul {