Change hover interactions for mobile
This commit is contained in:
@ -26,6 +26,15 @@ export function LinksListItem(props: LinksListItemProps) {
|
|||||||
color='gray.600'
|
color='gray.600'
|
||||||
alignItems={['flex-start', 'center']}
|
alignItems={['flex-start', 'center']}
|
||||||
justifyContent={'space-between'}
|
justifyContent={'space-between'}
|
||||||
|
sx={{
|
||||||
|
'@media (hover: none)': {
|
||||||
|
'&:hover': {
|
||||||
|
'& .list-item-title': {
|
||||||
|
transform: 'none'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
_hover={{
|
_hover={{
|
||||||
textDecoration: 'none',
|
textDecoration: 'none',
|
||||||
color: 'blue.400',
|
color: 'blue.400',
|
||||||
|
@ -40,13 +40,13 @@ export function HomeRoadmapItem(props: RoadmapGridItemProps) {
|
|||||||
href={url}
|
href={url}
|
||||||
_hover={{
|
_hover={{
|
||||||
textDecoration: 'none',
|
textDecoration: 'none',
|
||||||
bg: 'rgba(255,255,255,.10)'
|
bg: 'rgba(255,255,255,.10)',
|
||||||
}}
|
}}
|
||||||
sx={{
|
sx={{
|
||||||
// On mobile devices, don't change the scale
|
// On mobile devices, don't change the scale
|
||||||
'@media (hover: none)': {
|
'@media (hover: none)': {
|
||||||
'&:hover': {
|
'&:hover': {
|
||||||
transform: 'scale(1)',
|
bg: 'rgba(255,255,255,.05)',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
|
103
pages/index.tsx
103
pages/index.tsx
@ -1,4 +1,12 @@
|
|||||||
import { Box, Container, Heading, Link, SimpleGrid, Text, useMediaQuery } from '@chakra-ui/react';
|
import {
|
||||||
|
Box,
|
||||||
|
Container,
|
||||||
|
Heading,
|
||||||
|
Link,
|
||||||
|
SimpleGrid,
|
||||||
|
Text,
|
||||||
|
useMediaQuery,
|
||||||
|
} from '@chakra-ui/react';
|
||||||
import { GlobalHeader } from '../components/global-header';
|
import { GlobalHeader } from '../components/global-header';
|
||||||
import { Footer } from '../components/footer';
|
import { Footer } from '../components/footer';
|
||||||
import { UpdatesBanner } from '../components/updates-banner';
|
import { UpdatesBanner } from '../components/updates-banner';
|
||||||
@ -20,7 +28,7 @@ type HomeProps = {
|
|||||||
roadmaps: RoadmapType[];
|
roadmaps: RoadmapType[];
|
||||||
guides: GuideType[];
|
guides: GuideType[];
|
||||||
videos: VideoType[];
|
videos: VideoType[];
|
||||||
}
|
};
|
||||||
|
|
||||||
export default function Home(props: HomeProps) {
|
export default function Home(props: HomeProps) {
|
||||||
const { roadmaps, guides, videos } = props;
|
const { roadmaps, guides, videos } = props;
|
||||||
@ -28,32 +36,47 @@ export default function Home(props: HomeProps) {
|
|||||||
return (
|
return (
|
||||||
<PageWrapper>
|
<PageWrapper>
|
||||||
<GlobalHeader variant={'transparent'} />
|
<GlobalHeader variant={'transparent'} />
|
||||||
<Helmet title='Developer Roadmaps' />
|
<Helmet title="Developer Roadmaps" />
|
||||||
<Box>
|
<Box>
|
||||||
<Container maxW='container.md' pb='90px'>
|
<Container maxW="container.md" pb="90px">
|
||||||
<Box py={['23px', '23px', '35px']} color='gray.200' >
|
<Box py={['23px', '23px', '35px']} color="gray.200">
|
||||||
<Heading color='gray.50' fontSize={['22px', '22px', '28px']} mb={['8px', '8px', '15px']}>Hey there! 👋</Heading>
|
<Heading
|
||||||
<Text fontSize={['14px', '14px', '16px']} mb='10px'>
|
color="gray.50"
|
||||||
<Text fontWeight={500} as='span'>roadmap.sh</Text> is a community effort to create roadmaps, guides and
|
fontSize={['22px', '22px', '28px']}
|
||||||
other educational content
|
mb={['8px', '8px', '15px']}
|
||||||
to help guide the developers in picking up the path and guide their learnings.
|
>
|
||||||
|
Hey there! 👋
|
||||||
|
</Heading>
|
||||||
|
<Text fontSize={['14px', '14px', '16px']} mb="10px">
|
||||||
|
<Text fontWeight={500} as="span">
|
||||||
|
roadmap.sh
|
||||||
|
</Text>{' '}
|
||||||
|
is a community effort to create roadmaps, guides and other
|
||||||
|
educational content to help guide the developers in picking up the
|
||||||
|
path and guide their learnings.
|
||||||
</Text>
|
</Text>
|
||||||
|
|
||||||
<Text fontSize={['14px', '14px', '16px']}>We also have a <Link textDecoration={'underline'}
|
<Text fontSize={['14px', '14px', '16px']}>
|
||||||
|
We also have a{' '}
|
||||||
|
<Link
|
||||||
|
textDecoration={'underline'}
|
||||||
href={siteConfig.url.youtube}
|
href={siteConfig.url.youtube}
|
||||||
onClick={() => event({
|
onClick={() =>
|
||||||
|
event({
|
||||||
category: 'Subscription',
|
category: 'Subscription',
|
||||||
action: 'Clicked the YouTube link',
|
action: 'Clicked the YouTube link',
|
||||||
label: 'YouTube link on home'
|
label: 'YouTube link on home',
|
||||||
})}
|
})
|
||||||
target='_blank'
|
}
|
||||||
fontWeight={600}>YouTube
|
target="_blank"
|
||||||
channel</Link> which we hope you are going to love.</Text>
|
fontWeight={600}
|
||||||
</Box>
|
|
||||||
<SimpleGrid
|
|
||||||
columns={[1, 2, 3]}
|
|
||||||
spacing={['10px', '10px', '15px']}
|
|
||||||
>
|
>
|
||||||
|
YouTube channel
|
||||||
|
</Link>{' '}
|
||||||
|
which we hope you are going to love.
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
<SimpleGrid columns={[1, 2, 3]} spacing={['10px', '10px', '15px']}>
|
||||||
{roadmaps.map((roadmap: RoadmapType, counter: number) => (
|
{roadmaps.map((roadmap: RoadmapType, counter: number) => (
|
||||||
<HomeRoadmapItem
|
<HomeRoadmapItem
|
||||||
isUpcoming={roadmap.isUpcoming}
|
isUpcoming={roadmap.isUpcoming}
|
||||||
@ -69,14 +92,20 @@ export default function Home(props: HomeProps) {
|
|||||||
</Container>
|
</Container>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<Box bg='white'>
|
<Box bg="white">
|
||||||
<Container maxW='container.md'>
|
<Container maxW="container.md">
|
||||||
<Box pt='60px' mb={['10px', '15px', '20px']}>
|
<Box pt="60px" mb={['10px', '15px', '20px']}>
|
||||||
<Heading color='green.500' fontSize={['20px', '20px', '25px']} mb='5px'>Video Explanations</Heading>
|
<Heading
|
||||||
|
color="green.500"
|
||||||
|
fontSize={['20px', '20px', '25px']}
|
||||||
|
mb="5px"
|
||||||
|
>
|
||||||
|
Video Explanations
|
||||||
|
</Heading>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<LinksList>
|
<LinksList>
|
||||||
{videos.map(video => (
|
{videos.map((video) => (
|
||||||
<LinksListItem
|
<LinksListItem
|
||||||
target={'_blank'}
|
target={'_blank'}
|
||||||
key={video.id}
|
key={video.id}
|
||||||
@ -91,25 +120,27 @@ export default function Home(props: HomeProps) {
|
|||||||
marginRight: '7px',
|
marginRight: '7px',
|
||||||
width: '18px',
|
width: '18px',
|
||||||
height: '18px',
|
height: '18px',
|
||||||
color: '#9c9c9c'
|
color: '#9c9c9c',
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
<DimmedMore href='/watch' text={'View all Videos'} />
|
<DimmedMore href="/watch" text={'View all Videos'} />
|
||||||
</LinksList>
|
</LinksList>
|
||||||
</Container>
|
</Container>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<Box pb='80px' bg='white'>
|
<Box pb="80px" bg="white">
|
||||||
<Container maxW='container.md' position='relative'>
|
<Container maxW="container.md" position="relative">
|
||||||
<Box pt='40px' mb='20px'>
|
<Box pt="40px" mb="20px">
|
||||||
<Heading color='green.500' fontSize='25px' mb='5px'>Visual Guides</Heading>
|
<Heading color="green.500" fontSize="25px" mb="5px">
|
||||||
|
Visual Guides
|
||||||
|
</Heading>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<LinksList>
|
<LinksList>
|
||||||
{guides.map(guide => (
|
{guides.map((guide) => (
|
||||||
<LinksListItem
|
<LinksListItem
|
||||||
key={guide.id}
|
key={guide.id}
|
||||||
href={`/guides/${guide.id}`}
|
href={`/guides/${guide.id}`}
|
||||||
@ -118,7 +149,7 @@ export default function Home(props: HomeProps) {
|
|||||||
subtitle={guide.formattedUpdatedAt!}
|
subtitle={guide.formattedUpdatedAt!}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
<DimmedMore href={'/guides'} text='View all Guides' />
|
<DimmedMore href={'/guides'} text="View all Guides" />
|
||||||
</LinksList>
|
</LinksList>
|
||||||
</Container>
|
</Container>
|
||||||
</Box>
|
</Box>
|
||||||
@ -135,7 +166,7 @@ export async function getStaticProps() {
|
|||||||
props: {
|
props: {
|
||||||
roadmaps: getFeaturedRoadmaps(),
|
roadmaps: getFeaturedRoadmaps(),
|
||||||
guides: getAllGuides(10),
|
guides: getAllGuides(10),
|
||||||
videos: getAllVideos(10)
|
videos: getAllVideos(10),
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user