MediaWiki:Common.css: Difference between revisions

/* ===== SuperJoy Main Page minimal theme ===== */

/* Hide the literal “Main Page” heading for a cleaner hero */
body.page-Main_Page #firstHeading { display:none; }

/* --- HERO (no text) --- */
.page-Main_Page .sj-hero {
  background: url("/images/a/a8/SuperJoyBanner.png") center/cover no-repeat;
  height: 300px;                 /* tweak 260–360 */
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  margin: 6px 0 28px;
}

/* --- QUICK LINKS (icon pills) --- */
.page-Main_Page .sj-quick {
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin: 0 0 22px;
}

.page-Main_Page .sj-pill {
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; font-weight:700;
  color:#fff !important; text-decoration:none; line-height:1;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.page-Main_Page .sj-pill svg { width:18px; height:18px; display:block; }

/* brand colors */
.page-Main_Page .sj-pill.discord { background:#5865F2; }
.page-Main_Page .sj-pill.twitter { background:#111; }     /* X */
.page-Main_Page .sj-pill.youtube { background:#FF0033; }
.page-Main_Page .sj-pill.web     { background:#1D4ED8; }

.page-Main_Page .sj-pill:hover {
  transform: translateY(-2px);
  box-shadow:0 8px 18px rgba(0,0,0,.2);
  filter: brightness(0.95);
}

/* --- DIVIDER --- */
.page-Main_Page .sj-divider {
  margin: 10px auto 0;
  height: 1px; max-width: 880px;
  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
}

/* --- PROJECT GRID (square cards) --- */
.page-Main_Page .sj-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
  margin: 22px 0 8px;
}

.page-Main_Page .sj-card {
  position:relative; border-radius:14px; overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.12); background:#0b1220; color:#fff;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* square shape using aspect-ratio (modern browsers) */
.page-Main_Page .sj-card .sj-media { aspect-ratio: 1 / 1; width:100%; }
.page-Main_Page .sj-card .sj-media img { width:100%; height:100%; object-fit:cover; filter:brightness(80%); }

.page-Main_Page .sj-card:hover { transform: translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.18); }

.page-Main_Page .sj-card .sj-title {
  position:absolute; left:0; right:0; bottom:0; padding:12px 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
  text-align:center; font-weight:800; font-size:16px;
}

/* footer note */
.page-Main_Page .sj-foot {
  text-align:center; color:#6b7280; font-size:14px; margin:28px 0 6px;
}
/* Normalize inline SVG icon size inside quick-link pills */
.sj-quick .sj-pill svg {
  width: 18px;
  height: 18px;
  display: inline-block;   /* or block; either is fine */
  vertical-align: middle;
  flex: 0 0 18px;
}

/* Keep the pill layout tight */
.sj-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0 0 22px;
}

.sj-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.sj-pill.discord { background:#5865F2; }
.sj-pill.twitter { background:#111; }   /* X */
.sj-pill.youtube { background:#FF0033; }
.sj-pill.web     { background:#1D4ED8; }
.sj-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.2); filter: brightness(.95); }