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 */
#mp-upper {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 14px;
  align-items: flex-start;
}

#mp-left {
  flex: 1 1 55%;
  min-width: 300px;
}

#mp-right {
  flex: 1 1 40%;
  min-width: 300px;
}

/* 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 on small screens */
}
.mp-body ul { margin: 0; padding-left: 1.5em; }

/* Portal grid */
#mp-portals {
  margin-top: 14px;
  border: 1px solid #a2a9b1;
}
#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: 120px;
  border-right: 1px solid #eaecf0;
  border-bottom: 1px solid #eaecf0;
  padding: 10px 8px;
  text-align: center;
  font-size: 0.85em;
}
.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 adjustments */
@media screen and (max-width: 768px) {
  #mp-upper { display: block; }
  #mp-left, #mp-right { width: 100%; display: block; }
  .mp-portal-cell { flex: 1 1 45%; }
}