popskip/layouts/default.vue

<template>
  <div class="root">    
    <Header />
    <div class="body">
        <nuxt />
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from '../components/Header';
import Footer from '../components/Footer';

export default {
    components: {
        Header,
        Footer
    },
}
</script>
<style>
.root {
    @apply font-sans;
    background: url("~assets/bg.png") no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh;
}
.body {
    @apply text-white relative overflow-y-auto;
    height: calc(100vh - 7rem);
}
.page {
    @apply relative w-full h-full;
}

.card {
    @apply px-4 py-4;
    background-color: rgba(0,0,0,0.3);
}
.card .card-title {
    @apply text-xl;
}
.title-card .card-title {
    @apply font-bold text-4xl pb-2;
}
.title-card .card-content {
    @apply text-xl;
}

</style>