From 64475ff92fad3aeba95d22c71984963c18095f6c Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Mon, 24 Dec 2018 13:16:26 -0500
Subject: [PATCH] replace homepage TODO with quickstart guide

---
 site/src/components/TopNav.html               |  2 +-
 site/src/routes/guide/index.html              |  7 ++++
 site/src/routes/index.html                    | 35 ++++++++++++++++---
 .../routes/repl/_components/Output/index.html |  4 +++
 site/static/global.css                        |  9 +----
 5 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/site/src/components/TopNav.html b/site/src/components/TopNav.html
index cff6d27b2d..4cf538ffc4 100644
--- a/site/src/components/TopNav.html
+++ b/site/src/components/TopNav.html
@@ -199,7 +199,7 @@
 	</span>
 
 	<nav bind:this={nav} class='{open ? "open": "closed"}' on:click="{() => open = false}" >
-		<a href='.' class="home" title='Homepage'>
+		<a rel="prefetch" href='.' class="home" title='Homepage'>
 			<h2 class='logotype'>Svelte</h2>
 		</a>
 
diff --git a/site/src/routes/guide/index.html b/site/src/routes/guide/index.html
index 0859871fdd..3c7b7c3c8f 100644
--- a/site/src/routes/guide/index.html
+++ b/site/src/routes/guide/index.html
@@ -158,6 +158,13 @@
 		background: transparent;
 	}
 
+	.content :global(code) {
+		padding: .3rem .8rem .3rem;
+		margin: 0 0.2rem;
+		top: -.1rem;
+		background: #f9f9f9;
+	}
+
 	.content :global(.icon) {
 		width: 20px;
 		height: 20px;
diff --git a/site/src/routes/index.html b/site/src/routes/index.html
index 6c8820ff9e..6d1933e728 100644
--- a/site/src/routes/index.html
+++ b/site/src/routes/index.html
@@ -81,6 +81,8 @@
 		text-align: right;
 		margin-top: auto;
 		padding: 0 1.2em 0 0;
+		font-family: Roboto, sans-serif;
+		font-size: 1.6rem;
 	}
 
 	.box a:hover {
@@ -88,17 +90,22 @@
 		text-decoration: underline;
 	}
 
-	.box a::after {
+	.box a::after, .cta::after {
 		content: '';
 		position: absolute;
 		display: block;
 		right: 0;
-		top: 0.4em;
+		top: 0.25em;
 		width: 1em;
 		height: 1em;
 		background: url(/icons/arrow-right.svg);
 	}
 
+	.cta::after {
+		right: 0.5em;
+		top: 0.6em;
+	}
+
 	h6 {
 		max-width: 25em;
 		padding: 2.4rem;
@@ -123,6 +130,14 @@
 		border-radius: var(--border-r);
 	}
 
+	a.cta {
+		background-color: var(--prime);
+    padding: 0.5em 1.8em 0.5em 1em;
+    border-radius: var(--border-r);
+    color: white;
+    position: relative;
+	}
+
 	@media (min-width: 920px) {
 		.example {
 			display: grid;
@@ -180,8 +195,8 @@
 	</ul>
 </section>
 
-<section class="container grid half linkify">
-	<div>
+<section class="container grid half">
+	<div class="linkify">
 		<p>Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the <em>browser</em>, Svelte shifts that work into a <em>compile step</em> that happens when you build your app.</p>
 
 		<p>Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.</p>
@@ -190,7 +205,17 @@
 	</div>
 
 	<div>
-		<p>TODO a video intro</p>
+		<pre class="language-bash">
+npx degit sveltejs/template my-svelte-project
+cd my-svelte-project
+
+npm install
+npm run dev & open http://localhost:5000
+		</pre>
+
+		<p class="linkify">See the <a href="blog/the-easiest-way-to-get-started">quickstart guide</a> for more information.</p>
+
+		<p><a rel="prefetch" class="cta" href="guide">Learn Svelte</a></p>
 	</div>
 </section>
 
diff --git a/site/src/routes/repl/_components/Output/index.html b/site/src/routes/repl/_components/Output/index.html
index fc2368d538..4fe9578c5b 100644
--- a/site/src/routes/repl/_components/Output/index.html
+++ b/site/src/routes/repl/_components/Output/index.html
@@ -95,6 +95,10 @@
 		grid-gap: 0.5em;
 		overflow-y: auto;
 	}
+
+	.props code {
+		top: .1rem;
+	}
 </style>
 
 <div class="view-toggle">
diff --git a/site/static/global.css b/site/static/global.css
index 7ac2a773d2..779ffc317e 100644
--- a/site/static/global.css
+++ b/site/static/global.css
@@ -245,12 +245,8 @@ tt, code, kbd, samp {
 
 code {
 	position: relative;
-	top: -.1rem;
-	padding: .3rem .8rem .5rem;
-	margin: 0 .2rem;
 	border-radius: 0.3em;
 	white-space: nowrap;
-	background: #f9f9f9;
 	/* border-top: .1rem solid #e5e5e9;
 	border-left: .1rem solid #e5e5e9; */
 	/* color: inherit; */
@@ -259,10 +255,7 @@ code {
 }
 
 pre code {
-	background: transparent;
-	padding: 0;
 	top: 0;
-	margin: 0;
 	white-space: inherit;
 }
 
@@ -462,7 +455,7 @@ table span {
 .post aside {
 	max-width: none;
 	margin: 0 auto;
-	padding: 1.6rem 0 4rem .8rem;
+	padding: 1.6rem 0 0 .8rem;
 	font: 1.2rem/1.6 var(--font-ui);
 }