Add some style

src/routes/+layout.svelte

@@ -0,0 +1,36 @@
+<script>
+	import '../app.css';
+    import github_mark from '$lib/assets/github-mark-white.svg';
+    import twitter_mark from '$lib/assets/twitter-mark-white.svg';
+    import NavLink from "$lib/components/NavLink.svelte";
+</script>
+
+<nav>
+    <NavLink --background-color="#f1ecec" link="/">Leaderboard</NavLink>
+    <NavLink --background-color="#f1ecec" link="/play">Play</NavLink>
+    <NavLink --background-color="#f1ecec" link="/about">About</NavLink>
+</nav>
+
+<hr/>
+
+<div class="container">
+    <slot></slot>
+</div>
+
+<footer>
+    <a href="https://github.com/naaturel">
+        <img
+                src={github_mark}
+                height="30"
+                width="30"
+                alt="Github mark"/>
+    </a>
+
+    <a href="https://twitter.com/naaturel_">
+        <img
+                src="{twitter_mark}"
+                height="30"
+                width="30"
+                alt="Twitter mark"/>
+    </a>
+</footer>

src/routes/+page.svelte

@@ -1,2 +1,101 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<ul class="leaderboard">
+
+    <li class="item">
+        <div class="name"><img src="" alt=""/> Player 1</div><div class="score">0 pts.</div>
+    </li>
+
+    <li class="item">
+        <div class="name"><img src="" alt=""/> Player 2</div><div class="score">1 pts.</div>
+    </li>
+
+    <li class="item">
+        <div class="name"><img src="" alt=""/> Player 3</div><div class="score">2 pts.</div>
+    </li>
+
+    <li class="item">
+        <div class="name"><img src="" alt=""/> Player 4</div><div class="score">3 pts.</div>
+    </li>
+
+    <li class="item">
+        <div class="name"><img src="" alt=""/> Player 5</div><div class="score">4 pts.</div>
+    </li>
+
+    <li class="item">
+        <div class="name"><img src="" alt=""/> Player 6</div><div class="score">5 pts.</div>
+    </li>
+
+    <li class="item">
+        <div class="name"><img src="" alt=""/> Player 7</div><div class="score">6 pts.</div>
+    </li>
+
+    <li class="item">
+        <div class="name"><img src="" alt=""/> Player 8</div><div class="score">7 pts.</div>
+    </li>
+
+    <li class="item">
+        <div class="name"><img src="" alt=""/> Player 9</div><div class="score">8 pts.</div>
+    </li>
+
+    <li class="item">
+        <div class="name"><img src="" alt=""/> Player 10</div><div class="score">9 pts.</div>
+    </li>
+
+</ul>
+
+<style>
+
+    .leaderboard
+    {
+        display: flex;
+        flex-direction: column;
+
+        width: 60vw;
+        height: 65vh;
+
+        padding: 0 2vw 2vw 2vw;
+        overflow: scroll;
+        overflow-x: hidden;
+    }
+
+    .leaderboard::-webkit-scrollbar {
+        display: none;
+    }
+
+    li
+    {
+        display: flex;
+        justify-content: space-around;
+        padding: 1.25vh;
+        margin: 1.5vh;
+        border: 2px solid #A1674A;
+        border-radius: 10px;
+        background-color: #f1ecec;
+        box-shadow: 0 0 10px #343232;
+    }
+
+    li:hover
+    {
+        transform: scale(1.075);
+        color: #424242;
+        background-color: #F5F5F5;
+    }
+
+    .name, .score
+    {
+        color: black;
+        margin-left: 3vh;
+    }
+
+    .name
+    {
+        flex-grow: 100;
+        border-right: 1px solid #A1674A;
+    }
+
+    .score
+    {
+        flex-grow: 20;
+        text-align: center;
+    }
+
+</style>

src/routes/about/+page.svelte

@@ -0,0 +1 @@
+<p>It was revealed to me in my dream</p>

src/routes/play/+page.svelte

@@ -0,0 +1,4 @@
+<form>
+    <input/>
+    <button>Let's roll</button>
+</form>