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

homepage changes

Browse Source
pull/2437/head
Achim Vedam 5 years ago
parent 83f57046fa
commit 802fe40128
4 changed files with 133 additions and 203 deletions
Show Stats Download Patch File Download Diff File

31
site/src/components/TopNav.svelte
Unescape View File

@ -1,7 +1,6 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import Icon from './Icon.svelte'; import Icon from './Icon.svelte';
import Logo from './Logo.svelte';
export let segment; export let segment;
@ -78,17 +77,6 @@
box-shadow: none; box-shadow: none;
} }
h2 {
display: block;
text-transform: uppercase;
font-weight: 300;
font-size: 2.8rem;
letter-spacing: .12em;
line-height: 1;
margin: 0;
top: .1rem;
}
.primary { .primary {
list-style: none; list-style: none;
font-family: var(--font); font-family: var(--font);
@ -142,7 +130,7 @@
} }
ul li a { ul li a {
font-size: var(--h6); font-size: var(--h5);
padding: 0 .8rem; padding: 0 .8rem;
} }
@ -158,15 +146,14 @@
.home { .home {
position: relative; position: relative;
top: 0; top: -.1rem;
width: 18rem; width: 18rem;
color: var(--second); height: 4.2rem;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none; -webkit-touch-callout: none;
z-index: 11; background: url(/svelte-logo-horizontal.svg) 0 50% no-repeat;
padding: 0.5rem 0 0.3rem 4.2rem;
background: url(/logo.svg) 0 50% no-repeat;
background-size: auto 100%; background-size: auto 100%;
z-index: 11;
} }
.active { .active {
@ -192,7 +179,7 @@
} }
ul.open li a { ul.open li a {
font-size: var(--h6); font-size: var(--h5);
padding: 0 .8rem; padding: 0 .8rem;
display: inline; display: inline;
} }
@ -215,9 +202,7 @@
<header class:visible="{visible || open}"> <header class:visible="{visible || open}">
<nav> <nav>
<a rel="prefetch" href='.' class="home" title='Homepage'> <a rel="prefetch" href='.' class="home" title='Homepage'></a>
<h2>Svelte</h2>
</a>
<ul <ul
bind:this={ul} bind:this={ul}
@ -247,4 +232,4 @@
</li> </li>
</ul> </ul>
</nav> </nav>
</header> </header>

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

