phareim.no/app.vue at master · phareim/phareim.no · GitHub

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
<template>
  <div :class="themePageClass">
    <NuxtPage />
    <MenuComponent ref="menuComponent" />
  </div>
</template>

<script setup lang="ts">
import MenuComponent from '~/components/MenuComponent.vue';

const { themePageClass } = useTheme()
const menuComponent = ref<InstanceType<typeof MenuComponent> | null>(null);

const handleKeyDown = (event: KeyboardEvent) => {
  if (event.key === 'm' && !window.location.pathname.includes('rpg')
  && !window.location.pathname.includes('character')
  && !window.location.pathname.includes('admin')
  && !window.location.pathname.includes('image-generator')
  && !window.location.pathname.includes('new-character')) {
    menuComponent.value?.toggleMenu();
  }
};

onMounted(() => {
  document.body.classList.add('scrollable');
  document.addEventListener('keydown', handleKeyDown);
});

onBeforeUnmount(() => {
  document.body.classList.remove('scrollable');
  document.removeEventListener('keydown', handleKeyDown);
});
</script>

<style>
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bitcount+Prop+Single+Ink:wght@100..900&display=swap");

body,
html {
  overflow: hidden;
  user-select: none;
  font-family: "Comfortaa", sans-serif;
  padding: 0;
  margin: 0;
}

body.scrollable,
html.scrollable {
  overflow: auto !important;
}

body.scrollable #app,
html.scrollable #app {
  display: block !important;
  height: auto !important;
}

#app {
  display: grid;
  justify-content: center;
  align-content: center;
  height: 100vh;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 4rem;
  font-weight: 500;
  margin: 0;
  padding: 0;
}
</style>