Njw has uploaded a new change for review. https://gerrit.wikimedia.org/r/74346
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(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/erudite refs/changes/46/74346/1 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: newchange Gerrit-Change-Id: I532a726cb5326937a8a5472b3abb9b9811ba8e7d Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/skins/erudite Gerrit-Branch: master Gerrit-Owner: Njw <nick.wh...@durham.ac.uk> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits