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
Split 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;
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>
);

4
components/footer.tsx
Unescape View File

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

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

@ -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>;
}

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() {
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>

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() {
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>

16
pages/about.tsx
Unescape View File

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

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 { 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' />

2
pages/signup.tsx
Unescape View File

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

1
pages/thanks.tsx
Unescape View File

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

2
pages/watch/index.tsx
Unescape View File

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

Write Preview
Loading…
Cancel
Save