Responsive components

components/content-page-header.tsx

@@ -10,20 +10,21 @@ export function ContentPageHeader(props: GuideHeaderProps) {
   const { title, subtitle } = props;
 
   return (
-    <Box pt='70px' pb='55px' borderBottomWidth={1} mb='30px' textAlign='center'>
-      <Container maxW='container.md' position='relative' textAlign='center'>
-        <Flex alignItems='center' justifyContent='center' fontSize='14px'>
+    <Box pt={['35px', '35px', '70px']} pb={['35px', '35px', '55px']} borderBottomWidth={1} mb='30px'>
+      <Container maxW='container.md' position='relative' textAlign={['left', 'left', 'center']}>
+        <Flex alignItems='center' justifyContent={['flex-start', 'flex-start', 'center']} fontSize={['12px', '12px', '14px']}>
           <Link href='#' d='flex' alignItems='center' fontWeight={600} color='gray.500'>
             <Image mr='7px' w='22px' src='https://github.com/kamranahmedse.png' />
             Kamran Ahmed
           </Link>
           <Text mx='7px' color='gray.500' as='span'>&middot;</Text>
           <Text color='gray.500' as='span'>Monday, May 4, 2021</Text>
-          <Text mx='7px' color='gray.500' as='span'>&middot;</Text>
-          <Link color='blue.500' fontWeight={500} href='#'>Improve this Guide</Link>
+          <Text d={['none', 'none', 'inline']} mx='7px' color='gray.500' as='span'>&middot;</Text>
+          <Link d={['none', 'none', 'inline']} color='blue.500' fontWeight={500} href='#'>Improve this Guide</Link>
         </Flex>
-        <Heading as='h1' color='black' fontSize='45px' fontWeight={700} my='10px'>{title}</Heading>
-        <Text fontSize='16px' color='gray.700'>{subtitle}</Text>
+        <Heading as='h1' color='black' fontSize={['30px', '30px', '45px']} lineHeight={['40px', '40px', '53px']}
+                 fontWeight={700} my={['5px', '5px', '10px']}>{title}</Heading>
+        <Text fontSize={['14px', '14px', '16px']} color='gray.700'>{subtitle}</Text>
       </Container>
     </Box>
   );

components/footer.tsx

@@ -27,11 +27,11 @@ function NavigationLinks() {
 
 export function Footer() {
   return (
-    <Box bg='gray.900' p='40px 0'>
+    <Box bg='gray.900' p={['25px 0', '25px 0', '40px 0']}>
       <Container maxW='container.md'>
         <NavigationLinks />
 
-        <Box my='50px' maxW='500px'>
+        <Box mt={['40px', '40px', '50px']} mb='40px' maxW='500px'>
           <Flex spacing={0} alignItems='center' color='gray.400'>
             <Link d='flex' alignItems='center' fontWeight={600} _hover={{ textDecoration: 'none', color: 'white' }}
                   href='/'>

components/md-renderer/mdx-components/p.tsx

@@ -6,5 +6,5 @@ type EnrichedTextType = {
 }
 
 export default function EnrichedText(props: EnrichedTextType) {
-  return <Text lineHeight='27px' color='black' mb='18px'>{props.children}</Text>;
+  return <Text lineHeight='27px' fontSize='16px' color='black' mb='18px'>{props.children}</Text>;
 }

components/opensource-banner.tsx

@@ -2,10 +2,10 @@ import { Box, Container, Heading, Link, Text } from '@chakra-ui/react';
 
 export function OpensourceBanner() {
   return (
-    <Box borderTopWidth={1} pt={['35px', '40px', '70px']} pb={['20px', '20px', '30px']} textAlign='center'>
+    <Box borderTopWidth={1} pt={['45px', '45px', '70px']} pb={['20px', '20px', '30px']} textAlign='center'>
       <Container maxW='container.md'>
         <Heading fontSize={['25px', '25px', '35px']} mb={['10px', '10px', '20px']}>Open Source</Heading>
-        <Text lineHeight='26px' fontSize={['13px', '14px', '16px']} mb='20px'>The project is OpenSource,&nbsp;
+        <Text lineHeight='26px' fontSize={['15px', '15px', '16px']} mb='20px'>The project is OpenSource,&nbsp;
           <Link
             _hover={{ textDecoration: 'none' }}
             href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories'
@@ -24,7 +24,7 @@ export function OpensourceBanner() {
           title='GitHub'
         />
 
-        <Text lineHeight={['21px', '23px', '26px']} fontSize={['13px', '14px', '16px']} mb='15px'>A considerable amount of my time is spent doing unpaid
+        <Text lineHeight={['25px', '25px', '26px']} fontSize={['15px', '15px', '16px']} mb='15px'>A considerable amount of my time is spent doing unpaid
           community work on things that I hope will help humanity in some way. Your sponsorship helps me continue to
           produce more open-source and free educational material consumed by hundreds of thousands of developers every
           month.</Text>

components/updates-banner.tsx

@@ -2,7 +2,7 @@ import { Box, Button, Container, Flex, Heading, Stack, Text } from '@chakra-ui/r
 
 export function UpdatesBanner() {
   return (
-    <Box borderTopWidth={1} mt='60px' pt={['35px', '40px', '70px']} pb={['45px', '45px', '80px']} textAlign='left' bg='gray.800'>
+    <Box borderTopWidth={1} mt='60px' pt={['40px', '40px', '70px']} pb={['40px', '45px', '80px']} textAlign='left' bg='gray.800'>
       <Container maxW='container.md'>
         <Heading color={'gray.100'} fontSize={['25px', '25px', '35px']} mb={['5px', '5px', '15px']}>Stay
           Informed</Heading>

pages/about.tsx

@@ -8,19 +8,23 @@ import MdRenderer from '../components/md-renderer';
 
 function AboutHeader() {
   return (
-    <Box pt='70px' pb='55px' borderBottomWidth={1} mb='30px' textAlign='left' position='static' top='10px'>
+    <Box pt={['45px', '45px', '70px']} pb={['45px', '45px', '55px']} borderBottomWidth={1} mb='30px' textAlign='left' position='static'
+         top='10px'>
       <Container maxW='container.md' position='relative' textAlign='left'>
         <Flex alignItems='center'>
-          <Image src='/kamran.jpeg' h='170px' rounded='10px' mr='25px' />
+          <Image d={['none', 'none', 'block']} src='/kamran.jpeg' h='170px' rounded='10px' mr='25px' />
           <Box>
-            <Heading as='h1' color='black' fontSize='40px' fontWeight={700} mb='10px'>Hello, I am Kamran
-              Ahmed</Heading>
-            <Text fontSize='17px' color='gray.700' mb='10px'>
+            <Heading as='h1' color='black' fontSize={['35px', '35px', '40px']} fontWeight={700} mb='10px'>Hello, I am
+              Kamran Ahmed
+            </Heading>
+            <Text fontSize={['15px', '15px', '17px']} color='gray.700' mb='15px'>
               I created roadmap.sh to help developers find their path if they are confused and help them grow in
               their career.</Text>
 
-            <Stack isInline>
+            <Stack isInline flexDirection={['column', 'column', 'row']} spacing={0} shouldWrapChildren>
               <Button as={Link} bg='blue.500' color='white' size='sm'
+                      mr='10px'
+                      mb={['7px', '7px', 0]}
                       _hover={{ textDecoration: 'none', bg: 'blue.700' }} href='https://twitter.com/kamranahmedse'
                       arget='_blank'>
                 @kamranahmedse

pages/guides/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Container, Stack } from '@chakra-ui/react';
+import { Box, Container, SimpleGrid, Stack } from '@chakra-ui/react';
 import { GlobalHeader } from '../../components/global-header';
 import { LinksList } from '../../components/links-list';
 import { LinksListItem } from '../../components/links-list-item';
@@ -18,7 +18,7 @@ export default function Guides() {
           subtitle={'Succinct graphical explanations to development related topics.'}
         />
         <Container maxW='container.md' position='relative'>
-          <Stack isInline mb='30px' spacing='15px'>
+          <SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
             <GuideGridItem
               title='Session Based Authentication'
               subtitle='Learn what the Session Based Authentication is, the pros and cons.'
@@ -31,7 +31,7 @@ export default function Guides() {
               date='June 25, 2021'
               colorIndex={1}
             />
-          </Stack>
+          </SimpleGrid>
 
           <LinksList>
             <LinksListItem title='Session based Authentication' badgeText='pro' subtitle='June 12, 2021' />

pages/signup.tsx

@@ -24,7 +24,7 @@ export default function SignUp() {
       <GlobalHeader />
       <Box mb='60px'>
         <Container maxW={'container.md'} position='relative'>
-          <SimpleGrid columns={2} spacing='15px' my='80px'>
+          <SimpleGrid columns={[1, 1, 2]} spacing='15px' my={['30px', '30px', '80px']}>
             <Box p='20px' rounded='5px' borderWidth={2}>
               <Box textAlign='left'>
                 <Heading mb='10px' fontSize='23px' fontWeight={700}>Monthly Updates</Heading>

pages/thanks.tsx

@@ -36,6 +36,7 @@ export default function Thanks() {
                      rounded='100%'
                      src='https://media.giphy.com/media/l0HUgXEoxsNZjZNq8/giphy.gif?cid=790b76114c74e11ed7ce8d65995b6893524407ed7b7748bc&rid=giphy.gif&ct=g'
                      ml='50px'
+                     d={['none', 'block']}
               />
             </Flex>
 

pages/watch/index.tsx

@@ -16,7 +16,7 @@ export default function Watch() {
           subtitle={'Graphical video demonstrations on development topics'}
         />
         <Container maxW='container.md' position='relative'>
-          <SimpleGrid columns={{ md: 2 }} mb='30px' spacing='15px'>
+          <SimpleGrid columns={[1, 1, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
             <VideoGridItem
               title='Session Based Authentication'
               subtitle='Learn what the Session Based Authentication is, the pros and cons.'