src/routes/Header.svelte

   1 <script>
   2         import { page } from '$app/stores';
   3         import logo from '$lib/images/svelte-logo.svg';
   4 </script>
   5
   6 <header>
   7         <div class="corner">
   8                 <!-- <a href="https://kit.svelte.dev">
   9                         <img src={logo} alt="SvelteKit" />
  10                 </a> -->
  11         </div>
  12
  13         <nav>
  14                 <svg viewBox="0 0 2 3" aria-hidden="true">
  15                         <path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
  16                 </svg>
  17                 <ul>
  18                         <li class:active={$page.url.pathname === '/'}>
  19                                 <a href="/">Home</a>
  20                         </li>
  21                         <li class:active={$page.url.pathname === '/foo'}>
  22                                 <a href="/foo">Foo</a>
  23                         </li>
  24                         <li class:active={$page.url.pathname.startsWith('/sverdle')}>
  25                                 <a href="/sverdle">Sverdle</a>
  26                         </li>
  27                 </ul>
  28                 <svg viewBox="0 0 2 3" aria-hidden="true">
  29                         <path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
  30                 </svg>
  31         </nav>
  32
  33         <div class="corner">
  34                         <img src="ducks.png" alt="GitHub" />
  35         </div>
  36 </header>
  37
  38 <style>
  39         header {
  40                 display: flex;
  41                 justify-content: space-between;
  42         }
  43
  44         .corner {
  45                 width: 13em;
  46                 height: 13em;
  47         }
  48
  49         .corner a {
  50                 display: flex;
  51                 align-items: center;
  52                 justify-content: center;
  53                 width: 100%;
  54                 height: 100%;
  55         }
  56
  57         .corner img {
  58                 width: 12em;
  59                 height: 12em;
  60                 object-fit: contain;
  61         }
  62
  63         nav {
  64                 display: flex;
  65                 justify-content: center;
  66                 --background: rgba(255, 255, 255, 0.7);
  67         }
  68
  69         svg {
  70                 width: 2em;
  71                 height: 3em;
  72                 display: block;
  73         }
  74
  75         path {
  76                 fill: var(--background);
  77         }
  78
  79         ul {
  80                 position: relative;
  81                 padding: 0;
  82                 margin: 0;
  83                 height: 3em;
  84                 display: flex;
  85                 justify-content: center;
  86                 align-items: center;
  87                 list-style: none;
  88                 background: var(--background);
  89                 background-size: contain;
  90         }
  91
  92         li {
  93                 position: relative;
  94                 height: 100%;
  95         }
  96
  97         li.active::before {
  98                 --size: 6px;
  99                 content: '';
 100                 width: 0;
 101                 height: 0;
 102                 position: absolute;
 103                 top: 0;
 104                 left: calc(50% - var(--size));
 105                 border: var(--size) solid transparent;
 106                 border-top: var(--size) solid var(--color-theme-1);
 107         }
 108
 109         nav a {
 110                 display: flex;
 111                 height: 100%;
 112                 align-items: center;
 113                 padding: 0 0.5rem;
 114                 color: var(--color-text);
 115                 font-weight: 700;
 116                 font-size: 0.8rem;
 117                 text-transform: uppercase;
 118                 letter-spacing: 0.1em;
 119                 text-decoration: none;
 120                 transition: color 0.2s linear;
 121         }
 122
 123         a:hover {
 124                 color: var(--color-theme-1);
 125         }
 126 </style>