From d7dc52a9de60f2c1a7d2fc5d7394b96f1c331bf4 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 24 Dec 2018 21:18:35 -0500
Subject: [PATCH] better mobile styles

---
 site/src/components/InlineSvg.html |   4 +
 site/src/components/TopNav.html    | 217 +++++++++++++++--------------
 site/src/routes/blog/index.html    |  19 +--
 site/src/routes/guide/index.html   |   2 +-
 site/src/routes/repl/index.html    |   8 +-
 site/static/global.css             |   2 +-
 site/static/icons/chevron.svg      |   4 +
 7 files changed, 126 insertions(+), 130 deletions(-)
 create mode 100644 site/static/icons/chevron.svg

diff --git a/site/src/components/InlineSvg.html b/site/src/components/InlineSvg.html
index 9b4c2e3ddb..e29810ae97 100644
--- a/site/src/components/InlineSvg.html
+++ b/site/src/components/InlineSvg.html
@@ -108,4 +108,8 @@
 		<path d="M15,7L18,7A2 2 0 0 1 18,17L15,17"/>
 		<path d="M7,12L17,12"/>
 	</symbol>
+
+	<symbol id="chevron" class="icon" viewBox="0 0 24 24">
+		<path d="M2,7 L12,17 L20,7"/>
+	</symbol>
 </svg>
\ No newline at end of file
diff --git a/site/src/components/TopNav.html b/site/src/components/TopNav.html
index 4cf538ffc4..00e384cdf7 100644
--- a/site/src/components/TopNav.html
+++ b/site/src/components/TopNav.html
@@ -1,57 +1,36 @@
 <script>
+	import { onMount } from 'svelte';
 	import Icon from './Icon.html';
 	import Logo from './Logo.html';
 
 	export let segment;
 
 	let open = false;
-	let nav;
-
-	function toggleOpen() {
-		// if the menu is closing, scroll back to the top *after* it
-		// shuts. otherwise, scroll back to the top immediately
-		// (just in case the user reopened before it happened).
-		// The reason we don't just do it when the menu opens is
-		// that the scrollbar visibly flashes
-		if (open) {
-			setTimeout(() => {
-				if (!open) {
-					nav.scrollTop = 0;
-				}
-			}, 350);
-		} else {
-			nav.scrollTop = 0;
+
+	// TODO remove this post-https://github.com/sveltejs/svelte/issues/1914
+	let ul;
+	onMount(() => {
+		function handler(event) {
+			if (!open) {
+				event.preventDefault();
+				event.stopPropagation();
+				open = true;
+			}
 		}
 
-		open = !open;
-	}
+		ul.addEventListener('touchstart', handler, {
+			capture: true
+		});
+
+		return () => {
+			ul.removeEventListener('touchstart', handler, {
+				capture: true
+			});
+		};
+	});
 </script>
 
 <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 {
 		position: fixed;
 		display: flex;
@@ -65,20 +44,23 @@
 		box-shadow: 0 -0.4rem 0.9rem 0.2rem rgba(0,0,0,.5);
 		font-family: var(--font);
 		z-index: 10;
+		user-select: none;
 	}
 
 	nav {
 		position: fixed;
-		width: calc(var(--sidebar-w) + 6rem);
-		height: calc(100vh - var(--nav-h));
-		top: var(--nav-h);
-		padding: 6rem 3rem 6rem 6rem;
-		background-color: hsla(240, 8%, 15%, .9);
-		box-shadow: .3rem .3rem .6rem -.2rem rgba(0,0,0,.7);
-		transform: translate(-120vw, 0);
-		transition: transform .1s var(--in-cubic);
-		z-index: 5;
-		user-select: none;
+		top: 0;
+		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;
 	}
 
 	h2 {
@@ -88,8 +70,6 @@
 	}
 
 	.open {
-		transform: translate(-5rem,0);
-		transition: transform .2s var(--out-cubic);
 		overflow-y: auto;
 	}
 
@@ -99,17 +79,63 @@
 		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;
+		/* padding: 1.7rem 0 0; */
+		text-align: right
 	}
 