@ -1,3 +1,7 @@
<script>
import Icon from '../../components/Icon.svelte';
</script>
<style> <style>
.container { .container {
position: relative; position: relative;
@ -7,78 +11,47 @@
max-width: 120rem; max-width: 120rem;
grid-row-gap: 1em; grid-row-gap: 1em;
grid-template-areas: grid-template-areas:
"one" 'one'
"two" 'two'
"three" 'three'
"what" 'what'
"start"; 'start';
}
.box {
padding: 1em;
display: flex;
flex-direction: column;
} }
h2 { h2 {
padding: 0;
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
font-size: var(--h2); padding: 0;
color: white; color: white;
text-align: left;
} }
p { h3 {
font-size: var(--h5); margin: 0 0 1.6rem 0;
color: black;
}
.box {
padding: 1em;
display: flex;
flex-direction: column;
} }
.box a { .box a {
position: relative; position: relative;
text-align: right; text-align: right;
margin-top: auto; font-weight: 700;
padding: 0 1.2em 0 0; padding: 0 2.4rem 0 0;
font-family: Roboto, sans-serif;
font-size: 1.6rem;
} }
.box a:hover { .box a :global(svg) {
color: white; stroke: white;
text-decoration: underline;
} }
.box a::after, .cta a::after { .box a:hover {
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; color: white;
position: relative; text-decoration: underline;
}
.cta a::after {
right: 0.5em;
top: 0.75em;
}
.description {
margin: 2em 0 0 0;
} }
.cta { .description { margin: 2em 0 0 0 }
margin: 0;
}
@media (min-width: 900px) { @media (min-width: 900px) {
.container { .container {
@ -86,18 +59,12 @@
grid-row-gap: 1em; grid-row-gap: 1em;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
grid-template-areas: grid-template-areas:
"one two" 'one two'
"three start" 'three start'
"what what"; 'what what';
}
.box {
padding: 2em;
} }
.cta { .box { padding: 2em }
text-align: right;
}
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
@ -106,52 +73,70 @@
grid-row-gap: 5em; grid-row-gap: 5em;
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
grid-template-areas: grid-template-areas:
"one one two two three three" 'one one two two three three'
"what what what start start start"; 'what what what start start start';
} }
.description { .description { margin: 0 }
margin: 0;
}
.cta {
text-align: left;
}
} }
</style> </style>
<section class='container'> <section class="container">
<div class='box bg-prime white' style="grid-area: one"> <div class="box bg-prime white" style="grid-area: one">
<h2 style='padding:2.4rem 0 0 0'>Write less code</h2> <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">learn more</a> <a href="TODO-blog-post-on-loc">
discover how <Icon name="arrow-right"/>
</a>
</div> </div>
<div class='box bg-flash white' style="grid-area: two"> <div class="box bg-flash white" style="grid-area: two">
<h2 style='padding:2.4rem 0 0 0'>No virtual DOM</h2> <h2>No virtual DOM</h2>
<p>Svelte compiles your code to tiny, framework-less vanilla JS — your app starts fast and stays fast</p> <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> <a href="TODO-blog-post-on-vdom-overhead">
wonder why <Icon name="arrow-right"/>
</a>
</div> </div>
<div class='box bg-second white' style="grid-area: three"> <div class="box bg-second white" style="grid-area: three">
<h2 style='padding:2.4rem 0 0 0'>Truly reactive</h2> <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">learn more</a> <a href="TODO-blog-post-on-reactivity">
experience how <Icon name="arrow-right"/>
</a>
</div> </div>
<div class="linkify description" style="grid-area: what;"> <div class="linkify description" style="grid-area: what;">
<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> <h3>Svelte up your life</h3>
<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> 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><a href="TODO-svelte-3-blog-post">Read the introductory blog post</a> to learn more.</p> </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>
</div> </div>
<div style="grid-area: start; display: flex; flex-direction: column"> <div style="grid-area: start; display: flex; flex-direction: column">
<h3>Convince yourself</h3>
<pre class="language-bash" style="margin: 0 0 1em 0"> <pre class="language-bash" style="margin: 0 0 1em 0">
# quick install
npx degit sveltejs/template my-svelte-project npx degit sveltejs/template my-svelte-project
cd my-svelte-project cd my-svelte-project
@ -159,8 +144,12 @@ npm install
npm run dev & open http://localhost:5000 npm run dev & open http://localhost:5000
</pre> </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 class="cta"><a rel="prefetch" href="tutorial">Learn Svelte</a></p> <p><a class="btn bg-prime white" rel="prefetch" href="tutorial">
Learn Svelte <Icon name="arrow-right"/>
</a></p>
</div> </div>
</section> </section>

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

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

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

