Start.vue 1.27 KB
Newer Older
Adam Procter's avatar
init  
Adam Procter committed
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
<template>
  <header class="header">
    <h1 class="long">nodenogg<span class="highlight">.in</span></h1>
    <h2>a messy mapping tool for multiplayer thinking</h2>
  </header>
  <nav class="nav">
    <a role="button" class="tellmemore" href="#" @click="isTellme = !isTellme"
      >tell me more</a
    >
    <a role="button" class="letsplay" href="#" @click="isStart = !isStart"
      >let's play !</a
    >
  </nav>
  <main>
    <JoinMicrocosm v-show="isStart" />
  </main>
  <aside>
    <TellmeMore v-show="isTellme" />
  </aside>
</template>

<script>
// @ is an alias to /src
import JoinMicrocosm from "@/components/JoinMicrocosm.vue";
import TellmeMore from "@/components/TellmeMore.vue";

export default {
  name: "Start",
  components: {
    JoinMicrocosm,
    TellmeMore,
  },
  data() {
    return {
      isStart: false,
      isTellme: false,
    };
  },
};
</script>

<style scoped>
aside {
  max-width: 800px;
}
a {
  display: block;
  font-size: 0.8em;
  color: black;
  text-decoration-line: none;
  border-radius: 1em;
  margin: 1em 0.8em;
  padding: 1em 1.2em;
}

.tellmemore {
  background-color: rgba(196, 47, 152, 0.4);
}

.letsplay {
  background-color: rgba(37, 194, 194, 0.4);
}

@media only screen and (min-width: 330px) {
  a {
    display: inline-block;
  }
}
</style>