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: 0.5em;
-  margin-top: 1em;
 }
 .mainpage-wrapper .intro-text {
-  max-width: 800px;
+    text-align: center;
-  margin: 1em auto;
-  text-align: center;
 }
 .mainpage-wrapper .info-row {
+    display: flex;
+    gap: 1em;
+    margin: 1em;
+}
+.mainpage-wrapper .info-box {
+  flex: 1 1 32%;
    display: flex;
-   flex-wrap: wrap;
+   flex-direction: column;
-   justify-content: space-between;
+   margin: 0 !important;
-   gap: 1em;
+}
-   margin: 2em auto;
-   max-width: 1000px;
+.mainpage-wrapper pre{
+   white-space: pre-wrap;   /* wrap long lines */
+   word-wrap: break-word;   /* break long words if needed */
+   min-width:250px;
 }
-.mainpage-wrapper .info-box {
-  flex: 1 1 300px;
+.mainpage-wrapper .info-box,.about-box,.intro-text,.search-area{
-  padding: 1em;
+	color: var(--color-emphasized);
+    background-color: var(--color-surface-2);
+    border: var(--border-width-base) solid var(--border-color-base);
+    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;
-  flex-wrap: wrap-reverse;
+    gap: 1em;
-  justify-content: space-between;
+    margin: 1em;
-  margin: 2em auto;
-  max-width: 1000px;
-  gap: 2em;
 }
 .mainpage-wrapper .about-box {
-  flex: 1 1 250px;
+    flex: 1 1 31.3%;
-  padding: 1em;
+    margin: 0 !important;
-  order: -1;
 }
 .mainpage-wrapper .link-grid {
-  flex: 3 1 600px;
+    display: flex;
-  display: flex;
+    flex-wrap: wrap;
-  flex-wrap: wrap;
+    gap: 0.5em;
-  gap: 1em;
+    flex: 1 1 65%;
+    justify-content: center;
+}
+.mainpage-wrapper .link-tile {
+	width: 200px;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    background-color: var(--color-surface-2);
+    border: var(--border-width-base) solid var(--border-color-base);
 }
 .mainpage-wrapper .link-tile {
-   flex: 1 1 120px;
+   position: relative;
-   padding: 1em;
+   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;
-   min-width: 100px;
+   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;
 }
 /* === Mobile responsiveness === */
-@media (max-width: 768px) {
+@media (max-width: 1200px) {
    .mainpage-wrapper .info-row {
      flex-direction: column;
@@ Line 729: / 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;
 }