MediaWiki:Mobile.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
 /* All CSS here will be loaded for users of the mobile site */
+/* new front page CSS */
+/* inZOI Wiki Mobile Styles */
+@media (max-width: 768px) {
+  /* Show/hide appropriate views */
+  .desktop-view {
+    display: none;
+  }
+  .mobile-view {
+    display: block;
+  }
+  /* Hero section adjustments */
+  .hero-title {
+    font-size: 1.8em;
+  }
+  .hero-subtitle {
+    font-size: 1.1em;
+  }
+  .quick-access-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+  .button {
+    width: 80%;
+    text-align: center;
+    margin-bottom: 0.5em;
+  }
+  /* Featured content adjustments */
+  .featured-cards {
+    grid-template-columns: 1fr;
+  }
+  /* Main sections mobile */
+  .main-sections-mobile {
+    margin: 1.5em auto;
+    max-width: 100%;
+  }
+  .wiki-table-mobile {
+    width: 100%;
+    border-spacing: 0.8em;
+    margin: 0 auto;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    padding: 0.5em;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+  }
+  .section-header {
+    width: 100%;
+    font-size: 1.2em;
+    padding: 1em;
+  }
+  .two-column-mobile {
+    column-count: 2;
+    column-gap: 20px;
+  }
+  /* Stats adjustments */
+  .stats-container {
+    flex-direction: column;
+  }
+  .stat-box {
+    width: 100%;
+  }
+  /* Footer adjustments */
+  .wiki-footer {
+    padding: 1em;
+  }
+  .footer-links {
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+@media (max-width: 480px) {
+  /* Further adjustments for very small screens */
+  .two-column-mobile {
+    column-count: 1;
+  }
+  .hero-banner {
+    padding: 1em 0.5em;
+  }
+  .about-section {
+    padding: 1em;
+  }
+  .section-content {
+    padding: 0.8em;
+  }
+}
+/* end of new front page CSS */