replace homepage TODO with quickstart guide

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>
 

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;

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">
+<section class="container grid half">
-	<div>
+	<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>
 

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">

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);
 }