Opensource banner responsiveness

src/components/OpenSourceStat.astro

@@ -14,20 +14,20 @@ const isDiscordMembers = text.toLowerCase() === 'discord members';
 ---
 
 <div
-  class='flex flex-row items-center justify-start sm:flex-col sm:justify-center'
+  class='flex items-start sm:items-center justify-start flex-col sm:justify-center sm:gap-0 gap-2 sm:bg-transparent bg-gray-200 sm:rounded-none rounded-xl p-4'
 >
   {
     isGitHubStars && (
-      <p class='flex items-center text-sm text-blue-500'>
+      <p class='flex items-center text-sm text-blue-500 sm:flex'>
         <span class='rounded-md bg-blue-500 px-1 text-white'>Rank 6th</span>
-        &nbsp;out of 28m!
+        &nbsp;out of 28M!
       </p>
     )
   }
 
   {
     isRegistered && (
-      <p class='flex items-center text-sm text-blue-500'>
+      <p class='flex items-center text-sm text-blue-500 sm:flex'>
         <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>+55k</span>
         every month
       </p>
@@ -36,18 +36,22 @@ const isDiscordMembers = text.toLowerCase() === 'discord members';
 
   {
     isDiscordMembers && (
-      <p class='flex items-center text-sm text-blue-500'>
+      <p class='flex items-center text-sm text-blue-500 sm:flex'>
         <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>+1.5k</span>
         every month
       </p>
     )
   }
-  <p
-    class='relative my-4 w-[50px] text-base font-bold lowercase sm:w-auto sm:text-5xl'
-  >
-    {value}
-  </p>
-  <p class="text-xs -mt-3 mb-5 tracking-wide text-gray-500">{text}</p>
+  <div class="flex flex-row items-center sm:flex-col my-1 sm:my-0">
+    <p
+      class='relative my-0 sm:my-4 mr-1 sm:mr-0 text-base font-bold lowercase sm:w-auto sm:text-5xl'
+    >
+      {value}
+    </p>
+    <p class='mb-0 mt-0 text-base sm:text-xs tracking-wide text-black sm:-mt-3 sm:mb-5'>
+      {text}
+    </p>
+  </div>
   {
     isGitHubStars && (
       <a
@@ -69,11 +73,10 @@ const isDiscordMembers = text.toLowerCase() === 'discord members';
     isRegistered && (
       <a
         href='/signup'
-        target='_blank'
         class='group mt-0 flex flex-col items-center rounded-lg border border-black bg-white px-3 py-2 text-sm hover:bg-black hover:text-white'
       >
         <div class='mb-0.5 flex items-center font-semibold'>
-          <Icon icon='users' class='-ml-1 fill-current h-[15px]' />
+          <Icon icon='users' class='-ml-1 h-[15px] fill-current' />
           <span class='ml-1 hover:block'>Register yourself</span>
         </div>
         <span class='text-xs text-gray-500 group-hover:text-gray-100'>
@@ -85,12 +88,12 @@ const isDiscordMembers = text.toLowerCase() === 'discord members';
   {
     isDiscordMembers && (
       <a
-        href='/signup'
+        href='https://discord.gg/cJpEt5Qbwa'
         target='_blank'
         class='group mt-0 flex flex-col items-center rounded-lg border border-black bg-white px-3 py-2 text-sm hover:bg-black hover:text-white'
       >
         <div class='mb-0.5 flex items-center font-semibold'>
-          <Icon icon='discord' class='-ml-1 fill-current h-[13px]' />
+          <Icon icon='discord' class='-ml-1 h-[13px] fill-current' />
           <span class='ml-1 hover:block'>Join on Discord</span>
         </div>
         <span class='text-xs text-gray-500 group-hover:text-gray-100'>