acid-info
/
logos-press-engine
mirror of https://github.com/acid-info/logos-press-engine.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: update homepage featured section

This commit is contained in:
jinhojang6 2024-03-28 03:12:55 +09:00
parent 7922ab972a
commit 68417b48dd
1 changed files with 30 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/containers/HomePage/HomePage.tsx
View File

@ -72,26 +72,11 @@ export const HomePage: React.FC<HomePageProps> = ({
</HeroContainer>
<Container>
<div>
<PostsGrid
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>
<FeaturedFirst>
<PostsGrid
shows={shows}
posts={[...highlighted.slice(0, 1), ...highlighted.slice(0, 1)]}
pattern={[{ cols: 2, size: 'large' }]}
posts={highlighted.slice(0, 1)}
pattern={[{ cols: 1, size: 'large' }]}
breakpoints={[
{
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}>
<PostsGrid
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);
h3 {