+
+
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 browser, Svelte shifts that work into a compile step that happens when you build your app.
Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.
@@ -190,7 +205,17 @@
-
TODO a video intro
+
+npx degit sveltejs/template my-svelte-project
+cd my-svelte-project
+
+npm install
+npm run dev & open http://localhost:5000
+
+
+
See the quickstart guide for more information.
+
+
Learn Svelte
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;
+ }
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);
}