style: update lsd font and misc. styles

acid-info · Jun 15, 2024 · f235eac · f235eac
1 parent 541a9b9
commit f235eac
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 17 deletions.
diff --git a/src/components/Article/Article.Heading.tsx b/src/components/Article/Article.Heading.tsx
@@ -62,7 +62,7 @@ export const ArticleHeading = ({
 
 const Headline = styled(Typography)`
   white-space: pre-wrap;
-  margin-top: 16px;
+  margin-top: 24px;
 
   ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} {
     &.title {

diff --git a/src/components/Article/Article.ImageBlockWrapper.tsx b/src/components/Article/Article.ImageBlockWrapper.tsx
@@ -20,7 +20,7 @@ export const ArticleImageBlockWrapper = ({ image, order }: Props) => {
 }
 
 const Container = styled.figure`
-  margin: 32px 0 32px 0;
+  margin: 40px 0 40px 0;
   padding: 0;
   display: flex;
   flex-direction: column;

diff --git a/src/components/Article/Header/Article.Header.tsx b/src/components/Article/Header/Article.Header.tsx
@@ -52,13 +52,15 @@ const ArticleHeader = ({
           {subtitle}
         </ArticleSubtitle>
       )}
+      <AuthorsContainer>
+        <Authors authors={authors} />
+      </AuthorsContainer>
+
       <TagsAndSocial
         tags={tags.map((tag) => tag.name)}
         className={'articleTags'}
       />
-      <AuthorsContainer>
-        <Authors authors={authors} />
-      </AuthorsContainer>
+
       {coverImage && (
         <ArticleImageBlockWrapper
           image={coverImage}
@@ -73,6 +75,8 @@ const ArticleHeader = ({
 }
 
 const ArticleHeaderContainer = styled.header`
+  margin-bottom: 24px;
+
   .mobileSummary {
     display: none;
   }
@@ -123,7 +127,7 @@ const ArticleSubtitle = styled(CustomTypography)`
 
 const AuthorsContainer = styled.div`
   //margin-block: 24px;
-  margin-top: 24px;
+  margin-top: 16px;
   margin-bottom: 32px;
 
   ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} {

diff --git a/src/components/Article/Header/Article.Summary.tsx b/src/components/Article/Header/Article.Summary.tsx
@@ -13,7 +13,7 @@ const ArticleSummary = ({ summary, className, showLabel }: Props) => {
     <ArticleSummaryContainer className={className}>
       {showLabel && <Typography variant="body3">summary</Typography>}
       <SummaryParagraph
-        variant="h6"
+        variant="h4"
         component={'div'}
         dangerouslySetInnerHTML={{
           __html: removeDynamicSection(summary),

diff --git a/src/components/JoinDiscordCard/JoinDiscordCard.tsx b/src/components/JoinDiscordCard/JoinDiscordCard.tsx
@@ -14,7 +14,7 @@ export const JoinDiscordCard: FC<JoinDiscordCardProps> = ({
 }) => {
   return (
     <JoinDiscordCardContainer {...props}>
-      <Typography variant="body1">Join the discussion</Typography>
+      <Typography variant="h3">Join the discussion</Typography>
       <Link
         href={discordHref}
         style={{

diff --git a/src/components/Podcasts/PodcastShowCard.tsx b/src/components/Podcasts/PodcastShowCard.tsx
@@ -28,7 +28,9 @@ export default function PodcastShowCard({
         height={show.logo.height}
       />
       <ShowData>
-        <Title variant="h3">{show.title}</Title>
+        <Title variant="h2" genericFontFamily="serif">
+          {show.title}
+        </Title>
         <PodcastHost show={show} />
         <Description
           variant="body2"

diff --git a/src/components/PostCard/PostCard.tsx b/src/components/PostCard/PostCard.tsx
@@ -188,7 +188,7 @@ PostCard.styles = {
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
-      max-height: calc(3 * var(--lsd-h5-lineHeight));
+      max-height: calc(3 * var(--lsd-h4-lineHeight));
     }
 
     .post-card__subtitle {

diff --git a/src/containers/HomePage/HomePage.tsx b/src/containers/HomePage/HomePage.tsx
@@ -159,7 +159,7 @@ export const HomePage: React.FC<HomePageProps> = ({
 
         <PodcastShowsPreview data={{ shows }} />
 
-        <BrowseAll title="Browser all" size="large">
+        <BrowseAll title="Browse all" size="large">
           <TagsTitle>
             <Typography component="h2" variant="body1">
               Tags
@@ -340,6 +340,11 @@ const FeaturedFirst = styled.div`
       margin-top: var(--lsd-spacing-32) !important;
     }
 
+    .post-card__title h3 {
+      font-size: var(--lsd-h2-fontSize) !important;
+      line-height: var(--lsd-h2-lineHeight) !important;
+    }
+
     .post-card__subtitle {
       margin-top: var(--lsd-spacing-16) !important;
     }
@@ -354,9 +359,8 @@ const FeaturedSecond = styled.div`
   }
 
   .post-card__title-text {
-    font-size: var(--lsd-h5-fontSize) !important;
-    font-weight: var(--lsd-h5-fontWeight) !important;
-    line-height: var(--lsd-h5-lineHeight) !important;
+    font-size: var(--lsd-h4-fontSize) !important;
+    line-height: var(--lsd-h4-lineHeight) !important;
   }
 
   .post-card__label {
@@ -365,7 +369,6 @@ const FeaturedSecond = styled.div`
 
   .post-card__label * {
     font-size: var(--lsd-subtitle4-fontSize) !important;
-    font-weight: var(--lsd-subtitle4-fontWeight) !important;
     line-height: var(--lsd-subtitle4-lineHeight) !important;
   }
 

diff --git a/src/containers/PodcastShowsPreview/PodcastShowsPreview.tsx b/src/containers/PodcastShowsPreview/PodcastShowsPreview.tsx
@@ -250,8 +250,8 @@ const Root = styled('div')`
 
   ${(props) => lsdUtils.breakpoint(props.theme, 'xs', 'down')} {
     .post-card__title-text {
-      font-size: var(--lsd-h5-fontSize) !important;
-      line-height: var(--lsd-h5-lineHeight) !important;
+      font-size: var(--lsd-h4-fontSize) !important;
+      line-height: var(--lsd-h4-lineHeight) !important;
     }
   }
 `
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -65,6 +65,15 @@ export default function App({ Component, pageProps }: AppLayoutProps) {
           :root {
             --lpe-nav-rendered-height: ${uiConfigs.navbarRenderedHeight}px;
             --lpe-article-rendered-margin-top: ${uiConfigs.articleRenderedMT}px;
+
+            --lsd-h1-fontSize: 44px;
+            --lsd-h1-lineHeight: 54px;
+            --lsd-h2-fontSize: 36px;
+            --lsd-h2-lineHeight: 48px;
+            --lsd-h3-fontSize: 28px;
+            --lsd-h3-lineHeight: 42px;
+            --lsd-h4-fontSize: 20px;
+            --lsd-h4-lineHeight: 30px;
           }
 
           a,
@@ -114,6 +123,10 @@ export default function App({ Component, pageProps }: AppLayoutProps) {
           .lsd-dropdown-item__label {
             text-transform: capitalize;
           }
+
+          .lsd-quote {
+            margin-block: 8px;
+          }
         `}
       />
       <QueryClientProvider client={queryClient}>