@ -1,6 +1,4 @@
<script> <script>
import Icon from '../components/Icon.svelte';
import Logo from '../components/Logo.svelte';
import Blurb from './_components/Blurb.svelte'; import Blurb from './_components/Blurb.svelte';
import WhosUsingSvelte from './_components/WhosUsingSvelte.svelte'; import WhosUsingSvelte from './_components/WhosUsingSvelte.svelte';
import IntersectionObserver from '../components/IntersectionObserver.svelte'; import IntersectionObserver from '../components/IntersectionObserver.svelte';
@ -25,9 +23,8 @@
max-width: 120rem; max-width: 120rem;
} }
.container ul { .container h3 { color: black }
list-style: none; .container ul { list-style: none }
}
/* max line-length ~60 chars */ /* max line-length ~60 chars */
li:not(.box) > p { li:not(.box) > p {
@ -39,54 +36,43 @@
--text: hsl(36, 3%, 44%); --text: hsl(36, 3%, 44%);
} }
.hero { height: 20rem }
.hero h3 {
position: relative;
margin: -3.2rem 0 0 3rem;
}
.logo { .logo {
position: absolute; position: absolute;
left: -120px; top: -23rem;
top: -120px; right: -4rem;
width: 80vmin; width: 68rem;
height: 80vmin; height: 68rem;
opacity: 0.1; mix-blend-mode: multiply;
will-change: transform; will-change: transform;
} }
.hero h1 { .logotype {
text-align: center; margin: 2rem 0 0 0;
margin: 2rem 0; height: 12rem;
font-size: 6rem;
color: var(--heading);
font-weight: 100;
letter-spacing: .12em;
text-transform: uppercase;
}
.hero h2 {
text-align: center;
display: block;
position: relative;
font-size: 3.2rem;
text-align: center;
width: 100%;
text-transform: lowercase;
font-weight: 300;
opacity: 0.7;
} }
.examples { .examples {
background: var(--second); background: var(--second);
color: white; color: white;
/* padding: 2em 0; */
overflow: hidden; overflow: hidden;
} }
.example { .example {
/* background: var(--second);
color: white;
padding: 0.8rem;
border-radius: var(--border-r); */
width: 100%; width: 100%;
height: 420px; height: 420px;
} }
.example > p {
margin: 4.4rem 2.4rem 2.4rem 0;
}
.repl-container { .repl-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -94,10 +80,6 @@
overflow: hidden; overflow: hidden;
} }
.example > div:first-child {
/* padding: 0.8rem; */
}
.contributor { .contributor {
width: 2.4em; width: 2.4em;
height: 2.4em; height: 2.4em;
@ -107,26 +89,17 @@
background: no-repeat url(/contributors.jpg); background: no-repeat url(/contributors.jpg);
background-size: auto 102%; background-size: auto 102%;
margin: 0 0.5em 0.5em 0; margin: 0 0.5em 0.5em 0;
border: 1px solid var(--second); border: .2rem solid var(--second);
} }
@media (min-width: 920px) { @media (min-width: 920px) {
.example { .example {
display: grid; display: grid;
grid-template-columns: 1fr 4fr; grid-template-columns: 1fr 3fr;
grid-gap: 0.5em; grid-gap: 0.5em;
align-items: start; align-items: start;
} }
} }
@media screen and (min-width: 870px) {
.hero h1 {
position: relative;
top: -.8rem;
font-size: 18rem;
margin: 2rem 2rem 0 1rem;
}
}
</style> </style>
<svelte:head> <svelte:head>
@ -135,20 +108,18 @@
<svelte:window bind:scrollY={sy}/> <svelte:window bind:scrollY={sy}/>
<img alt="Svelte logo" class="logo" src="logo.svg" style="transform: translate(0,{sy * 0.2}px)">
<section class="hero container"> <section class="hero container">
<h2>Cybernetically enhanced web apps</h2> <img alt="Svelte logotype" class="logotype" src="svelte-logotype.svg">
<h1>Svelte</h1> <h3>Cybernetically enhanced web apps</h3>
<img alt="Svelte logo" class="logo" src="svelte-logo-outline.svg" style="transform: translate(0, {sy * .7}px)">
</section> </section>
<Blurb/> <Blurb/>
<div class="examples"> <div class="examples">
<section class="container example linkify"> <section class="container example linkify">
<div> <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>
<div class="repl-container"> <div class="repl-container">
<IntersectionObserver once let:intersecting top={400}> <IntersectionObserver once let:intersecting top={400}>
@ -161,9 +132,7 @@
</section> </section>
<section class="container example linkify"> <section class="container example linkify">
<div> <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>
<div class="repl-container"> <div class="repl-container">
<IntersectionObserver once let:intersecting top={400}> <IntersectionObserver once let:intersecting top={400}>
@ -176,9 +145,7 @@
</section> </section>
<section class="container example linkify"> <section class="container example linkify">
<div> <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>
<div class="repl-container"> <div class="repl-container">
<IntersectionObserver once let:intersecting top={400}> <IntersectionObserver once let:intersecting top={400}>
@ -191,9 +158,7 @@
</section> </section>
<section class="container example linkify"> <section class="container example linkify">
<div> <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>
<div class="repl-container"> <div class="repl-container">
<IntersectionObserver once let:intersecting top={400}> <IntersectionObserver once let:intersecting top={400}>
@ -224,4 +189,4 @@
href="https://github.com/{contributor}" href="https://github.com/{contributor}"
>{contributor}</a> >{contributor}</a>
{/each} {/each}
</section> </section>

Write Preview
Loading…
Cancel
Save