151 lines
2.7 KiB
Plaintext
151 lines
2.7 KiB
Plaintext
<nav id="primary">
|
|
<nav-link link="/" data-name="<~"><~</nav-link>
|
|
<div class="pagelinks">
|
|
<template webc:for="(c,v) in categories" webc:nokeep>
|
|
<nav-link webc:if="v.page" :link="v.page.url" :data-name="v.data.title"></nav-link>
|
|
<nav-link webc:else :category="c" :data-name="c"></nav-link>
|
|
</template>
|
|
</div>
|
|
|
|
<button class="audioToggle"></button>
|
|
</nav>
|
|
|
|
<nav id="sub" slot="subnav">
|
|
<template webc:for="(c, v) in categories" webc:nokeep>
|
|
<ul webc:if="v.length > 0" :data-name="c">
|
|
<li webc:for="p of v">
|
|
<a :href="p.url" @text="p.data.title || p.fileSlug"></a>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
</nav>
|
|
|
|
<section id="menuItem" style="">
|
|
<h1 id="menuItem"></h1>
|
|
</section>
|
|
|
|
<nav id="toTop">
|
|
<span>top</span>
|
|
</nav>
|
|
|
|
<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: 2em 0.5em;
|
|
margin-inline: var(--page-margin-inline);
|
|
}
|
|
|
|
@media (max-width: 780px) {
|
|
:host {
|
|
margin-block: 1em 0.5em;
|
|
margin-inline: calc(var(--page-margin-inline) * 0.5);
|
|
}
|
|
}
|
|
|
|
/* => 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;
|
|
}
|
|
|
|
/* => AUDIO TOGGLE */
|
|
.audioToggle {
|
|
background: none;
|
|
border: none;
|
|
margin-inline-start: auto;
|
|
transition: color ease-in-out 0.1s;
|
|
}
|
|
|
|
.audioToggle:hover {
|
|
color: #CECECE;
|
|
cursor: pointer;
|
|
transition: color ease-in-out 0.1s;
|
|
}
|
|
|
|
.audioToggle::after {
|
|
content: '🔇'
|
|
}
|
|
|
|
.audioToggle.active::after {
|
|
content: '🔉'
|
|
}
|
|
|
|
/* => SUb NAV */
|
|
#sub {
|
|
display: grid;
|
|
grid-template: subgrid / 1fr;
|
|
grid-column: 2 / -1;
|
|
margin: 0;
|
|
}
|
|
|
|
@media (max-width: 780px) {
|
|
#sub {
|
|
grid-column: 1 / -1;
|
|
font-size: 1.25em;
|
|
}
|
|
}
|
|
|
|
|
|
#sub > ul {
|
|
grid-row: 1 / span 1;
|
|
grid-column: 1 / span 1;
|
|
max-height: 0px;
|
|
overflow: hidden;
|
|
transition: max-height 0.5s cubic-bezier(.22,.61,.36,1);
|
|
}
|
|
|
|
ul.active {
|
|
max-height: 50vh !important;
|
|
}
|
|
|
|
/* => POPUP TITLE */
|
|
#menuItem {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100vw;
|
|
height: 0px;
|
|
overflow: visible;
|
|
z-index: 100;
|
|
mix-blend-mode: difference;
|
|
}
|
|
|
|
#menuItem h1 {
|
|
position: absolute;
|
|
line-height: inherit;
|
|
bottom: -500px;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 33vw;
|
|
opacity: 0;
|
|
transform: translateY(100px);
|
|
transform-origin: bottom left;
|
|
mix-blend-mode: difference;
|
|
transition: opacity ease-in-out 0.1s, transform ease-in-out 0.1s;
|
|
}
|
|
|
|
#menuItem h1.active {
|
|
mix-blend-mode: difference;
|
|
opacity: 1 !important;
|
|
transform: translateY(-600px) !important;
|
|
}
|
|
</style>
|