fix mobile layout

Author: dennisklappe

src/layouts/BaseLayout.astro

@@ -54,6 +54,10 @@ const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL :
               <ul class="menu__dropdown">
                 <li><a href={`${base}about/`}>About</a></li>
                 <li><a href={`${base}posts/showcase/`}>Showcase</a></li>
+                <li><a href={`${base}posts/`}>Posts</a></li>
+                <li><a href={`${base}tags/`}>Tags</a></li>
+                <li><a href={`${base}posts/rich-content/`}>Rich Content</a></li>
+                <li><a href={`${base}posts/code-blocks-examples/`}>Code Examples</a></li>
               </ul>
             </li>
           </ul>
@@ -87,7 +91,11 @@ const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL :
       <footer class="footer">
         <div class="footer__inner">
           <div class="copyright">
-            <span>© 2025 Powered by <a href="https://astro.build">Astro</a> :: Theme made by <a href="https://github.com/panr/hugo-theme-terminal">panr</a> :: Ported by <a href="https://github.com/dennisklappe">Dennis Klappe</a></span>
+            <span>© 2025 Powered by <a href="https://astro.build">Astro</a></span>
+            <span class="separator">::</span>
+            <span>Theme made by <a href="https://github.com/panr/hugo-theme-terminal" target="_blank">panr</a></span>
+            <span class="separator">::</span>
+            <span>Ported by <a href="https://github.com/dennisklappe">Dennis Klappe</a></span>
           </div>
         </div>
       </footer>

src/styles/footer.css

@@ -38,9 +38,52 @@
   white-space: nowrap;
 }
 
+.footer .copyright span:not(:last-child) {
+  margin-right: 5px;
+}
+
 /* Responsive */
 @media (max-width: 900px) {
   .footer__inner {
     flex-direction: column;
   }
+}
+
+@media (max-width: 684px) {
+  .footer {
+    padding: 20px 0;
+  }
+  
+  .footer__inner {
+    padding: 0 10px;
+  }
+  
+  .copyright {
+    flex-wrap: wrap;
+    text-align: center;
+    gap: 5px;
+  }
+  
+  .copyright span {
+    font-size: 14px;
+    line-height: 1.6;
+    white-space: normal;
+  }
+  
+  /* Hide separators on mobile for cleaner layout */
+  .copyright .separator {
+    display: none;
+  }
+  
+  /* Each text span on its own line on mobile */
+  .copyright span:not(.separator) {
+    display: block;
+    width: 100%;
+  }
+  
+  /* Make links more touch-friendly on mobile */
+  .footer a {
+    padding: 2px 4px;
+    display: inline-block;
+  }
 }

src/styles/header.css

@@ -45,15 +45,22 @@
 /* Responsive */
 @media (max-width: 684px) {
   .header__inner {
-    flex-direction: column;
-    align-items: flex-start;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
   }
 
   .header__logo {
-    margin-bottom: 10px;
+    margin-bottom: 0;
+    flex: 1;
   }
 
   .header__logo::after {
-    display: none;
+    display: block;
+    width: auto;
+    flex: 1;
+    margin-left: 10px;
+    margin-right: 10px;
   }
 }

src/styles/main.css

@@ -105,6 +105,10 @@ article h1::after {
   .container {
     padding: 20px;
   }
+  
+  .content {
+    margin-top: 20px;
+  }
 }
 
 /* Print styles */

src/styles/menu.css

@@ -95,12 +95,13 @@
   list-style: none;
   margin: 0;
   padding: 0;
+  flex: 0 0 auto;
 }
 
 .menu--mobile .menu__trigger {
   color: var(--accent);
   border: 2px solid;
-  margin-left: 10px;
+  margin-left: 0;
   height: 100%;
   padding: 3px 8px;
   margin-bottom: 0 !important;
@@ -133,6 +134,8 @@
   .menu--mobile .menu__dropdown {
     left: auto;
     right: 0;
+    top: 100%;
+    margin-top: 5px;
   }
 
   .menu--language-selector .menu__dropdown {