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

Fix HTML and CSS order and format CSS.

Browse Source
pull/6213/head
Babak F 5 years ago
parent b8810b8224
commit 538e07dee9
21 changed files with 160 additions and 124 deletions
Show Stats Download Patch File Download Diff File

10
site/content/tutorial/16-special-elements/02-svelte-component/app-a/BlueThing.svelte
Unescape View File

@ -1,5 +1,7 @@
<style> <strong>Blue thing</strong>
strong { color: blue; }
</style>
<strong>blue thing</strong> <style>
strong {
color: blue;
}
</style>

10
site/content/tutorial/16-special-elements/02-svelte-component/app-a/GreenThing.svelte
Unescape View File

@ -1,5 +1,7 @@
<style> <strong>Green thing</strong>
strong { color: green; }
</style>
<strong>green thing</strong> <style>
strong {
color: green;
}
</style>

10
site/content/tutorial/16-special-elements/02-svelte-component/app-a/RedThing.svelte
Unescape View File

@ -1,5 +1,7 @@
<style> <strong>Red thing</strong>
strong { color: red; }
</style>
<strong>red thing</strong> <style>
strong {
color: red;
}
</style>

10
site/content/tutorial/16-special-elements/02-svelte-component/app-b/BlueThing.svelte
Unescape View File

@ -1,5 +1,7 @@
<style> <strong>Blue thing</strong>
strong { color: blue; }
</style>
<strong>blue thing</strong> <style>
strong {
color: blue;
}
</style>

10
site/content/tutorial/16-special-elements/02-svelte-component/app-b/GreenThing.svelte
Unescape View File

@ -1,5 +1,7 @@
<style> <strong>Green thing</strong>
strong { color: green; }
</style>
<strong>green thing</strong> <style>
strong {
color: green;
}
</style>

10
site/content/tutorial/16-special-elements/02-svelte-component/app-b/RedThing.svelte
Unescape View File

@ -1,5 +1,7 @@
<style> <strong>Red thing</strong>
strong { color: red; }
</style>
<strong>red thing</strong> <style>
strong {
color: red;
}
</style>

32
site/content/tutorial/16-special-elements/03-svelte-window/app-a/App.svelte
Unescape View File

@ -8,6 +8,17 @@
} }
</script> </script>
<svelte:window/>
<div style="text-align: center">
{#if key}
<kbd>{key === ' ' ? 'Space' : key}</kbd>
<p>{keyCode}</p>
{:else}
<p>Focus this window and press any key</p>
{/if}
</div>
<style> <style>
div { div {
display: flex; display: flex;
@ -22,21 +33,10 @@
border-radius: 4px; border-radius: 4px;
font-size: 6em; font-size: 6em;
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
border-top: 5px solid rgba(255,255,255,0.5); border-top: 5px solid rgba(255, 255, 255, 0.5);
border-left: 5px solid rgba(255,255,255,0.5); border-left: 5px solid rgba(255, 255, 255, 0.5);
border-right: 5px solid rgba(0,0,0,0.2); border-right: 5px solid rgba(0, 0, 0, 0.2);
border-bottom: 5px solid rgba(0,0,0,0.2); border-bottom: 5px solid rgba(0, 0, 0, 0.2);
color: #555; color: #555;
} }
</style> </style>
<svelte:window/>
<div style="text-align: center">
{#if key}
<kbd>{key === ' ' ? 'Space' : key}</kbd>
<p>{keyCode}</p>
{:else}
<p>Focus this window and press any key</p>
{/if}
</div>

30
site/content/tutorial/16-special-elements/03-svelte-window/app-b/App.svelte
Unescape View File

@ -8,6 +8,17 @@
} }
</script> </script>
<svelte:window on:keydown={handleKeydown}/>
<div style="text-align: center">
{#if key}
<kbd>{key === ' ' ? 'Space' : key}</kbd>
<p>{keyCode}</p>
{:else}
<p>Focus this window and press any key</p>
{/if}
</div>
<style> <style>
div { div {
display: flex; display: flex;
@ -22,21 +33,10 @@
border-radius: 4px; border-radius: 4px;
font-size: 6em; font-size: 6em;
padding: 0.2em 0.5em; padding: 0.2em 0.5em;
border-top: 5px solid rgba(255,255,255,0.5); border-top: 5px solid rgba(255, 255, 255, 0.5);
border-left: 5px solid rgba(255,255,255,0.5); border-left: 5px solid rgba(255, 255, 255, 0.5);
border-right: 5px solid rgba(0,0,0,0.2); border-right: 5px solid rgba(0, 0, 0, 0.2);
border-bottom: 5px solid rgba(0,0,0,0.2); border-bottom: 5px solid rgba(0, 0, 0, 0.2);
color: #555; color: #555;
} }
</style> </style>
<svelte:window on:keydown={handleKeydown}/>
<div style="text-align: center">
{#if key}
<kbd>{key === ' ' ? 'Space' : key}</kbd>
<p>{keyCode}</p>
{:else}
<p>Focus this window and press any key</p>
{/if}
</div>

2
site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-a/App.svelte
Unescape View File

@ -85,4 +85,4 @@
padding: 0; padding: 0;
background-color: rgb(253, 174, 51); background-color: rgb(253, 174, 51);
} }
</style> </style>

