landing page mobile update

src/components/Authors/Authors.tsx

@@ -25,7 +25,7 @@ const Authors = ({
         index < mentions.length - 1 ? (
           <>
             <Author key={mention.name} mention={mention} email={email} />
-            <Dot variant={'body2'}>.</Dot>
+            <Dot variant={'body2'}>•</Dot>
           </>
         ) : (
           <Author key={mention.name} mention={mention} email={email} />
@@ -43,20 +43,12 @@ const AuthorsContainer = styled.div<{
   flex-direction: ${({ flexDirection }) => flexDirection};
   gap: ${({ gap }) => gap}px;
   align-items: center;
-
-  // WIP
-  /* &:not(:last-child) {
-    &:after {
-      justify-content: center;
-      content: '•';
-      width: 12px;
-    }
-  } */
 `
 
 const Dot = styled(Typography)`
-  transform: translateY(1px);
-  font-size: 18px;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
 `
 
 export default Authors

src/components/Footer/Footer.tsx

@@ -118,7 +118,7 @@ export default function Footer() {
                     {title}:
                   </Typography>
                 </div>
-                <div>
+                <Row>
                   {links.map(({ label, href }, idx) => (
                     <Link
                       key={'second-group-link' + idx}
@@ -130,7 +130,7 @@ export default function Footer() {
                       {label}
                     </Link>
                   ))}
-                </div>
+                </Row>
               </LinkGroup>
             ))}
           </SecondLinksContainer>
@@ -146,7 +146,7 @@ export default function Footer() {
                     {title}:
                   </Typography>
                 </div>
-                <div>
+                <Row>
                   {links.map(({ label, href }, idx) => (
                     <Link
                       key={'third-group-link' + idx}
@@ -158,7 +158,7 @@ export default function Footer() {
                       {label}
                     </Link>
                   ))}
-                </div>
+                </Row>
               </LinkGroup>
             ))}
           </ThirdLinksContainer>
@@ -177,7 +177,7 @@ const Container = styled.div`
   display: flex;
   position: relative;
   flex-direction: column;
-  margin-top: 196px;
+  margin-top: 200px;
   padding: 16px;
   border-top: 1px solid rgb(var(--lsd-border-primary));
 `
@@ -188,16 +188,14 @@ const Section = styled.div`
   flex-wrap: wrap;
   width: 50%;
 
-  /* temporary breakpoint */
   @media (max-width: 768px) {
     width: 100%;
   }
 `
 
 const OrgInfo = styled(Section)`
-  /* temporary breakpoint */
   @media (max-width: 768px) {
-    margin-bottom: ${SECTION_MARGIN}px;
+    margin-bottom: 76px;
   }
 `
 
@@ -205,6 +203,7 @@ const Links = styled(Section)`
   display: flex;
   flex-direction: row;
   align-items: center;
+  gap: 8px;
 `
 
 const Link = styled(Typography)`
@@ -212,13 +211,18 @@ const Link = styled(Typography)`
   &:not(:last-child) {
     &:after {
       content: '•';
-      margin: 0 8px;
+      margin-left: 8px;
       text-decoration: none;
       display: inline-block;
     }
   }
 `
 
+const Row = styled.div`
+  display: flex;
+  gap: 8px;
+`
+
 const Wrapper = styled.div`
   display: flex;
   align-items: baseline;
@@ -241,6 +245,10 @@ const SecondLinksContainer = styled.div`
 const ThirdLinksContainer = styled.div`
   flex: 1;
   margin-bottom: ${SECTION_MARGIN}px;
+
+  @media (max-width: 768px) {
+    margin-bottom: 80px;
+  }
 `
 
 const LinkGroup = styled.div`
@@ -248,6 +256,10 @@ const LinkGroup = styled.div`
   flex-direction: column;
   margin-bottom: 34px;
   gap: 4px;
+
+  @media (max-width: 768px) {
+    margin-bottom: 24px;
+  }
 `
 
 const ScrollToTop = styled(Button)`

src/components/Post/Post.tsx

@@ -109,13 +109,13 @@ export default function Post({
   const _title = useMemo(
     () => (
       <TitleLink href={`/article/${slug}`}>
-        <CustomTypography
+        <Title
           variant={size === PostSize.SMALL ? 'h4' : 'h1'}
           genericFontFamily="serif"
           component="h2"
         >
           {title}
-        </CustomTypography>
+        </Title>
       </TitleLink>
     ),
     [title, size, slug, isFeatured],
@@ -125,7 +125,7 @@ export default function Post({
     () =>
       classType == PostClassType.ARTICLE && (
         <Description
-          variant={size === PostSize.SMALL ? 'body3' : 'h6'}
+          variant={size === PostSize.SMALL ? 'body2' : 'h6'}
           genericFontFamily="sans-serif"
           isFeatured={isFeatured}
         >
@@ -247,4 +247,15 @@ const Description = styled(CustomTypography)<{ isFeatured: boolean }>`
   @media (min-width: 768px) {
     margin-right: ${({ isFeatured }) => (isFeatured ? '178px' : '0px')};
   }
+  @media (max-width: 768px) {
+    font-size: 14px;
+    line-height: 20px;
+  }
+`
+
+const Title = styled(CustomTypography)`
+  @media (max-width: 768px) {
+    font-size: 28px;
+    line-height: 36px;
+  }
 `

src/components/PostList/PostList.tsx

@@ -44,7 +44,7 @@ export const PostsList = (props: Props) => {
 
   return (
     <div>
-      <Grid style={{ minHeight: '500px' }}>
+      <CustomGrid>
         {postsToShow.length > 0 ? (
           postsToShow.map((post, index) => (
             <GridItem
@@ -65,7 +65,7 @@ export const PostsList = (props: Props) => {
             <Typography variant="body1">No related articles found.</Typography>
           </GridItem>
         )}
-      </Grid>
+      </CustomGrid>
       {posts.length > pageSize && (
         <Button onClick={() => handleMoreOrLess()} size={'large'}>
           {page * pageSize < posts.length ? 'Load More' : 'Show Less'}
@@ -75,6 +75,13 @@ export const PostsList = (props: Props) => {
   )
 }
 
+const CustomGrid = styled(Grid)`
+  min-height: 500px;
+  @media (max-width: 768px) {
+    gap: 8px;
+  }
+`
+
 const PostWrapper = styled.div`
   margin-top: 16px;
   padding: 16px 0;