Start.vue 1.26 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
<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
ap2x07's avatar
updates    
ap2x07 committed
24
25
import JoinMicrocosm from '@/components/JoinMicrocosm.vue'
import TellmeMore from '@/components/TellmeMore.vue'
Adam Procter's avatar
init  
Adam Procter committed
26
27

export default {
ap2x07's avatar
updates    
ap2x07 committed
28
  name: 'Start',
Adam Procter's avatar
init  
Adam Procter committed
29
30
  components: {
    JoinMicrocosm,
ap2x07's avatar
updates    
ap2x07 committed
31
    TellmeMore
Adam Procter's avatar
init  
Adam Procter committed
32
33
34
35
  },
  data() {
    return {
      isStart: false,
ap2x07's avatar
updates    
ap2x07 committed
36
37
38
39
      isTellme: false
    }
  }
}
Adam Procter's avatar
init  
Adam Procter committed
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
</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>