From fc5a26f0d980a3a3e3d5c447d1f47a64ca0dfed7 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Wed, 14 Sep 2022 20:48:52 -0700
Subject: [PATCH] Simplify the product container component

This makes it easier to apply patterned background images.
---
 src/assets/img/tag-card-header.svg            |  7 +++----
 src/components/ProductContainer.vue           | 13 ++++--------
 src/components/ScheduleBox.vue                |  2 +-
 .../screenshots/ScreenshotScheduleBox.vue     |  4 ++--
 src/views/FaqView.vue                         | 21 +++++++++----------
 5 files changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/assets/img/tag-card-header.svg b/src/assets/img/tag-card-header.svg
index b18f89c..03286c1 100644
--- a/src/assets/img/tag-card-header.svg
+++ b/src/assets/img/tag-card-header.svg
@@ -1,5 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg viewBox="0 0 2000 60" xmlns="http://www.w3.org/2000/svg">
-  <path d="M 1029.96 23.774 C 1029.761 26.218 1027.719 28.101 1025.267 28.102 L 975.732 28.102 C 975.601 28.102 975.477 28.075 975.348 28.064 C 972.917 27.866 971 25.859 971 23.384 C 971.004 20.775 973.123 18.664 975.732 18.668 L 993.936 18.668 C 993.93 18.562 993.919 18.458 993.919 18.353 C 993.919 14.901 996.727 12.103 1000.189 12.103 L 1000.809 12.103 C 1002.796 12.102 1004.666 13.045 1005.847 14.643 C 1006.648 15.714 1007.08 17.016 1007.08 18.353 C 1007.08 18.459 1007.07 18.563 1007.064 18.668 L 1025.267 18.668 C 1027.881 18.668 1030 20.779 1030 23.385 C 1030 23.518 1029.971 23.643 1029.96 23.774 M 2000 0 L 0 0 L 0 60 L 2000 60 L 2000 0 Z" fill-rule="evenodd" data-bx-origin="0.5 0.5"></path>
-</svg>
+<svg viewBox="0 0 2000 4000" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
+  <path d="M 1029.96 23.774 C 1029.761 26.218 1027.719 28.101 1025.267 28.102 L 975.732 28.102 C 975.601 28.102 975.477 28.075 975.348 28.064 C 972.917 27.866 971 25.859 971 23.384 C 971.004 20.775 973.123 18.664 975.732 18.668 L 993.936 18.668 C 993.93 18.562 993.919 18.458 993.919 18.353 C 993.919 14.901 996.727 12.103 1000.189 12.103 L 1000.809 12.103 C 1002.796 12.102 1004.666 13.045 1005.847 14.643 C 1006.648 15.714 1007.08 17.016 1007.08 18.353 C 1007.08 18.459 1007.07 18.563 1007.064 18.668 L 1025.267 18.668 C 1027.881 18.668 1030 20.779 1030 23.385 C 1030 23.518 1029.971 23.643 1029.96 23.774 M 2000 0 L 0 0 L 0 4000 L 2000 4000 L 2000 0 Z" fill-rule="evenodd" bx:origin="0.5 0.5"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/ProductContainer.vue b/src/components/ProductContainer.vue
index b39b96a..e7f45de 100644
--- a/src/components/ProductContainer.vue
+++ b/src/components/ProductContainer.vue
@@ -1,11 +1,6 @@
 <template>
-  <div>
-    <div :class="props.bg" class="rounded-t-2xl h-12 -mb-1 header-mask">
-
-    </div>
-    <div :class="props.bg" class="rounded-b-2xl pb-10">
-      <slot />
-    </div>
+  <div class="product-mask rounded-2xl" :class="props.bg">
+    <slot />
   </div>
 </template>
 
