Benature/omnivore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Control article margins on small viewports

Browse Source
This commit is contained in:
Karl Prieb
2023-07-25 16:01:59 -03:00
parent 47f1cec070
commit 73a3cb3908
1 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/web/components/templates/article/ArticleContainer.tsx
View File

@ -344,6 +344,13 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
readerHeadersColor: theme.colors.readerFont.toString(),
}
const maxWidthStyles = {
default: styles.maxWidthPercentage
? `${styles.maxWidthPercentage}%`
: 1024 - styles.margin,
small: styles.maxWidthPercentage ? `${styles.maxWidthPercentage}%` : `${120 - Math.round((styles.margin * 10) / 100)}%`,
}
const recommendationsWithNotes = useMemo(() => {
return (
props.article.recommendations?.filter((recommendation) => {
@ -357,10 +364,9 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
<Box
id="article-container"
css={{
padding: '30px',
paddingTop: '30px',
padding: 30,
minHeight: '100vh',
maxWidth: `${styles.maxWidthPercentage ?? 100}%`,
maxWidth: maxWidthStyles.default,
background: theme.colors.readerBg.toString(),
'--text-align':
justifyTextOverride != undefined
@ -380,15 +386,10 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
'--blockquote-icon-font-size': '1.7rem',
'--figure-margin': '2.6875rem auto',
'--hr-margin': '2em',
margin: `0px 0px`,
},
'@md': {
maxWidth: styles.maxWidthPercentage
? `${styles.maxWidthPercentage}%`
: 1024 - styles.margin,
},
'@mdDown': {
padding: '15px',
maxWidth: maxWidthStyles.small,
padding: 15,
},
}}
>