Guams/kolibri_blog
Guams/kolibri_blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: CSS issues

Browse Source
This commit is contained in:
guamss 2026-09-12 22:20:46 +02:00
parent a43585ba27
commit 65685242e8
2 changed files with 81 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/posts/[post_id].astro
View File

@ -18,14 +18,16 @@ const { Content } = await render(post);
<Layout> <Layout>
<main> <main>
<div> <article class="post-container">
<h1>{post.data.title}</h1> <header class="post-header">
<h2>{post.data.tags}</h2> <h1>{post.data.title}</h1>
<img <h2>{post.data.tags}</h2>
src={post.data.illustration?.src} <img src={post.data.illustration?.src} alt={post.data.title} />
alt={post.data?.illustration?.src} </header>
/>
</div> <div class="post-content">
<Content /> <Content />
</div>
</article>
</main> </main>
</Layout> </Layout>

124
src/styles/post.css
View File

@ -1,72 +1,88 @@
@import "../styles/global.css"; @import "../styles/global.css";
main { main {
padding: 2rem; padding: 2rem 1rem;
display: flex;
justify-content: center;
}
& > div { .post-container {
text-align: center; width: 100%;
max-width: 800px;
background-color: var(--primary-light-background-color);
padding: 2.5rem;
border-radius: 12px;
box-sizing: border-box;
}
& > h1 { .post-header {
font-size: 56px; text-align: center;
font-weight: 400; margin-bottom: 3rem;
}
& > h2 {
font-weight: 400;
font-style: italic;
}
& > img {
object-fit: cover;
border-radius: 8px;
width: 100%;
height: 24rem;
margin: 4rem 0;
}
}
& > h1 { & > h1 {
font-size: 56px; font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 400; line-height: 1.15;
font-weight: 500;
margin: 0 0 0.5rem;
} }
& > p {
font-size: 19px; & > h2 {
word-break: break-word; font-size: 1.1rem;
font-weight: 400;
font-style: italic;
margin: 0 0 2rem;
color: #555;
}
& > img {
display: block;
width: 100%;
height: 24rem;
object-fit: cover;
border-radius: 8px;
margin: 0 auto;
}
}
.post-content {
font-size: 1.15rem;
line-height: 1.7;
color: #222;
& h1,
& h2,
& h3 {
margin-top: 2rem;
margin-bottom: 1rem;
line-height: 1.25;
}
& p {
margin-bottom: 1.5rem;
text-align: justify; text-align: justify;
text-justify: inter-word; text-justify: inter-word;
word-break: break-word;
}
& > img { & img {
display: block; display: block;
margin: 1rem auto; max-width: 100%;
height: auto; height: auto;
width: 100%; margin: 1.5rem auto;
margin: 0; border-radius: 6px;
}
} }
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 768px) {
main { .post-container {
padding: 1rem; padding: 1.25rem;
> p {
font-size: 16px;
}
> h1 {
font-size: 48px;
font-weight: 400;
}
} }
}
@media screen and (max-width: 1200px) { .post-header > img {
main { height: 16rem;
& > div { }
& > img {
object-fit: cover; .post-content {
border-radius: 8px; font-size: 1rem;
height: 16rem;
width: 90%;
margin: 0.5rem;
}
}
} }
} }