@@ -19,10 +14,10 @@ const props = defineProps({
 </script>
 
 <style scoped>
-.header-mask {
+.product-mask {
   mask-image: url('@/assets/img/tag-card-header.svg');
   mask-position: top;
-  mask-size: auto 60px;
+  mask-size: 2000px auto;
   mask-repeat: no-repeat;
 }
 </style>
diff --git a/src/components/ScheduleBox.vue b/src/components/ScheduleBox.vue
index 5451e1a..359518d 100644
--- a/src/components/ScheduleBox.vue
+++ b/src/components/ScheduleBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <ProductContainer bg="bg-gray-600" class="w-full">
+  <ProductContainer bg="bg-gray-600 pt-10 pb-8" class="w-full">
     <div class="space-y-2">
       <div class="flex items-center space-x-2 mx-2">
         <img :src="type.img" />
diff --git a/src/components/screenshots/ScreenshotScheduleBox.vue b/src/components/screenshots/ScreenshotScheduleBox.vue
index fbc928c..0ad78ad 100644
--- a/src/components/screenshots/ScreenshotScheduleBox.vue
+++ b/src/components/screenshots/ScreenshotScheduleBox.vue
@@ -1,6 +1,6 @@
 <template>
-  <ProductContainer bg="bg-gray-600">
-    <div class="space-y-2 -mb-8">
+  <ProductContainer bg="bg-gray-600 pt-10">
+    <div class="space-y-2">
       <div class="flex items-center justify-center space-x-1 mx-2">
         <div class="font-splatoon1 text-4xl">
           {{ type.name }}
diff --git a/src/views/FaqView.vue b/src/views/FaqView.vue
index 19acd68..76feceb 100644
--- a/src/views/FaqView.vue
+++ b/src/views/FaqView.vue
@@ -6,8 +6,8 @@
           <Splat2 class="absolute -top-32 -left-24 w-64" />
           <Splat5 class="absolute -right-28 -bottom-24 w-64" />
 
-          <ProductContainer class="relative md:rotate-1">
-            <div class="relative">
+          <div class="relative md:rotate-1">
+            <ProductContainer class="py-12">
               <div class="faq text-gray-300 px-10">
                 <div class="space-y-6">
                   <h1>FAQ</h1>
@@ -80,8 +80,8 @@
                     <h2>My question wasn't answered here!</h2>
                     <p>
                       Please feel free to contact me on Twitter at <a href="https://twitter.com/splatoon3ink"
-                        target="_blank">@Splatoon3ink</a> or via <a href="mailto:matt@isenhower.com"
-                        target="_blank">email</a> if you have any other
+                      target="_blank">@Splatoon3ink</a> or via <a href="mailto:matt@isenhower.com"
+                      target="_blank">email</a> if you have any other
                       questions!
                     </p>
                   </div>
@@ -90,15 +90,14 @@
                     <router-link to="/">&laquo; Splatoon 3 Countdown</router-link>
                   </div>
                 </div>
-
-                <img class="absolute hidden sm:block -top-16 right-14 w-48 -rotate-3" src="@/assets/img/tape/tape-1.png" />
-                <img class="absolute -bottom-20 left-8 w-44 rotate-6" src="@/assets/img/tape/tape-3.png" />
-                <img class="absolute top-20 -right-24 w-32 rotate-6" src="@/assets/img/stickers/sticker-4.png" />
-                <img class="absolute hidden sm:block -bottom-14 right-32 w-44 -rotate-3" src="@/assets/img/stickers/sticker-10.png" />
               </div>
-            </div>
-          </ProductContainer>
+            </ProductContainer>
 
+            <img class="absolute hidden sm:block -top-6 right-14 w-48 -rotate-3" src="@/assets/img/tape/tape-1.png" />
+            <img class="absolute -bottom-10 left-8 w-44 rotate-6" src="@/assets/img/tape/tape-3.png" />
+            <img class="absolute top-40 -right-24 w-32 rotate-6" src="@/assets/img/stickers/sticker-4.png" />
+            <img class="absolute hidden sm:block -bottom-6 right-32 w-44 -rotate-3" src="@/assets/img/stickers/sticker-10.png" />
+          </div>
         </div>
       </div>
     </div>