timtinkers.online
timconspicuous.neocities.org
1export default function Layout(data: Lume.Data) {
2 return (
3 <html lang={data.lang || "en"}>
4 <head>
5 <meta charset="utf-8" />
6 <meta
7 name="viewport"
8 content="width=device-width, initial-scale=1.0"
9 />
10 <title>timconspicuous</title>
11 <meta name="supported-color-schemes" content="light dark" />
12 <link rel="stylesheet" href="/styles.css" />
13 <link
14 rel="icon"
15 type="image/png"
16 sizes="32x32"
17 href="/favicon.svg"
18 />
19 <link rel="canonical" href={data.url} />
20 </head>
21 <body>
22 <div id="tarot-app">
23 <main class="tarot-layout">
24 <div id="card-container" class="card-container">
25 <div class="tarot-card">
26 <img
27 id="card-image"
28 class="card-image"
29 src="/images/tarot/0-the-fool.png"
30 alt="The Fool"
31 />
32 </div>
33 </div>
34
35 <div id="content-container" class="content-container">
36 <div id="content-wrapper" class="content-wrapper">
37 <div id="content-title" class="content-title">
38 </div>
39 {data.children}
40 </div>
41 </div>
42 </main>
43
44 <nav class="tarot-navigation">
45 <button
46 type="button"
47 id="prev-card"
48 class="nav-button nav-prev"
49 aria-label="Previous card"
50 >
51 <span class="nav-arrow">←</span>
52 </button>
53 <div id="card-indicator" class="card-indicator">
54 <span id="current-card">0</span>
55 </div>
56 <button
57 type="button"
58 id="next-card"
59 class="nav-button nav-next"
60 aria-label="Next card"
61 >
62 <span class="nav-arrow">→</span>
63 </button>
64 </nav>
65 </div>
66
67 <script src="/scripts/tarot.js"></script>
68 </body>
69 </html>
70 );
71}