aboutsummaryrefslogtreecommitdiff
path: root/src/lib/header/Header.svelte
diff options
context:
space:
mode:
authormat <github@matdoes.dev>2022-02-15 01:33:08 +0000
committermat <github@matdoes.dev>2022-02-15 01:33:08 +0000
commitffe5eea0ce73cae8657c547f881b6f41270fef37 (patch)
treeeff4b6c4e4b9a155e8c6b68fd1843db20d8b4aa5 /src/lib/header/Header.svelte
parent9f28b6d9160fee5eff92d1d9849191f2f12faeab (diff)
downloadskyblock-stats-ffe5eea0ce73cae8657c547f881b6f41270fef37.tar.gz
skyblock-stats-ffe5eea0ce73cae8657c547f881b6f41270fef37.tar.bz2
skyblock-stats-ffe5eea0ce73cae8657c547f881b6f41270fef37.zip
start adding stuff
Diffstat (limited to 'src/lib/header/Header.svelte')
-rw-r--r--src/lib/header/Header.svelte124
1 files changed, 0 insertions, 124 deletions
diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
deleted file mode 100644
index 9d3120f..0000000
--- a/src/lib/header/Header.svelte
+++ /dev/null
@@ -1,124 +0,0 @@
-<script lang="ts">
- import { page } from '$app/stores';
- import logo from './svelte-logo.svg';
-</script>
-
-<header>
- <div class="corner">
- <a href="https://kit.svelte.dev">
- <img src={logo} alt="SvelteKit" />
- </a>
- </div>
-
- <nav>
- <svg viewBox="0 0 2 3" aria-hidden="true">
- <path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
- </svg>
- <ul>
- <li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
- <li class:active={$page.url.pathname === '/about'}>
- <a sveltekit:prefetch href="/about">About</a>
- </li>
- <li class:active={$page.url.pathname === '/todos'}>
- <a sveltekit:prefetch href="/todos">Todos</a>
- </li>
- </ul>
- <svg viewBox="0 0 2 3" aria-hidden="true">
- <path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
- </svg>
- </nav>
-
- <div class="corner">
- <!-- TODO put something else here? github link? -->
- </div>
-</header>
-
-<style>
- header {
- display: flex;
- justify-content: space-between;
- }
-
- .corner {
- width: 3em;
- height: 3em;
- }
-
- .corner a {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 100%;
- height: 100%;
- }
-
- .corner img {
- width: 2em;
- height: 2em;
- object-fit: contain;
- }
-
- nav {
- display: flex;
- justify-content: center;
- --background: rgba(255, 255, 255, 0.7);
- }
-
- svg {
- width: 2em;
- height: 3em;
- display: block;
- }
-
- path {
- fill: var(--background);
- }
-
- ul {
- position: relative;
- padding: 0;
- margin: 0;
- height: 3em;
- display: flex;
- justify-content: center;
- align-items: center;
- list-style: none;
- background: var(--background);
- background-size: contain;
- }
-
- li {
- position: relative;
- height: 100%;
- }
-
- li.active::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(--accent-color);
- }
-
- nav a {
- display: flex;
- height: 100%;
- align-items: center;
- padding: 0 1em;
- color: var(--heading-color);
- font-weight: 700;
- font-size: 0.8rem;
- text-transform: uppercase;
- letter-spacing: 0.1em;
- text-decoration: none;
- transition: color 0.2s linear;
- }
-
- a:hover {
- color: var(--accent-color);
- }
-</style>