update css of landing page
This commit is contained in:
parent
f10b7aacda
commit
c08e04ae41
|
@ -8,6 +8,7 @@ const Author = ({
|
|||
}: {
|
||||
mention: UnbodyGraphQl.Fragments.MentionItem
|
||||
email: boolean
|
||||
gap?: number
|
||||
}) => (
|
||||
<AuthorInfo key={mention.name}>
|
||||
<Typography variant="body3" component="p" genericFontFamily="sans-serif">
|
||||
|
@ -29,7 +30,6 @@ const Author = ({
|
|||
const AuthorInfo = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
`
|
||||
|
||||
export default Author
|
||||
|
|
|
@ -10,8 +10,8 @@ export enum AuthorsDirection {
|
|||
const Authors = ({
|
||||
mentions,
|
||||
email,
|
||||
gap = 16,
|
||||
flexDirection = AuthorsDirection.COLUMN,
|
||||
gap = 12,
|
||||
flexDirection = AuthorsDirection.ROW,
|
||||
}: {
|
||||
mentions: UnbodyGraphQl.Fragments.MentionItem[]
|
||||
email: boolean
|
||||
|
@ -21,7 +21,7 @@ const Authors = ({
|
|||
return mentions?.length > 0 ? (
|
||||
<AuthorsContainer gap={gap} flexDirection={flexDirection}>
|
||||
{mentions.map((mention) => (
|
||||
<Author key={mention.name} mention={mention} email={email} />
|
||||
<Author gap={gap} key={mention.name} mention={mention} email={email} />
|
||||
))}
|
||||
</AuthorsContainer>
|
||||
) : null
|
||||
|
@ -34,6 +34,16 @@ const AuthorsContainer = styled.div<{
|
|||
display: flex;
|
||||
flex-direction: ${({ flexDirection }) => flexDirection};
|
||||
gap: ${({ gap }) => gap}px;
|
||||
align-items: center;
|
||||
|
||||
// WIP
|
||||
/* &:not(:last-child) {
|
||||
&:after {
|
||||
justify-content: center;
|
||||
content: '•';
|
||||
width: 12px;
|
||||
}
|
||||
} */
|
||||
`
|
||||
|
||||
export default Authors
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import Link from 'next/link'
|
||||
import { Grid, GridItem } from '../Grid/Grid'
|
||||
import styled from '@emotion/styled'
|
||||
import Post, { PostDataProps } from '../Post/Post'
|
||||
import Post, { PostDataProps, PostSize } from '../Post/Post'
|
||||
|
||||
type Props = {
|
||||
post: PostDataProps
|
||||
|
@ -15,6 +15,7 @@ const FeaturedPost = ({ post }: Props) => {
|
|||
<Post
|
||||
data={post}
|
||||
appearance={{
|
||||
size: PostSize.LARGE,
|
||||
imageProps: {
|
||||
fill: true,
|
||||
height: '480px',
|
||||
|
@ -27,6 +28,7 @@ const FeaturedPost = ({ post }: Props) => {
|
|||
: {},
|
||||
},
|
||||
}}
|
||||
isFeatured
|
||||
/>
|
||||
</PostWrapper>
|
||||
</GridItem>
|
||||
|
|
|
@ -30,7 +30,6 @@ export default function FilterTags(props: FilterTagsProps) {
|
|||
}
|
||||
|
||||
const Container = styled.div`
|
||||
padding: 8px 0;
|
||||
max-width: 100%;
|
||||
`
|
||||
|
||||
|
@ -54,4 +53,12 @@ const Tags = styled.div`
|
|||
> * {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
> *:first-child {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
padding-right: 16px;
|
||||
}
|
||||
`
|
||||
|
|
|
@ -171,12 +171,13 @@ export default function Footer() {
|
|||
)
|
||||
}
|
||||
|
||||
const SECTION_MARGIN = 60
|
||||
const SECTION_MARGIN = 50
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
margin-top: 196px;
|
||||
padding: 16px;
|
||||
border-top: 1px solid rgb(var(--lsd-border-primary));
|
||||
`
|
||||
|
@ -246,6 +247,7 @@ const LinkGroup = styled.div`
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 34px;
|
||||
gap: 4px;
|
||||
`
|
||||
|
||||
const ScrollToTop = styled(Button)`
|
||||
|
|
|
@ -7,7 +7,7 @@ export default function Hero() {
|
|||
<Title genericFontFamily="serif" component="h1" variant="h1">
|
||||
LOGOS → PRESS ENGINE
|
||||
</Title>
|
||||
<Description component="div" variant="label2">
|
||||
<Description component="div" variant="body1">
|
||||
Blog with media written by Logos members
|
||||
</Description>
|
||||
</Container>
|
||||
|
@ -23,17 +23,25 @@ const Container = styled.div`
|
|||
@media (max-width: 768px) {
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
gap: 6px;
|
||||
}
|
||||
`
|
||||
|
||||
const Title = styled(Typography)`
|
||||
// temporary breakpoint
|
||||
@media (min-width: 1440px) {
|
||||
padding-block: 16px;
|
||||
font-size: 90px;
|
||||
line-height: 98px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
`
|
||||
|
||||
const Description = styled(Typography)`
|
||||
margin-top: 6px;
|
||||
@media (max-width: 768px) {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
`
|
||||
|
|
|
@ -7,9 +7,13 @@ const Main = ({ children }: PropsWithChildren) => {
|
|||
}
|
||||
|
||||
const Container = styled.main`
|
||||
margin-block: ${uiConfigs.postSectionMargin}px;
|
||||
margin-top: ${uiConfigs.postSectionMargin}px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-top: ${uiConfigs.postSectionMobileMargin}px;
|
||||
}
|
||||
`
|
||||
|
||||
export default Main
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
import styled from '@emotion/styled'
|
||||
import { IconButton, Typography } from '@acid-info/lsd-react'
|
||||
import { IconButton } from '@acid-info/lsd-react'
|
||||
import { LogosIcon } from '../Icons/LogosIcon'
|
||||
import { SunIcon } from '../Icons/SunIcon'
|
||||
import { MoonIcon } from '../Icons/MoonIcon'
|
||||
import { useRouter } from 'next/router'
|
||||
import { uiConfigs } from '@/configs/ui.configs'
|
||||
import Link from 'next/link'
|
||||
|
||||
|
@ -22,9 +21,6 @@ export default function Navbar({ isDark, toggle }: NavbarProps) {
|
|||
<IconButton size="small" onClick={() => toggle()}>
|
||||
{isDark ? <SunIcon color="primary" /> : <MoonIcon color="primary" />}
|
||||
</IconButton>
|
||||
<Selector size="small">
|
||||
<Typography variant="label2">Aa</Typography>
|
||||
</Selector>
|
||||
</Icons>
|
||||
</Container>
|
||||
)
|
||||
|
@ -32,19 +28,19 @@ export default function Navbar({ isDark, toggle }: NavbarProps) {
|
|||
|
||||
const Container = styled.nav`
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
padding: 8px 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid rgb(var(--lsd-theme-primary));
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
max-width: ${uiConfigs.maxContainerWidth + 40}px; // TBD
|
||||
background: rgb(var(--lsd-surface-primary));
|
||||
z-index: 100;
|
||||
box-sizing: border-box;
|
||||
|
||||
// to center-align logo
|
||||
&:last-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
@ -56,6 +52,15 @@ const Container = styled.nav`
|
|||
margin: 1px auto 1px 1px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* temporary breakpoint */
|
||||
@media (max-width: 768px) {
|
||||
padding: 8px;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const LogosIconContainer = styled(Link)`
|
||||
|
|
|
@ -4,8 +4,8 @@ import { useSearchBarContext } from '@/context/searchbar.context'
|
|||
import { useRouter } from 'next/router'
|
||||
|
||||
export const NavbarFiller = () => {
|
||||
const router = useRouter()
|
||||
const { tags } = useSearchBarContext()
|
||||
const router = useRouter()
|
||||
const { tags } = useSearchBarContext()
|
||||
|
||||
const onTagClick = (tag: string) => {
|
||||
router.push(`/search?topics=${tag}`)
|
||||
|
@ -15,14 +15,17 @@ export const NavbarFiller = () => {
|
|||
<FilterTags onTagClick={onTagClick} tags={tags} selectedTags={[]} />
|
||||
</NavbarFillerContainer>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export const NavbarFillerContainer = styled.div`
|
||||
height: var(--lpe-nav-rendered-height);
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-block: 24px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-block: 16px;
|
||||
}
|
||||
`
|
||||
|
|
|
@ -18,6 +18,7 @@ import {
|
|||
ResponsiveImageProps,
|
||||
} from '../ResponsiveImage/ResponsiveImage'
|
||||
import Link from 'next/link'
|
||||
import { AuthorsDirection } from '../Authors/Authors'
|
||||
|
||||
export enum PostImageRatio {
|
||||
PORTRAIT = 'portrait',
|
||||
|
@ -78,6 +79,7 @@ export type PostProps = CommonProps &
|
|||
React.HTMLAttributes<HTMLDivElement> & {
|
||||
appearance?: PostAppearanceProps
|
||||
data: PostDataProps
|
||||
isFeatured?: boolean
|
||||
}
|
||||
|
||||
export default function Post({
|
||||
|
@ -99,6 +101,7 @@ export default function Post({
|
|||
slug,
|
||||
tags = [],
|
||||
},
|
||||
isFeatured = false,
|
||||
...props
|
||||
}: PostProps) {
|
||||
const _date = useMemo(() => new Date(dateStr), [dateStr])
|
||||
|
@ -107,24 +110,28 @@ export default function Post({
|
|||
() => (
|
||||
<TitleLink href={`/article/${slug}`}>
|
||||
<CustomTypography
|
||||
variant={size === PostSize.SMALL ? 'h4' : 'h2'}
|
||||
variant={size === PostSize.SMALL ? 'h4' : 'h1'}
|
||||
genericFontFamily="serif"
|
||||
>
|
||||
{title}
|
||||
</CustomTypography>
|
||||
</TitleLink>
|
||||
),
|
||||
[title, size, slug],
|
||||
[title, size, slug, isFeatured],
|
||||
)
|
||||
|
||||
const _description = useMemo(
|
||||
() =>
|
||||
classType == PostClassType.ARTICLE && (
|
||||
<CustomTypography variant="body3" genericFontFamily="sans-serif">
|
||||
<Description
|
||||
variant={size === PostSize.SMALL ? 'body3' : 'h6'}
|
||||
genericFontFamily="sans-serif"
|
||||
isFeatured={isFeatured}
|
||||
>
|
||||
{description}
|
||||
</CustomTypography>
|
||||
</Description>
|
||||
),
|
||||
[classType, description],
|
||||
[classType, description, isFeatured],
|
||||
)
|
||||
|
||||
const _thumbnail = useMemo(() => {
|
||||
|
@ -152,7 +159,7 @@ export default function Post({
|
|||
if (postType === 'body')
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<HeaderContainer isFeatured={isFeatured}>
|
||||
<Row>
|
||||
<Typography variant="body3" genericFontFamily="sans-serif">
|
||||
{classType.toUpperCase()}
|
||||
|
@ -167,10 +174,10 @@ export default function Post({
|
|||
</Typography>
|
||||
</Row>
|
||||
{_title}
|
||||
</div>
|
||||
</HeaderContainer>
|
||||
</>
|
||||
)
|
||||
}, [postType, classType, _date, _title])
|
||||
}, [postType, classType, isFeatured, _date, _title])
|
||||
|
||||
return (
|
||||
<Container {...props}>
|
||||
|
@ -178,7 +185,12 @@ export default function Post({
|
|||
{_header}
|
||||
{postType === 'body' && _description}
|
||||
{classType === 'article' ? (
|
||||
<Authors mentions={mentions} email={false} />
|
||||
<Authors
|
||||
mentions={mentions}
|
||||
email={false}
|
||||
flexDirection={AuthorsDirection.ROW}
|
||||
gap={8}
|
||||
/>
|
||||
) : (
|
||||
<PodcastAuthor>
|
||||
<LogosCircleIcon color="primary" />
|
||||
|
@ -199,10 +211,6 @@ const Container = styled.div`
|
|||
gap: 16px;
|
||||
`
|
||||
|
||||
const Thumbnail = styled(Image)`
|
||||
object-fit: cover;
|
||||
`
|
||||
|
||||
const Row = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
@ -225,4 +233,13 @@ const PodcastAuthor = styled.div`
|
|||
|
||||
const TitleLink = styled(Link)`
|
||||
text-decoration: none;
|
||||
width: fit-content;
|
||||
`
|
||||
|
||||
const HeaderContainer = styled(CustomTypography)<{ isFeatured: boolean }>`
|
||||
margin-right: ${({ isFeatured }) => (isFeatured ? '178px' : '0px')};
|
||||
`
|
||||
|
||||
const Description = styled(CustomTypography)<{ isFeatured: boolean }>`
|
||||
margin-right: ${({ isFeatured }) => (isFeatured ? '178px' : '0px')};
|
||||
`
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
import Link from 'next/link'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Grid, GridItem } from '../Grid/Grid'
|
||||
import styled from '@emotion/styled'
|
||||
|
|
|
@ -264,6 +264,7 @@ const SearchBox = styled.div`
|
|||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 44px;
|
||||
`
|
||||
|
||||
const GlobalSearchTrigger = styled(Link)`
|
||||
|
|
|
@ -41,6 +41,7 @@ export function SearchbarContainer({ children, onUnfocus = nope }: Props) {
|
|||
const SearchBarWrapper = styled.div<Props>`
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
background: rgb(var(--lsd-surface-primary));
|
||||
border-bottom: 1px solid rgb(var(--lsd-border-primary));
|
||||
border-top: 1px solid rgb(var(--lsd-border-primary));
|
||||
|
@ -53,6 +54,7 @@ const SearchBarWrapper = styled.div<Props>`
|
|||
position: fixed;
|
||||
top: ${uiConfigs.navbarRenderedHeight - 1}px;
|
||||
z-index: 100;
|
||||
max-width: ${uiConfigs.maxContainerWidth + 40}px; // TBD
|
||||
max-width: ${uiConfigs.maxContainerWidth + 40}px;
|
||||
border-top: none;
|
||||
}
|
||||
`
|
||||
|
|
|
@ -36,7 +36,7 @@ const SectionContainer = styled.section`
|
|||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 1440px) {
|
||||
padding-inline: 16px;
|
||||
}
|
||||
`
|
||||
|
|
|
@ -70,7 +70,7 @@ const Container = styled.aside<{ dy: number; height: number }>`
|
|||
flex-direction: column;
|
||||
width: 162px;
|
||||
box-sizing: border-box;
|
||||
height: ${(p) => (p.height > 0 ? `${p.height}px` : 'fit-content')};
|
||||
/* height: ${(p) => (p.height > 0 ? `${p.height}px` : 'fit-content')}; */
|
||||
position: sticky;
|
||||
top: ${(p) => `${p.dy}px`};
|
||||
margin-left: 16px;
|
||||
|
|
|
@ -29,6 +29,7 @@ const Tags = ({ tags }: { tags: string[] }) => {
|
|||
const TagsContainer = styled.div`
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
export const uiConfigs = {
|
||||
navbarRenderedHeight: 45,
|
||||
postSectionMargin: 78,
|
||||
postSectionMargin: 108,
|
||||
postSectionMobileMargin: 78,
|
||||
maxContainerWidth: 1400,
|
||||
articleRenderedMT: 45 * 2,
|
||||
}
|
||||
|
|
|
@ -1,3 +1 @@
|
|||
.header > nav {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue