github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Responsive components

Browse Source
pull/1331/head
Kamran Ahmed 3 years ago
parent ae463059dd
commit 810cea40b3
10 changed files with 31 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      components/content-page-header.tsx
  2. 4
      components/footer.tsx
  3. 2
      components/md-renderer/mdx-components/p.tsx
  4. 6
      components/opensource-banner.tsx
  5. 2
      components/updates-banner.tsx
  6. 16
      pages/about.tsx
  7. 6
      pages/guides/index.tsx
  8. 2
      pages/signup.tsx
  9. 1
      pages/thanks.tsx
  10. 2
      pages/watch/index.tsx

15
components/content-page-header.tsx
Unescape View File

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

4
components/footer.tsx
Unescape View File

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

2
components/md-renderer/mdx-components/p.tsx
Unescape View File

@ -6,5 +6,5 @@ type EnrichedTextType = {
} }
export default function EnrichedText(props: 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>;
} }

6
components/opensource-banner.tsx
Unescape View File

@ -2,10 +2,10 @@ import { Box, Container, Heading, Link, Text } from '@chakra-ui/react';
export function OpensourceBanner() { export function OpensourceBanner() {
return ( 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'> <Container maxW='container.md'>
<Heading fontSize={['25px', '25px', '35px']} mb={['10px', '10px', '20px']}>Open Source</Heading> <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 <Link
_hover={{ textDecoration: 'none' }} _hover={{ textDecoration: 'none' }}
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'
@ -24,7 +24,7 @@ export function OpensourceBanner() {
title='GitHub' 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 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 produce more open-source and free educational material consumed by hundreds of thousands of developers every
month.</Text> month.</Text>

2
components/updates-banner.tsx
Unescape View File

@ -2,7 +2,7 @@ import { Box, Button, Container, Flex, Heading, Stack, Text } from '@chakra-ui/r
export function UpdatesBanner() { export function UpdatesBanner() {
return ( 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'> <Container maxW='container.md'>
<Heading color={'gray.100'} fontSize={['25px', '25px', '35px']} mb={['5px', '5px', '15px']}>Stay <Heading color={'gray.100'} fontSize={['25px', '25px', '35px']} mb={['5px', '5px', '15px']}>Stay
Informed</Heading> Informed</Heading>

16
pages/about.tsx
Unescape View File

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

6
pages/guides/index.tsx
Unescape View File

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

2
pages/signup.tsx
Unescape View File

@ -24,7 +24,7 @@ export default function SignUp() {
<GlobalHeader /> <GlobalHeader />
<Box mb='60px'> <Box mb='60px'>
<Container maxW={'container.md'} position='relative'> <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 p='20px' rounded='5px' borderWidth={2}>
<Box textAlign='left'> <Box textAlign='left'>
<Heading mb='10px' fontSize='23px' fontWeight={700}>Monthly Updates</Heading> <Heading mb='10px' fontSize='23px' fontWeight={700}>Monthly Updates</Heading>

1
pages/thanks.tsx
Unescape View File

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

2
pages/watch/index.tsx
Unescape View File

@ -16,7 +16,7 @@ export default function Watch() {
subtitle={'Graphical video demonstrations on development topics'} subtitle={'Graphical video demonstrations on development topics'}
/> />
<Container maxW='container.md' position='relative'> <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 <VideoGridItem
title='Session Based Authentication' title='Session Based Authentication'
subtitle='Learn what the Session Based Authentication is, the pros and cons.' subtitle='Learn what the Session Based Authentication is, the pros and cons.'

Write Preview
Loading…
Cancel
Save