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

Make roadmaps page responsive

Browse Source
This commit is contained in:
Kamran Ahmed
2021-08-28 13:50:44 +02:00
parent 2c0d1ef77f
commit 8d05031e51
2 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/page-header.tsx
View File

@ -11,10 +11,18 @@ export function PageHeader(props: PageHeaderProps) {
const { title, subtitle, children } = props; const { title, subtitle, children } = props;
return ( return (
<Box pt='45px' pb='30px' borderBottomWidth={1} mb='30px'> <Box pt={['20px', '20px', '45px']} pb={['15px', '15px', '30px']} borderBottomWidth={1} mb='30px'>
<Container maxW='container.md' position='relative'> <Container maxW='container.md' position='relative'>
<Heading as='h1' color='black' fontSize='35px' fontWeight={700} mb='5px'>{title}</Heading> <Heading
<Text fontSize='15px'>{subtitle}</Text> as='h1'
color='black'
fontSize={['25px', '25px', '35px']}
fontWeight={700}
mb={['2px', '2px', '5px']}
>
{title}
</Heading>
<Text fontSize={['14px', '14px', '15px']}>{subtitle}</Text>
</Container> </Container>
{children && ( {children && (

2
pages/roadmaps/index.tsx
View File

@ -16,7 +16,7 @@ export default function Roadmaps() {
subtitle={'Step by step guides and paths to learn different tools or technologies'} subtitle={'Step by step guides and paths to learn different tools or technologies'}
/> />
<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, 2]} mb='30px' spacing={['10px', '10px', '15px']}>
<RoadmapGridItem <RoadmapGridItem
colorIndex={0} title={'Frontend'} colorIndex={0} title={'Frontend'}
subtitle={'Step by step guide to becoming a frontend developer in 2021'} subtitle={'Step by step guide to becoming a frontend developer in 2021'}