Content tweaks (sveltejs#260)

* make copy mobile-friendly

* make file edit buttons more obvious

* use a colour that works for light and dark modes

* space

---------

Co-authored-by: Rich Harris <[email protected]>

Author: Rich-Harris

content/tutorial/01-svelte/01-introduction/01-welcome-to-svelte/README.md

@@ -27,4 +27,4 @@ This tutorial is split into four main parts:
 
 Each section will present an exercise designed to illustrate a feature. Later exercises build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the menu above.
 
-If you get stuck, you can click the `solve` button to the left of the editor. (It's disabled on sections like this one that don't include an exercise.) Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor.
+If you get stuck, you can click the `solve` button <span class="desktop">to the left of the editor</span><span class="mobile">in the top right of the editor view</span>. (<span class="mobile">Use the toggle below to switch between tutorial and editor views. </span>The `solve` button is disabled on sections like this one that don't include an exercise.) Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it in to the editor.

content/tutorial/01-svelte/01-introduction/02-your-first-component/README.md

@@ -28,4 +28,4 @@ Inside the curly braces, we can put any JavaScript we want. Try changing `name`
 
 ```svelte
 <h1>Hello {name+++.toUpperCase()+++}!</h1>
-```
+```

content/tutorial/01-svelte/01-introduction/04-styling/README.md

@@ -9,7 +9,7 @@ Just like in HTML, you can add a `<style>` tag to your component. Let's add some
 
 <style>
 +++	p {
-		color: purple;
+		color: goldenrod;
 		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 	}+++

content/tutorial/01-svelte/01-introduction/04-styling/app-b/src/lib/App.svelte

@@ -2,7 +2,7 @@
 
 <style>
 	p {
-		color: purple;
+		color: goldenrod;
 		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 	}

content/tutorial/01-svelte/01-introduction/05-nested-components/app-a/src/lib/App.svelte

@@ -2,7 +2,7 @@
 
 <style>
 	p {
-		color: purple;
+		color: goldenrod;
 		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 	}

content/tutorial/01-svelte/01-introduction/05-nested-components/app-b/src/lib/App.svelte

@@ -7,7 +7,7 @@
 
 <style>
 	p {
-		color: purple;
+		color: goldenrod;
 		font-family: 'Comic Sans MS', cursive;
 		font-size: 2em;
 	}

content/tutorial/01-svelte/03-props/02-default-values/README.md

@@ -14,5 +14,5 @@ If we now add a second component _without_ an `answer` prop, it will fall back t
 
 ```svelte
 <Nested answer={42}/>
-+++<Nested/>+++
++++<Nested />+++
 ```

src/lib/icons/file-edit-inline-dark.svg

@@ -143,6 +143,25 @@
 		background: rgba(255, 62, 0, 0.1);
 	}
 
+	.text :global([data-file]) {
+		cursor: pointer;
+		background-image: url($lib/icons/file-edit.svg);
+		background-repeat: no-repeat;
+		background-position: 0.5rem 50%;
+		background-size: 1rem 1rem;
+		padding-left: 2rem;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.text :global([data-file]) {
+			background-image: url($lib/icons/file-edit-inline-dark.svg);
+		}
+	}
+
+	.text :global(.desktop) {
+		display: none;
+	}
+
 	footer {
 		padding: 1rem 3rem;
 		display: flex;
@@ -179,4 +198,14 @@
 		border-radius: var(--sk-border-radius);
 		line-height: 1;
 	}
+
+	@media (min-width: 800px) {
+		.text :global(.mobile) {
+			display: none;
+		}
+
+		.text :global(.desktop) {
+			display: inline;
+		}
+	}
 </style>