MediaWiki:Mainpage.css: Difference between revisions

/* MediaWiki:Mainpage.css - Dedicated CSS for the Main Page layout */

/* Hide the page title on Main_Page */
#firstHeading, .firstHeading, .mw-page-title-main, .page-header__title { display: none !important; }

/* Top banner */
#mp-topbanner {
  background: #cee0f2;
  border: 1px solid #a2a9b1;
  padding: 12px 16px;
  margin-bottom: 14px;
  text-align: center;
  font-size: 1.05em;
}

/* Two-column layout - Desktop */
#mp-upper {
  display: flex;
  flex-wrap: nowrap; /* Prevent messy wrapping on desktop, let media queries handle it */
  gap: 15px;
  margin-bottom: 14px;
  align-items: flex-start;
}

#mp-left {
  flex: 1 1 55%;
  min-width: 0; /* Prevents overflow issues */
}

#mp-right {
  flex: 1 1 45%;
  min-width: 0;
}

/* Headings */
.mp-h2 {
  background: #cee0f2;
  border: 1px solid #a2a9b1;
  border-bottom: none;
  padding: 5px 10px;
  font-size: 1em;
  font-weight: bold;
  color: #202122;
  margin: 0;
}
.mp-h2-yellow { background: #fef6e7; }
.mp-h2-green  { background: #ecf5ec; }
.mp-h2-gray   { background: #dce3ee; }

/* Body of sections */
.mp-body {
  background: #ffffff;
  border: 1px solid #a2a9b1;
  border-top: none;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 0.9em;
  line-height: 1.6;
  color: #202122;
  overflow-x: auto; /* Allow tables to scroll horizontally safely */
  box-sizing: border-box;
}
.mp-body ul { margin: 0; padding-left: 1.5em; }

/* Portal grid */
#mp-portals {
  margin-top: 14px;
  border: 1px solid #a2a9b1;
  box-sizing: border-box;
}
#mp-portals-header {
  background: #dce3ee;
  border-bottom: 1px solid #a2a9b1;
  padding: 6px 12px;
  font-weight: bold;
  font-size: 0.95em;
}
.mp-portal-grid {
  display: flex;
  flex-wrap: wrap;
  background: #ffffff;
}
.mp-portal-cell {
  flex: 1 1 15%;
  min-width: 100px; /* Reduce min-width for mobile safety */
  border-right: 1px solid #eaecf0;
  border-bottom: 1px solid #eaecf0;
  padding: 10px 8px;
  text-align: center;
  font-size: 0.85em;
  box-sizing: border-box;
}
.mp-portal-cell:hover { background: #eaf3fb; }
.mp-portal-cell a { color: #3366cc; font-weight: bold; display: block; text-decoration: none; }
.mp-portal-icon { font-size: 1.8em; display: block; margin-bottom: 4px; }
.mp-portal-desc { display: block; color: #54595d; font-size: 0.85em; margin-top: 2px; font-weight: normal; }


/* ============================================================
   RESPONSIVE DESIGN RULES 
   ============================================================ */

/* Tablet and Smaller Desktop (up to 1000px) */
@media screen and (max-width: 1000px) {
  #mp-upper { 
    display: block !important; /* Break the flex layout to stack cleanly */
    margin-bottom: 0 !important;
  }
  #mp-left, #mp-right { 
    width: 100% !important; 
    display: block !important; 
    margin-bottom: 15px !important;
  }
  .mp-portal-cell { 
    flex: 1 1 30% !important; /* 3 items per row instead of 6 */
  }
}

/* Standard Mobile Phones (up to 600px) */
@media screen and (max-width: 600px) {
  #mp-topbanner {
    padding: 10px;
    font-size: 0.95em;
  }
  .mp-body {
    padding: 8px 10px; /* Shrink padding slightly to maximize screen space */
  }
  .mp-portal-cell { 
    flex: 1 1 45% !important; /* 2 items per row */
  }
}

/* Very Small Mobile Phones (up to 400px) */
@media screen and (max-width: 400px) {
  .mp-portal-cell { 
    flex: 1 1 100% !important; /* Stack portals completely (1 item per row) */
  }
}