Add viewport headings, tidy up IE exemptions.

2 files changed, 38 insertions, 6 deletions

diff --git a/web/css/_main.scss b/web/css/_main.scss
index 84994c62a..c7e959c32 100644
--- a/web/css/_main.scss
+++ b/web/css/_main.scss
@@ -1,5 +1,17 @@
 // Generics
 
+/* Thanks to normalize.css
+ * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
+ *    http://clagnut.com/blog/348/#c790
+ * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom
+ *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+ */
+html {
+    font-size: 100%; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 3 */
+    -ms-text-size-adjust: 100%; /* 3 */
+}
+
 body {
     font-family: "Gill Sans", "Gill Sans MT", Helvetica, Arial, sans-serif;
     margin: 0;
diff --git a/web/css/core.scss b/web/css/core.scss
index d5224ee0b..2d3ac2631 100644
--- a/web/css/core.scss
+++ b/web/css/core.scss
@@ -79,12 +79,11 @@ $map_width: 500px;
     p#expl {
         text-align: center;
         font-size: 150%;
-        margin: 0 2em;
+        margin: 0;
     }
 
     #postcodeForm {
-        display: table;
-        _width: 33em;
+        display: table; /* IE6 has fixed width set below */
         text-align: center;
         font-size: 150%;
         margin: 1em auto;
@@ -119,14 +118,19 @@ $map_width: 500px;
         }
     }
 
+    #front_stats {
+        margin: 0 auto;
+        display: table; /* IE6 is set to floats below */
+        border-spacing: 2em 1em;
+    }
+
     #front_stats div {
         text-align: center;
         width: 5.5em;
         -moz-border-radius: 0.5em;
         -webkit-border-radius: 0.5em;
         border-radius: 0.5em;
-        float: left;
-        margin: 0 1em 1em;
+        display: table-cell;
 
         big {
             font-size: 150%;
@@ -147,6 +151,10 @@ $map_width: 500px;
         margin-top: 0;
     }
 
+    #front_photos {
+        text-align: center;
+    }
+
     // Forms
 
     form {
@@ -230,7 +238,7 @@ $map_width: 500px;
     }
 
     #map {
-        border: solid 1px #000000;
+        border: solid 1px #666666;
         width: $map_width; // Twice a tile width
         height: $map_width;
         overflow: hidden;
@@ -541,6 +549,18 @@ $map_width: 500px;
     right: 3px;
 }
 
+.ie6 {
+    #mysociety {
+        #front_stats div {
+            float: left;
+            margin: 0 1em 1em;
+        }
+        #postcodeForm {
+            width: 33em;
+        }
+    }
+}
+
 // Printing, SCSS doesn't handle @media nesting
 
 @media print {