diff options
Diffstat (limited to 'web/css/_main-import.scss')
| -rw-r--r-- | web/css/_main-import.scss | 279 |
1 files changed, 279 insertions, 0 deletions
diff --git a/web/css/_main-import.scss b/web/css/_main-import.scss new file mode 100644 index 000000000..305a9e43e --- /dev/null +++ b/web/css/_main-import.scss @@ -0,0 +1,279 @@ +// 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; + padding: 0; + // color: #a9aeb0; +} + +h1 { + margin: 0; + font-size: 175%; +} +h2 { + font-size: 140%; +} + +select, input, textarea { + font-size: 99%; + max-width: 95%; +} + +#mysociety { + + a.unsuitable-report { + font-size: small; + } + + blockquote { + border-left: solid 4px $header_colour; + } + + .a { + color: #000000; + background-color: $header_back_lighter; + } + + #postcodeForm { + background-color: $header_back; + } + + #front_stats div { + background-color: $header_back; + } + +} + +// Site layout + +#header { + font-size: 200%; + font-weight: bold; + border-bottom: solid 2px $header_colour; + margin: 0; + padding: 0.15em 0.5em; + background-color: $header_back; + color: $header_colour; + + a:link, a:visited { + color: $header_colour; + background-color: $header_back; + text-decoration: none; + } + a:active, a:hover { + text-decoration: underline; + } +} + +#my { + color: $header_darker; + background-color: $header_back; +} + +#mysociety { + width: 100%; /* Must specify a width or IE goes crazy wrong! */ + position: relative; + margin: 0 auto; + max-width: 60em; + overflow: auto; +} + +/* Can't put the margin in #mysociety because of above IE craziness */ +#wrapper { + margin: 1em 2em; +} + +#meta { + list-style-type: none; + margin: 30px 0 0.5em 1em; /* (was 0.25em 0 0 1em) forced to drop below promo (fix before the freeze) image */ + padding: 0; + font-size: 0.875em; + li { + display: inline; + margin: 0; + padding: 0 0 0 0.25em; + border-left: solid 1px $header_colour; + } + li:first-child { + border-left: none; + } +} + +.v { + display: none; +} + +#navigation { + position: absolute; + top: 1em; + right: 1em; + padding: 0; + margin: 0; + list-style-type: none; + + li { + display: inline; + padding: 0; + margin: 0; + } + + a { + display: -moz-inline-box; + display: inline-block; + padding: 0.4em 1em; + } + a:link, a:visited { + color: $header_colour; + } + a:hover, a:active { + background-color: $header_colour; + color: $header_back; + -moz-border-radius-topleft: 0.5em; + -webkit-border-top-left-radius: 0.5em; + border-radius-top-left: 0.5em; + -moz-border-radius-topright: 0.5em; + -webkit-border-top-right-radius: 0.5em; + border-radius-top-right: 0.5em; + } +} + +#nav_new a { + background-image: url("/i/new.png"); + background-repeat: no-repeat; + background-position: 100% 0; +} + +#promo { + position: absolute; + top: 3.3em; + left: 10px; + a { + display: block; + padding:0; + border:2px solid white; + img { + margin:0px; + } + } + a:hover { + border:2px dotted #70CFE3; + } +} + +.promo-background { + margin-top:-4px; + background-image:url(/i/promo-icicles.gif); + background-repeat:repeat-x; + background-position:top left; + padding-top:3em; +} + +#logo { + border: none; + position: absolute; + top: 3.3em; + 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; + border-top: solid 2px #ccc; + width: 50%; + margin: 1em auto 0; + padding: 0; + color: #333333; + + .l, .r { + margin-top: 0; + text-align: left; + width: 45%; + } + .l { + float: left; + } + .r { + float: right; + } +} + +@media all and (max-width: 50em) { + #logo { + display: none; + } + #promo { + position: static; + width: 116px; + top: none; + text-align: center; + margin: 0.25em auto; + display:block; + } + .promo-background img#logo { + border:2px solid #fff; + background-color: #fff; + } + #header { + font-size: 150%; + } + h1 { + font-size: 140%; + } + h2 { + font-size: 130%; + } + #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; + } +} + |