Use default layout as layout component

This commit is contained in:
Sam Carlton 2020-09-19 16:47:32 -05:00
parent e64adb6a35
commit 3bec84b81f
3 changed files with 49 additions and 83 deletions

View file

@ -1,18 +0,0 @@
<template>
<div class="app-wrapper text-gray-300 bg-gray-800">
<Navbar />
<div class="app-main min-h-screen flex items-center">
<slot />
</div>
</div>
</template>
<script>
import Navbar from '~/components/navbar.vue'
export default {
components: {
Navbar
}
}
</script>

View file

@ -1,12 +1,28 @@
<template> <template>
<div> <div class="app-wrapper text-gray-300 bg-gray-800">
<nuxt/> <Navbar />
<div class="app-main min-h-screen flex items-center">
<nuxt />
</div>
</div> </div>
</template> </template>
<script>
import 'typeface-inter/inter.css'
import Navbar from '~/components/navbar.vue'
export default {
components: {
Navbar
}
}
</script>
<style> <style>
html { html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, font-family: 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px; font-size: 16px;
word-spacing: 1px; word-spacing: 1px;
@ -24,32 +40,4 @@ html {
margin: 0; margin: 0;
} }
.button--green {
display: inline-block;
border-radius: 4px;
border: 1px solid #3b8070;
color: #3b8070;
text-decoration: none;
padding: 10px 30px;
}
.button--green:hover {
color: #fff;
background-color: #3b8070;
}
.button--grey {
display: inline-block;
border-radius: 4px;
border: 1px solid #35495e;
color: #35495e;
text-decoration: none;
padding: 10px 30px;
margin-left: 15px;
}
.button--grey:hover {
color: #fff;
background-color: #35495e;
}
</style> </style>

View file

@ -1,49 +1,45 @@
<template> <template>
<Layout> <section class="container">
<section class="container"> <div>
<div> <logo/>
<logo/> <h1 class="title">
<h1 class="title"> Does it ARM
Does it ARM </h1>
</h1> <h2 class="subtitle">
<h2 class="subtitle"> Apps that are reported to support ARM on macOS
Apps that are reported to support ARM on macOS </h2>
</h2> <div class="apps">
<div class="apps"> <div
<div v-for="app in appList"
v-for="app in appList" :key="app.slug"
:key="app.slug" >
> <a :href="`/app/${app.slug}`">
<a :href="`/app/${app.slug}`"> <div>
<div> {{ app.name }}
{{ app.name }} </div>
</div> </a>
</a>
</div>
<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>
<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> </div>
</Layout> </section>
</template> </template>
<script> <script>
import Logo from '~/components/Logo.vue' import Logo from '~/components/Logo.vue'
import Layout from '~/components/layout.vue'
import appList from '~/assets/app-list.json' import appList from '~/assets/app-list.json'
export default { export default {
components: { components: {
Logo, Logo
Layout
}, },
computed: { computed: {
appList() { appList() {