MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 652: / Line 652: @@
-/* === Layout === */
-.main-banner {
+/* Main page CSS */
+/* === Main Page Layout (scoped) === */
+.mainpage-wrapper .main-banner {
    text-align: center;
    padding: 1em;
    background-color: #333;
-   color: red;
+   color: white;
 }
-.banner-title {
+.mainpage-wrapper .banner-title {
    font-size: 2em;
    margin-top: 0.5em;
 }
-.search-area {
+.mainpage-wrapper .search-area {
    text-align: center;
    background: #222;
@@ Line 672: / Line 674: @@
 }
-.intro-text {
+.mainpage-wrapper .intro-text {
    max-width: 800px;
    margin: 1em auto;
@@ Line 679: / Line 681: @@
 }
-/* Info Boxes Row */
+.mainpage-wrapper .info-row {
-.info-row {
    display: flex;
    flex-wrap: wrap;
@@ Line 688: / Line 689: @@
    max-width: 1000px;
 }
-.info-box {
+.mainpage-wrapper .info-box {
    flex: 1 1 300px;
    background: #444;
@@ Line 695: / Line 696: @@
 }
-/* Lower section */
+.mainpage-wrapper .lower-row {
-.lower-row {
    display: flex;
    flex-wrap: wrap-reverse;
@@ Line 705: / Line 705: @@
 }
-/* About box should appear first on small screens */
+.mainpage-wrapper .about-box {
-.about-box {
    flex: 1 1 250px;
    background: #333;
    color: white;
    padding: 1em;
-   order: -1; /* Makes it appear first when wrapped */
+   order: -1;
 }
-/* Grid of links */
+.mainpage-wrapper .link-grid {
-.link-grid {
    flex: 3 1 600px;
    display: flex;
@@ Line 721: / Line 719: @@
    gap: 1em;
 }
-.link-tile {
+.mainpage-wrapper .link-tile {
    flex: 1 1 120px;
    background: #222;
@@ Line 730: / Line 728: @@
 }
-/* === Responsive tweaks === */
+/* === Mobile responsiveness === */
 @media (max-width: 768px) {
-   .info-row {
+   .mainpage-wrapper .info-row {
      flex-direction: column;
    }
-   .info-box {
+   .mainpage-wrapper .info-box {
      flex: 1 1 auto;
    }
-   .lower-row {
+   .mainpage-wrapper .lower-row {
      flex-direction: column;
    }
 }