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 default layout as layout component

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

18
components/layout.vue
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>

50
layouts/default.vue
View file

@ -1,12 +1,28 @@
<template>
<div>
<nuxt/>
<div class="app-wrapper text-gray-300 bg-gray-800">
<Navbar />
<div class="app-main min-h-screen flex items-center">
<nuxt />
</div>
</div>
</template>
<script>
import 'typeface-inter/inter.css'
import Navbar from '~/components/navbar.vue'
export default {
components: {
Navbar
}
}
</script>
<style>
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
font-family: 'Inter', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
word-spacing: 1px;
@ -24,32 +40,4 @@ html {
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>

64
pages/index.vue
View file

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