MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

/* CSS placed here will be applied to all skins */

/* === HIDE PAGE TITLE ONLY ON MAIN PAGE === */
body.page-Main_Page h1.firstHeading {
  display: none;
}

/* === HERO BANNER STYLING === */
.hero-banner {
  text-align: center;
  margin-top: 20px;
}
.hero-banner img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

/* === TAGLINE BELOW BANNER === */
.hero-tagline {
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 20px;
}

/* === GRID LAYOUT FOR MAIN SECTIONS === */
.wikiwide-sections {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.wikiwide-sections > div {
  width: 32%;
  padding: 10px;
  background: #fafafa;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
}

/* === FOOTER CLEANUP === */
.footer-area {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #f8f8f8;
  padding: 20px;
  border-top: 1px solid #ccc;
}
.footer-area > div {
  width: 30%;
  padding: 10px;
  font-size: 90%;
}
.footer-area h3 {
  margin-top: 0;
  font-size: 16px;
}

/* === SOCIAL ICONS STYLING === */
.social-icons a {
  margin-right: 8px;
  font-size: 20px;
  color: #444;
  text-decoration: none;
}
.social-icons a:hover {
  color: #000;
}

/* === RESPONSIVE FIX === */
@media screen and (max-width: 768px) {
  .wikiwide-sections > div,
  .footer-area > div {
    width: 100%;
    margin-bottom: 20px;
  }
}

/* Grid Styling for Desktop */
.mainpage-grid-3col {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: space-between;
  margin-bottom: 2em;
}

.mainpage-col {
  flex: 1 1 30%;
  min-width: 250px;
}

/* Mobile Optimizations */
@media screen and (max-width: 768px) {
  .mainpage-grid-3col {
    flex-direction: column;
  }

  .mainpage-col {
    width: 100%;
    margin-bottom: 1.5em;
    text-align: center;
  }

  .mainpage-col ul {
    padding-left: 1em;
    text-align: left;
  }
}