msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

a few tweaks

Browse Source
pull/2272/head
Rich Harris 6 years ago
parent d71393a377
commit ad2924acb3
8 changed files with 68 additions and 89 deletions
Show Stats Download Patch File Download Diff File

4
site/content/examples/11-svg/05-svg-transitions/App.svelte
Unescape View File

@ -1,7 +1,7 @@
<script>
import { quintOut } from 'svelte/easing';
import { fade, draw, fly } from 'svelte/transition';
import { expand, blur } from './custom-transitions.js';
import { expand } from './custom-transitions.js';
import { inner, outer } from './shape.js';
let visible = true;
@ -60,7 +60,7 @@
<div class="centered" out:fly="{{y: -20, duration: 800}}">
{#each 'SVELTE' as char, i}
<span
in:blur="{{delay: 1000 + i * 150, duration: 800}}"
in:fade="{{delay: 1000 + i * 150, duration: 800}}"
>{char}</span>
{/each}
</div>

16
site/content/examples/11-svg/05-svg-transitions/custom-transitions.js
Unescape View File

@ -15,20 +15,4 @@ export function expand(node, params) {
easing,
css: t => `opacity: ${t}; stroke-width: ${t * w}`
};
}
export function blur(node, params) {
const {
b = 10,
delay = 0,
duration = 400,
easing = cubicOut
} = params;
return {
delay,
duration,
easing,
css: (t, u) => `opacity: ${t}; filter: blur(${u * b}px);`
};
}

3
site/src/routes/_layout.svelte
Unescape View File

@ -20,7 +20,8 @@
main {
position: relative;
margin: 0 auto;
padding: var(--nav-h) var(--side-nav) 0 var(--side-nav);
/* padding: var(--nav-h) var(--side-nav) 0 var(--side-nav); */
padding: var(--nav-h) 0 0 0;
overflow-x: hidden;
}
</style>

2
site/src/routes/blog/index.svelte
Unescape View File

@ -30,7 +30,7 @@
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
min-height: calc(100vh - var(--nav-h));
padding: var(--top-offset) 0;
padding: var(--top-offset) var(--side-nav) 0 var(--side-nav);
max-width: var(--main-width);
margin: 0 auto;
}

1
site/src/routes/examples/index.svelte
Unescape View File

@ -15,6 +15,7 @@
<style>
.content {
max-width: 120rem;
padding: 0 var(--side-nav);
margin: 0 auto;
}

110
site/src/routes/index.svelte
Unescape View File

@ -10,6 +10,7 @@
.container {
position: relative;
margin: 10rem auto;
padding: 0 var(--side-nav);
max-width: 120rem;
}
@ -107,15 +108,22 @@
top: 0.6em;
}
.example {
.examples {
background: var(--second);
color: white;
/* padding: 2em 0; */
overflow: hidden;
}
.example {
/* background: var(--second);
color: white;
padding: 0.8rem;
border-radius: var(--border-r);
border-radius: var(--border-r); */
}
.example > div:first-child {
padding: 0.8rem;
/* padding: 0.8rem; */
}
iframe {
@ -226,53 +234,55 @@ npm run dev & open http://localhost:5000
</div>
</section>
<section class="container example linkify">
<div>
<p>Svelte components are written in HTML files. Just add data.</p>
</div>
<iframe
title="Hello world example"
src="/repl/embed?example=hello-world"
scrolling="no"
></iframe>
</section>
<section class="container example linkify">
<div>
<p>CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="TODO-blog-post-on-css-in-js">use your favourite CSS-in-JS library</a>.</p>
</div>
<iframe
title="Scope styles example"
src="/repl/embed?example=nested-components"
scrolling="no"
></iframe>
</section>
<section class="container example linkify">
<div>
<p>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p>
</div>
<iframe
title="Reactivity example"
src="/repl/embed?example=reactive-assignments"
scrolling="no"
></iframe>
</section>
<section class="container example linkify">
<div>
<p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p>
</div>
<iframe
title="Transitions example"
src="/repl/embed?example=svg-transitions"
scrolling="no"
></iframe>
</section>
<div class="examples">
<section class="container example linkify">
<div>
<p>Svelte components are written in HTML files. Just add data.</p>
</div>
<iframe
title="Hello world example"
src="/repl/embed?example=hello-world"
scrolling="no"
></iframe>
</section>
<section class="container example linkify">
<div>
<p>CSS is component-scoped by default — no more style collisions or specificity wars. Or you can <a href="TODO-blog-post-on-css-in-js">use your favourite CSS-in-JS library</a>.</p>
</div>
<iframe
title="Scope styles example"
src="/repl/embed?example=nested-components"
scrolling="no"
></iframe>
</section>
<section class="container example linkify">
<div>
<p>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p>
</div>
<iframe
title="Reactivity example"
src="/repl/embed?example=reactive-assignments"
scrolling="no"
></iframe>
</section>
<section class="container example linkify">
<div>
<p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p>
</div>
<iframe
title="Transitions example"
src="/repl/embed?example=svg-transitions"
scrolling="no"
></iframe>
</section>
</div>
<section class="container linkify">
<h3>Who's using Svelte?</h3>

2
site/src/routes/repl/index.svelte
Unescape View File

@ -122,7 +122,7 @@
overflow: hidden;
background-color: var(--back);
padding: var(--app-controls-h) 0 0 0;
margin: 0 calc(var(--side-nav) * -1);
/* margin: 0 calc(var(--side-nav) * -1); */
box-sizing: border-box;
}

19
site/src/routes/tutorial/[slug]/index.svelte
Unescape View File

@ -102,7 +102,7 @@
height: calc(100vh - var(--nav-h));
overflow: hidden;
padding: 0;
margin: 0 calc(var(--side-nav) * -1);
/* margin: 0 calc(var(--side-nav) * -1); */
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(33.333%, 480px) auto;
@ -118,14 +118,6 @@
color: white;
}
.tutorial-repl {
}
.table-of-contents {
}
.chapter-markup {
padding: 1em;
overflow: auto;
@ -153,11 +145,6 @@
color: white;
}
/* .chapter-markup::-webkit-scrollbar-track {
background-color: var(--second);
width: 4px;
} */
.chapter-markup::-webkit-scrollbar {
background-color: var(--second);
width: 8px;
@ -177,10 +164,6 @@
white-space: nowrap;
}
.chapter-markup :global(pre) :global(code) {
/* color: var(--text); */
}
.controls {
border-top: 1px solid rgba(255,255,255,0.1);
padding: 1em 0 0 0;

Write Preview
Loading…
Cancel
Save