From f021a34bad5d59637a51ba43b7eed6b2902fcef1 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Sat, 19 Sep 2020 18:30:24 -0500
Subject: [PATCH] Tweak app page layout for mobile

---
 pages/app/_slug.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/pages/app/_slug.vue b/pages/app/_slug.vue
index a54b369..d43b7b8 100644
--- a/pages/app/_slug.vue
+++ b/pages/app/_slug.vue
@@ -1,18 +1,20 @@
 <template>
     <section class="container">
-        <div class="flex flex-col items-center">
-            <h1 class="title text-2xl font-bold">
+        <div class="flex flex-col items-center text-center">
+            <h1 class="title text-sm md:text-2xl font-semibold">
                 Does {{ app.name }} work on Apple Silicon?
             </h1>
-            <h2 class="subtitle text-6xl font-bold py-6">
+            <h2 class="subtitle text-2xl md:text-6xl font-bold py-6">
                 {{ app.text }}
             </h2>
-            <div class="links">
+            <div class="links space-x-6">
                 <LinkButton
-                    :href="app.url"
+                    v-for="(link, i) in app.relatedLinks"
+                    :key="i"
+                    :href="link.href"
                     target="_blank"
                     class=""
-                >Download</LinkButton>
+                >{{ (i === 0) ? 'Download' : link.label }}</LinkButton>
             </div>
         </div>
     </section>