MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* Default */
-body.page-Cobalt_Wiki h1.firstHeading { display:none; }
 /* Infobox template style */
 .infobox {
@@ Line 32: / Line 28: @@
 .infobox.bordered .borderless th {
     border: 0;
+}
+/* Front page structure */
+.fpbox {
+    margin: 5px;
+    padding: 5px;
+    overflow: auto;
+    width: calc(100% - 2px);
+}
+.fpbox.plain {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+}
+.fpbox .heading,
+.fpbox .mainheading,
+.fpbox .welcome {
+    margin: 0 0 10px;
+    padding: 0 0 5px;
+    overflow: auto;
+}
+.fpbox .mainheading,
+.fpbox .welcome {
+    font-size: 150%;
+    font-weight: bold;
+}
+.fpbox .heading {
+    text-align: center;
+    font-size: 132%;
+}
+.linkslabel {
+    margin: 15px 5px 5px;
+    padding: 0 0 5px;
+}
+/* Template:FP links styles */
+.fplinks {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-items: stretch;
+    text-align: center;
+}
+.fplink-outer {
+    padding: 5px;
+    flex-basis: calc(25% - 10px);
+    width: calc(25% - 15px);
+    min-width: 115px;
+    display: inline-block;
+    vertical-align: middle;
+}
+.fplink-wide {
+    flex-basis: calc(33% - 10px);
+    width: calc(33% - 15px);
+}
+.fplink-fullwidth {
+    flex-basis: 100%;
+    width: calc(100% - 15px);
+    font-weight: bold;
+}
+.fplink {
+    padding: 0.5em;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    display: table;
+}
+.fplink-plain {
+    background: transparent;
+    border-radius: 0;
+    border: 0;
+    box-shadow: none;
+}
+.fplink-inner {
+    display: table-row;
+}
+.fplink a {
+    display: table-cell;
+    vertical-align: middle;
+}
+.fplink img {
+    max-width: 150px;
+    width: 100%;
+    height: auto;
+}
+/* Auto-resize front page video to fit smaller columns */
+.fpbox .embedvideowrap {
+    width: 100%!important;
+    max-width: 480px;
+    margin: 0 auto;
+}
+.fpbox .embedvideowrap iframe {
+    width: 100%!important;
+}
+/* Multi-column box support */
+.fp-container main .columns .leftcol,
+.fp-container .columns .rightcol {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+@media (min-width: 990px) {
+    .fp-container .columns .leftcol {
+        float: left;
+        width: 50%;
+    }
+    .fp-container .columns .rightcol {
+        float: right;
+        width: 50%;
+    }
+}
+/* This CSS governs the responsive 3 column main page layout */
+#fptweets {
+  min-height:calc(325px + 2.3em);
+}
+#fp-3column.fp-container {
+    display: grid;
+    grid-template-areas: "a" "b" "c" "d";
+    grid-template-columns: 100%;
+}
+@media screen and (min-width:990px) {
+    #fp-3column.fp-container {
+        grid-template-areas: "a b" "c b" "c d";
+        grid-template-columns: 50% 50%;
+    }
+}
+@media screen and (min-width:1350px) {
+    #fp-3column.fp-container {
+        grid-template-areas: "a b c" "d b c";
+        grid-template-columns: 33.3% 33.3% 33.3%;
+    }
+}
+.fp-section {
+    display: flex;
+    flex-wrap: wrap;
+}
+#fp-1 {
+    grid-area: a;
+}
+#fp-2 {
+    grid-area: b;
+}
+#fp-3 {
+    grid-area: c;
+}
+#fp-4 {
+    grid-area: d;
 }