Njw has uploaded a new change for review.
https://gerrit.wikimedia.org/r/68212
Change subject: Add @media rules for small screens
......................................................................
Add @media rules for small screens
Adds some rules for smaller viewports.
This also brought up an issue with content potentially being hidden if
overflowing, which was fixed too (the #footer display:block section relates to
that).
This appears to work nicely, but I don't have one of those fancy phones or
tablets to test it with.
Change-Id: I6d3bcbf1538f4ae640709fbba45a4c1b7b2e6739
---
M TODO
M assets/erudite.css
2 files changed, 69 insertions(+), 17 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/skins/erudite
refs/changes/12/68212/1
diff --git a/TODO b/TODO
index 94f7b3d..6b024ed 100644
--- a/TODO
+++ b/TODO
@@ -1,4 +1,3 @@
Test that it works fine with ULS extension
Use simpler CSS rules for main content, rather than children of .entry-content
Set line-height consistently throughout (and ensure it isn't used in lieu of
padding)
-Add small screen CSS rules, specifically to have the top menu and footer
columns stack vertically and to remove the min-width (and width where
appropriate) settings
diff --git a/assets/erudite.css b/assets/erudite.css
index 60a7098..d5dd248 100644
--- a/assets/erudite.css
+++ b/assets/erudite.css
@@ -11,9 +11,10 @@
#container,
#header,
#access,
-#footer-wrap-inner {
- min-width: 960px;
+#footer-wrap-inner,
+.message {
width: 90%;
+ max-width: 80em;
margin: 0 auto;
position: relative;
}
@@ -22,10 +23,6 @@
padding: 1.5em 3.75em 0em;
}
-#header-wrap,
-#footer-wrap {
- min-width: 960px;
-}
/* Use dark stripes around edge to focus on content */
div#container {
@@ -162,7 +159,7 @@
#menu {
margin: 1.5em 0 -0.625em;
overflow: hidden;
- padding: 0.75em 3.75em;
+ padding: 0.75em 2em 0.75em 3.75em;
border-top: 1px solid #666666;
background: #333333;
background: rgba(50, 50, 50, 0.7);
@@ -188,10 +185,9 @@
}
.footer {
- min-width: 240px;
- width: 25%;
float: left;
- margin-left: 60px;
+ width: 25%;
+ margin-left: 5%;
}
.footer .widget li {
@@ -228,6 +224,8 @@
/* Footer to content (for FooterLinks) */
#footer {
+ display: block;
+ clear: both;
text-align: right;
padding: 0.75em 0;
font-size: 0.75em;
@@ -238,7 +236,6 @@
position: relative;
margin: 0;
clear: both;
- overflow: hidden;
}
hr {
@@ -526,10 +523,6 @@
/* Messages */
.message {
- margin: 0 auto;
- position: relative;
- min-width: 960px;
- width: 90%;
color: #ffffff;
background-color: #666666;
padding: 0.75em 0;
@@ -575,7 +568,7 @@
img#logo {
display: block;
- margin: 24px auto 0px;
+ margin: 2em auto 0em;
}
div#bodyContent {
@@ -600,3 +593,63 @@
body.action-edit #wpTextbox1 {
clear: none;
}
+
+/* adjustments for smaller browser viewports */
+@media screen and (max-width: 66em) {
+ /* top menu is likely to start wrapping, so reduce padding
+ * and add a separator */
+ #menu {
+ padding-left: 1em;
+ padding-right: 1em;
+ }
+
+ #menu li {
+ border-right: 1px solid #666666;
+ padding: 0em 1em;
+ margin-bottom: 0.3em;
+ margin-right: 0em;
+ }
+
+ #menu li:last-child {
+ border-right: none;
+ }
+}
+
+@media screen and (max-width: 60em) {
+ /* some of the padding is best dispatched with */
+ #container,
+ #header,
+ #access,
+ #footer-wrap-inner,
+ .message {
+ width: 100%;
+ max-width: none;
+ }
+
+ #content {
+ padding: 1em 2em 0em;
+ }
+}
+
+@media screen and (max-width: 40em) {
+ /* shave padding back a bit further */
+ #content {
+ padding: 1em 1em 0em;
+ }
+
+ /* stack footer columns */
+ .footer {
+ display: block;
+ float: none;
+ width: 90%;
+ }
+}
+
+@media screen and (max-width: 20em) {
+ /* stack top menu items */
+ #menu li {
+ float: none !important;
+ border: none;
+ padding: 0em;
+ }
+}
--
To view, visit https://gerrit.wikimedia.org/r/68212
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I6d3bcbf1538f4ae640709fbba45a4c1b7b2e6739
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
