diff options
Diffstat (limited to 'src/routes/Header.svelte')
| -rw-r--r-- | src/routes/Header.svelte | 316 |
1 files changed, 0 insertions, 316 deletions
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> |