Update style to better support mobile devices

1 files changed, 16 insertions, 2 deletions

diff --git a/res/style.css b/res/style.css
index 8ed45f0..57e6969 100644
--- a/res/style.css
+++ b/res/style.css
@@ -16,7 +16,7 @@ a:visited {
 
 h1,
 h1.title {
-  font-size:2.8em;
+  font-size:2.5em;
   font-weight:300;
   display:block;
   border:none;
@@ -40,7 +40,7 @@ h2, h3, h4, h5, h6 {
 
 h2 {
   color:#107d8e;
-  font-size:2.3em;
+  font-size:2.2em;
 }
 
 h3 {
@@ -481,3 +481,17 @@ img#piwik-img {
 }
 
 
+/**
+ *  Overrides for portrait mode (EG: a phone or tablet)
+ */
+
+/* More modern mobile displays with a higher resolution */
+/* Smaller mobile displays with a lower resolution */
+@media only screen and (orientation: portrait) and (max-width: 850px) {
+  html, body { font-size: 14px; }
+}
+
+/*@media only screen and (orientation: portrait) and (min-width: 450px) {*/
+@media only screen and (orientation: portrait) and (min-resolution: 220dpi) {
+  html, body { font-size: 19px; }
+}