Njw has submitted this change and it was merged.
Change subject: Use separate files for max-width @media rules
......................................................................
Use separate files for max-width @media rules
It turns out some browsers don't like nested @media rules, including
the default browsers on Android and iOS. So use separate files for
them instead.
Change-Id: I532a726cb5326937a8a5472b3abb9b9811ba8e7d
---
M assets/erudite.css
A assets/erudite20em.css
A assets/erudite40em.css
A assets/erudite60em.css
A assets/erudite66em.css
M erudite.php
6 files changed, 70 insertions(+), 79 deletions(-)
Approvals:
Njw: Verified; Looks good to me, approved
jenkins-bot: Verified
diff --git a/assets/erudite.css b/assets/erudite.css
index aedff6d..986e4ac 100644
--- a/assets/erudite.css
+++ b/assets/erudite.css
@@ -564,82 +564,3 @@
body.action-edit #wpTextbox1 {
clear: none;
}
-
-/* Adjustments for smaller browser viewports */
-@media (max-width: 66em) {
- /* The top menu is likely to start wrapping, so reduce padding
- * and add a separator */
- #menu {
- padding: 0.7em 1em 0.45em;
- background: rgba(50, 50, 50, 1.0);
- }
-
- #menu li {
- border-right: thin solid #666666;
- padding: 0em 1em;
- margin-bottom: 0.3em;
- margin-right: 0em;
- }
-
- #menu li:last-child {
- border-right: none;
- }
-
- #access {
- width: 100%;
- }
-}
-
-@media (max-width: 60em) {
- /* Some of the padding is best dispatched with */
- #container,
- #header,
- #footer-wrap-inner,
- .message {
- width: 100%;
- }
-
- #content {
- padding: 1em 2em 0em;
- }
-
- #menu {
- margin-top: 1em;
- }
-}
-
-@media (max-width: 40em) {
- /* Reduce padding a bit further */
- #content {
- padding: 1em 1em 0em;
- }
-
- /* Stack footer columns */
- .footer {
- display: block;
- float: none;
- width: 90%;
- }
-}
-
-@media (max-width: 20em) {
- #header h1 {
- font-size: 1.75em;
- }
-
- #menu {
- margin-top: 0.5em;
- }
-
- /* Stack top menu items */
- #menu li {
- float: none !important;
- border: none;
- padding: 0em;
- }
-
- /* Disable text justification (user preference) */
- #article, #bodyContent, #mw_content {
- text-align: left !important;
- }
-}
diff --git a/assets/erudite20em.css b/assets/erudite20em.css
new file mode 100644
index 0000000..9cb5953
--- /dev/null
+++ b/assets/erudite20em.css
@@ -0,0 +1,19 @@
+#header h1 {
+ font-size: 1.75em;
+}
+
+#menu {
+ margin-top: 0.5em;
+}
+
+/* Stack top menu items */
+#menu li {
+ float: none !important;
+ border: none;
+ padding: 0em;
+}
+
+/* Disable text justification (user preference) */
+#article, #bodyContent, #mw_content {
+ text-align: left !important;
+}
diff --git a/assets/erudite40em.css b/assets/erudite40em.css
new file mode 100644
index 0000000..ffae547
--- /dev/null
+++ b/assets/erudite40em.css
@@ -0,0 +1,11 @@
+/* Reduce padding a bit further */
+#content {
+ padding: 1em 1em 0em;
+}
+
+/* Stack footer columns */
+.footer {
+ display: block;
+ float: none;
+ width: 90%;
+}
diff --git a/assets/erudite60em.css b/assets/erudite60em.css
new file mode 100644
index 0000000..9ba824c
--- /dev/null
+++ b/assets/erudite60em.css
@@ -0,0 +1,15 @@
+/* Some of the padding is best dispatched with */
+#container,
+#header,
+#footer-wrap-inner,
+.message {
+ width: 100%;
+}
+
+#content {
+ padding: 1em 2em 0em;
+}
+
+#menu {
+ margin-top: 1em;
+}
diff --git a/assets/erudite66em.css b/assets/erudite66em.css
new file mode 100644
index 0000000..3c3bda1
--- /dev/null
+++ b/assets/erudite66em.css
@@ -0,0 +1,21 @@
+/* The top menu is likely to start wrapping, so reduce padding
+ * and add a separator */
+#menu {
+ padding: 0.7em 1em 0.45em;
+ background: rgba(50, 50, 50, 1.0);
+}
+
+#menu li {
+ border-right: thin solid #666666;
+ padding: 0em 1em;
+ margin-bottom: 0.3em;
+ margin-right: 0em;
+}
+
+#menu li:last-child {
+ border-right: none;
+}
+
+#access {
+ width: 100%;
+}
diff --git a/erudite.php b/erudite.php
index 25b6ab2..2140fc7 100644
--- a/erudite.php
+++ b/erudite.php
@@ -29,6 +29,10 @@
'styles' => array(
'erudite/assets/cssreset.css' => array( 'media' => 'screen' ),
'erudite/assets/erudite.css' => array( 'media' => 'screen' ),
+ 'erudite/assets/erudite66em.css' => array( 'media' => 'screen
and (max-width: 66em)' ),
+ 'erudite/assets/erudite60em.css' => array( 'media' => 'screen
and (max-width: 60em)' ),
+ 'erudite/assets/erudite40em.css' => array( 'media' => 'screen
and (max-width: 40em)' ),
+ 'erudite/assets/erudite20em.css' => array( 'media' => 'screen
and (max-width: 20em)' ),
'erudite/assets/print.css' => array( 'media' => 'print' ),
),
'remoteBasePath' => &$GLOBALS['wgStylePath'],
--
To view, visit https://gerrit.wikimedia.org/r/74346
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I532a726cb5326937a8a5472b3abb9b9811ba8e7d
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/skins/erudite
Gerrit-Branch: master
Gerrit-Owner: Njw <nick.wh...@durham.ac.uk>
Gerrit-Reviewer: Njw <nick.wh...@durham.ac.uk>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
