Start.vue 1.2 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
  <main v-if="isStart"><JoinMicrocosm /></main>
Adam Procter's avatar
tidy up    
Adam Procter committed
16
17
18

  <aside v-if="isStart == false">
    <TellmeMore />
Adam Procter's avatar
init  
Adam Procter committed
19
20
21
22
23
  </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,
Adam Procter's avatar
tidy up    
Adam Procter committed
31
    TellmeMore,
Adam Procter's avatar
init  
Adam Procter committed
32
33
34
  },
  data() {
    return {
Adam Procter's avatar
tidy up    
Adam Procter committed
35
      isStart: null,
ap2x07's avatar
updates    
ap2x07 committed
36
    }
Adam Procter's avatar
tidy up    
Adam Procter committed
37
  },
ap2x07's avatar
updates    
ap2x07 committed
38
}
Adam Procter's avatar
init  
Adam Procter committed
39
40
41
42
43
44
45
46
</script>

<style scoped>
aside {
  max-width: 800px;
}
a {
  display: block;
Adam Procter's avatar
Adam Procter committed
47
  font-size: 1em;
Adam Procter's avatar
init  
Adam Procter committed
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
  color: black;
  text-decoration-line: none;
  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>