feat: update homepage featured section
This commit is contained in:
parent
7922ab972a
commit
68417b48dd
|
@ -72,26 +72,11 @@ export const HomePage: React.FC<HomePageProps> = ({
|
||||||
</HeroContainer>
|
</HeroContainer>
|
||||||
<Container>
|
<Container>
|
||||||
<div>
|
<div>
|
||||||
<PostsGrid
|
<FeaturedFirst>
|
||||||
shows={shows}
|
|
||||||
posts={highlighted.slice(0, 1)}
|
|
||||||
pattern={[{ cols: 1, size: 'large' }]}
|
|
||||||
breakpoints={[
|
|
||||||
{
|
|
||||||
breakpoint: 'xs',
|
|
||||||
pattern: [{ cols: 1, size: 'small' }],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
breakpoint: 'md',
|
|
||||||
pattern: [{ cols: 1, size: 'large' }],
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
<Featured>
|
|
||||||
<PostsGrid
|
<PostsGrid
|
||||||
shows={shows}
|
shows={shows}
|
||||||
posts={[...highlighted.slice(0, 1), ...highlighted.slice(0, 1)]}
|
posts={highlighted.slice(0, 1)}
|
||||||
pattern={[{ cols: 2, size: 'large' }]}
|
pattern={[{ cols: 1, size: 'large' }]}
|
||||||
breakpoints={[
|
breakpoints={[
|
||||||
{
|
{
|
||||||
breakpoint: 'xs',
|
breakpoint: 'xs',
|
||||||
|
@ -103,7 +88,24 @@ export const HomePage: React.FC<HomePageProps> = ({
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</Featured>
|
</FeaturedFirst>
|
||||||
|
<FeaturedSecond>
|
||||||
|
<PostsGrid
|
||||||
|
shows={shows}
|
||||||
|
posts={[...highlighted.slice(0, 1), ...highlighted.slice(0, 1)]}
|
||||||
|
pattern={[{ cols: 2, size: 'large' }]}
|
||||||
|
breakpoints={[
|
||||||
|
{
|
||||||
|
breakpoint: 'xs',
|
||||||
|
pattern: [{ cols: 2, size: 'small' }],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
breakpoint: 'md',
|
||||||
|
pattern: [{ cols: 2, size: 'large' }],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</FeaturedSecond>
|
||||||
<Section title="Latest posts" bordered={highlighted.length > 0}>
|
<Section title="Latest posts" bordered={highlighted.length > 0}>
|
||||||
<PostsGrid
|
<PostsGrid
|
||||||
shows={shows}
|
shows={shows}
|
||||||
|
@ -317,7 +319,15 @@ const ShowMoreTagsButton = styled.div`
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const Featured = styled.div`
|
const FeaturedFirst = styled.div`
|
||||||
|
${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'up')} {
|
||||||
|
.show-details {
|
||||||
|
margin-top: var(--lsd-spacing-32);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`
|
||||||
|
|
||||||
|
const FeaturedSecond = styled.div`
|
||||||
margin-bottom: var(--lsd-spacing-64);
|
margin-bottom: var(--lsd-spacing-64);
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
|
|
Loading…
Reference in New Issue