info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-30 20:49:49 +02:00
Code Issues Releases Wiki Activity

Opensource banner responsiveness

Browse Source
This commit is contained in:
Kamran Ahmed
2024-02-22 15:16:05 +00:00
parent f1f56408d5
commit 04d0f7c0b1
1 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/OpenSourceStat.astro
View File

@@ -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'>