danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/n3rdle.
n3rdle.vercel.app
1<template>
2 <div class="container">
3 <Html lang="en-GB" />
4 <Title>n3rdle</Title>
5 <Meta
6 name="description"
7 content="A tiny, incomplete clone of Wordle built in Nuxt 3 for a live-coding session at Vue.js Nation."
8 />
9 <header>
10 <nav>
11 <ul>
12 <li>
13 <NuxtLink to="/" class="flex items-center gap-2 text-green-400">
14 <img
15 alt="Nuxt logo"
16 src="https://nuxtjs.org/design-kit/colored-logo.svg"
17 height="24"
18 width="24"
19 />
20 <strong>n3rdle</strong>
21 </NuxtLink>
22 </li>
23 </ul>
24 </nav>
25 </header>
26 <main>
27 <NuxtPage />
28 </main>
29 <footer>
30 <small>
31 Made with ❤️ ·
32 <a href="https://github.com/danielroe/n3rdle">Contributions welcome</a>
33 </small>
34 </footer>
35 </div>
36</template>
37
38<style>
39/* Blue-grey Light scheme (Default) */
40/* Can be forced with data-theme="light" */
41[data-theme='light'],
42:root:not([data-theme='dark']) {
43 --primary: #546e7a;
44 --primary-hover: #455a64;
45 --primary-focus: rgba(84, 110, 122, 0.125);
46 --primary-inverse: #fff;
47}
48
49/* Blue-grey Dark scheme (Auto) */
50/* Automatically enabled if user has Dark mode enabled */
51@media only screen and (prefers-color-scheme: dark) {
52 :root:not([data-theme='light']) {
53 --primary: #546e7a;
54 --primary-hover: #607d8b;
55 --primary-focus: rgba(84, 110, 122, 0.25);
56 --primary-inverse: #fff;
57 }
58}
59
60/* Blue-grey Dark scheme (Forced) */
61/* Enabled if forced with data-theme="dark" */
62[data-theme='dark'] {
63 --primary: #546e7a;
64 --primary-hover: #607d8b;
65 --primary-focus: rgba(84, 110, 122, 0.25);
66 --primary-inverse: #fff;
67}
68
69/* Blue-grey (Common styles) */
70:root {
71 --form-element-active-border-color: var(--primary);
72 --form-element-focus-color: var(--primary-focus);
73 --switch-color: var(--primary-inverse);
74 --switch-checked-background-color: var(--primary);
75}
76</style>