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}
/>