diff --git a/packages/web/components/elements/StyledText.tsx b/packages/web/components/elements/StyledText.tsx index 84d74de37..0d480266b 100644 --- a/packages/web/components/elements/StyledText.tsx +++ b/packages/web/components/elements/StyledText.tsx @@ -60,9 +60,9 @@ const textVariants = { }, articleTitle: { fontWeight: 'bold', - fontSize: '32px', - '@md': { - fontSize: '47px', + fontSize: '35px', + '@mdDown': { + fontSize: '25px', }, margin: 0, }, diff --git a/packages/web/components/patterns/ArticleSubtitle.tsx b/packages/web/components/patterns/ArticleSubtitle.tsx index afc6c949f..dbda5b69c 100644 --- a/packages/web/components/patterns/ArticleSubtitle.tsx +++ b/packages/web/components/patterns/ArticleSubtitle.tsx @@ -40,14 +40,28 @@ export function ArticleSubtitle(props: ArticleSubtitleProps): JSX.Element { } type ReaderSavedInfoProps = { + wordsCount?: number rawDisplayDate: string } export function ReaderSavedInfo(props: ReaderSavedInfoProps): JSX.Element { return ( - + {formattedLongDate(props.rawDisplayDate)}{' '} + {props.wordsCount ?? 0 > 0 + ? ` • ${Math.max( + 1, + Math.round((props.wordsCount ?? 0) / 235) + )} min read` + : null} ) diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx index d258836c3..2155c136e 100644 --- a/packages/web/components/templates/article/ArticleContainer.tsx +++ b/packages/web/components/templates/article/ArticleContainer.tsx @@ -118,21 +118,16 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element { props.highlightOnRelease ) // iOS app embed can overide the original margin and line height - const [maxWidthPercentageOverride, setMaxWidthPercentageOverride] = useState< - number | null - >(null) - const [lineHeightOverride, setLineHeightOverride] = useState( - null - ) - const [fontFamilyOverride, setFontFamilyOverride] = useState( - null - ) - const [highContrastTextOverride, setHighContrastTextOverride] = useState< - boolean | undefined - >(undefined) - const [justifyTextOverride, setJustifyTextOverride] = useState< - boolean | undefined - >(undefined) + const [maxWidthPercentageOverride, setMaxWidthPercentageOverride] = + useState(null) + const [lineHeightOverride, setLineHeightOverride] = + useState(null) + const [fontFamilyOverride, setFontFamilyOverride] = + useState(null) + const [highContrastTextOverride, setHighContrastTextOverride] = + useState(undefined) + const [justifyTextOverride, setJustifyTextOverride] = + useState(undefined) const highlightHref = useRef( window.location.hash ? window.location.hash.split('#')[1] : null ) @@ -403,6 +398,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element { rawDisplayDate={ props.article.publishedAt ?? props.article.createdAt } + wordsCount={props.article.wordsCount} />