gaspersic/developer-roadmap
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Responsive components

Browse Source
This commit is contained in:
Kamran Ahmed
2021-08-28 15:28:20 +02:00
parent ae463059dd
commit 810cea40b3
10 changed files with 31 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/content-page-header.tsx
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
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
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
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
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>