xwx.moe/el.xwx.moe
xwx.moe/ el.xwx.moe
1
0
Disbranĉigi 0
Fontkodo Issues Tirpetoj Actions Packages Projects Eldonoj Wiki Activity

readable format styling

This commit is contained in:
daniel31x13 2023-10-31 18:02:41 -04:00
parent 56a281ae3d
commit b1c6a3faf1
2 changed files with 64 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/links/[id].tsx
View File

@ -247,7 +247,7 @@ export default function Index() {
<div className="flex flex-col gap-5 h-full">
{link?.readabilityPath?.startsWith("archives") ? (
<div
className="line-break px-3"
className="line-break px-3 reader-view"
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(linkContent?.content || "") || "",
}}

64
styles/globals.css
View File

@ -184,5 +184,67 @@
}
.line-break * {
overflow-x: auto;
overflow-y: hidden;
}
/* Reader view custom stylings */
.reader-view {
line-height: 3rem;
}
.reader-view h1 {
font-size: 2.2rem;
}
.reader-view h2 {
line-height: 4rem;
font-size: 1.9rem;
}
.reader-view h3 {
line-height: 3.5rem;
font-size: 1.6rem;
}
.reader-view h4 {
font-size: 1.3rem;
}
.reader-view h5 {
font-size: 1.1rem;
}
.reader-view li {
list-style: inside;
margin-left: 2rem;
}
.reader-view a {
text-decoration: underline;
}
.reader-view b {
font-weight: bolder;
}
.reader-view pre,
.reader-view code {
font-family: "Courier New", Courier, monospace;
}
.reader-view blockquote {
opacity: 50%;
padding-left: 1.5rem;
border-left: solid 3px;
}
.reader-view img {
margin: auto;
border-radius: 10px;
}
.reader-view pre {
padding: 1rem;
line-height: normal;
}
.reader-view code {
padding: 0.15rem 0.4rem 0.15rem 0.4rem;
}
[class="dark"] .reader-view code,
[class="dark"] .reader-view pre {
background-color: rgb(49, 49, 49);
border-radius: 8px;
}
[class="light"] .reader-view code,
[class="light"] .reader-view pre {
background-color: rgb(230, 230, 230);
border-radius: 8px;
}