|
|
@ -1,57 +1,36 @@
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
import { onMount } from 'svelte';
|
|
|
|
import Icon from './Icon.html';
|
|
|
|
import Icon from './Icon.html';
|
|
|
|
import Logo from './Logo.html';
|
|
|
|
import Logo from './Logo.html';
|
|
|
|
|
|
|
|
|
|
|
|
export let segment;
|
|
|
|
export let segment;
|
|
|
|
|
|
|
|
|
|
|
|
let open = false;
|
|
|
|
let open = false;
|
|
|
|
let nav;
|
|
|
|
|
|
|
|
|
|
|
|
// TODO remove this post-https://github.com/sveltejs/svelte/issues/1914
|
|
|
|
function toggleOpen() {
|
|
|
|
let ul;
|
|
|
|
// if the menu is closing, scroll back to the top *after* it
|
|
|
|
onMount(() => {
|
|
|
|
// shuts. otherwise, scroll back to the top immediately
|
|
|
|
function handler(event) {
|
|
|
|
// (just in case the user reopened before it happened).
|
|
|
|
if (!open) {
|
|
|
|
// The reason we don't just do it when the menu opens is
|
|
|
|
event.preventDefault();
|
|
|
|
// that the scrollbar visibly flashes
|
|
|
|
event.stopPropagation();
|
|
|
|
if (open) {
|
|
|
|
open = true;
|
|
|
|
setTimeout(() => {
|
|
|
|
}
|
|
|
|
if (!open) {
|
|
|
|
|
|
|
|
nav.scrollTop = 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}, 350);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
nav.scrollTop = 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
open = !open;
|
|
|
|
ul.addEventListener('touchstart', handler, {
|
|
|
|
}
|
|
|
|
capture: true
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
|
|
|
|
ul.removeEventListener('touchstart', handler, {
|
|
|
|
|
|
|
|
capture: true
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
<style>
|
|
|
|
/* Unfortunately I'm not able to understand mousecatcher */
|
|
|
|
|
|
|
|
.mousecatcher {
|
|
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
|
|
width: 120vw;
|
|
|
|
|
|
|
|
height: 100vh;
|
|
|
|
|
|
|
|
background-color: black;
|
|
|
|
|
|
|
|
pointer-events: none;
|
|
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
|
|
transition: opacity .4s;
|
|
|
|
|
|
|
|
z-index: 3;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.mousecatcher.open {
|
|
|
|
|
|
|
|
pointer-events: all;
|
|
|
|
|
|
|
|
opacity: .3;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes fadein {
|
|
|
|
|
|
|
|
from { opacity: 0 }
|
|
|
|
|
|
|
|
to { opacity: 1 }
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
header {
|
|
|
|
header {
|
|
|
|
position: fixed;
|
|
|
|
position: fixed;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
@ -65,20 +44,23 @@
|
|
|
|
box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5);
|
|
|
|
box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5);
|
|
|
|
font-family: var(--font);
|
|
|
|
font-family: var(--font);
|
|
|
|
z-index: 10;
|
|
|
|
z-index: 10;
|
|
|
|
|
|
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
nav {
|
|
|
|
nav {
|
|
|
|
position: fixed;
|
|
|
|
position: fixed;
|
|
|
|
width: calc(var(--sidebar-w) + 6rem);
|
|
|
|
top: 0;
|
|
|
|
height: calc(100vh - var(--nav-h));
|
|
|
|
left: 0;
|
|
|
|
top: var(--nav-h);
|
|
|
|
width: 100vw;
|
|
|
|
padding: 6rem 3rem 6rem 6rem;
|
|
|
|
height: var(--nav-h);
|
|
|
|
background-color: hsla(240, 8%, 15%, .9);
|
|
|
|
padding: 0 var(--side-nav) 0 var(--side-nav);
|
|
|
|
box-shadow: .3rem .3rem .6rem -.2rem rgba(0,0,0,.7);
|
|
|
|
display: flex;
|
|
|
|
transform: translate(-120vw, 0);
|
|
|
|
align-items: center;
|
|
|
|
transition: transform .1s var(--in-cubic);
|
|
|
|
justify-content: space-between;
|
|
|
|
z-index: 5;
|
|
|
|
background-color: transparent;
|
|
|
|
user-select: none;
|
|
|
|
transform: none;
|
|
|
|
|
|
|
|
transition: none;
|
|
|
|
|
|
|
|
box-shadow: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
h2 {
|
|
|
@ -88,8 +70,6 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.open {
|
|
|
|
.open {
|
|
|
|
transform: translate(-5rem,0);
|
|
|
|
|
|
|
|
transition: transform .2s var(--out-cubic);
|
|
|
|
|
|
|
|
overflow-y: auto;
|
|
|
|
overflow-y: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -99,17 +79,63 @@
|
|
|
|
margin: 0;
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.primary li { display: inline }
|
|
|
|
li {
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
li.active {
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.primary:first-of-type li {
|
|
|
|
ul {
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
padding: 0 2em 0 0;
|
|
|
|
|
|
|
|
background: url(/icons/chevron.svg) calc(100% - 1em) 70% no-repeat;
|
|
|
|
|
|
|
|
background-size: 1em 1em;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ul::after {
|
|
|
|
|
|
|
|
/* prevent clicks from registering if nav is closed */
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
content: '';
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ul.open {
|
|
|
|
|
|
|
|
padding: 0 2em 1em 2em;
|
|
|
|
|
|
|
|
background: white;
|
|
|
|
|
|
|
|
border-left: 1px solid #eee;
|
|
|
|
|
|
|
|
border-right: 1px solid #eee;
|
|
|
|
|
|
|
|
border-bottom: 1px solid #eee;
|
|
|
|
|
|
|
|
border-radius: 0 0 var(--border-r) var(--border-r);
|
|
|
|
|
|
|
|
align-self: start;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ul.open li {
|
|
|
|
display: block;
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
/* padding: 1.7rem 0 0; */
|
|
|
|
|
|
|
|
text-align: right
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.primary li a {
|
|
|
|
ul.open::after {
|
|
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ul li a {
|
|
|
|
font-size: var(--h6);
|
|
|
|
font-size: var(--h6);
|
|
|
|
padding: 0 .8rem;
|
|
|
|
padding: 0 .8rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ul.open li a {
|
|
|
|
|
|
|
|
font-size: var(--h6);
|
|
|
|
|
|
|
|
padding: 2rem .7rem 0 .8rem;
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.primary :global(svg) {
|
|
|
|
.primary :global(svg) {
|
|
|
|
width: 2rem;
|
|
|
|
width: 2rem;
|
|
|
|
height: 2rem;
|
|
|
|
height: 2rem;
|
|
|
@ -133,7 +159,7 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.logotype {
|
|
|
|
.logotype {
|
|
|
|
display: none;
|
|
|
|
display: block;
|
|
|
|
font-size: 2.8rem;
|
|
|
|
font-size: 2.8rem;
|
|
|
|
letter-spacing: .12em;
|
|
|
|
letter-spacing: .12em;
|
|
|
|
line-height: 1;
|
|
|
|
line-height: 1;
|
|
|
@ -157,73 +183,58 @@
|
|
|
|
color: var(--prime)
|
|
|
|
color: var(--prime)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* media-queries -------------------------- */
|
|
|
|
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
@media (min-width: 768px) {
|
|
|
|
.mousecatcher,
|
|
|
|
ul {
|
|
|
|
.menu-link,
|
|
|
|
padding: 0;
|
|
|
|
.secondary { display: none }
|
|
|
|
background: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
nav {
|
|
|
|
|
|
|
|
position: fixed;
|
|
|
|
ul::after {
|
|
|
|
top: 0;
|
|
|
|
display: none;
|
|
|
|
left: 0;
|
|
|
|
|
|
|
|
width: 100vw;
|
|
|
|
|
|
|
|
height: var(--nav-h);
|
|
|
|
|
|
|
|
padding: 0 var(--side-nav) 0 var(--side-nav);
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
|
|
|
transform: none;
|
|
|
|
|
|
|
|
transition: none;
|
|
|
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.primary:first-of-type li {
|
|
|
|
li {
|
|
|
|
display: inline;
|
|
|
|
display: inline !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.logotype { display: block }
|
|
|
|
.hide-if-desktop {
|
|
|
|
|
|
|
|
display: none !important;
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
<div class='{open ? "open": "closed"} mousecatcher' on:click="{() => open = false}" />
|
|
|
|
<svelte:window on:click="{() => open = false}"/>
|
|
|
|
|
|
|
|
|
|
|
|
<header>
|
|
|
|
<header>
|
|
|
|
<span class='menu-link' on:click="{toggleOpen}">
|
|
|
|
<nav>
|
|
|
|
{#if open}
|
|
|
|
|
|
|
|
<Icon name='close' />
|
|
|
|
|
|
|
|
{:else}
|
|
|
|
|
|
|
|
<Icon name='menu' />
|
|
|
|
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<nav bind:this={nav} class='{open ? "open": "closed"}' on:click="{() => open = false}" >
|
|
|
|
|
|
|
|
<a rel="prefetch" href='.' class="home" title='Homepage'>
|
|
|
|
<a rel="prefetch" href='.' class="home" title='Homepage'>
|
|
|
|
<h2 class='logotype'>Svelte</h2>
|
|
|
|
<h2 class='logotype'>Svelte</h2>
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
|
<ul class='primary'>
|
|
|
|
<ul
|
|
|
|
<li><a rel='prefetch' class='{segment === "guide" ? "active": ""}' href='guide'>Guide</a></li>
|
|
|
|
bind:this={ul}
|
|
|
|
<li><a rel='prefetch' class='{segment === "repl" ? "active": ""}' href='repl'>REPL</a></li>
|
|
|
|
class="primary"
|
|
|
|
<li><a rel='prefetch' class='{segment === "blog" ? "active": ""}' href='blog'>Blog</a></li>
|
|
|
|
class:open
|
|
|
|
<li><a href='https://sapper-redesign.now.sh'>Sapper</a></li>
|
|
|
|
on:mouseenter="{() => open = true}"
|
|
|
|
|
|
|
|
on:mouseleave="{() => open = false}"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<li class="hide-if-desktop" class:active="{!segment}"><a rel="prefetch" href=".">Home</a></li>
|
|
|
|
|
|
|
|
<li class:active="{segment === 'guide'}"><a rel="prefetch" href="guide">Guide</a></li>
|
|
|
|
|
|
|
|
<li class:active="{segment === 'repl'}"><a rel="prefetch" href="repl">REPL</a></li>
|
|
|
|
|
|
|
|
<li class:active="{segment === 'blog'}"><a rel="prefetch" href="blog">Blog</a></li>
|
|
|
|
|
|
|
|
<li><a href="https://sapper.svelte.technology">Sapper</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<li>
|
|
|
|
<a href='https://discord.gg/yy75DKs' title='Discord Chat'>
|
|
|
|
<a href="https://discord.gg/yy75DKs" title="Discord Chat">
|
|
|
|
<Icon name='message-square' />
|
|
|
|
<Icon name="message-square" />
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
<li>
|
|
|
|
<a href='https://github.com/sveltejs/svelte' title='Github Repo'>
|
|
|
|
<a href="https://github.com/sveltejs/svelte" title="Github Repo">
|
|
|
|
<Icon name='github' />
|
|
|
|
<Icon name="github" />
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <ul class='secondary'>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul> -->
|
|
|
|
|
|
|
|
</nav>
|
|
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
</header>
|