From c765592096d403e5ad07c4e6a68a7e5d6c0ddd8e Mon Sep 17 00:00:00 2001
From: Ava Gaiety Wroten <ava@wroten.me>
Date: Wed, 29 Dec 2021 15:16:15 -0600
Subject: [PATCH] fix: margin on small displays

---
 components/IndexHero.vue |  8 ++++----
 nuxt.config.js           | 14 --------------
 tailwind.config.js       | 15 +++++++++++++++
 3 files changed, 19 insertions(+), 18 deletions(-)
 create mode 100644 tailwind.config.js

diff --git a/components/IndexHero.vue b/components/IndexHero.vue
index a78b811..4937b49 100644
--- a/components/IndexHero.vue
+++ b/components/IndexHero.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- Hero card -->
-  <div class="relative">
+  <div class="relative md:mt-4">
     <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" />
     <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
       <div class="relative shadow-xl sm:rounded-2xl sm:overflow-hidden">
@@ -16,7 +16,7 @@
             />
           </h1>
           <p
-            class="mt-6 max-w-lg mx-auto text-center text-xl text-indigo-500 sm:max-w-3xl"
+            class="mt-6 p-4 rounded-md max-w-lg mx-auto text-xl bg-pink-800 bg-opacity-40 text-pink-100 sm:max-w-3xl"
           >
             ...there was a queer tale of fantasy tabletop roleplaying games.
             Join Gaiety on a journey through her favorite game systems,
@@ -30,13 +30,13 @@
             >
               <a
                 href="#videolist"
-                class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-indigo-50 sm:px-8"
+                class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-pink-600 bg-white hover:bg-pink-50 sm:px-8"
               >
                 Watch
               </a>
               <a
                 href="https://ko-fi.com/gaiety"
-                class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 sm:px-8"
+                class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-pink-500 bg-opacity-60 hover:bg-opacity-70 sm:px-8"
               >
                 Support
               </a>
diff --git a/nuxt.config.js b/nuxt.config.js
index 8edbc68..925caae 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,5 +1,3 @@
-import tailwindAspectRatio from '@tailwindcss/aspect-ratio'
-
 export default {
   // Global page headers: https://go.nuxtjs.dev/config-head
   head: {
@@ -35,18 +33,6 @@ export default {
     '@nuxtjs/tailwindcss',
   ],
 
-  tailwindcss: {
-    config: {
-      plugins: [tailwindAspectRatio],
-    },
-    // theme: {
-    //   colors: {
-    //     'brand-bright': '#ca4e8d',
-    //     'brand-dark': '#83398c',
-    //   },
-    // },
-  },
-
   // Modules: https://go.nuxtjs.dev/config-modules
   modules: [],
 
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..36fa68b
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,15 @@
+import tailwindAspectRatio from '@tailwindcss/aspect-ratio'
+
+module.exports = {
+  config: {
+    plugins: [tailwindAspectRatio],
+  },
+  theme: {
+    extend: {
+      colors: {
+        brandbright: '#ca4e8d',
+        branddark: '#83398c',
+      },
+    },
+  },
+}