some styling + headline refactoring

src/lib/components/headline.svelte

@@ -0,0 +1,15 @@
+<header>
+  <h1><slot /></h1>
+</header>
+
+<style>
+  h1 {
+    text-align: center;
+  }
+
+  header {
+    background-color: var(--color-dark);
+    color: var(--color-light);
+    padding: 0.5em 1em;
+  }
+</style>

src/routes/+layout.svelte

@@ -0,0 +1,24 @@
+<slot />
+
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap');
+
+  :global(:root) {
+    --color-accent-dark: #a8c3b5;
+    --color-accent-light: #558b6e;
+    --color-danger: #d64933;
+    --color-dark: #2e282a;
+    --color-light: #fbfbfb;
+    --fonts-sans: Rubik, Arial, sans-serif;
+  }
+
+  :global(body) {
+    margin: 0;
+  }
+
+  :global(h1) {
+    font-family: var(--fonts-sans);
+    margin: 0;
+    padding: 0;
+  }
+</style>

src/routes/+page.svelte

@@ -1,4 +1,8 @@
+<script lang="ts">
+  import Headline from '$lib/components/headline.svelte';
+</script>
+
 <svelte:head>
   <title>resumarkdown</title>
 </svelte:head>
-<h1>resumarkdown</h1>
+<Headline>resumarkdown</Headline>