remove bloat fonts, get rid of svelte-i18n

Signed-off-by: ngn <ngn@ngn.tf>

app/src/components/header.svelte

@@ -0,0 +1,119 @@
+<script>
+  import { onMount } from "svelte";
+  import { browser } from "$app/environment";
+
+  import { _ } from "$lib/locale.js";
+
+  export let picture = "";
+  export let title = "";
+
+  let title_cur = title;
+  let javascript = false;
+
+  // TODO: make the animation first delete and then type
+
+  // do the typing animation
+  function animate(title) {
+    // animation is displayed in the browser obv
+    if (!browser) {
+      return;
+    }
+
+    // clear any previous timeouts
+    let id = window.setTimeout(function () {}, 0);
+    while (id--) {
+      clearTimeout(id);
+    }
+
+    // reset the current title and add each letter with a timeout to give the
+    // epic typing effect
+    title_cur = "";
+
+    for (let i = 0; i < title.length; i++) {
+      setTimeout(() => {
+        title_cur += title[i];
+      }, i * 70);
+    }
+  }
+
+  onMount(() => {
+    javascript = true;
+  });
+
+  $: animate(title);
+</script>
+
+<header>
+  <div>
+    {#if javascript}
+      <h1 class="title">{title_cur}</h1>
+      <h1 class="cursor">_</h1>
+    {:else}
+      <h1 class="title">{title}</h1>
+    {/if}
+  </div>
+  <img src="/assets/{picture}.png" alt="" />
+</header>
+
+<style>
+  header {
+    background: var(--transparent);
+
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: end;
+  }
+
+  header div {
+    display: flex;
+    flex-direction: row;
+    align-items: end;
+    padding: 40px 40px 10px 40px;
+    font-size: var(--size-6);
+    font-family:
+      Consolas,
+      Monaco,
+      Lucida Console,
+      Liberation Mono,
+      DejaVu Sans Mono,
+      Bitstream Vera Sans Mono,
+      Courier New,
+      monospace;
+    white-space: nowrap;
+    justify-content: start;
+    width: min-content;
+  }
+
+  header h1 {
+    color: var(--color);
+  }
+
+  header div .title {
+    text-shadow: var(--text-shadow);
+    overflow: hidden;
+  }
+
+  header div .cursor {
+    content: "_";
+    display: inline-block;
+    animation: blink 1.5s steps(2) infinite;
+  }
+
+  header img {
+    width: 220px;
+    padding: 50px 50px 0 50px;
+  }
+
+  @media only screen and (max-width: 900px) {
+    header {
+      display: block;
+    }
+
+    header img {
+      display: none;
+    }
+  }
+</style>