-	.primary li a {
+	ul.open::after {
+		display: none;
+	}
+
+	ul li a {
 		font-size: var(--h6);
 		padding: 0 .8rem;
 	}
 
+	ul.open li a {
+		font-size: var(--h6);
+		padding: 2rem .7rem 0 .8rem;
+		display: block;
+	}
+
 	.primary :global(svg) {
 		width: 2rem;
 		height: 2rem;
@@ -133,7 +159,7 @@
 	}
 
 	.logotype {
-		display: none;
+		display: block;
 		font-size: 2.8rem;
 		letter-spacing: .12em;
 		line-height: 1;
@@ -157,73 +183,58 @@
 		color: var(--prime)
 	}
 
-	/*  media-queries -------------------------- */
 	@media (min-width: 768px) {
-		.mousecatcher,
-		.menu-link,
-		.secondary { display: none }
-
-		nav {
-			position: fixed;
-			top: 0;
-			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;
+		ul {
+			padding: 0;
+			background: none;
+		}
+
+		ul::after {
+			display: none;
 		}
 
-		.primary:first-of-type li {
-			display: inline;
+		li {
+			display: inline !important;
 		}
 
-		.logotype { display: block }
+		.hide-if-desktop {
+			display: none !important;
+		}
 	}
 </style>
 
-<div class='{open ? "open": "closed"} mousecatcher' on:click="{() => open = false}" />
+<svelte:window on:click="{() => open = false}"/>
 
 <header>
-	<span class='menu-link' on:click="{toggleOpen}">
-		{#if open}
-			<Icon name='close' />
-		{:else}
-			<Icon name='menu' />
-		{/if}
-	</span>
-
-	<nav bind:this={nav} class='{open ? "open": "closed"}' on:click="{() => open = false}" >
+	<nav>
 		<a rel="prefetch" href='.' class="home" title='Homepage'>
 			<h2 class='logotype'>Svelte</h2>
 		</a>
 
-		<ul class='primary'>
-			<li><a rel='prefetch' class='{segment === "guide" ? "active": ""}' href='guide'>Guide</a></li>
-			<li><a rel='prefetch' class='{segment === "repl" ? "active": ""}' href='repl'>REPL</a></li>
-			<li><a rel='prefetch' class='{segment === "blog" ? "active": ""}' href='blog'>Blog</a></li>
-			<li><a href='https://sapper-redesign.now.sh'>Sapper</a></li>
+		<ul
+			bind:this={ul}
+			class="primary"
+			class:open
+			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>
-				<a href='https://discord.gg/yy75DKs' title='Discord Chat'>
-					<Icon name='message-square' />
+				<a href="https://discord.gg/yy75DKs" title="Discord Chat">
+					<Icon name="message-square" />
 				</a>
 			</li>
 
 			<li>
-				<a href='https://github.com/sveltejs/svelte' title='Github Repo'>
-					<Icon name='github' />
+				<a href="https://github.com/sveltejs/svelte" title="Github Repo">
+					<Icon name="github" />
 				</a>
 			</li>
 		</ul>
-
-		<!-- <ul class='secondary'>
-
-		</ul> -->
 	</nav>
 </header>
\ No newline at end of file
diff --git a/site/src/routes/blog/index.html b/site/src/routes/blog/index.html
index 3fd22da968..53490c6e78 100644
--- a/site/src/routes/blog/index.html
+++ b/site/src/routes/blog/index.html
@@ -26,24 +26,10 @@
 
 <style>
 	.posts {
-		/* display: grid; */
 		grid-template-columns: 1fr 1fr;
 		grid-gap: 1em;
-		/* prevent scroll bar pop-in when navigating to post */
-		/* yes this is hacktacular */
 		min-height: calc(100vh - var(--nav-h));
-
-		padding: 10rem var(--side-page);
-		/* background-color: var(--back-light) */
-	}
-
-	.post {
-		/* display: flex;
-		flex-direction: column;
-		flex-wrap: wrap;
-		justify-content: space-between;
-		align-items: center;
-		padding: 4rem 3.2rem 2.4rem; */
+		padding: var(--top-offset) 0;
 	}
 
 	h2 {
@@ -83,9 +69,6 @@
 		color: var(--second);
 	}
 
-	/* fast link-reset */
-	/* .posts a { all: unset; cursor: pointer } */
-
 	.post > a {
 		display: block;
 	}
diff --git a/site/src/routes/guide/index.html b/site/src/routes/guide/index.html
index 7e3b546f06..20c0f82419 100644
--- a/site/src/routes/guide/index.html
+++ b/site/src/routes/guide/index.html
@@ -108,7 +108,7 @@
 		max-width: calc(var(--main-width) + 2 * var(--side-nav));
 		margin: 0 auto;
 		-moz-tab-size: 2;
-		padding: var(--top-offset) var(--side-nav);
+		padding: var(--top-offset) 0;
 		tab-size: 2;
 	}
 
diff --git a/site/src/routes/repl/index.html b/site/src/routes/repl/index.html
index 29367af1f1..79ba1e4277 100644
--- a/site/src/routes/repl/index.html
+++ b/site/src/routes/repl/index.html
@@ -143,7 +143,7 @@
 		overflow: hidden;
 		background-color: var(--back);
 		padding: var(--app-controls-h) 0 0 0;
-		margin: 0 -0.8rem;
+		margin: 0 calc(var(--side-nav) * -1);
 		box-sizing: border-box;
 	}
 
@@ -157,12 +157,6 @@
 
 	.pane { width: 100%; height: 100% }
 
-	@media (min-width: 600px) {
-		.repl-outer {
-			margin: 0 -4.8rem; /* can't do calc(0 - var(--side-nav)) */
-		}
-	}
-
 	.loading {
 		text-align: center;
 		color: var(--second);
diff --git a/site/static/global.css b/site/static/global.css
index 3483fd1815..a50a90e3fd 100644
--- a/site/static/global.css
+++ b/site/static/global.css
@@ -169,7 +169,7 @@ a:focus {
 	--sidebar-w:  24rem;
 	--main-width: 80rem;
 	--code-w:      72em;
-	--side-nav:   .8rem;
+	--side-nav:  1.6rem;
 	--side-page:   var(--side-nav);
 
 	/* easings */
diff --git a/site/static/icons/chevron.svg b/site/static/icons/chevron.svg
new file mode 100644
index 0000000000..3706f53278
--- /dev/null
+++ b/site/static/icons/chevron.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" style="width:24px;height:24px" viewBox="0 0 24 24">
+	<path style="stroke: #676778; stroke-width: 2; fill: none" d="M2,8 L12,16 L22,8"/>
+</svg>
\ No newline at end of file