LogalDeveloper/owncast
LogalDeveloper/owncast
0
Fork 0
Code

Reduce the custom content width and center it. For #1860

Browse Source
This commit is contained in:
Gabe Kangas 2022-08-14 18:33:04 -07:00
parent c9321b2dda
commit 44dde66b08
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
2 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/components/ui/CustomPageContent/CustomPageContent.module.scss
View File

@ -1,12 +1,25 @@
@import 'styles/mixins.scss';
.pageContentContainer {
@include flexCenter;
}
.customPageContent {
font-size: 16px;
line-height: 1.5em;
margin: 0;
padding: 0;
width: 80%;
max-width: 1200px;
color: var(--theme-text);
background-color: var(--theme-background-secondary);
padding: 0.175em 1em;
padding: 1em;
// Allow the content to fill the width on narrow screens.
@media only screen and (max-width: 768px) {
width: 100%;
}
hr {
margin: 1.35em 0;

6
web/components/ui/CustomPageContent/CustomPageContent.tsx
View File

@ -7,5 +7,9 @@ interface Props {
export default function CustomPageContent(props: Props) {
const { content } = props;
// eslint-disable-next-line react/no-danger
return <div className={s.customPageContent} dangerouslySetInnerHTML={{ __html: content }} />;
return (
<div className={s.pageContentContainer}>
<div className={s.customPageContent} dangerouslySetInnerHTML={{ __html: content }} />
</div>
);
}