info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-03 06:12:53 +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 <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 && ( 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> <span class='rounded-md bg-blue-500 px-1 text-white'>Rank 6th</span>
&nbsp;out of 28m! &nbsp;out of 28M!
</p> </p>
) )
} }
{ {
isRegistered && ( 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> <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>+55k</span>
every month every month
</p> </p>
@@ -36,18 +36,22 @@ const isDiscordMembers = text.toLowerCase() === 'discord members';
{ {
isDiscordMembers && ( 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> <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>+1.5k</span>
every month every month
</p> </p>
) )
} }
<p <div class="flex flex-row items-center sm:flex-col my-1 sm:my-0">
class='relative my-4 w-[50px] text-base font-bold lowercase sm:w-auto sm:text-5xl' <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> {value}
<p class="text-xs -mt-3 mb-5 tracking-wide text-gray-500">{text}</p> </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 && ( isGitHubStars && (
<a <a
@@ -69,11 +73,10 @@ const isDiscordMembers = text.toLowerCase() === 'discord members';
isRegistered && ( isRegistered && (
<a <a
href='/signup' 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' 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'> <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> <span class='ml-1 hover:block'>Register yourself</span>
</div> </div>
<span class='text-xs text-gray-500 group-hover:text-gray-100'> <span class='text-xs text-gray-500 group-hover:text-gray-100'>
@@ -85,12 +88,12 @@ const isDiscordMembers = text.toLowerCase() === 'discord members';
{ {
isDiscordMembers && ( isDiscordMembers && (
<a <a
href='/signup' href='https://discord.gg/cJpEt5Qbwa'
target='_blank' 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' 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'> <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> <span class='ml-1 hover:block'>Join on Discord</span>
</div> </div>
<span class='text-xs text-gray-500 group-hover:text-gray-100'> <span class='text-xs text-gray-500 group-hover:text-gray-100'>