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

More consistent header font and colors

Browse Source
This commit is contained in:
Jackson Harper
2023-02-07 15:41:22 +08:00
parent 319e31edfc
commit bfe2c7db27
5 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apple/OmnivoreKit/Sources/Views/Resources/bundle.js
View File

File diff suppressed because one or more lines are too long

8
packages/web/components/elements/StyledText.tsx
View File

@ -58,6 +58,14 @@ const textVariants = {
fontSize: '24px',
fontWeight: '500',
},
articleTitle: {
fontWeight: 'bold',
fontSize: '32px',
'@md': {
fontSize: '47px',
},
margin: 0,
},
boldHeadline: {
fontWeight: 'bold',
fontSize: '$4',

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

@ -315,7 +315,6 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
'--hr-margin': '1em',
'--font-color': styles.readerFontColor,
'--table-header-color': styles.readerTableHeaderColor,
'--headers-color': styles.readerHeadersColor,
'@sm': {
'--blockquote-padding': '1em 2em',
'--blockquote-icon-font-size': '1.7rem',
@ -332,7 +331,7 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element {
>
<VStack alignment="start" distribution="start">
<StyledText
style="boldHeadline"
style="articleTitle"
data-testid="article-headline"
css={{
fontFamily: styles.fontFamily,

9
packages/web/components/templates/article/SkeletonArticleContainer.tsx
View File

@ -10,7 +10,9 @@ type SkeletonArticleContainerProps = {
children?: React.ReactNode
}
export function SkeletonArticleContainer(props: SkeletonArticleContainerProps): JSX.Element {
export function SkeletonArticleContainer(
props: SkeletonArticleContainerProps
): JSX.Element {
const styles = {
margin: props.margin ?? 360,
fontSize: props.fontSize ?? 20,
@ -40,7 +42,6 @@ export function SkeletonArticleContainer(props: SkeletonArticleContainerProps):
'--hr-margin': '1em',
'--font-color': styles.readerFontColor,
'--table-header-color': styles.readerTableHeaderColor,
'--headers-color': styles.readerHeadersColor,
'@sm': {
'--blockquote-padding': '1em 2em',
'--blockquote-icon-font-size': '1.7rem',
@ -49,11 +50,11 @@ export function SkeletonArticleContainer(props: SkeletonArticleContainerProps):
margin: `30px 0px`,
},
'@md': {
maxWidth: 1024 - (styles.margin),
maxWidth: 1024 - styles.margin,
},
'@lg': {
margin: `30px 0`,
maxWidth: 1024 - (styles.margin),
maxWidth: 1024 - styles.margin,
},
}}
>

6
packages/web/styles/articleInnerStyling.css
View File

@ -25,6 +25,10 @@
cursor: pointer;
}
.article-inner-css {
font-family: var(--text-font-family);
}
.article-inner-css .highlight_with_note .highlight_note_button {
display: unset !important;
margin: 0px !important;
@ -55,7 +59,6 @@ on smaller screens we display the note icon
margin-inline-end: 0px;
line-height: var(--line-height);
font-size: var(--text-font-size);
color: var(--headers-color);
font-weight: bold;
}
.article-inner-css h1 {
@ -86,7 +89,6 @@ on smaller screens we display the note icon
}
.article-inner-css p {
font-family: var(--text-font-family);
font-style: normal;
font-weight: normal;