MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 656: / Line 656: @@
 /* === Main Page Layout (scoped) === */
 .mainpage-wrapper .main-banner {
-  text-align: center;
+    text-align: center;
-  padding: 1em;
 }
-.mainpage-wrapper .banner-title {
-  font-size: 2em;
+.mainpage-wrapper .search-area {
-  margin-top: 0.5em;
+    border-radius: var(--border-radius-base);
+    cursor: pointer;
+    transition: background 0.2s ease;
+    text-align: center;
 }
-.mainpage-wrapper .search-area {
+.mainpage-wrapper .search-area:hover {
-   text-align: center;
+   background: var(--color-surface-3);
-  padding: 1em;
 }
 .mainpage-wrapper .intro-text {
-  text-align: center;
+    text-align: center;
-  padding: 1em;
 }
 .mainpage-wrapper .info-row {
-  display: flex;
+    display: flex;
-  gap: 1em;
+    gap: 1em;
+    margin: 1em;
 }
 .mainpage-wrapper .info-box {
    flex: 1 1 32%;
-  padding: 1em;
    display: flex;
    flex-direction: column;
+  margin: 0 !important;
 }
@@ Line 691: / Line 693: @@
 }
-.mainpage-wrapper .info-box pre {
+.mainpage-wrapper .info-box,.about-box,.intro-text,.search-area{
-  flex: 1 1 auto;
+	color: var(--color-emphasized);
-  margin: 0;
+    background-color: var(--color-surface-2);
-  padding: 1em;
+    border: var(--border-width-base) solid var(--border-color-base);
-  box-sizing: border-box;
+    overflow: auto;
+    border-radius: var(--border-radius-large);
+    padding: 1em;
+    margin: 1em;
 }
+/* The banner box */
+.main-banner {
+    position: relative;
+    height: 450px;
+    max-width: 2440px;          /* stop growing beyond image width */
+    margin: 1em auto;           /* centre the container */
+    overflow: hidden;           /* crop sides */
+    background-color: var(--color-surface-2);
+    border: var(--border-width-base) solid var(--border-color-base);
+    border-radius: var(--border-radius-large);
+    color: var(--color-emphasized);
+    padding: 0;
+}
+/* centre ANY img inside (not just mw-file-element) */
+.main-banner img {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    height: 100%;
+    width: auto;
+    max-width: none;
+}
+.main-banner > a { display:block; height:100%; }
 .mainpage-wrapper .lower-row {
-  display: flex;
+	display: flex;
-  gap: 1em;
+    gap: 1em;
+    margin: 1em;
 }
 .mainpage-wrapper .about-box {
-     flex: 1 1 32%;
+     flex: 1 1 31.3%;
-     padding: 1em;
+     margin: 0 !important;
 }
 .mainpage-wrapper .link-grid {
-	display: flex;
+    display: flex;
      flex-wrap: wrap;
-     gap: 1em;
+     gap: 0.5em;
      flex: 1 1 65%;
-     padding: 1em;
+     justify-content: center;
-    padding-top: 2em;
 }
@@ Line 726: / Line 760: @@
      background-color: var(--color-surface-2);
      border: var(--border-width-base) solid var(--border-color-base);
+}
+.mainpage-wrapper .link-tile {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  overflow: hidden;
+  background: var(--color-surface-2);
+  border: var(--border-width-base) solid var(--border-color-base);
+}
+.mainpage-wrapper .tile-inner {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.mainpage-wrapper .tile-inner img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.mainpage-wrapper .tile-label {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.6);
+  text-align: center;
+  padding: 0.3em;
+  font-weight: bold;
+  font-size: 1em;
+}
+.mainpage-wrapper .tile-label a {
+  color: white;
+  text-decoration: none;
+}
+.mainpage-wrapper .tile-label a:hover {
+  text-decoration: underline;
 }
@@ Line 740: / Line 817: @@
      flex-direction: column;
    }
+}
+.github-badge-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1em;
+}
+.github-badge-title {
+  white-space: nowrap;
+}
+/* Light mode (default) */
+.patreon-logo-dark {
+  display: none;
+}
+.patreon-logo-light {
+  display: inline;
+}
+/* Dark mode (activated via root class) */
+:root.skin-theme-clientpref-night .patreon-logo-light {
+  display: none;
+}
+:root.skin-theme-clientpref-night .patreon-logo-dark {
+  display: inline;
 }