1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
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>
|