aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-10 18:34:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add comprehensive headline styling with Tailwind typography

Browse Source 
- Add proper h1-h6 styling for both markdown and HTML content
- Use Tailwind font sizes: h1 (text-4xl), h2 (text-3xl), h3 (text-2xl), h4 (text-xl), h5 (text-lg), h6 (text-base)
- Apply appropriate font weights: h1 (700), h2-h6 (600)
- Use zinc-100 for h1-h3, zinc-200 for h4-h6 for proper hierarchy
- Add proper top and bottom margins for better spacing
- Set line heights for optimal readability
This commit is contained in:
Gigi
2025-10-13 23:35:38 +02:00
parent 6277824b32
commit 823927525f
1 changed files with 49 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/styles/components/reader.css
View File

@@ -42,7 +42,55 @@
.reader center, .reader [align="center"] { text-align: left !important; }
/* Tame images from external content */
.reader .reader-html img, .reader .reader-markdown img { max-width: 100%; max-height: 70vh; height: auto; width: auto; display: block; margin: 0.75rem 0; border-radius: 6px; }
.reader-markdown h1, .reader-markdown h2, .reader-markdown h3, .reader-markdown h4 { margin-top: 1.2rem; }
/* Headlines with Tailwind typography */
.reader-markdown h1, .reader-html h1 {
font-size: 2.25rem; /* text-4xl */
font-weight: 700;
line-height: 1.2;
margin-top: 2rem;
margin-bottom: 1rem;
color: rgb(244 244 245); /* zinc-100 */
}
.reader-markdown h2, .reader-html h2 {
font-size: 1.875rem; /* text-3xl */
font-weight: 600;
line-height: 1.3;
margin-top: 1.75rem;
margin-bottom: 0.875rem;
color: rgb(244 244 245); /* zinc-100 */
}
.reader-markdown h3, .reader-html h3 {
font-size: 1.5rem; /* text-2xl */
font-weight: 600;
line-height: 1.4;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
color: rgb(244 244 245); /* zinc-100 */
}
.reader-markdown h4, .reader-html h4 {
font-size: 1.25rem; /* text-xl */
font-weight: 600;
line-height: 1.4;
margin-top: 1.25rem;
margin-bottom: 0.625rem;
color: rgb(228 228 231); /* zinc-200 */
}
.reader-markdown h5, .reader-html h5 {
font-size: 1.125rem; /* text-lg */
font-weight: 600;
line-height: 1.4;
margin-top: 1rem;
margin-bottom: 0.5rem;
color: rgb(228 228 231); /* zinc-200 */
}
.reader-markdown h6, .reader-html h6 {
font-size: 1rem; /* text-base */
font-weight: 600;
line-height: 1.4;
margin-top: 1rem;
margin-bottom: 0.5rem;
color: rgb(228 228 231); /* zinc-200 */
}
.reader-markdown p { margin: 0.5rem 0; }
.reader-html p, .reader-html div, .reader-html span, .reader-html li, .reader-html td, .reader-html th { font-size: 1em !important; }
.reader-markdown blockquote, .reader-html blockquote {