fix: layouting for blog posts

For better readability
This commit is contained in:
webfussel 2025-08-18 14:05:37 +02:00
parent d16d8a59d1
commit 2466e7dc89

View file

@ -1,6 +1,7 @@
.BlogArticle { .BlogArticle {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
gap: 2rem; gap: 2rem;
& .meta { & .meta {
@ -12,6 +13,7 @@
& .article-content { & .article-content {
background: var(--color-black); background: var(--color-black);
border-radius: 1rem; border-radius: 1rem;
max-width: 1000px;
} }
& .article-text { & .article-text {
@ -23,21 +25,25 @@
} }
h1 { h1 {
font-size: 2rem; font-size: 3rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
& small { & small {
font-size: 1.2rem; font-size: 1.5rem;
font-style: italic; font-style: italic;
} }
} }
h2 { h2 {
font-size: 1.5rem; font-size: 2rem;
font-weight: lighter; font-weight: lighter;
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 1rem; margin-bottom: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
border-top: 1px solid var(--color-white-transparent);
border-bottom: 1px solid var(--color-white-transparent);
} }
& .image { & .image {
@ -56,7 +62,9 @@
} }
} }
& ul, & ol,
& p { & p {
font-size: 1.2rem;
margin-bottom: .5rem; margin-bottom: .5rem;
} }
} }