/ app / app.vue
app.vue
 1  <template>
 2    <div>
 3      <NuxtPwaManifest />
 4      <UiToast />
 5      <NuxtPage />
 6    </div>
 7  </template>
 8  
 9  <script setup lang="ts">
10  import { Key } from "@waradu/keyboard";
11  
12  useKeybind(
13    [Key.F],
14    async () => {
15      useToast().success("You payed respect to the easter egg");
16    },
17    { ignoreIfEditable: true }
18  );
19  </script>
20  
21  <style lang="scss">
22  :root {
23    --background: #191919;
24    --element: #2b2b2b;
25    --border: #ffffff1a;
26  
27    --accent: #ff6200;
28  
29    --text: #e6e6e6;
30    --text-secondary: #a6a6a6;
31    --text-muted: #666666;
32  }
33  
34  @font-face {
35    font-family: ChivoMono;
36    src: url("~~/fonts/ChivoMono.woff2") format("woff2");
37    font-display: swap;
38    font-weight: normal;
39    font-style: normal;
40    font-weight: 400;
41  }
42  
43  @font-face {
44    font-family: Outfit;
45    src: url("~~/fonts/Outfit.woff2") format("woff2");
46    font-display: swap;
47    font-weight: normal;
48    font-style: normal;
49    font-weight: 100 900;
50  }
51  
52  * {
53    margin: 0;
54    padding: 0;
55    box-sizing: border-box;
56  }
57  
58  body {
59    background-color: var(--background);
60    color: var(--text);
61    font-size: 14px;
62    font-family: Outfit;
63    overflow-x: hidden;
64    text-rendering: optimizeLegibility;
65    -webkit-font-smoothing: antialiased;
66    -moz-osx-font-smoothing: grayscale;
67    scrollbar-color: var(--text-secondary) transparent;
68  
69    &::-webkit-scrollbar {
70      width: 4px;
71    }
72  
73    &::-webkit-scrollbar-track {
74      background: var(--background);
75    }
76  
77    &::-webkit-scrollbar-thumb {
78      background: var(--text-secondary);
79    }
80  }
81  
82  button,
83  input {
84    font-family: Outfit;
85    font-size: 14px;
86  }
87  
88  a {
89    text-decoration: none;
90    color: var(--text);
91  }
92  </style>