MediaWiki:Common.css: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

@@ Zeile 1.122: / Zeile 1.122: @@
-/* ==== Mobile-Layout – ADOS-Hero ==== */
+/* ============================================
+   ConanWiki-Style Mobile 2-Spalten-Layout
+   ============================================ */
 @media (max-width: 900px) {
-  /* der Balken selbst */
-  body.page-Hauptseite .ados-hero {
-    margin: -0.3rem -1rem 1rem;
-    padding: 1.3rem 1rem 1rem;
-    border-radius: 0;
-    box-shadow: 0 4px 12px rgba(80, 50, 20, 0.16);
-  }
-   /* alles untereinander, zentriert */
+   /* Container zentrieren */
    body.page-Hauptseite .ados-hero__inner {
-     display: block;
+     display: flex;
-     max-width: 900px;
+     flex-direction: column;
-     margin: 0 auto;
+     align-items: center;
      text-align: center;
+    gap: 1.2rem;
    }
-   body.page-Hauptseite .ados-hero__left {
+   /* Intro-Text */
-    margin-bottom: 1rem;
-  }
-  body.page-Hauptseite .ados-hero__title {
-    font-size: 1.7rem;
-    margin-bottom: 0.4rem;
-  }
    body.page-Hauptseite .ados-hero__subtitle {
-     font-size: 0.98rem;
+     font-size: 1.05rem;
-     line-height: 1.5;
+     line-height: 1.55;
-     margin: 0;
+     margin-bottom: 0.5rem;
+    text-align: center;
    }
-   /* 2 Spalten mit Kategorien – wie beim ConanWiki */
+   /* GRID für Hauptreihen + Serien */
-   body.page-Hauptseite .ados-hero__right {
+   body.page-Hauptseite .ados-hero__groups {
      display: grid;
-     grid-template-columns: repeat(2, minmax(0, 1fr));
+     grid-template-columns: 1fr 1fr;   /* Zwei Spalten – wie ConanWiki */
-     gap: 0.8rem 1.2rem;
+    width: 100%;
-     margin-top: 1rem;
+    max-width: 600px;
-     text-align: center;
+     gap: 1.5rem 1rem;
-    font-size: 0.92rem;
+     margin-top: 0.3rem;
+     text-align: left;
    }
+  /* Jede der beiden Spalten */
    body.page-Hauptseite .ados-hero__column {
-     /* sorgt dafür, dass Überschrift + Links schön zusammenstehen */
+     padding: 0 0.6rem;
    }
    body.page-Hauptseite .ados-hero__heading {
-     font-weight: 600;
+     font-size: 1.1rem;
-     margin-bottom: 0.25rem;
+     margin-bottom: 0.4rem;
-     color: #8a7a5c;      /* ähnlich dem grauen „Hauptreihen“ im ConanWiki */
+     color: #7a5c32;
+    font-weight: 700;
    }
-   body.page-Hauptseite .ados-hero__right ul {
+   body.page-Hauptseite .ados-hero__column ul {
      list-style: none;
+    margin: 0;
      padding: 0;
-    margin: 0;
    }
-   body.page-Hauptseite .ados-hero__right li {
+   body.page-Hauptseite .ados-hero__column li {
-     margin: 1px 0;
+     margin: 2px 0;
    }
-   body.page-Hauptseite .ados-hero__right a:link,
+  /* Specials – eigene Zeile, zentriert */
-  body.page-Hauptseite .ados-hero__right a:visited {
+   body.page-Hauptseite .ados-hero__specials {
-     color: #7a4b18;
+    margin-top: 1.2rem;
-     text-decoration: none;
+    width: 100%;
+     max-width: 600px;
+     text-align: center;
    }
-   body.page-Hauptseite .ados-hero__right a:hover {
+   body.page-Hauptseite .ados-hero__specials ul {
-     text-decoration: underline;
+     list-style: none;
+    padding: 0;
+    margin: 0;
    }
-}
-/* Optional: bei extrem schmalen Geräten etwas enger machen */
+   body.page-Hauptseite .ados-hero__specials li {
-@media (max-width: 500px) {
+     margin: 2px 0;
-   body.page-Hauptseite .ados-hero {
-     margin: -0.2rem -0.7rem 0.9rem;
-    padding: 1.1rem 0.8rem 0.9rem;
    }
 }