From e6e08e1f01a17b6fef467454f979f8475bfa09bb Mon Sep 17 00:00:00 2001
From: Ava Gaiety Wroten <ava@wroten.me>
Date: Thu, 30 Dec 2021 11:37:41 -0600
Subject: [PATCH] feat: improving design

---
 components/IndexHero.vue    | 78 +++++++++++++++++++------------------
 components/VideoPreview.vue |  2 +-
 nuxt.config.js              | 12 +++---
 3 files changed, 47 insertions(+), 45 deletions(-)

diff --git a/components/IndexHero.vue b/components/IndexHero.vue
index 4937b49..a22ba03 100644
--- a/components/IndexHero.vue
+++ b/components/IndexHero.vue
@@ -1,45 +1,47 @@
 <template>
   <!-- Hero card -->
-  <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">
-        <div class="absolute inset-0">
-          <img class="h-full w-full object-cover" src="/hero.jpg" alt="" />
-        </div>
-        <div class="relative p-8">
-          <h1>
-            <img
-              class="w-full max-w-xs m-auto"
-              src="/logo-square.webp"
-              alt="Faetale: Once Upon a Time"
-            />
-          </h1>
-          <p
-            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,
-            adventures and who knows what else!
-          </p>
-          <div
-            class="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center"
-          >
-            <div
-              class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5"
+  <div class="relative bg-pink-100 md:pt-4">
+    <div>
+      <div class="absolute inset-x-0 bottom-0 h-1/2 bg-pink-200" />
+      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+        <div class="relative shadow-2xl sm:rounded-2xl sm:overflow-hidden">
+          <div class="absolute inset-0">
+            <img class="h-full w-full object-cover" src="/hero.jpg" alt="" />
+          </div>
+          <div class="relative p-8">
+            <h1>
+              <img
+                class="w-full max-w-xs m-auto"
+                src="/logo-square.webp"
+                alt="Faetale: Once Upon a Time"
+              />
+            </h1>
+            <p
+              class="mt-6 p-4 rounded-md max-w-lg mx-auto text-xl bg-brandlight bg-opacity-50 text-pink-100 sm:max-w-3xl"
             >
-              <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-pink-600 bg-white hover:bg-pink-50 sm:px-8"
+              ...there was a queer tale of fantasy tabletop roleplaying games.
+              Join Gaiety on a journey through her favorite game systems,
+              adventures and who knows what else!
+            </p>
+            <div
+              class="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center"
+            >
+              <div
+                class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5"
               >
-                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-pink-500 bg-opacity-60 hover:bg-opacity-70 sm:px-8"
-              >
-                Support
-              </a>
+                <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-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-branddark bg-opacity-70 hover:bg-opacity-90 sm:px-8"
+                >
+                  Support
+                </a>
+              </div>
             </div>
           </div>
         </div>
diff --git a/components/VideoPreview.vue b/components/VideoPreview.vue
index e06b772..204331c 100644
--- a/components/VideoPreview.vue
+++ b/components/VideoPreview.vue
@@ -9,7 +9,7 @@
         class="w-full h-full object-center object-cover group-hover:opacity-75"
       />
     </div>
-    <time :datetime="publishedDatetime" class="mt-4 text-sm text-gray-700">
+    <time :datetime="publishedDatetime" class="mt-4 text-sm text-gray-500">
       {{ publishedHuman }}
     </time>
     <h3 class="mt-1 text-lg font-medium text-gray-900">
diff --git a/nuxt.config.js b/nuxt.config.js
index bc2ed12..a131a66 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -141,12 +141,12 @@ export default {
   tailwindcss: {
     config: {
       plugins: [tailwindAspectRatio],
-    },
-    theme: {
-      extend: {
-        colors: {
-          brandbright: '#ca4e8d',
-          branddark: '#83398c',
+      theme: {
+        extend: {
+          colors: {
+            brandlight: '#ca4e8d',
+            branddark: '#83398c',
+          },
         },
       },
     },