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

make type easier to read, revert copy changes

Browse Source
pull/2441/head
Richard Harris 5 years ago
parent 3c8560542b
commit 6bf64ca092
4 changed files with 114 additions and 101 deletions
Show Stats Download Patch File Download Diff File

167
site/src/routes/_components/Blurb.svelte
Unescape View File

@ -1,7 +1,3 @@
<script>
import Icon from '../../components/Icon.svelte';
</script>
<style>
.container {
position: relative;
@ -11,22 +7,11 @@
max-width: 120rem;
grid-row-gap: 1em;
grid-template-areas:
'one'
'two'
'three'
'what'
'start';
}
h2 {
margin: 0 0 0.5em 0;
padding: 0;
color: white;
}
h3 {
margin: 0 0 1.6rem 0;
color: black;
"one"
"two"
"three"
"what"
"start";
}
.box {
@ -35,15 +20,19 @@
flex-direction: column;
}
h2 {
padding: 0;
margin: 0 0 0.5em 0;
font-size: var(--h2);
color: white;
text-align: left;
}
.box a {
position: relative;
text-align: right;
font-weight: 700;
padding: 0 2.4rem 0 0;
}
.box a :global(svg) {
stroke: white;
margin-top: auto;
padding: 0 1.2em 0 0;
}
.box a:hover {
@ -51,7 +40,39 @@
text-decoration: underline;
}
.description { margin: 2em 0 0 0 }
.box a::after, .cta a::after {
content: '';
position: absolute;
display: block;
right: 0;
top: 0.35em;
width: 1em;
height: 1em;
background: url(/icons/arrow-right.svg);
}
.cta a {
display: inline-block;
text-align: right;
background-color: var(--prime);
padding: 0.5em 1.8em 0.5em 1em;
border-radius: var(--border-r);
color: white;
position: relative;
}
.cta a::after {
right: 0.5em;
top: 0.75em;
}
.description {
margin: 2em 0 0 0;
}
.cta {
margin: 0;
}
@media (min-width: 900px) {
.container {
@ -59,12 +80,18 @@
grid-row-gap: 1em;
grid-template-columns: repeat(2, 1fr);
grid-template-areas:
'one two'
'three start'
'what what';
"one two"
"three start"
"what what";
}
.box { padding: 2em }
.box {
padding: 2em;
}
.cta {
text-align: right;
}
}
@media (min-width: 1200px) {
@ -73,70 +100,52 @@
grid-row-gap: 5em;
grid-template-columns: repeat(6, 1fr);
grid-template-areas:
'one one two two three three'
'what what what start start start';
"one one two two three three"
"what what what start start start";
}
.description {
margin: 0;
}
.description { margin: 0 }
.cta {
text-align: left;
}
}
</style>
<section class="container">
<div class="box bg-prime white" style="grid-area: one">
<section class='container'>
<div class='box bg-prime white' style="grid-area: one">
<h2>Write less code</h2>
<p>
Build boilerplate-free components using languages you already know — HTML, CSS and JavaScript
</p>
<p>Build boilerplate-free components using languages you already know — HTML, CSS and JavaScript</p>
<a href="TODO-blog-post-on-loc">
discover how <Icon name="arrow-right"/>
</a>
<a href="TODO-blog-post-on-loc">learn more</a>
</div>
<div class="box bg-flash white" style="grid-area: two">
<div class='box bg-flash white' style="grid-area: two">
<h2>No virtual DOM</h2>
<p>
Svelte compiles your code to tiny, framework-less vanilla JS — your app
starts fast and stays fast
</p>
<a href="TODO-blog-post-on-vdom-overhead">
wonder why <Icon name="arrow-right"/>
</a>
<p>Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast</p>
<a href="TODO-blog-post-on-vdom-overhead">learn more</a>
</div>
<div class="box bg-second white" style="grid-area: three">
<div class='box bg-second white' style="grid-area: three">
<h2>Truly reactive</h2>
<p>
No more complex state management libraries — Svelte brings reactivity to JavaScript itself
</p>
<p>No more complex state management libraries — Svelte brings reactivity to JavaScript itself</p>
<a href="TODO-blog-post-on-reactivity">
experience how <Icon name="arrow-right"/>
</a>
<a href="TODO-blog-post-on-reactivity">learn more</a>
</div>
<div class="linkify description" style="grid-area: what;">
<h3>Svelte up your life</h3>
<p>
Svelte is a radical new approach to building user interfaces. Whereas
traditional frameworks do the bulk of their work in the <em>browser</em>, Svelte shifts that work into a <em>compile step</em> that happens when you build your app.
</p>
<p>
Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.
</p>
<p>
Read the <a href="TODO-svelte-3-blog-post">introductory blog post</a>
to learn more
</p>
<p>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 <em>browser</em>, Svelte shifts that work into a <em>compile step</em> that happens when you build your app.</p>
<p>Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.</p>
<p><a href="TODO-svelte-3-blog-post">Read the introductory blog post</a> to learn more.</p>
</div>
<div style="grid-area: start; display: flex; flex-direction: column">
<h3>Convince yourself</h3>
<pre class="language-bash" style="margin: 0 0 1em 0">
# quick install
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
@ -144,12 +153,8 @@ npm install
npm run dev & open http://localhost:5000
</pre>
<p class="linkify" style="flex: 1">
See the <a href="blog/the-easiest-way-to-get-started">quickstart guide </a> for more information.
</p>
<p class="linkify" style="flex: 1">See the <a href="blog/the-easiest-way-to-get-started">quickstart guide</a> for more information.</p>
<p><a class="btn bg-prime white" rel="prefetch" href="tutorial">
Learn Svelte <Icon name="arrow-right"/>
</a></p>
<p class="cta"><a rel="prefetch" href="tutorial">Learn Svelte</a></p>
</div>
</section>
</section>

