info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-03-15 12:49:43 +01:00
Code Issues Releases Wiki Activity

Responsiveness changes

Browse Source
This commit is contained in:
Kamran Ahmed 2023-01-10 23:26:29 +04:00
parent c4406b7649
commit 8badf383b2
6 changed files with 22 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/FAQs/Answer.astro
View File

@ -1,3 +1,3 @@
<div class='leading-relaxed text-left p-4 text-md text-gray-800 border-t border-t-gray-300 bg-gray-100 rounded-bl-md rounded-br-md'> <div class='text-sm sm:text-base leading-relaxed text-left p-2 sm:p-4 text-md text-gray-800 border-t border-t-gray-300 bg-gray-100 rounded-bl-md rounded-br-md'>
<slot /> <slot />
</div> </div>

2
src/components/FAQs/FAQs.astro
View File

@ -1,7 +1,7 @@
<div class='border-t bg-gray-100'> <div class='border-t bg-gray-100'>
<div class='container'> <div class='container'>
<div class='flex justify-between relative -top-5'> <div class='flex justify-between relative -top-5'>
<h1 class='text-md font-medium py-1 px-3 border bg-white rounded-md'> <h1 class='text-sm sm:text-base font-medium py-1 px-3 border bg-white rounded-md'>
Frequently Asked Questions Frequently Asked Questions
</h1> </h1>
</div> </div>

4
src/components/FAQs/Question.astro
View File

@ -14,9 +14,9 @@ const { question, isActive = false } = Astro.props;
> >
<button <button
faq-question faq-question
class='flex flex-row justify-between items-center p-3 w-full' class='flex flex-row justify-between items-center p-2 sm:p-3 w-full'
> >
<span class='text-md text-left font-medium'>{question}</span> <span class='text-sm sm:text-base text-left font-medium'>{question}</span>
<Icon icon='down' class='h-6 hidden sm:block text-gray-400' /> <Icon icon='down' class='h-6 hidden sm:block text-gray-400' />
</button> </button>
<div class:list={['answer', { hidden: !isActive }]} faq-answer> <div class:list={['answer', { hidden: !isActive }]} faq-answer>

2
src/components/OpenSourceBanner.astro
View File

@ -7,7 +7,7 @@ const starCount = await getFormattedStars('kamranahmedse/developer-roadmap');
<div class='py-6 sm:py-16 border-b border-t text-left sm:text-center bg-white'> <div class='py-6 sm:py-16 border-b border-t text-left sm:text-center bg-white'>
<div class='max-w-[600px] container'> <div class='max-w-[600px] container'>
<h2 class='text-3xl sm:text-5xl font-bold'>Open Source</h1> <h2 class='text-2xl sm:text-5xl font-bold'>Open Source</h2>
<p class='text-gray-600 text-sm sm:text-lg leading-relaxed my-2.5 sm:my-5'> <p class='text-gray-600 text-sm sm:text-lg leading-relaxed my-2.5 sm:my-5'>
The project is OpenSource, <a The project is OpenSource, <a
href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories' href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories'

2
src/components/ResourcesAlert.astro
View File

@ -16,7 +16,7 @@ const roadmapTitle =
<div <div
class:list={[ class:list={[
'mt-4 sm:mt-7 border rounded-md mb-0', 'mt-4 sm:mt-7 border-0 sm:border rounded-md mb-0',
{ {
'sm:-mb-[82px]': hasTNSBanner, 'sm:-mb-[82px]': hasTNSBanner,
'sm:-mb-[65px]': !hasTNSBanner, 'sm:-mb-[65px]': !hasTNSBanner,

16
src/components/Sponsor/Sponsor.astro
View File

@ -1,5 +1,6 @@
--- ---
import type { GAEventType } from '../Analytics/analytics'; import type { GAEventType } from '../Analytics/analytics';
import Icon from '../Icon.astro';
export type SponsorType = { export type SponsorType = {
url: string; url: string;
@ -28,6 +29,13 @@ const {
onclick={event ? `window.fireEvent(${JSON.stringify(event)})` : ''} onclick={event ? `window.fireEvent(${JSON.stringify(event)})` : ''}
class='fixed bottom-[15px] right-[20px] outline-transparent z-50 bg-white max-w-[330px] shadow-lg outline-0 hidden' class='fixed bottom-[15px] right-[20px] outline-transparent z-50 bg-white max-w-[330px] shadow-lg outline-0 hidden'
> >
<button
class='absolute top-1.5 right-1.5 text-gray-300 hover:text-gray-800'
aria-label='Close'
close-sponsor
>
<Icon icon='close' class='h-4' />
</button>
<img src={imageUrl} class='h-[150px] lg:h-[169px]' alt='Sponsor Banner' /> <img src={imageUrl} class='h-[150px] lg:h-[169px]' alt='Sponsor Banner' />
<span class='text-sm flex flex-col justify-between'> <span class='text-sm flex flex-col justify-between'>
<span class='p-[10px]'> <span class='p-[10px]'>
@ -37,3 +45,11 @@ const {
<span class='sponsor-footer'>Partner Content</span> <span class='sponsor-footer'>Partner Content</span>
</span> </span>
</a> </a>
<script>
document.querySelector('[close-sponsor]')?.addEventListener('click', (e) => {
e.preventDefault();
e.stopPropagation();
document.getElementById('sponsor-ad')?.classList.add('hidden');
});
</script>