@@ Line 5: / Line 5: @@
 @import url("https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.default.css");
 @import url("https://unpkg.com/tippy.js@6/themes/light.css");
-@font-face{
-	font-family: 'Moder DOS 437';
-	src: url('https://hiddenpalace.org/w/resources/assets/Moder_DOS_437.eot');
-	src: url('https://hiddenpalace.org/w/resources/assets/Moder_DOS_437.eot?#iefix') format('embedded-opentype'),
-	     url('https://hiddenpalace.org/w/resources/assets/Moder_DOS_437.woff') format('woff'),
-	     url('https://hiddenpalace.org/w/resources/assets/Moder_DOS_437.ttf') format('truetype'),
-	     url('https://hiddenpalace.org/w/resources/assets/Moder_DOS_437.svg#ModerDOS437') format('svg');
-}
-@font-face {
-	font-family: 'ibmvga8';
-	src: url('/w/resources/assets/ibm_vga8.eot');
-	src: url('/w/resources/assets/ibm_vga8.eot?#iefix') format('embedded-opentype'),
-	     url('/w/resources/assets/ibm_vga8.woff2') format('woff2'),
-	     url('/w/resources/assets/ibm_vga8.woff') format('woff'),
-	     url('/w/resources/assets/ibm_vga8.ttf') format('truetype');
-	font-weight: 400;
-	font-style: normal
-}
 body
@@ Line 77: / Line 57: @@
 }
-li#n-\.\.-visually a::before {
+li#n-\.\.-visually a::before, a#n-\.\.-visually .minerva-icon::before {
    content: "\f06e";
    font: var(--fa-font-solid)
 }
-li#n-\.\.-as-a-table a::before {
+li#n-\.\.-as-a-table a::before, a#n-\.\.-as-a-table .minerva-icon::before {
    content: "\f0ce";
    font: var(--fa-font-solid)
 }
-li#n-\.\.-by-lot a::before {
+li#n-\.\.-by-lot a::before, a#n-\.\.-by-lot .minerva-icon::before {
    content: "\f187";
    font: var(--fa-font-solid)
 }
-li#n-How-to-contribute a::before {
+li#n-\.\.-by-hardware a::before, a#n-\.\.-by-hardware .minerva-icon::before {
+  content: "\f2db";
+  font: var(--fa-font-solid)
+}
+li#n-How-to-contribute a::before, a#n-How-to-contribute .minerva-icon::before {
    content: "\f059";
    font: var(--fa-font-solid)
 }
-li#n-Add-a-prototype a::before {
+li#n-Add-a-prototype a::before, a#n-Add-a-prototype .minerva-icon::before {
    content: "\f067";
    font: var(--fa-font-solid)
 }
-li#n-Add-a-video a::before {
+li#n-Add-a-video a::before, a#n-Add-a-video .minerva-icon::before {
    content: "\f067";
    font: var(--fa-font-solid)
 }
-li#n-Add-assets a::before {
+li#n-Add-assets a::before, a#n-Add-assets .minerva-icon::before {
    content: "\f067";
    font: var(--fa-font-solid)
 }
-li#n-To-do a::before {
+li#n-To-do a::before, a#n-To-do .minerva-icon::before {
    content: "\f0ca";
    font: var(--fa-font-solid)
 }
-li#n-Forums a::before {
+li#n-Forums a::before, a#n-Forums .minerva-icon::before {
    content: "\f086";
    font: var(--fa-font-solid)
 }
-li#n-Discord a::before {
+li#n-Discord a::before, a#n-Discord .minerva-icon::before {
    content: "\f2ee";
 }
-li#n-IRC a::before {
+li#n-IRC a::before, a#n-IRC .minerva-icon::before {
    content: "\f292";
    font: var(--fa-font-solid)
 }
-li#n-Twitter a::before {
+li#n-Twitter a::before, a#n-Twitter .minerva-icon::before {
    content: "\f081";
    font: var(--fa-font-brands)
 }
-li#n-BlueSky a::before {
+li#n-BlueSky a::before, a#n-BlueSky .minerva-icon::before {
    content: "\e6a3";
    font: var(--fa-font-brands)
@@ Line 142: / Line 127: @@
-li#n-Facebook a::before {
+li#n-Facebook a::before, a#n-Facebook .minerva-icon::before {
    content: "\f082";
    font: var(--fa-font-brands)
 }
-li#n-Tumblr a::before {
+li#n-Tumblr a::before, a#n-Tumblr .minerva-icon::before {
    content: "\f174";
    font: var(--fa-font-brands)
 }
-li#n-YouTube a::before {
+li#n-YouTube a::before, a#n-YouTube .minerva-icon::before {
    content: "\f166";
    font: var(--fa-font-brands)
 }
