feat: initial commit

2 files changed, 133 insertions, 0 deletions

diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
new file mode 100644
index 0000000..534f306
--- /dev/null
+++ b/src/lib/header/Header.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	// import logo from './capybara-markets-logo.svg';
+</script>
+
+<header>
+	<div class="corner">
+		<a href="https://capybara.markets">
+			<!-- <img src={logo} alt="Capybara Markets" id="capybara-markets-logo" /> -->
+
+			<!-- <svg
+				id="Layer_1"
+				data-name="Layer 1"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 286.37 318.64"
+				><path
+					d="M314.66,244.45c6,0,12.07,0,18.16,0,24-.14,47.93-.65,71.88-.33,17.5.24,32.36,6.08,40.21,23.39,4.89,10.77,4.92,22.22,3.6,33.55a126.61,126.61,0,0,1-16.46,48.84c-4.53,7.88-10.5,14-18.88,17.88a220.4,220.4,0,0,0-20.62,11c-6.18,3.73-6.13,6.59-.66,11.32,19.26,16.63,34.45,36.07,41.1,61.12,8.36,31.46-2.18,63.56-27.07,82-29.67,21.93-59.9,9.39-75.43-11.61a38.34,38.34,0,0,1-6.86-17.7c-1.77-15.65,7.93-27,23.89-29.26,4.67-.65,9.48-.24,14.2-.61,1.39-.1,3.57-.91,3.92-1.92,5.59-15.68,6.31-33.68-9-46.61a34.1,34.1,0,0,0-50.16,6.34c-2.44,3.44-4.5,7.15-6.94,11.07-2.16-3.53-4-6.86-6.17-10-9.49-14.09-25.43-19.19-41.1-13.22A35.44,35.44,0,0,0,229.89,457c.23,1.85.39,3.72.71,5.56,1.86,10.93,2.05,11,13,11.27a53.41,53.41,0,0,1,9.61,1c18.36,3.84,27.16,20.45,20.29,38.1C262,542.45,223,554.46,195.58,536.5c-19.91-13-30.22-32.25-32.33-55.68-2.28-25.33,6.22-47.59,21.71-67.13,7-8.83,15.41-16.55,23.37-24.59,3.72-3.75,3.43-7.78,2-12.19-2.94-9-7.16-17.84-8.53-27.08-4.3-29-.47-56.8,14.84-82.44,1-1.68,1.14-4.08,1.12-6.14-.06-7.78-1-15.61-.38-23.32.88-10.6,7.25-14.42,16.53-9.51,8.31,4.41,15.63,10.66,23.55,15.85a14.36,14.36,0,0,0,7.19,2.49c6.61.09,13.24-.64,19.85-.65,3,0,4.44-1.31,5.93-3.67a117.21,117.21,0,0,1,9.65-13.67c3-3.53,5.84-3.17,8.07.95C310.71,234.46,312.55,239.6,314.66,244.45Zm-29,47.82c.06-7.63-4.34-14.16-9.86-14.6-5.71-.45-10.47,5.17-11.22,13.28-.72,7.84,4.24,15.65,10.15,16S285.62,300.62,285.7,292.27Zm110.64-19.79-2-1.94a18.55,18.55,0,0,0-1.08,4.15,5.67,5.67,0,0,0,1,3.56,92.61,92.61,0,0,0,7.61,8,3.28,3.28,0,0,0,5.8-1.9C408.25,281,399.79,272.41,396.34,272.48Zm35.8,0c-4,.15-10.6,9.17-9.49,12.43a4.31,4.31,0,0,0,2.74,2.53c1,.14,2.48-.83,3.21-1.75a65.68,65.68,0,0,0,5.34-7.88,5,5,0,0,0,.32-3.68C434,273.3,432.59,272.82,432.14,272.5Z"
+					transform="translate(-162.88 -226.3)"
+				/></svg
+			> -->
+
+			<p style="font-family: 'Gilroy ExtraBold';">Capybara</p>
+			<p style="font-family: 'Gilroy Light';">Markets</p>
+		</a>
+	</div>
+
+	<nav data-sveltekit-prefetch>
+		<ul>
+			<li class:active={$page.url.pathname === '/'}>
+				<a href="/">Home</a>
+			</li>
+			<li class:active={$page.url.pathname === '/about'}>
+				<a href="/about">About</a>
+			</li>
+			<li>
+				<a href="https://twitter.com/CapybaraMarkets" target="_blank">Twitter</a>
+			</li>
+		</ul>
+	</nav>
+
+	<div class="corner">
+		<!-- TODO put something else here? github link? -->
+	</div>
+</header>
+
+<style>
+	header {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.corner {
+		width: 10em;
+		height: 3em;
+	}
+
+	.corner a {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
+
+	.corner svg /* img */ {
+		width: 2em;
+		height: 2em;
+		object-fit: contain;
+	}
+
+	nav {
+		display: flex;
+		justify-content: center;
+	}
+
+	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;
+		letter-spacing: 0.1em;
+		text-decoration: none;
+		transition: color 0.2s linear;
+	}
+
+	a:hover {
+		color: var(--accent-color);
+	}
+</style>
diff --git a/src/lib/header/capybara-markets-logo.svg b/src/lib/header/capybara-markets-logo.svg
new file mode 100644
index 0000000..9dd986d
--- /dev/null
+++ b/src/lib/header/capybara-markets-logo.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 286.37 318.64"><path d="M314.66,244.45c6,0,12.07,0,18.16,0,24-.14,47.93-.65,71.88-.33,17.5.24,32.36,6.08,40.21,23.39,4.89,10.77,4.92,22.22,3.6,33.55a126.61,126.61,0,0,1-16.46,48.84c-4.53,7.88-10.5,14-18.88,17.88a220.4,220.4,0,0,0-20.62,11c-6.18,3.73-6.13,6.59-.66,11.32,19.26,16.63,34.45,36.07,41.1,61.12,8.36,31.46-2.18,63.56-27.07,82-29.67,21.93-59.9,9.39-75.43-11.61a38.34,38.34,0,0,1-6.86-17.7c-1.77-15.65,7.93-27,23.89-29.26,4.67-.65,9.48-.24,14.2-.61,1.39-.1,3.57-.91,3.92-1.92,5.59-15.68,6.31-33.68-9-46.61a34.1,34.1,0,0,0-50.16,6.34c-2.44,3.44-4.5,7.15-6.94,11.07-2.16-3.53-4-6.86-6.17-10-9.49-14.09-25.43-19.19-41.1-13.22A35.44,35.44,0,0,0,229.89,457c.23,1.85.39,3.72.71,5.56,1.86,10.93,2.05,11,13,11.27a53.41,53.41,0,0,1,9.61,1c18.36,3.84,27.16,20.45,20.29,38.1C262,542.45,223,554.46,195.58,536.5c-19.91-13-30.22-32.25-32.33-55.68-2.28-25.33,6.22-47.59,21.71-67.13,7-8.83,15.41-16.55,23.37-24.59,3.72-3.75,3.43-7.78,2-12.19-2.94-9-7.16-17.84-8.53-27.08-4.3-29-.47-56.8,14.84-82.44,1-1.68,1.14-4.08,1.12-6.14-.06-7.78-1-15.61-.38-23.32.88-10.6,7.25-14.42,16.53-9.51,8.31,4.41,15.63,10.66,23.55,15.85a14.36,14.36,0,0,0,7.19,2.49c6.61.09,13.24-.64,19.85-.65,3,0,4.44-1.31,5.93-3.67a117.21,117.21,0,0,1,9.65-13.67c3-3.53,5.84-3.17,8.07.95C310.71,234.46,312.55,239.6,314.66,244.45Zm-29,47.82c.06-7.63-4.34-14.16-9.86-14.6-5.71-.45-10.47,5.17-11.22,13.28-.72,7.84,4.24,15.65,10.15,16S285.62,300.62,285.7,292.27Zm110.64-19.79-2-1.94a18.55,18.55,0,0,0-1.08,4.15,5.67,5.67,0,0,0,1,3.56,92.61,92.61,0,0,0,7.61,8,3.28,3.28,0,0,0,5.8-1.9C408.25,281,399.79,272.41,396.34,272.48Zm35.8,0c-4,.15-10.6,9.17-9.49,12.43a4.31,4.31,0,0,0,2.74,2.53c1,.14,2.48-.83,3.21-1.75a65.68,65.68,0,0,0,5.34-7.88,5,5,0,0,0,.32-3.68C434,273.3,432.59,272.82,432.14,272.5Z" transform="translate(-162.88 -226.3)"/></svg>
\ No newline at end of file