From 4fac5b67ccb0264a2fbfbb852bbe2a0c6dc95076 Mon Sep 17 00:00:00 2001
From: Matt Isenhower <matt@isenhower.com>
Date: Tue, 30 Aug 2022 18:25:41 -0700
Subject: [PATCH] Add Tailwind variant for screenshot layouts

---
 screenshots/index.html                  |  2 +-
 src/components/Splatoon3Countdown.vue   | 10 +++++-----
 src/views/screenshots/CountdownView.vue |  6 +++---
 tailwind.config.js                      |  8 +++++++-
 4 files changed, 16 insertions(+), 10 deletions(-)
diff --git a/screenshots/index.html b/screenshots/index.html
index c29ac87..3fd9742 100644
--- a/screenshots/index.html
+++ b/screenshots/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Splatoon3.ink</title>
   </head>
-  <body class="h-full">
+  <body class="h-full for-screenshots">
     <div id="app"></div>
     <script type="module" src="/src/screenshots.js"></script>
   </body>
diff --git a/src/components/Splatoon3Countdown.vue b/src/components/Splatoon3Countdown.vue
index 7c03c63..e0c3b40 100644
--- a/src/components/Splatoon3Countdown.vue
+++ b/src/components/Splatoon3Countdown.vue
@@ -3,21 +3,21 @@
     <div class="mt-6 font-splatoon2" aria-hidden="true">
       <div class="font-splatoon2 text-center space-y-2">
         <div v-if="isReleased">
-          <div class="text-gray-100 text-2xl">is out now!</div>
+          <div class="text-gray-100 text-2xl ss:text-5xl">is out now!</div>
         </div>
         <div v-else>
-          <div class="text-gray-300">releases in</div>
-          <div class="text-gray-100 text-2xl">{{ days(remainingTime) }}!</div>
+          <div class="text-gray-300 ss:text-3xl ss:mb-2">releases in</div>
+          <div class="text-gray-100 text-2xl ss:text-5xl">{{ days(remainingTime) }}!</div>
         </div>
       </div>
       <div class="bg-blue-pattern rounded-full overflow-hidden my-4">
         <div class="h-10 bg-yellow-pattern bg-animated rounded-full" :style="`width: ${percent}%`"></div>
       </div>
       <div class="flex justify-between text-sm font-medium">
-        <div class="text-splatoon-yellow -rotate-3" :title="formatDate(announceDate)">
+        <div class="text-splatoon-yellow ss:text-3xl -rotate-3" :title="formatDate(announceDate)">
           Announced
         </div>
-        <div class="text-right rotate-3" :class="isReleased ? 'text-splatoon-yellow' : 'text-splatoon-blue'" :title="formatDate(releaseDate)">
+        <div class="text-right ss:text-3xl rotate-3" :class="isReleased ? 'text-splatoon-yellow' : 'text-splatoon-blue'" :title="formatDate(releaseDate)">
           Released
         </div>
       </div>
diff --git a/src/views/screenshots/CountdownView.vue b/src/views/screenshots/CountdownView.vue
index 15515b9..9bd98b0 100644
--- a/src/views/screenshots/CountdownView.vue
+++ b/src/views/screenshots/CountdownView.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="min-h-screen grow flex items-center justify-center">
+  <div class="min-h-screen grow flex items-center justify-center overflow-hidden">
     <div class="grow flex items-center justify-center">
-      <div class="relative w-full max-w-2xl m-4">
+      <div class="relative w-full max-w-2xl m-4 scale-[1.55]">
         <Splat3 class="absolute w-48 -bottom-16 left-28" fill="fill-splatoon-red" />
         <Splat2 class="absolute w-64 -top-20 -left-20" fill="fill-splatoon-orange" />
         <Splat4 class="absolute w-64 -top-20 -right-20" fill="fill-splatoon-blue" />
         <Splat1 class="absolute hidden sm:block w-48 -bottom-36 right-20" fill="fill-splatoon-green" />
 
         <div class="relative">
-          <div class="font-splatoon1 text-5xl text-center">Splatoon 3</div>
+          <div class="font-splatoon1 text-6xl text-center">Splatoon 3</div>
 
           <Splatoon3Countdown />
         </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index d34ca44..f2fab86 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,5 @@
+const plugin = require("tailwindcss/plugin");
+
 module.exports = {
   content: [
     './index.html',
@@ -22,5 +24,9 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    plugin(function({ addVariant }) {
+      addVariant('ss', 'body.for-screenshots &')
+    })
+  ]
 }
