diff --git a/src/components/Blog/BlogPostThumbnail.tsx b/src/components/Blog/BlogPostThumbnail.tsx index d9b9fde5..55df4b43 100644 --- a/src/components/Blog/BlogPostThumbnail.tsx +++ b/src/components/Blog/BlogPostThumbnail.tsx @@ -7,6 +7,7 @@ import { BlogLink } from '~/constant/blog'; import { defaultFadeInVariants } from '~/constant/motion'; import { colors } from '~/styles/colors'; import { mediaQuery } from '~/styles/media'; +import { theme } from '~/styles/theme'; type ThumbnailProps = { title: string; @@ -55,7 +56,7 @@ const articleCss = css` width: 100%; height: 208px; min-width: 160px; - padding: 18px; + padding: 24px; overflow: hidden; display: flex; border-radius: 12px; @@ -64,16 +65,11 @@ const articleCss = css` background-color: black; ${mediaQuery('tablet')} { - padding: 16px; } ${mediaQuery('mobile')} { - padding: 14px; height: 180px; max-width: 460px; } - @media (max-width: 400px) { - padding: 10px; - } &:hover { cursor: pointer; } @@ -125,25 +121,17 @@ const linkCss = (theme: Theme) => css` `; const titleCss = css` + ${theme.typosV2.pretendard.semibold20}; position: relative; - font-weight: 500; - font-size: 1.25rem; - line-height: 30px; - color: ${colors.white}; + color: ${theme.colors.white}; z-index: 10; white-space: pre-line; - - ${mediaQuery('mobile')} { - font-size: 1rem; - } `; const dateCss = css` + ${theme.typosV2.pretendard.regular16} position: relative; - font-weight: 500; - font-size: 1rem; - line-height: 22px; - color: ${colors.gray}; + color: ${theme.colors.grey['100']}; z-index: 10; ${mediaQuery('mobile')} { diff --git a/src/features/Blog/BlogContentSection.tsx b/src/features/Blog/BlogContentSection.tsx index a4dd1b37..2e7418e7 100644 --- a/src/features/Blog/BlogContentSection.tsx +++ b/src/features/Blog/BlogContentSection.tsx @@ -40,24 +40,29 @@ const sectionCss = css` flex-direction: column; align-items: center; background-color: white; - padding: 120px 0; + padding: 100px 0; + gap: 80px; ${mediaQuery('tablet')} { - padding: 80px 32px; + padding: 100px 48px; } ${mediaQuery('mobile')} { - padding: 80px 16px; + padding: 100px 20px; + gap: 50px; } `; const titleCss = (theme: Theme) => css` - ${theme.typosV2.pretendard.semibold20} + ${theme.typosV2.pretendard.bold32}; + + ${mediaQuery('mobile')} { + ${theme.typosV2.pretendard.bold28} + } `; const blogContainerCss = css` width: 100%; max-width: 960px; - margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); diff --git a/src/features/Blog/BlogSubscribeSection.tsx b/src/features/Blog/BlogSubscribeSection.tsx index 7a167cb7..ea07327e 100644 --- a/src/features/Blog/BlogSubscribeSection.tsx +++ b/src/features/Blog/BlogSubscribeSection.tsx @@ -34,7 +34,7 @@ const containerCss = (theme: Theme) => css` background-color: ${theme.colors.white}; ${mediaQuery('mobile')} { - padding: 80px 16px; + padding: 80px 20px; } `; diff --git a/src/styles/typo.ts b/src/styles/typo.ts index 063e1223..0b089a51 100644 --- a/src/styles/typo.ts +++ b/src/styles/typo.ts @@ -307,7 +307,7 @@ export const typosV2 = { font-style: normal; font-weight: 400; line-height: ${pxToRem(24)}; - letter-spacing: -0.05em; + letter-spacing: ${pxToRem(-0.64)}; `, regular14: css` font-size: ${pxToRem(14)};