Select Git revision
get_predl.c
-
R.J.Pengelly authoredR.J.Pengelly authored
Start.vue 1.65 KiB
<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="letsplay" href="#" @click="letsPlay"
>let's play !</a
>
<a role="button" class="tellmemore" href="#" @click="tellMore"
>tell me more</a
>
</nav>
<main v-if="isStart" ref="start">
<JoinMicrocosm />
</main>
<aside v-if="isStart == false" ref="moreinfo">
<TellmeMore />
</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: null,
}
},
methods: {
letsPlay() {
this.isStart = true
setTimeout(() => {
const el = this.$refs.start
if (el) {
el.scrollIntoView({ behavior: 'smooth' })
}
}, 100)
},
tellMore() {
this.isStart = false
setTimeout(() => {
const el = this.$refs.moreinfo
if (el) {
el.scrollIntoView({ behavior: 'smooth' })
}
}, 100)
},
},
}
</script>
<style scoped>
aside {
max-width: 800px;
}
a {
display: block;
font-size: 1em;
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>