<script>
const posts = [
{ experiment: 1, title: "Hello World", date: "2020/1/1", tags: ["svelte", "other"] },
{ experiment: 2, title: "Here we go again", date: "2020/1/1", tags: ["svelte", "other"] },
{ experiment: 3, title: "Here we go again", date: "2020/1/1", tags: ["svelte", "other"] },
{ experiment: 4, title: "Here we go again. Here we go again", date: "2020/1/1", tags: ["svelte", "other"] }
]
$: hero = posts[posts.length - 1]
</script>
<div class="container">
<header>
<h1>1,000 Experiments</h1>
</header>
<main>
<section class="hero">
<div class="media">
<video controls src=https://res.cloudinary.com/dzwnkx0mk/video/upload/v1620979200/1000experiments.dev/color-pallette-builder_f0tbox.mp4>
</div>
<div class="content">
<h2><span class="number">#{hero.experiment}</span>{hero.title}</h2>
<p>{hero.date} . by Joshua Nussbaum</p>
</div>
</section>
<h2>Recent experiments</h2>
<section class="posts">
{#each posts.reverse() as post}
<article>
<div class="media">
<video controls src=https://res.cloudinary.com/dzwnkx0mk/video/upload/v1620979200/1000experiments.dev/color-pallette-builder_f0tbox.mp4>
</div>
<h3><span class="number">#{post.experiment}</span>{post.title}</h3>