update css of landing page

src/components/Authors/Author.tsx

@@ -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

src/components/Authors/Authors.tsx

@@ -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

src/components/FeaturedPost/FeaturedPost.tsx

@@ -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>

src/components/FilterTags/FilterTags.tsx

@@ -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;
+  }
 `

src/components/Footer/Footer.tsx

@@ -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)`

src/components/Hero/Hero.tsx

@@ -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;
+  }
 `

src/components/Main/Main.tsx

@@ -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

src/components/Navbar/Navbar.tsx

@@ -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)`

src/components/Navbar/NavbarFiller.tsx

@@ -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;
+  }
 `

src/components/Post/Post.tsx

@@ -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')};
 `

src/components/PostList/PostList.tsx

@@ -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'

src/components/Searchbar/Searchbar.tsx

@@ -264,6 +264,7 @@ const SearchBox = styled.div`
   align-items: center;
   width: 100%;
   height: 100%;
+  min-height: 44px;
 `
 
 const GlobalSearchTrigger = styled(Link)`

src/components/Searchbar/SearchbarContainer.tsx

@@ -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;
   }
 `

src/components/Section/Section.tsx

@@ -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;
   }
 `

src/components/TableOfContents/TableOfContents.tsx

@@ -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;

src/components/Tags/Tags.tsx

@@ -29,6 +29,7 @@ const Tags = ({ tags }: { tags: string[] }) => {
 const TagsContainer = styled.div`
   display: flex;
   gap: 8px;
+  flex-wrap: wrap;
 
   a {
     text-decoration: none;

src/configs/ui.configs.ts

@@ -1,6 +1,7 @@
 export const uiConfigs = {
   navbarRenderedHeight: 45,
-  postSectionMargin: 78,
+  postSectionMargin: 108,
+  postSectionMobileMargin: 78,
   maxContainerWidth: 1400,
   articleRenderedMT: 45 * 2,
 }

src/layouts/SearchLayout/Search.layout.module.css

@@ -1,3 +1 @@
-.header > nav {
-  border-bottom: none;
-}
+