Nuxt/examples/coffeescript/pages/index.vue
2018-01-05 09:43:35 +01:00

59 lines
1.1 KiB
Vue

<template>
<section class="container">
<div>
<logo/>
<h1 class="title">
Nuxt.js with Coffee!
</h1>
<h2 class="subtitle">
{{message}}
</h2>
<div class="links">
<a href="https://nuxtjs.org/" target="_blank" class="button--green">Documentation</a>
<a href="https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey">GitHub</a>
</div>
</div>
</section>
</template>
<script lang="coffee">
import Logo from '~/components/Logo.vue'
export default {
components: { Logo }
computed:
message: -> @$store.state.message
}
</script>
<style>
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
}
.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
</style>