From a32b6a0f2b3eac1e3e7ed60e3354523f42ebc20d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maciej=20P=C4=99dzich?= <contact@maciejpedzi.ch>
Date: Sat, 23 Sep 2023 13:13:03 +0200
Subject: [PATCH] Tweak styling for mobile devices

---
 pages/index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 6b3af91..6ae2510 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -86,11 +86,11 @@ const goToSnapshotCalendar = async ({
 
 <template>
   <div
-    class="w-full h-full flex flex-column gap-2 justify-content-center align-items-center"
+    class="p-4 w-full h-full flex flex-column gap-2 justify-content-center align-items-center text-center"
   >
-    <h1 class="m-0 text-6xl">Spotify Playlist Archive</h1>
+    <h1 class="m-0 md:text-6xl text-4xl">Spotify Playlist Archive</h1>
     <div>
-      <p class="mt-0 mb-4 text-2xl">
+      <p class="mt-0 mb-4 md:text-2xl text-xl">
         Browse past versions of thousands of playlists saved over time
       </p>
       <Skeleton v-if="loadingPlaylistRegistry" class="w-full h-3rem" />