Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Use layout on index page

Browse source
This commit is contained in:
Sam Carlton 2020-09-19 16:18:48 -05:00
parent fe6558b391
commit 29fb968760
1 changed files with 34 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

103
pages/index.vue
View file

@ -1,45 +1,49 @@
<template> <template>
<section class="container"> <Layout>
<div> <section class="container">
<logo/> <div>
<h1 class="title"> <logo/>
Does it ARM <h1 class="title">
</h1> Does it ARM
<h2 class="subtitle"> </h1>
Apps that are reported to support ARM on macOS <h2 class="subtitle">
</h2> Apps that are reported to support ARM on macOS
<div class="apps"> </h2>
<div <div class="apps">
v-for="app in appList" <div
:key="app.slug" v-for="app in appList"
> :key="app.slug"
<a :href="`/app/${app.slug}`"> >
<div> <a :href="`/app/${app.slug}`">
{{ app.name }} <div>
</div> {{ app.name }}
</a> </div>
</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>
</div> </section>
</section> </Layout>
</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() {
@ -48,42 +52,3 @@ export default {
} }
} }
</script> </script>
<style>
/* Sample `apply` at-rules with Tailwind CSS
.container {
@apply min-h-screen flex justify-center items-center text-center mx-auto;
}
*/
.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;
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>