MediaWiki:Common.css: Difference between revisions

Revision as of 04:29, 4 October 2025

/* ===== SuperJoy minimal polish (safe, readable) ===== */

/* Typography */
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  color: #1f2937;               /* slate-800 */
  background: #fafafa;
}

/* Headings */
#firstHeading { 
  font-weight: 800; 
  color: #0f172a;               /* slate-900 */
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: .25rem;
}

/* Content width stays default; add a little breathing room */
.mw-body-content p { margin: .6rem 0 1rem; }

/* Links */
a { color: #2563eb; }           /* blue-600 */
a:visited { color: #4f46e5; }   /* indigo-600 */
a:hover { color: #1d4ed8; text-decoration: none; }

/* Subtle buttons (used on main-page links) */
.sj-btn {
  display:inline-block; 
  padding: 8px 14px; 
  border-radius: 10px;
  background:#1d4ed8; 
  color:#fff!important; 
  font-weight:700; 
  margin:4px; 
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.sj-btn:hover { background:#1844c6; }

/* ---- Main Page only (lightweight) ---- */
.page-Main_Page .sj-hero {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  background:#111;
}
.page-Main_Page .sj-hero img {
  width:100%;
  max-height: 340px;
  object-fit: cover;
  filter: brightness(72%);
}
.page-Main_Page .sj-hero .sj-hero-text {
  position:absolute; inset:0; 
  display:grid; place-items:center; 
  text-align:center; color:#fff; 
  padding:24px;
}
.page-Main_Page .sj-hero h1 {
  margin:0 0 6px 0; 
  font-weight:900; 
  font-size: clamp(28px, 4.5vw, 44px);
}
.page-Main_Page .sj-hero p { margin:0; opacity:.95; }

/* Project cards grid */
.page-Main_Page .sj-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.page-Main_Page .sj-card {
  position:relative; 
  border-radius:12px; 
  overflow:hidden; 
  background:#0b1220; 
  color:#fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}
.page-Main_Page .sj-card:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
}
.page-Main_Page .sj-card img { 
  width:100%; height:200px; object-fit:cover; filter:brightness(78%);
}
.page-Main_Page .sj-card .sj-card-title {
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px; text-align:center;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
  font-weight:800; font-size:18px;
}

/* Section title on Main Page */
.page-Main_Page h2.section-title {
  text-align:center; 
  margin: 26px 0 6px; 
  border:0; 
  color:#0f172a;
}

@@ Line 1: / Line 1: @@
-/* ---------------- SuperJoy base polish ---------------- */
-body { font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif; }
-a { text-decoration: none; }
-a:hover { text-decoration: underline; }
-/* Header/nav colors for Vector 2010/2022 */
+/* ===== SuperJoy minimal polish (safe, readable) ===== */
-.vector-header, .mw-footer-container {
-  background: linear-gradient(90deg, #0a2342, #102b57);
-  color: #fff;
-}
-#footer, .mw-footer-container a { color: #cfe0ff !important; }
-/* Buttons (used in main-page links) */
+/* Typography */
-.sj-btn {
+html, body {
-   display: inline-block;
+   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
-  padding: 10px 18px;
+   line-height: 1.55;
-  border-radius: 10px;
+   color: #1f2937;               /* slate-800 */
-   font-weight: 700;
+   background: #fafafa;
-   color: #fff !important;
-   margin: 6px;
 }
-.sj-btn.discord     { background:#5865F2; }
-.sj-btn.feedback    { background:#31a870; }
-.sj-btn.twitter     { background:#1DA1F2; }
-.sj-btn:hover { filter: brightness(0.95); }
-/* ---------------- Main Page ONLY ---------------- */
+/* Headings */
-.page-Main_Page #siteSub,
+#firstHeading {
-.page-Main_Page .mw-indicators,
+  font-weight: 800;
-.page-Main_Page .mw-portlet-lang,
+  color: #0f172a;               /* slate-900 */
-.page-Main_Page .vector-toc,
+  border-bottom: 1px solid #e5e7eb;
-.page-Main_Page .vector-pagelanguage-variant-selector {
+  padding-bottom: .25rem;
-  display: none !important;
 }
-/* Hide sidebar ONLY on Main Page (covers Vector 2010 + 2022) */
+/* Content width stays default; add a little breathing room */
-.page-Main_Page #mw-panel,
+.mw-body-content p { margin: .6rem 0 1rem; }
-.page-Main_Page .vector-sidebar-container,
-.page-Main_Page .vector-main-menu {
-  display: none !important;
-}
-/* Expand content to full width when sidebar hidden */
+/* Links */
-.page-Main_Page #content,
+a { color: #2563eb; }           /* blue-600 */
-.page-Main_Page .mw-content-container,
+a:visited { color: #4f46e5; }   /* indigo-600 */
-.page-Main_Page .vector-column-start,
+a:hover { color: #1d4ed8; text-decoration: none; }
-.page-Main_Page .vector-column-end {
-  margin: 0 !important;
-}
-.page-Main_Page .vector-column-start { display:none !important; }
-/* Center the main body and add breathing room */
+/* Subtle buttons (used on main-page links) */
-.page-Main_Page .mw-body,
+.sj-btn {
-.page-Main_Page .mw-body-content {
+  display:inline-block;
-   max-width: 1100px;
+  padding: 8px 14px;
-   margin: 0 auto;
+  border-radius: 10px;
+  background:#1d4ed8;
+  color:#fff!important;
+   font-weight:700;
+   margin:4px;
+  box-shadow: 0 2px 6px rgba(0,0,0,.08);
 }
+.sj-btn:hover { background:#1844c6; }
-/* Hero */
+/* ---- Main Page only (lightweight) ---- */
-.sj-hero {
+.page-Main_Page .sj-hero {
    position: relative;
    overflow: hidden;
-   border-radius: 14px;
+   border-radius: 12px;
-   box-shadow: 0 10px 30px rgba(0,0,0,.15);
+   box-shadow: 0 6px 20px rgba(0,0,0,.08);
+  background:#111;
 }
-.sj-hero img {
+.page-Main_Page .sj-hero img {
-   width: 100%; max-height: 360px; object-fit: cover;
+   width:100%;
-   filter: brightness(65%);
+  max-height: 340px;
+  object-fit: cover;
+   filter: brightness(72%);
 }
-.sj-hero .sj-hero-text {
+.page-Main_Page .sj-hero .sj-hero-text {
-   position: absolute; inset: 0;
+   position:absolute; inset:0;
-   display: grid; place-items: center;
+   display:grid; place-items:center;
-   text-align: center; color: #fff; padding: 24px;
+   text-align:center; color:#fff;
+  padding:24px;
 }
-.sj-hero h1 {
+.page-Main_Page .sj-hero h1 {
-   font-size: clamp(28px, 5vw, 48px);
+  margin:0 0 6px 0;
-  line-height: 1.05; margin: 0 0 6px 0; font-weight: 800;
+  font-weight:900;
+   font-size: clamp(28px, 4.5vw, 44px);
 }
-.sj-hero p { margin: 0; font-size: 18px; opacity: .95; }
+.page-Main_Page .sj-hero p { margin:0; opacity:.95; }
-/* Projects grid */
+/* Project cards grid */
-.sj-grid {
+.page-Main_Page .sj-grid {
-   display: grid;
+   display:grid;
-   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-   gap: 22px;
+   gap: 18px;
-   margin-top: 18px;
+   margin-top: 16px;
+}
+.page-Main_Page .sj-card {
+  position:relative;
+  border-radius:12px;
+  overflow:hidden;
+  background:#0b1220;
+  color:#fff;
+  box-shadow: 0 8px 22px rgba(0,0,0,.10);
+  transition: transform .15s ease, box-shadow .15s ease;
+}
+.page-Main_Page .sj-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 12px 26px rgba(0,0,0,.14);
 }
-.sj-card {
+.page-Main_Page .sj-card img {
-   position: relative; border-radius: 14px; overflow: hidden;
+   width:100%; height:200px; object-fit:cover; filter:brightness(78%);
-  box-shadow: 0 8px 24px rgba(0,0,0,.12);
-  background: #0b1220; color: #fff;
-  transition: transform .18s ease, box-shadow .18s ease;
 }
-.sj-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
+.page-Main_Page .sj-card .sj-card-title {
-.sj-card img { width: 100%; height: 210px; object-fit: cover; filter: brightness(78%); }
+   position:absolute; left:0; right:0; bottom:0;
-.sj-card .sj-card-title {
+   padding:10px 12px; text-align:center;
-   position: absolute; bottom: 0; left: 0; right: 0;
+  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55));
-   padding: 12px 14px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
+   font-weight:800; font-size:18px;
-   font-size: 20px; font-weight: 800; text-align: center;
 }
-/* Page headings (nicer) */
+/* Section title on Main Page */
-.page-Main_Page #firstHeading { display:none; }     /* hide the literal “Main Page” title */
 .page-Main_Page h2.section-title {
-   text-align:center; font-size: 26px; margin: 28px 0 8px;
+   text-align:center;
-   border: 0; color:#0a2342;
+  margin: 26px 0 6px;
+   border:0;
+  color:#0f172a;
 }

MediaWiki:Common.css: Difference between revisions

Revision as of 04:29, 4 October 2025

Navigation menu

Search