responsive things

src/components/NavBar.astro

@@ -1,5 +1,9 @@
 ---
 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>
@@ -10,7 +14,7 @@ import "../styles/navbar.css";
         <li>
           <a
             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
           >
         </li>
@@ -22,6 +26,9 @@ import "../styles/navbar.css";
     <div></div>
   </nav>
   <div>
-    <span> coucou !!</span>
+    <span
+      >Ein Kolibri (KLBR) dient als Verstärker für ein Führungskommando Falke
+      (FKLR)</span
+    >
   </div>
 </header>

src/styles/navbar.css

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

src/styles/post.css

@@ -3,19 +3,19 @@
 main {
   padding: 2rem;
 
-  > div {
+  & > div {
     text-align: center;
 
-    > h1 {
+    & > h1 {
       font-size: 56px;
       font-weight: 400;
     }
-    > h2 {
+    & > h2 {
       font-weight: 400;
       font-style: italic;
     }
 
-    > img {
+    & > img {
       object-fit: cover;
       border-radius: 8px;
       width: 100%;
@@ -24,19 +24,54 @@ main {
     }
   }
 
-  > h1 {
+  & > h1 {
     font-size: 56px;
     font-weight: 400;
   }
-  > p {
+  & > p {
     font-size: 19px;
     word-break: break-word;
     text-align: justify;
     text-justify: inter-word;
 
-    > img {
+    & > img {
       display: block;
       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;
+      }
+    }
+  }
+}