From 660ec56e7337b20aedde2e15c10145168b5eb69f Mon Sep 17 00:00:00 2001
From: Cadence Ember <cadence@disroot.org>
Date: Fri, 9 Sep 2022 23:17:21 +1200
Subject: [PATCH] Mobile layout improvements

- Images must fit within the screen
- Attempt to make horizontal page footers vertical on mobile
---
 static/main.css | 45 +++++++++++++++++++++++++++++++++------------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/static/main.css b/static/main.css
index 63dc408..fe8500a 100644
--- a/static/main.css
+++ b/static/main.css
@@ -64,11 +64,6 @@ p {
 .custom-footer__cols {
     display: grid;
 }
-@media (min-width: 560px) {
-    .custom-footer__cols {
-        grid-template-columns: 1fr 1fr;
-    }
-}
 .my-logo {
     margin-bottom: 8px;
 }
@@ -115,6 +110,13 @@ p {
     display: none;
 }
 
+/* don't allow images to extend past the edge of the page */
+img {
+    max-width: 100%;
+    width: auto;
+    height: auto;
+}
+
 /* allow tables to scroll horizontally if needed */
 .table-scroller {
     overflow: auto;
@@ -178,13 +180,6 @@ figcaption, .lightbox-caption, .thumbcaption {
     display: block;
 }
 
-/* category list columns */
-@media (min-width: 700px) {
-    .my-category-list {
-        columns: 3;
-    }
-}
-
 /* animated slots */
 #mw-content-text .animated > :not(.animated-active), #mw-content-text .animated > .animated-subframe > :not(.animated-active) {
     display: inline-block;
@@ -221,3 +216,29 @@ figcaption, .lightbox-caption, .thumbcaption {
     color: var(--theme-page-text-color--hover);
     margin-left: 1.2em;
 }
+
+/* media queries */
+
+/* for reference, cell phone screens are generally 400 px wide, definitely less than 500 px */
+
+@media (min-width: 700px) { /* wider than 700 px */
+    /* category list columns */
+    .my-category-list {
+        columns: 3;
+    }
+}
+
+@media (min-width: 560px) { /* wider than 560 px */
+    /* footer columns */
+    .custom-footer__cols {
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+@media (max-width: 559px) { /* narrower than 560 px */
+    /* attempt to make horizontal wiki page footers vertical instead - see /nfs/wiki/Need_for_Speed_Wiki */
+    [style*="width:calc(100%"] {
+        width: auto !important;
+        text-align: center !important;
+    }
+}