From e46cb88d3763a64e97557b2db2f9b74ae7627555 Mon Sep 17 00:00:00 2001
From: axtloss <axtlos@disroot.org>
Date: Tue, 24 Dec 2024 19:25:48 +0100
Subject: new website dropped

---
 src/routes/Header.svelte | 316 -----------------------------------------------
 1 file changed, 316 deletions(-)
 delete mode 100644 src/routes/Header.svelte

(limited to 'src/routes/Header.svelte')

diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
deleted file mode 100644
index 4490f1a..0000000
--- a/src/routes/Header.svelte
+++ /dev/null
@@ -1,316 +0,0 @@
-<script context="module" lang="ts">
-
-  export type Header = {
-    addMessage (message: string, options?: Partial<MessageOptions>): void
-  };
-
-  type HeaderMessage = {
-    message: string,
-    options: MessageOptions,
-    dismiss: () => void,
-  }
-
-  type MessageOptions = {
-    time: number,
-    dismissable: boolean,
-  };
-
-</script>
-
-<script lang="ts">
-  import { page } from '$app/stores';
-  import logo from '/rose.apng';
-  import boowomp from '/wilted-flower.apng';
-  import close from '$lib/assets/close.svg?raw';
-  import { setContext } from "svelte";
-  import { fly } from "svelte/transition";
-  import { readable, writable } from "svelte/store";
-  import { isNavigating } from "$lib/navigation.ts";
-  import { onMount } from 'svelte';
- 
-  const newestMessage = writable<HeaderMessage|null>(null);
-
-  var Rose = chrome ? boowomp : logo;
-
-  const currentMessage = writable<HeaderMessage|null>(null, (set) => {
-    let $currentMessage: HeaderMessage|null = null;
-    let currentTimeout: number|null = null;
-
-    const dismiss = () => {
-      if (currentTimeout == null) clearTimeout(currentTimeout);
-      $currentMessage = null;
-      set(null);
-    };
-
-    const unsubscribe = newestMessage.subscribe(($newestMessage) => {
-      if ($newestMessage == null) return;
-
-      if ($currentMessage != null) dismiss();
-
-      $currentMessage = $newestMessage;
-      $currentMessage.dismiss = dismiss;
-      if ($currentMessage.options.dismissable)
-	currentTimeout = setTimeout(dismiss, $currentMessage.options.duration);
-      set($currentMessage);
-    });
-
-    return () => {
-      unsubscribe();
-      dismiss();
-    };
-  });
-
-    setContext<Header>("Header", {
-    addMessage(...args: any[]) {
-
-      let [ message, options ] = args as [string, Partial<MessageOptions>|undefined];
-      options ??= { dismissable: true, duration: 5000 };
-      options.dismissable ??= true;
-      options.duration ??= 5000;
-      newestMessage.set({
-        type: "message",
-        message,
-        options: options as MessageOptions,
-        dismiss: void {},
-      });
-
-    },
-  });
-  
-  var chrome: boolean = false;
-  onMount(async () => {
-    chrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
-    Rose = chrome ? boowomp : logo;
-  });
-</script>
-
-<div class="main">
-  <header>
-    <div class="corner">
-      <a href="/" class="name">
-	{#if $isNavigating}
-	  <span class="loader"></span>
-	{:else}
-	    <img id="logo" src={Rose} alt="rose"/>
-	{/if}
-	<p>rose</p>
-      </a>
-    </div>
-
-    {#if $currentMessage != null}
-      <div class="center" transition:fly>
-	<p>
-	  {$currentMessage.message}
-	</p>
-	{#if $currentMessage.options.dismissable}
-	  <button
-	    class="dismiss"
-	    on:click={$currentMessage.dismiss}>
-	    <span class="icon">{@html close}</span>
-	  </button>
-	{/if}
-      </div>
-    {/if}
-
-    <nav>
-      <ul>
-	<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
-	  <a href="/">Home</a>
-	</li>
-	<li aria-current={$page.url.pathname === '/projects' ? 'page' : undefined}>
-	  <a href="/projects">Projects</a>
-	</li>
-      </ul>
-    </nav>
-  </header>
-  <slot />
-</div>
-
-<style lang="scss">
-  @use "sass:color";
-
-  @import "@fontsource-variable/playwrite-hr";
-
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    position: fixed;
-    position: -webkit-sticky;
-    top: 0;
-    z-index: 99;
-    background-color: color.change(white, $alpha: 0.9);
-    height: 3em;
-  }
-
-  .name {
-    font-family: 'Playwrite HR Variable', cursive;
-    font-size: 1.3em;
-    color: #150129;
-    padding-bottom: 6px;
-  }
-
-  .loader {
-    width: 1.5em;
-    height: 1.5em;
-    border: 5px solid transparent;
-    border-bottom-color: #E2122D;
-    border-radius: 50%;
-    display: inline-block;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
-  }
-
-  @keyframes rotation {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-  }
-
-  .corner {
-    height: 3em;
-    margin-bottom: 0px;
-
-    & a {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      text-decoration: none;
-
-      &:visited {
-	color: black;
-      }
-      &:hover &:active {
-	color: black;
-      }
-
-      & p {
-	padding-left: 4px;
-      }
-    }
-
-    & img {
-      width: 1.5em;
-      height: 1.5em;
-      object-fit: contain;
-    }
-
-  }
-
-  .center {
-    display: flex;
-    flex-direction: row;
-    background-color: #000000ac;
-    border-radius: 100px;
-    align-items: center;
-    height: 2.5em;
-
-    & > .dismiss {
-      min-height: 2.3em;
-      min-width: 2.3em;
-      background: transparent;
-      border: none;
-      border-radius: 9999px;
-      margin-right: 10px;
-
-      &:hover { background: #ffffff30; }
-      &:active { background: #ffffff60; }
-
-      & > :global(span) {
-	justify-content: center;
-	align-content: center;
-	width: 100%;
-	height: 100%;
-	fill: #ffffff;
-	transform: translate(0, 0.125em);
-	& > :global(svg) {
-	  width: 16px;
-          height: 16px;
-          object-fit: contain;
-          text-align: center;
-          fill: #ffffff;
-	}
-      }
-    }
-
-    & p {
-      color: #fff;
-      margin-left: 10px;
-      margin-right: 10px;
-    }
-
-  }
-
-  nav {
-    display: flex;
-    justify-content: right;
-    font-size: 1.2em;
-    padding-right: 10px;
-    object-fit: contain;
-  }
-
-  ul {
-    position: relative;
-    padding: 0;
-    margin: 0;
-    height: 3em;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    list-style: none;
-    background-size: contain;
-  }
-
-  li {
-    position: relative;
-    height: 100%;
-  }
-
-  li[aria-current='page']::before {
-    --size: 6px;
-    content: '';
-    width: 0;
-    height: 0;
-    position: absolute;
-    top: 0;
-    left: calc(50% - var(--size));
-    border: var(--size) solid transparent;
-    border-top: var(--size) solid var(--color-theme-1);
-  }
-
-  nav a {
-    display: flex;
-    height: 100%;
-    align-items: center;
-    padding: 0 0.5rem;
-    color: #150129;
-    font-weight: 700;
-    font-size-adjust: 0.3;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    text-decoration: none;
-    transition: color 0.2s linear;
-  }
-
-  a:hover {
-    color: var(--color-theme-1);
-  }
-
-  @media (prefers-color-scheme: dark) {
-    /* If the operating system is using dark mode, then apply this CSS */
-    header {
-      background-color: color.change(#292b33, $alpha: 0.9);
-    }
-
-    a:link:not(.permalink),a:visited:not(.permalink) {
-      color: #b9cffb;
-    }
-
-    .name {
-      color: #f5f5f5;
-    }
-  }
-
-</style>
-- 
cgit v1.2.3