48 | {can(hero.action, data) && (
49 |
81 | )}
82 |
91 |
83 |
90 | {locale.title}
84 |
86 |
88 | {hero.ps &&
27 | 
28 |
29 | )
30 | }
31 |
32 | const imageData = image.childImageSharp?.gatsbyImageData
33 |
34 | if (imageData) {
35 | return (
36 |
28 |
42 | 
43 |
44 | )
45 | }
46 |
--------------------------------------------------------------------------------
/src/components/lang-picker/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { navigate } from "gatsby"
3 | import useLocales from "../../hooks/useLocales"
4 | import * as css from "./lang-picker.module.css"
5 |
6 | export default function LangPicker() {
7 | const { locales, locale } = useLocales()
8 | if (!locale || locales.length <= 1) return null
9 | return (
10 |
11 |
31 | )
32 | }
--------------------------------------------------------------------------------
/src/components/lang-picker/lang-picker.module.css:
--------------------------------------------------------------------------------
1 | .wrap {
2 | position: relative;
3 | display: inline-block;
4 | }
5 |
6 | .globe {
7 | position: absolute;
8 | left: var(--spacing-s);
9 | top: 50%;
10 | transform: translateY(-50%);
11 | display: flex;
12 | flex-direction: column;
13 | justify-content: space-around;
14 | }
15 |
16 | .globe svg {
17 | height: var(--spacing-m);
18 | width: var(--spacing-m);
19 | }
20 |
21 | .select {
22 | border: 1px solid transparent;
23 | padding-left: calc(4px + var(--spacing-l));
24 | text-align: center;
25 | }
26 | .select:hover,
27 | .select:focus {
28 | border-color: var(--gray-3);
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/lang-picker/lang-picker.module.css.d.ts:
--------------------------------------------------------------------------------
1 | // This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
2 | export const wrap: string;
3 | export const globe: string;
4 | export const select: string;
5 |
--------------------------------------------------------------------------------
/src/components/layout/a11y.css:
--------------------------------------------------------------------------------
1 | /* hide from screen but leave visible to screen readers and findable with cmd/ctrl-F searches */
2 | .visuallyHidden {
3 | border: 0;
4 | clip: rect(0 0 0 0);
5 | height: auto;
6 | margin: 0;
7 | overflow: hidden;
8 | padding: 0;
9 | position: absolute;
10 | width: 1px;
11 | white-space: nowrap;
12 | }
--------------------------------------------------------------------------------
/src/components/layout/atcb.css:
--------------------------------------------------------------------------------
1 | /**
2 | * styles needed for add-to-calendar-button plugin
3 | */
4 | .atcb_icon {
5 | height: 16px;
6 | display: inline-flex;
7 | margin-bottom: 4px;
8 | margin-right: 10px;
9 | vertical-align: middle;
10 | }
11 | .atcb_icon svg {
12 | height: 100%;
13 | color: rgb(51, 51, 51);
14 | width: auto;
15 | }
16 |
17 | .atcb_list {
18 | box-sizing: border-box;
19 | color: rgb(51, 51, 51);
20 | display: block;
21 | max-width: 100%;
22 | position: absolute;
23 | padding: 0 3px;
24 | -webkit-user-select: none;
25 | -moz-user-select: none;
26 | -ms-user-select: none;
27 | user-select: none;
28 | width: 100%;
29 | min-width: 12em;
30 | z-index: 80;
31 | }
32 |
33 | .atcb_list.atcb_modal {
34 | position: fixed;
35 | width: 12em;
36 | left: 50%;
37 | top: 50%;
38 | transform: translateY(-50%) translateX(-50%);
39 | }
40 |
41 | .atcb_list_item {
42 | background: rgb(250, 250, 250);
43 | border: 1px solid rgb(210, 210, 210);
44 | border-top: 0;
45 | -webkit-box-shadow: 1px 2px 8px 0px rgba(0,0,0,.3);
46 | box-shadow: 1px 2px 8px 0px rgba(0,0,0,.3);
47 | box-sizing: border-box;
48 | cursor: pointer;
49 | font-size: 16px;
50 | left: 50%;
51 | position: relative;
52 | padding: 12px 18px;
53 | text-align: left;
54 | transform: translate(-50%);
55 | touch-action: manipulation;
56 | -webkit-tap-highlight-color: transparent;
57 | }
58 | .atcb_list_item:focus,
59 | .atcb_list_item:hover {
60 | background: rgb(255, 255, 255);
61 | -webkit-box-shadow: 1px 2px 10px 0px rgba(0,0,0,.4);
62 | box-shadow: 1px 2px 10px 0px rgba(0,0,0,.4);
63 | color: rgb(0, 0, 0);
64 | }
65 | @media only screen and (max-width: 575px) {
66 | .atcb_list_item {
67 | font-size: 14px;
68 | }
69 | }
70 |
71 | .atcb_list:not(.atcb_modal) .atcb_list_item:first-child {
72 | padding-top: 25px;
73 | }
74 |
75 | .atcb_list.atcb_modal .atcb_list_item:first-child {
76 | border-radius: 6px 6px 0 0;
77 | }
78 |
79 | .atcb_list_item:last-child {
80 | border-radius: 0 0 6px 6px;
81 | }
82 |
83 | .atcb_list_item .atcb_icon {
84 | margin-right: 8px;
85 | }
86 |
87 | .atcb_bgoverlay {
88 | background: rgba(20,20,20,.2);
89 | backdrop-filter: blur(2px);
90 | height: 100%;
91 | left: 0;
92 | position: fixed;
93 | top: 0;
94 | width: 100%;
95 | z-index: 70;
96 | }
97 |
98 |
--------------------------------------------------------------------------------
/src/components/layout/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import "./layout.scss"
3 | import Banner from "../banner"
4 | import Nav from "../nav"
5 | import Footer from "../footer"
6 | import * as css from "./layout.module.css"
7 |
8 | const Layout: React.FC<{ style?: React.CSSProperties }> = ({ style, children }) => {
9 | return (
10 |
12 |
15 |
16 | {locales.map(l => l.viewIn).join(" | ")}
17 |
18 |
19 |
30 |
11 |
18 | )
19 | }
20 |
21 | export default Layout
22 |
--------------------------------------------------------------------------------
/src/components/layout/layout.module.css:
--------------------------------------------------------------------------------
1 | .wrap {
2 | display: flex;
3 | flex-direction: column;
4 | justify-content: space-between;
5 | min-height: 100vh;
6 | min-height: -webkit-fill-available;
7 | }
--------------------------------------------------------------------------------
/src/components/layout/layout.module.css.d.ts:
--------------------------------------------------------------------------------
1 | // This file is automatically generated. Do not modify this file manually -- YOUR CHANGES WILL BE ERASED!
2 | export const wrap: string;
3 |
--------------------------------------------------------------------------------
/src/components/layout/layout.scss:
--------------------------------------------------------------------------------
1 | @import "./a11y.css";
2 | @import "./atcb.css";
3 | @import "../../../config/styles.scss";
4 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;900&display=swap');
5 |
6 | $white: white !default;
7 | $black: black !default;
8 | $accent: #e73b93 !default;
9 | $accent: adjust-color($accent, $hue: 90deg) !default;
10 |
11 | :root {
12 | /* Typographic Scale */
13 | --base-font-size: 14px;
14 | @media (min-width: 415px) {
15 | --base-font-size: 16px;
16 | }
17 | @media (min-width: 600px) {
18 | --base-font-size: 18px;
19 | }
20 |
21 | /* Font Family */
22 | --sans: Montserrat, sans-serif;
23 | --monospace: "Source Code Pro", monospace;
24 |
25 | /* Font Weights */
26 | --fw-regular: 400;
27 | --fw-bold: 600;
28 | --fw-black: 900;
29 |
30 | /* Line Heights */
31 | --lh-headings: 1.1;
32 | --lh-copy: 1.5;
33 |
34 | /* Spacing Scale */
35 | --base-spacing: 0.5rem;
36 | --spacing-xs: calc(var(--base-spacing) / 2);
37 | --spacing-s: var(--base-spacing);
38 | --spacing-m: calc(var(--base-spacing) * 2);
39 | --spacing-l: calc(var(--base-spacing) * 3);
40 | --spacing-xl: calc(var(--base-spacing) * 4);
41 | --spacing-xxl: calc(var(--base-spacing) * 5);
42 |
43 | /* Sizes */
44 | --header-height: 80px;
45 | --input-height: 48px;
46 | --input-height--small: 40px;
47 |
48 | /* Border Radius */
49 | --br-base: 4px;
50 |
51 | /* Colors */
52 | /* TODO: move these base colors to settings.json or similar */
53 | --white: #{$white};
54 | --black: #{$black};
55 | --accent: #{$accent};
56 | --secondary: #{$secondary};
57 |
58 | --fg: var(--black);
59 | --bg: var(--white);
60 |
61 | --gray-1: #{adjust-color($black, $alpha: -0.9)};
62 | --gray-2: #{adjust-color($black, $alpha: -0.8)};
63 | --gray-3: #{adjust-color($black, $alpha: -0.7)};
64 | --gray-4: #{adjust-color($black, $alpha: -0.6)};
65 | --gray-5: #{adjust-color($black, $alpha: -0.5)};
66 | --gray-6: #{adjust-color($black, $alpha: -0.4)};
67 | --gray-7: #{adjust-color($black, $alpha: -0.3)};
68 | --gray-8: #{adjust-color($black, $alpha: -0.2)};
69 | --gray-9: #{adjust-color($black, $alpha: -0.1)};
70 |
71 | --red: #fc5b5b;
72 | @media (prefers-color-scheme: dark) {
73 | --bg: var(--black);
74 | --fg: var(--white);
75 |
76 | --gray-1: #{adjust-color($white, $alpha: -0.9)};
77 | --gray-2: #{adjust-color($white, $alpha: -0.8)};
78 | --gray-3: #{adjust-color($white, $alpha: -0.7)};
79 | --gray-4: #{adjust-color($white, $alpha: -0.6)};
80 | --gray-5: #{adjust-color($white, $alpha: -0.5)};
81 | --gray-6: #{adjust-color($white, $alpha: -0.4)};
82 | --gray-7: #{adjust-color($white, $alpha: -0.3)};
83 | --gray-8: #{adjust-color($white, $alpha: -0.2)};
84 | --gray-9: #{adjust-color($white, $alpha: -0.1)};
85 |
86 | --red: #ff8588;
87 | }
88 | }
89 |
90 | @function light($color) {
91 | @return adjust-color($color, $saturation: 53%, $lightness: 15%);
92 | }
93 |
94 | @function soft($color) {
95 | @return adjust-color($color, $alpha: -0.85);
96 | }
97 |
98 | * {
99 | box-sizing: border-box;
100 | }
101 |
102 | html,
103 | body {
104 | height: 100%;
105 | }
106 |
107 | html {
108 | background-color: var(--bg);
109 | color: var(--fg);
110 | line-height: var(--lh-copy);
111 | font-family: var(--sans);
112 | font-size: var(--base-font-size);
113 | font-weight: var(--fw-regular);
114 | }
115 |
116 | body {
117 | margin: 0 auto;
118 | }
119 |
120 | h1,
121 | h2,
122 | h3,
123 | h4,
124 | h5,
125 | h6 {
126 | font-weight: var(--fw-bold);
127 | margin: 0;
128 | line-height: var(--lh-headings);
129 | }
130 |
131 | img,
132 | picture,
133 | video {
134 | display: block;
135 | max-width: 100%;
136 | }
137 |
138 | a,
139 | .link {
140 | color: var(--accent);
141 | padding: 0;
142 | text-decoration: none;
143 | position: relative;
144 | }
145 | a:hover,
146 | a:focus,
147 | .link:hover,
148 | .link:focus {
149 | text-decoration: underline;
150 | }
151 | a:active,
152 | .link:active {
153 | top: 1px;
154 | }
155 |
156 | strong {
157 | font-weight: var(--fw-bold);
158 | }
159 |
160 | em {
161 | color: var(--accent);
162 | font-style: inherit;
163 | font-weight: inherit;
164 | }
165 |
166 | label {
167 | display: block;
168 | }
169 |
170 | code {
171 | color: var(--fg);
172 | padding: var(--spacing-xs) var(--spacing-s);
173 | margin: 0;
174 | font-size: 85%;
175 | font-family: var(--monospace);
176 | background-color: var(--gray-2);
177 | border-radius: 6px;
178 | }
179 |
180 | button,
181 | .button,
182 | input,
183 | select {
184 | font: inherit;
185 | outline: none;
186 | }
187 |
188 | button,
189 | .button {
190 | background: linear-gradient(to right, var(--secondary), var(--accent) 66%);
191 | border-radius: var(--br-base);
192 | border: none;
193 | color: var(--bg);
194 | cursor: pointer;
195 | display: inline-block;
196 | font-size: inherit;
197 | font-weight: var(--fw-regular);
198 | position: relative;
199 | }
200 |
201 | input,
202 | select {
203 | background-color: var(--bg);
204 | border: 1px solid var(--gray-3);
205 | border-radius: var(--br-base);
206 | color: inherit;
207 | }
208 |
209 | input,
210 | select,
211 | button,
212 | .button {
213 | padding: var(--spacing-s) var(--spacing-m);
214 | }
215 |
216 | button:hover,
217 | .button:hover,
218 | button:focus,
219 | .button:focus {
220 | background-color: var(--gray-9);
221 | text-decoration: none;
222 | }
223 | button:active,
224 | .button:active {
225 | top: 1px;
226 | }
227 | button.secondary,
228 | .button.secondary {
229 | background-color: transparent;
230 | border: 1px solid var(--gray-3);
231 | color: var(--fg);
232 | }
233 | button.secondary:focus,
234 | button.secondary:hover,
235 | .button.secondary:focus,
236 | .button.secondary:hover {
237 | background-color: transparent;
238 | border-color: var(--gray-5);
239 | }
240 |
241 | button.link,
242 | .button.link {
243 | background: none;
244 | box-shadow: none;
245 | display: inline;
246 | }
247 | [disabled] button,
248 | button[disabled],
249 | .button[disabled] {
250 | box-shadow: none;
251 | background-color: var(--gray-3);
252 | color: var(--gray-5);
253 | cursor: not-allowed;
254 | transform: none;
255 | }
256 |
257 | input:hover,
258 | input:focus,
259 | input:active,
260 | select:hover,
261 | select:focus,
262 | select:active {
263 | border-color: var(--gray-5);
264 | }
265 |
266 | select {
267 | appearance: none;
268 | background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwMCAxMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cGF0aCBmaWxsPSJncmF5IiBkPSJNMTAsMjMyLjdsNDkwLDUzNC41bDQ5MC01MzQuNUgxMHoiIC8+DQo8L3N2Zz4=);
269 | background-repeat: no-repeat;
270 | background-position: bottom 50% right var(--spacing-s);
271 | background-size: var(--spacing-s);
272 | cursor: pointer;
273 | padding-right: var(--spacing-l);
274 | }
275 |
276 | input.error,
277 | select.error {
278 | border-color: var(--red);
279 | }
280 |
281 | input {
282 | caret-color: var(--accent);
283 | }
284 |
285 | input::selection {
286 | background-color: var(--accent);
287 | color: var(--bg);
288 | }
289 |
290 | .container {
291 | margin-left: auto;
292 | margin-right: auto;
293 | max-width: calc(55 * var(--spacing-m));
294 | padding-left: var(--spacing-l);
295 | padding-right: var(--spacing-l);
296 | }
297 |
298 | .grid {
299 | display: grid;
300 | gap: var(--spacing-m);
301 | grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
302 | margin: var(--spacing-m) 0;
303 |
304 | &>* {
305 | display: flex;
306 | flex-direction: column;
307 | gap: var(--spacing-m);
308 | }
309 |
310 | &>a {
311 | color: var(--fg);
312 | transform: scale(100%);
313 | transition: transform 75ms;
314 |
315 | &:hover,
316 | &:focus {
317 | text-decoration: none;
318 | transform: scale(103%);
319 | }
320 | }
321 | }
--------------------------------------------------------------------------------
/src/components/markdown.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import ReactMarkdown from "react-markdown"
3 | import { ReactMarkdownOptions } from "react-markdown/lib/react-markdown"
4 |
5 | const Markdown: React.FC
12 |
16 |
17 |
62 |
93 | {lightboxOpen && (
94 |
63 |
64 |
69 |
92 | {locale.myNFTs}
65 | 68 |
70 | {nfts.map((nft, index) => (
71 |
89 | ))}
90 |
91 |
24 |
40 |
25 |
39 |
26 | {children}
27 |
28 | {video && {
29 | // wrap in div for proper styling
30 | typeof video === 'string'
31 | ?
32 | :
33 | }
}
34 | {image && (typeof image === 'string'
35 | ? 404: Not Found
10 |You just hit a route that doesn't exist... the sadness.
11 |34 | {locale.viewIn} 35 |
36 | ))} 37 |
80 | {section.blocks.map(({ linkTo, text, image }, j) => {
81 | const El = linkTo ? 'a' : 'div'
82 | const props = linkTo && { href: linkTo, target: '_blank' }
83 | return (
84 |
85 | {image && (
86 |
96 | )
97 | })}
98 |
99 | )}
100 |
87 |
89 | )}
90 | {text && (
91 |
92 |
94 | )}
95 |