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

responsive things

Browse Source
This commit is contained in:
guamss 2026-09-09 17:09:57 +02:00
parent 816dd21291
commit a4b45feda0
3 changed files with 57 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/NavBar.astro
View File

@ -1,5 +1,9 @@
--- ---
import "../styles/navbar.css"; import "../styles/navbar.css";
const GITEA_URL = import.meta.env.GITEA_URL;
const GITEA_USER = import.meta.env.GITEA_USER;
const GITEA_REPO = import.meta.env.GITEA_REPO;
const GITEA_BRANCH = import.meta.env.GITEA_BRANCH;
--- ---
<header> <header>
@ -10,7 +14,7 @@ import "../styles/navbar.css";
<li> <li>
<a <a
target="_blank" target="_blank"
href="https://gitea.guams.fr/Guams/kolibri_blog/_upload/master/" href={`${GITEA_URL}/${GITEA_USER}/${GITEA_REPO}/_upload/${GITEA_BRANCH}/`}
>Créer un post</a >Créer un post</a
> >
</li> </li>
@ -22,6 +26,9 @@ import "../styles/navbar.css";
<div></div> <div></div>
</nav> </nav>
<div> <div>
<span> coucou !!</span> <span
>Ein Kolibri (KLBR) dient als Verstärker für ein Führungskommando Falke
(FKLR)</span
>
</div> </div>
</header> </header>

6
src/styles/navbar.css
View File

@ -146,6 +146,12 @@ header {
} }
} }
@media screen and (max-width: 1600px) {
header {
gap: 0;
}
}
@media screen and (max-width: 770px) { @media screen and (max-width: 770px) {
header { header {
> nav { > nav {

49
src/styles/post.css
View File

@ -3,19 +3,19 @@
main { main {
padding: 2rem; padding: 2rem;
> div { & > div {
text-align: center; text-align: center;
> h1 { & > h1 {
font-size: 56px; font-size: 56px;
font-weight: 400; font-weight: 400;
} }
> h2 { & > h2 {
font-weight: 400; font-weight: 400;
font-style: italic; font-style: italic;
} }
> img { & > img {
object-fit: cover; object-fit: cover;
border-radius: 8px; border-radius: 8px;
width: 100%; width: 100%;
@ -24,19 +24,54 @@ main {
} }
} }
> h1 { & > h1 {
font-size: 56px; font-size: 56px;
font-weight: 400; font-weight: 400;
} }
> p { & > p {
font-size: 19px; font-size: 19px;
word-break: break-word; word-break: break-word;
text-align: justify; text-align: justify;
text-justify: inter-word; text-justify: inter-word;
> img { & > img {
display: block; display: block;
margin: 1rem auto; margin: 1rem auto;
} }
} }
} }
@media screen and (max-width: 1000px) {
main {
padding: 1rem;
> p {
font-size: 16px;
}
> h1 {
font-size: 48px;
font-weight: 400;
}
}
}
@media screen and (max-width: 1200px) {
main {
& > div {
& > img {
object-fit: cover;
border-radius: 8px;
width: 100%;
height: 16rem;
width: 90%;
margin: 0.5rem;
}
}
& > p {
& > img {
height: auto;
width: 100%;
margin: 0;
}
}
}
}