From cc1fb7ab20d28f7d468acfacfe375a5f1887a2aa Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Sun, 28 Aug 2022 13:07:31 -0700
Subject: [PATCH] Add some splats to the homepage

---
 src/layouts/MainLayout.vue |  2 +-
 src/views/HomeView.vue     | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index df22762..12f3855 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <main class="min-h-screen flex flex-col">
+  <main class="min-h-screen flex flex-col overflow-hidden">
     <slot />
 
     <div class="m-2 text-center text-xs text-gray-500">
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 15f1b45..599a562 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,10 +1,16 @@
 <template>
   <MainLayout>
     <div class="grow flex items-center justify-center">
-      <div class="w-full max-w-2xl m-4">
-        <div class="font-splatoon1 text-5xl text-center">Splatoon 3</div>
+      <div class="relative w-full max-w-2xl m-4">
+        <Splat3 class="absolute w-48 -bottom-16 left-32" fill="fill-splatoon-red" />
+        <Splat2 class="absolute w-64 -top-20 -left-20" fill="fill-splatoon-yellow" />
+        <Splat4 class="absolute w-64 -top-20 -right-20" fill="fill-splatoon-blue" />
 
-        <Splatoon3Countdown />
+        <div class="relative">
+          <div class="font-splatoon1 text-5xl text-center">Splatoon 3</div>
+
+          <Splatoon3Countdown />
+        </div>
       </div>
     </div>
   </MainLayout>
@@ -13,4 +19,7 @@
 <script setup>
 import MainLayout from '@/layouts/MainLayout.vue'
 import Splatoon3Countdown from '@/components/Splatoon3Countdown.vue'
+import Splat2 from '../components/splats/Splat2.vue';
+import Splat3 from '../components/splats/Splat3.vue';
+import Splat4 from '../components/splats/Splat4.vue';
 </script>