From ca8dcf7cf592553d33b9ca8b62052abc02c3d04c Mon Sep 17 00:00:00 2001
From: yudejp <i@yude.jp>
Date: Wed, 2 Jun 2021 15:06:27 +0900
Subject: [PATCH] Fix status badge position on smartphone (or narrow width
 devices)

---
 pages/components/DiscordStatus.js | 10 +++++-----
 pages/profile.js                  |  4 +++-
 tailwind.config.js                |  8 ++++++++
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/pages/components/DiscordStatus.js b/pages/components/DiscordStatus.js
index 4dd5797..79bb2c0 100644
--- a/pages/components/DiscordStatus.js
+++ b/pages/components/DiscordStatus.js
@@ -15,17 +15,17 @@ const App = () => {
   const status = data.members && data.members[0].status;
   return (
   <>
-  <div className="z-50 transform translate-x-96 -translate-y-10 w-5">
+  <div className="z-50 w-6 transform translate-y-3/4 -translate-x-full">
   {
     (() => {
       if (status == "online"){
-        return <div className="z-1000 text-green-700 rounded-full bg-green-500 flex w-5 h-5"></div>
+        return <div className="text-green-700 rounded-full bg-green-500 flex w-6 h-6"></div>
       } else if (status == "idle"){
-        return <div className="z-1000 text-yellow-700 rounded-full bg-green-500 flex w-5 h-5"></div>
+        return <div className="text-yellow-700 rounded-full bg-green-500 flex w-6 h-6"></div>
       } else if (status == "dnd"){
-        return <div className="z-1000 text-yellow-700 rounded-full bg-red-500 flex w-5 h-5"></div>
+        return <div className="text-yellow-700 rounded-full bg-red-500 flex w-6 h-6"></div>
       } else {
-        return <div className="z-1000 text-gray-700 rounded-full bg-red-500 flex w-5 h-5"></div>
+        return <div className="text-gray-700 rounded-full bg-red-500 flex w-6 h-6"></div>
       }
     })()
   }
diff --git a/pages/profile.js b/pages/profile.js
index a9f4424..ad49f10 100644
--- a/pages/profile.js
+++ b/pages/profile.js
@@ -41,8 +41,9 @@ export default function About(props) {
          // Heading
         }
         <div>
+          <div className="flex mb-10 justify-center">
           <Image
-            className   = "object-contain rounded-full hover:animate-rumble z-0"
+            className   = "rounded-full hover:animate-rumble z-0"
             src         = "/static/images/avatar.png"
             alt         = "yude's avatar"
             width       = {200}
@@ -50,6 +51,7 @@ export default function About(props) {
             unoptimized = {true}
           />
           <DiscordStatus />
+          </div>
           <p className="text-4xl transform -translate-y-4">yude</p>
           <div>
           <DiscordPlaying />
diff --git a/tailwind.config.js b/tailwind.config.js
index 6a5f7c2..271f2bd 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -50,6 +50,14 @@ module.exports = {
           '0%, 100%': {filter: 'drop-shadow(0px 0px 1px  rgb(255, 255, 255))'},
           '50%': {filter: 'drop-shadow(0px 0px 8px  rgb(255, 255, 255))'}
         },
+        translate: {
+          '1/7': '14.2857143%',
+          '2/7': '28.5714286%',
+          '3/7': '42.8571429%',
+          '4/7': '57.1428571%',
+          '5/7': '71.4285714%',
+          '6/7': '85.7142857%',
+       },
     },
     }
   },