layout mockup

src/routes/_layout.svelte

@@ -10,12 +10,6 @@
 
 <style>
 	main {
-		position: relative;
-		max-width: 56em;
-		background-color: white;
-		padding: 2em;
-		margin: 0 auto;
-		box-sizing: border-box;
 	}
 </style>
 

src/routes/index.svelte

@@ -1,46 +1,99 @@
+<script>
+    const prompt = `Put these Bruce Willis Movies in order by the year they were
+        released, earliest first.`
+
+    const items =  [
+        {text: "The Fifth Element", value: 1997},
+        {text: "Die Hard", value: 1988},
+        {text: "Pulp Fiction", value: 1994},
+        {text: "Death Becomes Her", value: 1992},
+        {text: "The Sixth Sense", value: 1999},
+        {text: "Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb", value: 1995},
+        {text: "12 Monkeys", value: 1995},
+    ];
+</script>
 <style>
-	h1, figure, p {
-		text-align: center;
-		margin: 0 auto;
-	}
-
-	h1 {
-		font-size: 2.8em;
-		text-transform: uppercase;
-		font-weight: 700;
-		margin: 0 0 0.5em 0;
-	}
-
-	figure {
-		margin: 0 0 1em 0;
-	}
-
-	img {
-		width: 100%;
-		max-width: 400px;
-		margin: 0 0 1em 0;
-	}
-
-	p {
-		margin: 1em auto;
-	}
-
-	@media (min-width: 480px) {
-		h1 {
-			font-size: 4em;
-		}
-	}
+    .is-column {
+        display: flex;
+        flex-direction: column;
+        flex-basis: auto;
+        flex-wrap: nowrap;
+        align-items: center;
+    }
+    .work-for-long-text {
+        height: auto;
+        white-space: normal;
+    }
+    .button::before {
+
+    }
+    .floater {
+
+    }
+    .holder {
+
+    }
+
+
+    .grid-container {
+        display: grid;
+        grid-template-columns: 1fr 10fr 1fr;
+        row-gap: 1.5em;
+        column-gap: 0em;
+        margin-top: 2.3em;
+    }
+    .plus {
+        top: -2.3em;
+        position: relative;
+        height: 2.5em;
+    }
+    .plus::before {
+        width: 0;
+        height: 0;
+        border-width: 1.5em 4em;
+        border-style: solid;
+        content: '';
+        position: absolute;
+    }
+    .right::before {
+        border-color: transparent rgb(217, 255, 0) transparent transparent;
+        right: 0em;
+    }
+    .left::before {
+        border-color: transparent transparent transparent rgb(217, 255, 0);
+        left: 0em;
+    }
 </style>
 
-<svelte:head>
-	<title>Sapper project template</title>
-</svelte:head>
+<div class=grid-container>
+    {#each items as {text}}
+        <div class='plus left'></div>
 
-<h1>Great success!</h1>
+        <button class='button is-rounded is-block work-for-long-text'>
+            {text}
+        </button>
 
-<figure>
-	<img alt='Success Kid' src='successkid.jpg'>
-	<figcaption>Have fun with Sapper!</figcaption>
-</figure>
+        <div class='plus right'></div>
+    {/each}
+        <div class='plus left'></div>
+        <div></div>
+        <div class='plus right'></div>
+</div>
 
-<p><strong>Try editing this file (src/routes/index.svelte) to test live reloading.</strong></p>
+<div class='container'>
+    <div class='notification'>
+        {prompt}
+    </div>
+    <div class='is-column'>
+        {#each items as {text}}
+            <div class=holder>
+            <button class='button is-rounded is-block my-2 work-for-long-text'>
+                {text}
+            </button>
+            <div class=floater>
+                foo
+            </div>
+            </div>
+        {/each}
+    </div>
+</div>

static/global.css

@@ -1,36 +0,0 @@
-body {
-	margin: 0;
-	font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-	font-size: 14px;
-	line-height: 1.5;
-	color: #333;
-}
-
-h1, h2, h3, h4, h5, h6 {
-	margin: 0 0 0.5em 0;
-	font-weight: 400;
-	line-height: 1.2;
-}
-
-h1 {
-	font-size: 2em;
-}
-
-a {
-	color: inherit;
-}
-
-code {
-	font-family: menlo, inconsolata, monospace;
-	font-size: calc(1em - 2px);
-	color: #555;
-	background-color: #f0f0f0;
-	padding: 0.2em 0.4em;
-	border-radius: 2px;
-}
-
-@media (min-width: 400px) {
-	body {
-		font-size: 16px;
-	}
-}