svelte/site/src/routes/index.html

<script>
	import Icon from '../components/Icon.html';
	import Logo from '../components/Logo.html';

	let sy = 0;
</script>

<style>
	.container {
		position: relative;
		margin: 10rem auto;
		max-width: 120rem;
	}

	.container ul {
		list-style: none;
	}

	/* max line-length ~60 chars */
	li:not(.box) > p {
		max-width: var(--linemax)
	}

	/* darken text for accesibility */
	:global(.back-light) {
		--text: hsl(36, 3%, 44%);
	}

	.logo {
		position: absolute;
		left: -120px;
		top: -120px;
		width: 80vmin;
		height: 80vmin;
		opacity: 0.1;
		will-change: transform;
	}

	.hero h1 {
		text-align: center;
		margin: 2rem 0;
		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;
	}

	.box {
		padding: 2em;
		display: flex;
		flex-direction: column;
	}

	.box > h2 {
		padding: 0;
		margin: 0 0 0.5em 0;
		font-size: var(--h2);
		color: white;
		text-align: left;
	}

	.box > p {
		font-size: var(--h5);
	}

	.box a {
		position: relative;
		text-align: right;
		margin-top: auto;
		padding: 0 1.2em 0 0;
	}

	.box a:hover {
		color: white;
		text-decoration: underline;
	}

	.box a::after {
		content: '';
		position: absolute;
		display: block;
		right: 0;
		top: 0.4em;
		width: 1em;
		height: 1em;
		background: url(/icons/arrow-right.svg);
	}

	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);
	}

	@media (min-width: 920px) {
		.example {
			display: grid;
			grid-template-columns: 1fr 4fr;
			grid-gap: 0.5em;
			align-items: start;
		}
	}

	@media screen and (min-width: 870px) {
		.hero h1 {
			position: relative;
			top: -.8rem;
			font-size: 18rem;
			margin: 2rem 2rem 0 1rem;
		}
	}
</style>

<svelte:head>
	<title>Svelte • The magical disappearing UI framework</title>
</svelte:head>

<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">
	<h2>What if web apps could write themselves?</h2>
	<h1>Svelte</h1>
</section>

<section class='container'>
	<ul class='grid stretch'>
		<li class='box bg-prime white'>
			<h2 style='padding:2.4rem 0 0 0'>Write less code</h2>
			<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>
		</li>

		<li class='box bg-flash white'>
			<h2 style='padding:2.4rem 0 0 0'>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">learn more</a>
		</li>

		<li class='box bg-second white'>
			<h2 style='padding:2.4rem 0 0 0'>Truly reactive</h2>
			<p>No more complex state management libraries — Svelte brings reactivity to JavaScript itself</p>

			<a href="TODO-blog-post-on-reactivity">learn more</a>
		</li>
	</ul>
</section>

<section class="container grid half linkify">
	<div>
		<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>
		<p>TODO a video intro</p>
	</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="Scope styles 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="Reactivity 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="Transitions 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>

<!-- TODO example code transformation (interactive REPL?) -->