diff options
Diffstat (limited to 'web/css')
| -rw-r--r-- | web/css/_main.scss | 62 | ||||
| -rw-r--r-- | web/css/core.scss | 97 | ||||
| -rw-r--r-- | web/css/ie6.css | 17 |
3 files changed, 153 insertions, 23 deletions
diff --git a/web/css/_main.scss b/web/css/_main.scss index b4e4a13f0..d74d70ceb 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; @@ -17,6 +29,7 @@ h2 { select, input, textarea { font-size: 99%; + max-width: 99%; } #mysociety { @@ -158,6 +171,20 @@ select, input, textarea { right: 10px; } +.ie6 #logo { + display: none; +} + +.ie6 #logoie { + width: 133px; + height: 26px; + filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/i/mysociety-dark.png',sizingMethod='scale'); + position: absolute; + top: 4em; + right: 10px; + cursor: pointer; +} + #footer { clear: both; text-align: center; @@ -180,3 +207,38 @@ select, input, textarea { } } +@media all and (max-width: 50em) { + #logo { + display: none; + } + #header { + font-size: 150%; + } + #navigation { + position: static; + border-top: solid 2px $header_colour; + border-bottom: solid 2px $header_colour; + margin: 1em 0; + padding: 0.15em 0.5em; + text-align: center; + background-color: $header_back; + color: $header_colour; + + a:hover, a:active { + background-color: $header_colour; + color: $header_back; + -moz-border-radius: 0.5em; + -webkit-border-radius: 0.5em; + border-radius: 0.5em; + } + } + #footer { + width: auto; + padding: 0 1em; + border-top: none; + } + #wrapper { + margin: 0em 1em; + } +} + diff --git a/web/css/core.scss b/web/css/core.scss index 4c64888e5..59abf3e85 100644 --- a/web/css/core.scss +++ b/web/css/core.scss @@ -83,12 +83,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; @@ -107,6 +106,12 @@ $map_width: 500px; } } + #geolocate_para { + font-size: 70%; + margin: 2px 0 0 0; + text-align: right; + } + #front_intro { float: left; width: 48%; @@ -117,14 +122,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%; @@ -145,6 +155,10 @@ $map_width: 500px; margin-top: 0; } + #front_photos { + text-align: center; + } + // Forms form { @@ -228,7 +242,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; @@ -236,6 +250,7 @@ $map_width: 500px; background-color: #f1f1f1; } + /* Drag is only present in noscript form */ #drag { position: absolute; width: $map_width; @@ -538,6 +553,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 { @@ -548,3 +575,61 @@ $map_width: 500px; } } +@media all and (max-width: 50em) { + #mysociety { + p#expl { + font-size: 110%; + } + + #postcodeForm { + font-size: 100%; + span { + display: block; + font-size: 150%; + } + #submit { + font-size: 100%; + } + } + + #geolocate_para { + font-size: 100%; + } + + #front_intro { + float: none; + width: auto; + } + #front_recent { + margin-top: 1em; + float: none; + width: auto; + clear: both; + } + #front_photos { + white-space: nowrap; + overflow: hidden; + } + #front_stats { + border-spacing: 0.5em 1em; + } + + #form_sign_in_yes { + float: none; + width: auto; + padding-right: 0; + border-right: none; + margin-bottom: 1em; + } + + #form_sign_in_no, #fieldset #form_sign_in_no { + float: none; + width: auto; + padding-left: 0; + clear: none; + margin-bottom: 1em; + } + + } +} + diff --git a/web/css/ie6.css b/web/css/ie6.css deleted file mode 100644 index fd3e26047..000000000 --- a/web/css/ie6.css +++ /dev/null @@ -1,17 +0,0 @@ -#logo { - display: none; -} - -#logoie { - width: 133px; - height: 26px; - filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/i/mysociety-dark.png',sizingMethod='scale'); - position: absolute; - top: 4em; - right: 10px; - cursor: pointer; -} - -#emptyhomes-footer { - zoom: 1; -} |