zhereh-frontend

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

Header.svelte (2339B)

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