33
site/src/routes/_components/WhosUsingSvelte.svelte
Unescape View File

@ -13,23 +13,32 @@
margin: 1em 0 0 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
a:not(.btn) {
height: 5rem;
margin: 0 1.6rem 3.2rem;
a {
height: 40px;
margin: 0 0.5em 0.5em 0;
text-decoration: none;
border: 1px solid #aaa;
padding: 5px 10px;
border-radius: 20px;
}
.add-yourself {
display: flex;
align-items: center;
border: 1px solid #eee;
}
img { height: 100% }
img {
height: 100%;
}
@media (min-width: 540px) {
a:not(.btn) {
height: 6rem;
padding: 1rem 2rem;
border-radius: var(--border-r);
a {
height: 60px;
padding: 10px 20px;
border-radius: 30px;
}
}
</style>
@ -45,5 +54,5 @@
<a href="https://www.nesta.org.uk"><img src="organisations/nesta.svg" alt="Nesta logo"></a>
<a href="https://nytimes.com"><img src="organisations/nyt.svg" alt="The New York Times logo"></a>
<a href="https://www.stone.co"><img src="organisations/stone.svg" alt="Stone Payments logo"></a>
<p><a href="https://github.com/sveltejs/svelte/blob/master/site/src/routes/_components/WhosUsingSvelte.svelte" class="btn bg-flash white">+ your company?</a></p>
</div>
<a href="https://github.com/sveltejs/svelte/blob/master/site/src/routes/_components/WhosUsingSvelte.svelte" class="add-yourself"><span>+ your company?</span></a>
</div>

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

@ -49,7 +49,7 @@
right: -4rem;
width: 68rem;
height: 68rem;
mix-blend-mode: multiply;
/* mix-blend-mode: multiply; */
will-change: transform;
}
@ -112,14 +112,14 @@
<img alt="Svelte logotype" class="logotype" src="svelte-logotype.svg">
<h3>Cybernetically enhanced web apps</h3>
<img alt="Svelte logo" class="logo" src="svelte-logo-outline.svg" style="transform: translate(0, {sy * .7}px)">
<img alt="Svelte logo" class="logo" src="svelte-logo-outline.svg" style="transform: translate(0, {sy * .2}px)">
</section>
<Blurb/>
<div class="examples">
<section class="container example linkify">
<p><b>A taste of Svelte</b><br/>Svelte components are built on top of HTML. Just add data.</p>
<p>Svelte components are built on top of HTML. Just add data.</p>
<div class="repl-container">
<IntersectionObserver once let:intersecting top={400}>
@ -132,7 +132,7 @@
</section>
<section class="container example linkify">
<p><b>Scoped styles</b><br/>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>
<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 class="repl-container">
<IntersectionObserver once let:intersecting top={400}>
@ -145,7 +145,7 @@
</section>
<section class="container example linkify">
<p><b>Intelligent compiler</b><br/>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p>
<p>Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.</p>
<div class="repl-container">
<IntersectionObserver once let:intersecting top={400}>
@ -158,7 +158,7 @@
</section>
<section class="container example linkify">
<p><b>Build-in Transitions</b><br/>Create beautiful UIs with a powerful, performant transition engine built right into the framework.</p>
<p>Build beautiful UIs with a powerful, performant transition engine built right into the framework.</p>
<div class="repl-container">
<IntersectionObserver once let:intersecting top={400}>

3
site/static/global.css
Unescape View File

@ -141,10 +141,9 @@ body {
font: 300 var(--h4)/var(--lh) var(--font);
background-color: var(--back);
color: var(--text);
-webkit-font-smoothing: antialiased;
/* default spacing of Overpass is a bit too airy */
letter-spacing: -.013em;
/* letter-spacing: -.013em; */
}
h1, h2, h3, h4, h5, h6, blockquote {

Write Preview
Loading…
Cancel
Save