Stable Website after Landingpage Creation

2026-03-22 22:18:19 +01:00
parent 9049e7cc58
commit 1a4c20532e
4 changed files with 109 additions and 6 deletions
@@ -1022,3 +1022,108 @@ img, picture { display: block; max-width: 100%; height: auto; }
  background: var(--land-chip-border);
  color: var(--land-text);
 }
+
+/* ══════════════════════════════════════════════════════════════════
+   MOBILE IMPROVEMENTS
+   ══════════════════════════════════════════════════════════════════ */
+
+@media (max-width: 900px) {
+  /* More padding around the whole site content */
+  #recipes-start {
+    padding: 0 6px 40px;
+  }
+
+  /* Header more compact */
+  .site-header {
+    margin: 12px 8px;
+    padding: 10px 14px;
+  }
+
+  /* Coming strip full width */
+  .coming-strip {
+    margin: 10px 0;
+  }
+
+  /* Hero section stacks cleanly */
+  .hero {
+    margin: 16px 0 32px;
+    gap: 14px;
+  }
+
+  /* Featured card image not too tall */
+  .hero-card img {
+    max-height: 200px;
+    object-fit: cover;
+    object-position: center;
+  }
+
+  /* Recipe grid single column with less gap */
+  .grid {
+    gap: 12px;
+  }
+
+  /* Card images proportional */
+  .card__image img {
+    max-height: 200px;
+    object-fit: cover;
+    object-position: center;
+    aspect-ratio: 4/3;
+  }
+
+  /* Section headers compact */
+  .section-header {
+    margin-bottom: 8px;
+  }
+
+  /* Landing chips hidden on very small screens */
+  .landing__chips {
+    display: none;
+  }
+
+  /* Landing headline smaller */
+  .landing__headline {
+    font-size: clamp(2rem, 10vw, 3.5rem);
+  }
+
+  /* Landing CTA full width */
+  .landing__cta {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  #recipes-start {
+    padding: 0 4px 32px;
+  }
+
+  .site-header {
+    margin: 8px 4px;
+    border-radius: 12px;
+  }
+
+  .coming-strip__row {
+    grid-auto-columns: 110px;
+  }
+
+  .coming-chip__image img {
+    aspect-ratio: 1/1;
+  }
+
+  /* Recipe body panels stack */
+  .recipe__body {
+    grid-template-columns: 1fr;
+    padding: 12px;
+    gap: 10px;
+  }
+
+  .recipe__hero img {
+    max-height: 240px;
+    object-fit: cover;
+  }
+
+  /* Feature cards single column */
+  .feature-grid {
+    grid-template-columns: 1fr;
+  }
+}