Start.vue 1.24 KB
Newer Older
Adam Procter's avatar
init  
Adam Procter committed
1
2
3
4
5
6
<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">
Adam Procter's avatar
tidy up    
Adam Procter committed
7
    <a role="button" class="letsplay" href="#" @click="isStart = true"
Adam Procter's avatar
init  
Adam Procter committed
8
9
      >let's play !</a
    >
Adam Procter's avatar
tidy up    
Adam Procter committed
10
11
12
    <a role="button" class="tellmemore" href="#" @click="isStart = false"
      >tell me more</a
    >
Adam Procter's avatar
init  
Adam Procter committed
13
  </nav>
Adam Procter's avatar
tidy up    
Adam Procter committed
14
15
16

  <main v-if="isStart">
    <JoinMicrocosm />
Adam Procter's avatar
init  
Adam Procter committed
17
  </main>
Adam Procter's avatar
tidy up    
Adam Procter committed
18
19
20

  <aside v-if="isStart == false">
    <TellmeMore />
Adam Procter's avatar
init  
Adam Procter committed
21
22
23
24
25
  </aside>
</template>

<script>
// @ is an alias to /src
ap2x07's avatar
updates    
ap2x07 committed
26
27
import JoinMicrocosm from '@/components/JoinMicrocosm.vue'
import TellmeMore from '@/components/TellmeMore.vue'
Adam Procter's avatar
init  
Adam Procter committed
28
29

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