various

site/content/guide/00-introduction.md

@@ -17,7 +17,7 @@ You can build your entire app with Svelte, or you can add it incrementally to an
 
 ### Understanding Svelte components
 
-In Svelte, an application is composed from one or more _components_. A component is a reusable self-contained block of code that encapsulates markup, styles and behaviours that belong together, written into an `.html` file. Here's a simple example:
+In Svelte, an application is composed from one or more *components*. A component is a reusable self-contained block of code that encapsulates markup, styles and behaviours that belong together, written into an `.html` file. Here's a simple example:
 
 ```html
 <!--{ title: 'Hello world!' }-->

site/src/components/icon.html

@@ -9,8 +9,7 @@
 <script>
 	export let clas = '';
 	export let name;
-
+	export let size = 20;
-	let size = 20;
 </script>
 
 <!-- style="--color: {color ? color : 'currentColor'}" -->

site/src/routes/guide/index.html

@@ -72,29 +72,6 @@
 	});
 </script>
 
-<svelte:head>
-	<title>Learn Svelte</title>
-</svelte:head>
-
-<div bind:this={container} class='content linkify listify'>
-	{#each sections as section}
-	<section id='{section.slug}'>
-		<h2>
-			{section.metadata.title}
-			<small>
-				<a href='https://github.com/sveltejs/svelte.technology/edit/master/content/guide/{section.file}' title='edit this section'>
-					<Icon name='edit' /></a>
-			</small>
-		</h2>
-		{@html section.html}
-	</section>
-	{/each}
-</div>
-
-<aside class='sidebar'>
-	<GuideContents {sections} />
-</aside>
-
 <style>
 	.sidebar {
 		display: none;
@@ -147,6 +124,16 @@
 		padding: 6.4rem 0 1.6rem 0;
 	}
 
+	.content :global(.icon) {
+		width: 20px;
+		height: 20px;
+		stroke: currentColor;
+		stroke-width: 2;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+		fill: none;
+	}
+
 	/* max line-length ~60 chars */
 	section > :global(p) {
 		max-width: var(--linemax)
@@ -182,3 +169,26 @@
 		background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='#40b3ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12' y2='17'/%3E%3C/svg%3E");
 	}
 </style>
+
+<svelte:head>
+	<title>Learn Svelte</title>
+</svelte:head>
+
+<div bind:this={container} class='content linkify listify'>
+	{#each sections as section}
+	<section id='{section.slug}'>
+		<h2>
+			{section.metadata.title}
+			<small>
+				<a href='https://github.com/sveltejs/svelte.technology/edit/master/content/guide/{section.file}' title='edit this section'>
+					<Icon name='edit' /></a>
+			</small>
+		</h2>
+		{@html section.html}
+	</section>
+	{/each}
+</div>
+
+<aside class='sidebar'>
+	<GuideContents {sections} />
+</aside>

site/src/routes/repl/_components/Input/ComponentSelector.html

@@ -202,7 +202,7 @@
 						</div>
 
 						<span class="remove" on:click="{() => remove(component)}">
-							<Icon name="close"/>
+							<Icon name="close" size={12}/>
 							<!-- &times; -->
 						</span>
 					{/if}

site/src/routes/repl/_components/Repl.html

@@ -7,7 +7,7 @@
 	import Input from './Input/index.html';
 	import Output from './Output/index.html';
 
-	export let version;
+	export let version = 'alpha'; // TODO change this to latest when the time comes
 	export let app;
 
 	let component_store = writable([]);

site/static/global.css

@@ -89,7 +89,7 @@ a:focus {
 	--nav-h:       6rem;
 	--top-offset:  6rem;
 	--sidebar-w:  24rem;
-	--code-w:      48em;
+	--code-w:      72em;
 	--side-nav:  4.8rem;
 	--side-page:   var(--side-nav);
 
@@ -126,7 +126,7 @@ a:focus {
 	--h3:      2.4rem;
 	--h2:        3rem;
 	--h1:      3.2rem;
-	--linemax:   32em;      /* max line-length */
+	--linemax:   42em;      /* max line-length */
 	--lh:      calc(4/2.2); /* base line-height */
 }
 
@@ -158,7 +158,7 @@ p {
 .b, b, strong { font-weight: 500 }
 
 i, em {
-	color: var(--prime);
+	/* color: var(--prime); */
 	font-style: normal;
 }
 
@@ -202,8 +202,11 @@ blockquote {
 	padding: 2rem 2.4rem 1.8rem 2.4rem;
 	border-radius: var(--border-r);
 	font-family: var(--font);
+	max-width: var(--linemax);
+}
+
+blockquote p {
 	font-size: var(--h5);
-	max-width: 38.3em;
 }
 
 blockquote :last-child {
@@ -399,7 +402,7 @@ table span {
 
 .open-in-repl {
 	position: absolute;
-	margin-top: 5.4rem;
+	margin-top: 4rem;
 	margin-left: -2.5rem;
 	width: 3.6rem;
 	height: 3.6rem;

site/static/prism.css

@@ -36,7 +36,7 @@ pre[class*='language-'] {
 /*	code-blocks ---------------------------- */
 pre[class*='language-'] {
 	overflow: auto;
-	padding: 3.2rem 4rem;
+	padding: 1.5rem 2rem;
 	margin: .8rem 0 2.4rem;
 	max-width: var(--code-w);
 	border-radius: var(--border-r);