From e235aa6cf4914cbff6c72f19e0fcf6888da349f7 Mon Sep 17 00:00:00 2001
From: axtloss <axtlos@disroot.org>
Date: Tue, 20 Aug 2024 01:20:30 +0200
Subject: yayyy new website!!

---
 src/routes/Header.svelte | 299 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 299 insertions(+)
 create mode 100644 src/routes/Header.svelte

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

diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
new file mode 100644
index 0000000..0366e6d
--- /dev/null
+++ b/src/routes/Header.svelte
@@ -0,0 +1,299 @@
+<script context="module" lang="ts">
+  import { type ComponentType, SvelteComponent} from "svelte";
+  var showmsg: boolean = false;
+
+  export type Header = {
+    addMessage (message: string, options?: Partial<MessageOptions>): void
+  };
+
+  type HeaderMessage = {
+    message: string,
+    options: MessageOptions,
+    dismiss: () => void,
+  }
+
+  type MessageOptions = {
+    time: number,
+    dismissable: boolean,
+  };
+
+  var chrome: boolean = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+</script>
+
+<script lang="ts">
+  import { page } from '$app/stores';
+  import logo from '/rose.gif';
+  import boowomp from '/wilted-flower.gif';
+  import close from '$lib/assets/close.svg?raw';
+  import { setContext } from "svelte";
+  import { fly } from "svelte/transition";
+  import { readable, writable } from "svelte/store";
+
+  const newestMessage = writable<HeaderMessage|null>(null);
+
+  const 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 {},
+      });
+
+    },
+  });
+
+</script>
+
+<div class="main">
+  <header>
+    <div class="corner">
+      <a href="/" class="name">
+	<img id="logo" src={rose} alt="rose"/>
+	<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;
+  }
+
+  .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;
+    }
+
+    & 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