-li#n-Discord a:hover::before { color: #738adb; }
+li#n-Discord a:hover::before, a#n-Discord:hover .minerva-icon::before { color: #738adb; }
-li#n-Twitter a:hover::before  { color: #55acee; }
+li#n-Twitter a:hover::before, a#n-Twitter:hover .minerva-icon::before  { color: #55acee; }
-li#n-Facebook a:hover::before { color: #3b5998; }
+li#n-Facebook a:hover::before, a#n-Facebook:hover .minerva-icon::before { color: #3b5998; }
-li#n-BlueSky a:hover::before  { color: #208bfe; }
+li#n-BlueSky a:hover::before, a#n-BlueSky:hover .minerva-icon::before  { color: #208bfe; }
-li#n-Tumblr a:hover::before { color: #35465c; }
+li#n-Tumblr a:hover::before, a#n-Tumblr:hover .minerva-icon::before { color: #35465c; }
-li#n-YouTube a:hover::before { color: #e52d27; }
+li#n-YouTube a:hover::before, a#n-YouTube:hover .minerva-icon::before { color: #e52d27; }
 pre, span.hex-snippet, span.pre
@@ Line 267: / Line 252: @@
      background-color: #666;
 }
-div.panel.navbox:first-of-type div.panel-heading:first-child {
+:where(div.panel.navbox) div.panel-heading:first-child {
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
+}
+:where(div.panel.navbox ~ div.panel.navbox) div.panel-heading:first-child {
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
 }
 div.panel.navbox:last-of-type div.panel-body:last-child {
-     border-top-left-radius: 3px;
+     border-bottom-left-radius: 3px;
-     border-top-right-radius: 3px;
+     border-bottom-right-radius: 3px;
 }
 div.panel-body
@@ Line 292: / Line 281: @@
 div.panel.navbox:first-of-type
 {
-	padding-top: 1em;
+	padding-top: 2em;
 }
 div.panel.navbox:last-of-type
@@ Line 444: / Line 433: @@
    display: inline-block;
    text-align: right;
+}
+.masonry {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  grid-auto-rows: 1px;
+  gap: 4px;
+ }
+ .masonry-item {
+  align-self: start;
+  text-align: center;
+  font-size: 12px;
+ }
+/* Page Forms: stack labels above fields on narrow screens instead of a two-column table */
+@media screen and (max-width: 720px) {
+  table.formtable,
+  table.formtable tbody,
+  table.formtable tr,
+  table.formtable th,
+  table.formtable td {
+    display: block;
+    width: auto;
+    box-sizing: border-box;
+  }
+  table.formtable th {
+    text-align: left;
+    padding: 0.8em 0 0.2em;
+  }
+  table.formtable th[colspan] {
+    text-align: center;
+  }
+  table.formtable td {
+    padding: 0 0 0.4em;
+  }
+  table.formtable .createboxInput {
+    width: 100%;
+  }
+  #pfForm input[type="text"],
+  #pfForm select,
+  #pfForm textarea {
+    max-width: 100%;
+  }
+  /* Page Forms gives the combobox an inline pixel width and a negative top margin
+     meant to line it up with the label cell beside it */
+  #pfForm .oo-ui-comboBoxInputWidget {
+    width: 100% !important;
+    min-width: 0 !important;
+    margin-top: 0 !important;
+  }
+}
+/* Main Page: stack the front page columns on narrow screens, latest articles first */
+@media screen and (max-width: 720px) {
+  div.front-page {
+    display: flex;
+    flex-direction: column;
+  }
+  div.front-page > div[style*="display:flex"] {
+    flex-direction: column;
+  }
+  div.front-page > div.right {
+    float: none;
+    width: auto;
+    order: 1;
+  }
+  div.front-page > div.left {
+    margin-right: 0;
+  }
+  /* The equal-height padding trick is not needed once the columns stack */
+  div.front-page div.last-cell.cell {
+    padding-bottom: 0.3em;
+    margin-bottom: 0;
+  }
+}
+/* Text inputs here carry no type attribute, so match every input */
+#pfForm input,
+#pfForm select,
+#pfForm textarea {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+#pfForm .oo-ui-comboBoxInputWidget {
+  width: 100% !important;
+  min-width: 0 !important;
+  margin: 0 !important;
+}
+/* MobileFrontend styles its own UI with a bare .panel class that collides with ours */
+.mw-parser-output div.panel > p {
+    padding: 0;
+}
+.mw-body > .content .mw-parser-output div.panel {
+    margin-top: 0;
+    background-color: transparent;
 }

MediaWiki:Common.css: Difference between revisions