2
site/content/tutorial/16-special-elements/04-svelte-window-bindings/app-b/App.svelte
Unescape View File

@ -85,4 +85,4 @@
padding: 0; padding: 0;
background-color: rgb(253, 174, 51); background-color: rgb(253, 174, 51);
} }
</style> </style>

14
site/content/tutorial/16-special-elements/07-svelte-options/app-a/Todo.svelte
Unescape View File

@ -11,15 +11,15 @@
}); });
</script> </script>
<style>
div {
cursor: pointer;
line-height: 1.5;
}
</style>
<!-- the text will flash red whenever <!-- the text will flash red whenever
the `todo` object changes --> the `todo` object changes -->
<div bind:this={div} on:click> <div bind:this={div} on:click>
{todo.done ? '👍': ''} {todo.text} {todo.done ? '👍': ''} {todo.text}
</div> </div>
<style>
div {
cursor: pointer;
line-height: 1.5;
}
</style>

14
site/content/tutorial/16-special-elements/07-svelte-options/app-b/Todo.svelte
Unescape View File

@ -13,15 +13,15 @@
}); });
</script> </script>
<style>
div {
cursor: pointer;
line-height: 1.5;
}
</style>
<!-- the text will flash red whenever <!-- the text will flash red whenever
the `todo` object changes --> the `todo` object changes -->
<div bind:this={div} on:click> <div bind:this={div} on:click>
{todo.done ? '👍': ''} {todo.text} {todo.done ? '👍': ''} {todo.text}
</div> </div>
<style>
div {
cursor: pointer;
line-height: 1.5;
}
</style>

2
site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/App.svelte
Unescape View File

@ -7,4 +7,4 @@
<p>All rights reserved.</p> <p>All rights reserved.</p>
<p>Copyright (c) 2019 Svelte Industries</p> <p>Copyright (c) 2019 Svelte Industries</p>
</div> </div>
</Box> </Box>

16
site/content/tutorial/16-special-elements/08-svelte-fragment/app-a/Box.svelte
Unescape View File

@ -1,9 +1,15 @@
<div class="box">
<slot name="header">No header was provided</slot>
<p>Some content between header and footer</p>
<slot name="footer"></slot>
</div>
<style> <style>
.box { .box {
width: 300px; width: 300px;
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 2px; border-radius: 2px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
padding: 1em; padding: 1em;
margin: 0 0 1em 0; margin: 0 0 1em 0;
@ -11,10 +17,4 @@
flex-direction: column; flex-direction: column;
gap: 1em; gap: 1em;
} }
</style> </style>
<div class="box">
<slot name="header">No header was provided</slot>
<p>Some content between header and footer</p>
<slot name="footer"></slot>
</div>

2
site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/App.svelte
Unescape View File

@ -7,4 +7,4 @@
<p>All rights reserved.</p> <p>All rights reserved.</p>
<p>Copyright (c) 2019 Svelte Industries</p> <p>Copyright (c) 2019 Svelte Industries</p>
</svelte:fragment> </svelte:fragment>
</Box> </Box>

16
site/content/tutorial/16-special-elements/08-svelte-fragment/app-b/Box.svelte
Unescape View File

@ -1,9 +1,15 @@
<div class="box">
<slot name="header">No header was provided</slot>
<p>Some content between header and footer</p>
<slot name="footer"></slot>
</div>
<style> <style>
.box { .box {
width: 300px; width: 300px;
border: 1px solid #aaa; border: 1px solid #aaa;
border-radius: 2px; border-radius: 2px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.1); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
padding: 1em; padding: 1em;
margin: 0 0 1em 0; margin: 0 0 1em 0;
@ -11,10 +17,4 @@
flex-direction: column; flex-direction: column;
gap: 1em; gap: 1em;
} }
</style> </style>
<div class="box">
<slot name="header">No header was provided</slot>
<p>Some content between header and footer</p>
<slot name="footer"></slot>
</div>

12
site/content/tutorial/16-special-elements/08-svelte-fragment/text.md
Unescape View File

