From 29fb968760c2e78534648795ef1568da5daa2996 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Sat, 19 Sep 2020 16:18:48 -0500
Subject: [PATCH] Use layout on index page

---
 pages/index.vue | 103 ++++++++++++++++--------------------------------
 1 file changed, 34 insertions(+), 69 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 033df66..8b610b4 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,45 +1,49 @@
 <template>
-    <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>
+    <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>
                 </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>
+        </section>
+    </Layout>
 </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
+        Logo,
+        Layout
     },
     computed: {
         appList() {
@@ -48,42 +52,3 @@ export default {
     }
 }
 </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>