mirrors/svelte
mirrors/svelte
0
0
Fork 0
mirror of https://github.com/sveltejs/svelte.git synced 2024-11-29 16:36:44 +01:00
Code Issues Releases Wiki Activity

tweak top nav

Browse Source
This commit is contained in:
Rich Harris 2018-12-26 10:47:54 -05:00
parent abf570521e
commit 53cee5064f
2 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
site/src/components/TopNav.html
View File

@ -6,6 +6,7 @@
export let segment;
let open = false;
let visible = true;
// TODO remove this post-https://github.com/sveltejs/svelte/issues/1914
let ul;
@ -28,6 +29,14 @@
});
};
});
let last_scroll = 0;
function handle_scroll() {
const scroll = window.pageYOffset;
visible = (scroll < 50 || scroll < last_scroll);
last_scroll = scroll;
}
</script>
<style>
@ -45,6 +54,12 @@
font-family: var(--font);
z-index: 10;
user-select: none;
transform: translate(0,calc(-100% - 1rem));
transition: transform 0.2s;
}
header.visible {
transform: none;
}
nav {
@ -64,15 +79,21 @@
}
h2 {
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 300;
font-size: 2.8rem;
letter-spacing: .12em;
line-height: 1;
margin: 0;
top: .1rem;
}
.primary {
list-style: none;
font-family: var(--font);
margin: 0;
line-height: 1;
}
li {
@ -87,7 +108,7 @@
ul {
position: relative;
padding: 0 2em 0 0;
background: url(/icons/chevron.svg) calc(100% - 1em) 70% no-repeat;
background: url(/icons/chevron.svg) calc(100% - 1em) 0.05em no-repeat;
background-size: 1em 1em;
}
@ -126,7 +147,7 @@
}
ul.open li a {
padding: 2rem .7rem 0 .8rem;
padding: 2.3rem .7rem 0 .8rem;
display: block;
}
@ -152,14 +173,6 @@
padding: 0.5em 0;
}
.logotype {
display: block;
font-size: 2.8rem;
letter-spacing: .12em;
line-height: 1;
margin: 0;
}
.home {
position: relative;
top: 0;
@ -215,12 +228,12 @@
}
</style>
<svelte:window on:click="{() => open = false}"/>
<svelte:window on:click="{() => open = false}" on:scroll={handle_scroll}/>
<header>
<header class:visible="{visible || open}">
<nav>
<a rel="prefetch" href='.' class="home" title='Homepage'>
<h2 class='logotype'>Svelte</h2>
<h2>Svelte</h2>
</a>
<ul

12
site/src/routes/guide/index.html
View File

@ -91,20 +91,20 @@
position: absolute;
bottom: 0;
left: 0;
width: 2em;
height: 2em;
width: 3.4rem;
height: 3.4rem;
}
aside.open {
width: calc(100vw - 1.6rem);
height: calc(100vh - var(--nav-h) - 1.8rem);
height: calc(100vh - var(--nav-h) - 7rem);
}
aside.open::before {
content: '';
position: absolute;
left: 0;
bottom: calc(100vh - var(--nav-h) - 5.6rem);
bottom: calc(100vh - var(--nav-h) - 10.8rem);
width: 100%;
height: 2em;
background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,1) 100%);
@ -116,7 +116,7 @@
content: '';
position: absolute;
left: 0;
bottom: 2em;
bottom: 1.9em;
width: 100%;
height: 2em;
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,1) 100%);
@ -128,7 +128,7 @@
font-family: var(--font);
overflow-y: auto;
width: calc(100vw - 4.8rem);
height: calc(100vh - var(--nav-h) - 5.6rem);
height: calc(100vh - var(--nav-h) - 10.8rem);
padding: 2em 0;
bottom: 2em;
}