mirrors/svelte
mirrors/svelte
0
0
Fork 0
mirror of https://github.com/sveltejs/svelte.git synced 2024-11-29 16:36:44 +01:00
Code Issues Releases Wiki Activity

tweak styling

Browse Source
This commit is contained in:
Rich Harris 2018-12-23 19:32:44 -05:00
parent 027bfe1da6
commit 007eaca070
1 changed files with 74 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
site/src/routes/index.html
View File

@ -110,11 +110,37 @@
h6 {
max-width: 25em;
padding: 2.4rem;
}
.example {
background: var(--second);
color: white;
padding: 0.8rem;
border-radius: var(--border-r);
}
.example > div:first-child {
padding: 0.8rem;
}
iframe {
display: block;
width: 100%;
height: 420px;
border: none;
border-radius: var(--border-r);
font: 300 1rem/1.4 var(--font-mono);
text-align: center;
}
@media (min-width: 920px) {
.example {
display: grid;
grid-template-columns: 1fr 4fr;
align-items: start;
}
}
@media screen and (min-width: 870px) {
.hero h1 {
position: relative;
@ -175,6 +201,54 @@
</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?demo=homepage-demo-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="Hello world example"
src="/repl/embed?demo=homepage-demo-scoped-styles"
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="Hello world example"
src="/repl/embed?demo=homepage-demo-reactivity"
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="Hello world example"
src="/repl/embed?demo=homepage-demo-transitions"
scrolling="no"
></iframe>
</section>
<section class="container grid half">
<p>TODO finish building this page. Ideas: Who's using Svelte? Example code (interactive, ideally). What else?</p>
</section>