@ -8,6 +8,12 @@ In the example notice how we applied a flex layout with a gap of `1em` to the bo
```sv ```sv
<!-- Box.svelte --> <!-- Box.svelte -->
<div class="box">
<slot name="header">No header was provided</slot>
<p>Some content between header and footer</p>
<slot name="footer"></slot>
</div>
<style> <style>
.box { .box {
display: flex; display: flex;
@ -15,12 +21,6 @@ In the example notice how we applied a flex layout with a gap of `1em` to the bo
gap: 1em; gap: 1em;
} }
</style> </style>
<div class="box">
<slot name="header">No header was provided</slot>
<p>Some content between header and footer</p>
<slot name="footer"></slot>
</div>
``` ```
However, the content in the footer is not spaced out according to this rhythm because wrapping it in a div created a new flow layout. However, the content in the footer is not spaced out according to this rhythm because wrapping it in a div created a new flow layout.

24
site/content/tutorial/17-module-context/01-sharing-code/app-b/AudioPlayer.svelte
Unescape View File

@ -17,13 +17,6 @@
} }
</script> </script>
<style>
article { margin: 0 0 1em 0; max-width: 800px }
h2, p { margin: 0 0 0.3em 0; }
audio { width: 100%; margin: 0.5em 0 1em 0; }
.playing { color: #ff3e00; }
</style>
<article class:playing={!paused}> <article class:playing={!paused}>
<h2>{title}</h2> <h2>{title}</h2>
<p><strong>{composer}</strong> / performed by {performer}</p> <p><strong>{composer}</strong> / performed by {performer}</p>
@ -35,4 +28,19 @@
controls controls
{src} {src}
></audio> ></audio>
</article> </article>
<style>
article {
margin: 0 0 1em 0; max-width: 800px;
}
h2, p {
margin: 0 0 0.3em 0;
}
audio {
width: 100%; margin: 0.5em 0 1em 0;
}
.playing {
color: #ff3e00;
}
</style>

24
site/content/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte
Unescape View File

@ -25,13 +25,6 @@
} }
</script> </script>
<style>
article { margin: 0 0 1em 0; max-width: 800px }
h2, p { margin: 0 0 0.3em 0; }
audio { width: 100%; margin: 0.5em 0 1em 0; }
.playing { color: #ff3e00; }
</style>
<article class:playing={!paused}> <article class:playing={!paused}>
<h2>{title}</h2> <h2>{title}</h2>
<p><strong>{composer}</strong> / performed by {performer}</p> <p><strong>{composer}</strong> / performed by {performer}</p>
@ -43,4 +36,19 @@
controls controls
{src} {src}
></audio> ></audio>
</article> </article>
<style>
article {
margin: 0 0 1em 0; max-width: 800px;
}
h2, p {
margin: 0 0 0.3em 0;
}
audio {
width: 100%; margin: 0.5em 0 1em 0;
}
.playing {
color: #ff3e00;
}
</style>

24
site/content/tutorial/17-module-context/02-module-exports/app-b/AudioPlayer.svelte
Unescape View File

@ -31,13 +31,6 @@
} }
</script> </script>
<style>
article { margin: 0 0 1em 0; max-width: 800px }
h2, p { margin: 0 0 0.3em 0; }
audio { width: 100%; margin: 0.5em 0 1em 0; }
.playing { color: #ff3e00; }
</style>
<article class:playing={!paused}> <article class:playing={!paused}>
<h2>{title}</h2> <h2>{title}</h2>
<p><strong>{composer}</strong> / performed by {performer}</p> <p><strong>{composer}</strong> / performed by {performer}</p>
@ -49,4 +42,19 @@
controls controls
{src} {src}
></audio> ></audio>
</article> </article>
<style>
article {
margin: 0 0 1em 0; max-width: 800px;
}
h2, p {
margin: 0 0 0.3em 0;
}
audio {
width: 100%; margin: 0.5em 0 1em 0;
}
.playing {
color: #ff3e00;
}
</style>

10
site/content/tutorial/19-next-steps/01-congratulations/app-a/App.svelte
Unescape View File

@ -33,6 +33,10 @@
}); });
</script> </script>
{#each confetti as c}
<span style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})">{c.character}</span>
{/each}
<style> <style>
:global(body) { :global(body) {
overflow: hidden; overflow: hidden;
@ -42,8 +46,4 @@
position: absolute; position: absolute;
font-size: 5vw; font-size: 5vw;
} }
</style> </style>
{#each confetti as c}
<span style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})">{c.character}</span>
{/each}
Write Preview
Loading…
Cancel
Save