sveltejs · vedam · Sep 30, 2018 · Sep 30, 2018 · Sep 30, 2018 · Sep 30, 2018
diff --git a/.gitignore b/.gitignore
@@ -7,5 +7,7 @@ credentials.json
 src/manifest
 build
 yarn-error.log
+.vscode
 .env
-.sessions
+.sessions
+_snippets
diff --git a/Design-Readme.md b/Design-Readme.md
@@ -0,0 +1,87 @@
+**Work in progress**
+
+Hi all,  
+so I've done it.  
+I forked the svelte.technology-repo and styled the page along my [style-drafts](https://github.com/sveltejs/svelte.technology/issues/335#issuecomment-421912789).  
+Opinions are welcome.
+
+I also replied on an issue by @rich_harris concerning syntax-highlighting and wanted to throw these thought into discussion too.  
+Just have to find it again...wait...ahh...[here #316](https://github.com/sveltejs/svelte.technology/pull/316#issuecomment-425632718)
+
+and have fun  
+Achim
+
+
+
+---
+
+**Still on the list**
+
+- [ ] REPL – lost SplitPanes (css)
+- [ ] REPL – user menu
+	not able to login/load/check
+- [ ] REPL – wrong viewer-height
+- [x] <strike>REPL – "click to run"</strike>
+- [ ] right top-offset for #anchors. (smooth-scroll solution?)
+- [ ] some mindful/helpful animations?
+- [ ] Browser-testing
+  - [x] <strike>Firefox dislikes my svgs</strike>
+  - [x]  <strike>Safari doesn't want my link-styles</strike>
+  - [ ] No one knows what Explorer will do...
+- [ ] make Link- and List-solution more practicable
+	see Notes in global.css
+- [x] <strike>figure out mobile styles</strike>
+- [x] <strike>nav</strike>
+- [x] <strike>blog-post single-page (rough)</strike>
+- [x] <strike>list-styles</strike>
+- [x] <strike>REPL – fix file-edit (css)</strike>
+- [x] <strike>links</strike>
+- [x] <strike>replace hljs with prism (smaller footprint)</strike>
+- [x] <strike>fix guide-padding</strike>
+- [x] <strike>site icons</strike>
+- [x] <strike>current section icon</strike>
+- [x] <strike>fix blockquotes</strike>
+- [x] <strike>wrong font in syntax-highlighter</strike>
+- [x] <strike>bigger h3</strike>
+- [x] <strike>Home-/Landing-page just rough</strike>
+- [x] <strike>blog (rough list-page)</strike>
+- [x] <strike>repl (rough)</strike>
+- [x] <strike>error (very, very rough)</strike>
+
+
+
+---
+
+**Is it bad to use global.css?**
+
+I thought for main stuff it makes sense to define common stuff in global.css than to "overload" <style> in routes.
+
+<small>Easy to change that if needed/requested.</small>
+
+I know that global.css won't receive auto-css-removal, but is this an issue for commonly, overall used style-stuff?
+I've tried hard to include only real global-stuff.
+
+Main advantage in my eyes is the usage of custom-css-properties for theming, color- and font-stuff or helper-classes.
+
+<small>**hmm. OK.** That could be done with components including css too.</small>
+
+**maybe it's this**
+I find all these `.someting :global(xxx) :global(yy)` disturbing.
+
+**NOTE on css**
+The real basic reset is inline in template.html
+for fastest possible load.
+
+
+
+---
+
+**Some Questions**
+
+- Is an agressive font-subsetting OK?
+- Is this @web-font load ok?
+	I wanted to prevent the inlining of base64.
+	Got it from [fout-with-class](https://github.com/zachleat/web-font-loading-recipes)
+- What are our required glyphs? Even Chinese?
+- Is inlining svg for icons bad practice?
+
diff --git a/content/blog/2018-04-18-version-2.md b/content/blog/2018-04-18-version-2.md
@@ -92,7 +92,7 @@ The Svelte compiler can still see which values `d` depends on, but it's no longe
 Again, you don't need to make this change manually — just run svelte-upgrade on your components, as shown above.
 
 
-## Sorry, IE11. It's not you, it's... well actually, yeah. It's you
+## Sorry, IE11. It's not you, it's...<br>well actually, yeah. It's you
 
 Svelte v1 was careful to only emit ES5 code, so that you wouldn't be forced to faff around with transpilers in order to use it. But it's 2018 now, and almost all browsers support modern JavaScript. By ditching the ES5 constraint, we can generate leaner code.
 

diff --git a/content/guide/00-introduction.md b/content/guide/00-introduction.md
@@ -8,18 +8,17 @@ Svelte is a tool for building fast web applications.
 
 It is similar to JavaScript frameworks such as React, Angular, Vue, and Ractive, which all share a goal of making it easy to build slick interactive user interfaces.
 
-But there's a crucial difference: Svelte converts your app into ideal JavaScript at *build time*, rather than interpreting your application code at *run time*. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.
+But there's a crucial difference: Svelte converts your app into ideal JavaScript at _build time_, rather than interpreting your application code at _run time_. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.
 
 You can build your entire app with Svelte, or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere, without the overhead of a dependency on a conventional framework.
 
 [Read the introductory blog post](/blog/frameworks-without-the-framework) to learn more about Svelte's goals and philosophy.
 
-
 ### 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.
+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.
 
-Like Ractive and Vue, Svelte promotes the concept of *single-file components*: a component is just an `.html` file. Here's a simple example:
+Like Ractive and Vue, Svelte promotes the concept of _single-file components_: a component is just an `.html` file. Here's a simple example:
 
 ```html
 <!--{ title: 'Hello world!' }-->
@@ -29,11 +28,11 @@ Like Ractive and Vue, Svelte promotes the concept of *single-file components*: a
 ```json
 /* { hidden: true } */
 {
-	name: 'world'
+  "name": "world"
 }
 ```
 
-> Wherever you see <strong style="font-weight: 700; font-size: 16px; font-family: Inconsolata, monospace; color: rgba(170,30,30, 0.8)">REPL</strong> links, click through for an interactive example
+> Wherever you see <svg class="icon" style="color:var(--text)"><use xlink:href='#maximize-2' /></svg> links, click through for an interactive example
 
 Svelte turns this into a JavaScript module that you can import into your app:
 
@@ -42,8 +41,8 @@ Svelte turns this into a JavaScript module that you can import into your app:
 import App from './App.html';
 
 const app = new App({
-	target: document.querySelector('main'),
-	data: { name: 'world' }
+  target: document.querySelector('main'),
+  data: { name: 'world' },
 });
 
 // change the data associated with the template
@@ -55,7 +54,6 @@ app.destroy();
 
 Congratulations, you've just learned about half of Svelte's API!
 
-
 ### Getting started
 
 Normally, this is the part where the instructions might tell you to add the framework to your page as a `<script>` tag. But because Svelte runs at build time, it works a little bit differently.
@@ -66,7 +64,7 @@ The best way to use Svelte is to integrate it into your build system – there
 
 #### Getting started using the REPL
 
-Going to the [REPL](/repl) and pressing the *download* button on any of the examples will give you a .zip file containing everything you need to run that example locally. Just unzip it, `cd` to the directory, and run `npm install` and `npm run dev`. See [this blog post](/blog/the-easiest-way-to-get-started) for more information.
+Going to the [REPL](/repl) and pressing the _download_ button on any of the examples will give you a .zip file containing everything you need to run that example locally. Just unzip it, `cd` to the directory, and run `npm install` and `npm run dev`. See [this blog post](/blog/the-easiest-way-to-get-started) for more information.
 
 #### Getting started using degit
 
@@ -87,8 +85,8 @@ npm run dev
 
 You can use any git repo you like — these are the 'official' templates:
 
-* [sveltejs/template](https://github.com/sveltejs/template) — this is what you get by downloading from the REPL
-* [sveltejs/template-webpack](https://github.com/sveltejs/template-webpack) — similar, but uses [webpack](https://webpack.js.org/) instead of [Rollup](https://rollupjs.org/guide/en)
+- [sveltejs/template](https://github.com/sveltejs/template) — this is what you get by downloading from the REPL
+- [sveltejs/template-webpack](https://github.com/sveltejs/template-webpack) — similar, but uses [webpack](https://webpack.js.org/) instead of [Rollup](https://rollupjs.org/guide/en)
 
 #### Getting started using the CLI
 
@@ -101,7 +99,8 @@ If you've installed `svelte` globally, you can use `svelte --help` for a complet
 svelte compile MyComponent.html > MyComponent.js
 svelte compile -i MyComponent.html -o MyComponent.js
 
-# Generate a UMD module from MyComponent.html, inferring its name from the filename ('MyComponent')
+# Generate a UMD module from MyComponent.html,
+# inferring its name from the filename ('MyComponent')
 svelte compile -f umd MyComponent.html > MyComponent.js
 
 # Generate a UMD module, specifying the name