MediaWiki:Common.css: Difference between revisions

Revision as of 07:32, 12 November 2025

/* ===== Main Page Styling (cards) ===== */
.mainpage-hero{ text-align:center; margin:10px auto 24px; }
.mainpage-title{ font-size:28px; font-weight:800; letter-spacing:.3px; margin-top:8px; }
.mainpage-sub{ opacity:.8; margin-top:4px; }

.mainpage-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
  max-width:1100px; margin:24px auto; padding:0 12px;
}
@media (max-width:1000px){ .mainpage-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .mainpage-grid{ grid-template-columns:1fr; } }

.mainpage-card{
  background:rgba(255,214,90,.06);
  border:1px solid rgba(255,214,90,.18);
  border-radius:14px;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.mainpage-card:hover{
  background:rgba(255,214,90,.12);
  border-color:rgba(255,214,90,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  transform:translateY(-2px);
}

/* Make the whole card clickable */
.mainpage-card-link{
  display:block; padding:16px 18px; text-decoration:none !important;
  color:inherit; /* preserves Citizen theme colors */
}

.mainpage-card-title{
  font-weight:700; margin-bottom:6px; color:#ffd65a;
}
.mainpage-card-title a{ color:#ffd65a !important; text-decoration:none !important; }
.mainpage-card-title a:hover{ text-shadow:0 0 6px rgba(255,214,90,.8); }

.mainpage-card-desc{ opacity:.85; line-height:1.45; }

.mainpage-updates{ max-width:900px; margin:28px auto 10px; padding:0 12px; }

@@ Line 1: / Line 1: @@
-/* Hide Citizen's built-in footer links and powered-by elements */
+/* ===== Main Page Styling (cards) ===== */
-.citizen-footer__links,
+.mainpage-hero{ text-align:center; margin:10px auto 24px; }
-.citizen-footer__poweredby,
+.mainpage-title{ font-size:28px; font-weight:800; letter-spacing:.3px; margin-top:8px; }
-.mw-footer-poweredby,
+.mainpage-sub{ opacity:.8; margin-top:4px; }
-#footer-poweredby {
-  display: none !important;
-}
-/* Optional: tighten spacing between your footer and page content */
-.footer-wrapper {
-  margin-top: 20px;
-}
-/* ===== Custom Footer ===== */
-.footer-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  padding: 18px 30px;
-  border-top: 1px solid rgba(255, 255, 255, 0.08);
-  background: transparent;
-  margin-top: 25px;
-}
-.footer-left, .footer-center, .footer-right {
+.mainpage-grid{
-   color: #ccc;
+   display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px;
-   font-size: 14px;
+   max-width:1100px; margin:24px auto; padding:0 12px;
-  margin: 5px 0;
 }
+@media (max-width:1000px){ .mainpage-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
+@media (max-width:560px){ .mainpage-grid{ grid-template-columns:1fr; } }
-.footer-text {
+.mainpage-card{
-   color: #aaa;
+   background:rgba(255,214,90,.06);
-   font-size: 13px;
+  border:1px solid rgba(255,214,90,.18);
+   border-radius:14px;
+  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
 }
+.mainpage-card:hover{
-.footer-center a, .footer-right a {
+   background:rgba(255,214,90,.12);
-   color: #ffd65a;
+   border-color:rgba(255,214,90,.35);
-   text-decoration: none;
+   box-shadow:0 6px 18px rgba(0,0,0,.35);
-   font-weight: 500;
+   transform:translateY(-2px);
-   transition: color 0.2s ease;
 }
-.footer-center a:hover, .footer-right a:hover {
+/* Make the whole card clickable */
-   color: #fff;
+.mainpage-card-link{
+  display:block; padding:16px 18px; text-decoration:none !important;
+   color:inherit; /* preserves Citizen theme colors */
 }
-.footer-right img {
+.mainpage-card-title{
-   vertical-align: middle;
+   font-weight:700; margin-bottom:6px; color:#ffd65a;
-  margin-right: 6px;
-  filter: drop-shadow(0 0 3px rgba(255,214,90,.4));
 }
+.mainpage-card-title a{ color:#ffd65a !important; text-decoration:none !important; }
+.mainpage-card-title a:hover{ text-shadow:0 0 6px rgba(255,214,90,.8); }
-/* Hide Citizen default footers */
+.mainpage-card-desc{ opacity:.85; line-height:1.45; }
-.citizen-footer__links,
-.citizen-footer__poweredby,
-.mw-footer-poweredby,
-#footer-poweredby {
-  display: none !important;
-}
-@media (max-width: 700px) {
+.mainpage-updates{ max-width:900px; margin:28px auto 10px; padding:0 12px; }
-  .footer-wrapper {
-    flex-direction: column;
-    text-align: center;
-    gap: 10px;
-  }
-}