diff options
| -rw-r--r-- | perllib/FixMyStreet/App/View/Web.pm | 1 | ||||
| -rw-r--r-- | perllib/FixMyStreet/Cobrand/Barnet.pm | 2 | ||||
| -rw-r--r-- | perllib/FixMyStreet/Cobrand/Bromley.pm | 6 | ||||
| -rw-r--r-- | perllib/FixMyStreet/Cobrand/Default.pm | 4 | ||||
| -rw-r--r-- | perllib/FixMyStreet/Cobrand/LichfieldDC.pm | 2 | ||||
| -rw-r--r-- | perllib/FixMyStreet/Cobrand/Reading.pm | 2 | ||||
| -rw-r--r-- | perllib/FixMyStreet/Cobrand/Southampton.pm | 2 | ||||
| -rw-r--r-- | templates/web/fixmystreet/alert/index.html | 2 | ||||
| -rw-r--r-- | templates/web/fixmystreet/index.html | 2 | ||||
| -rw-r--r-- | web/cobrands/bromley/_colours.scss | 2 | ||||
| -rw-r--r-- | web/cobrands/bromley/layout.scss | 11 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/_base.scss | 3 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/_colours.scss | 2 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/_layout.scss | 1065 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/layout.scss | 1065 |
15 files changed, 1102 insertions, 1069 deletions
diff --git a/perllib/FixMyStreet/App/View/Web.pm b/perllib/FixMyStreet/App/View/Web.pm index 755f1e405..092e362f9 100644 --- a/perllib/FixMyStreet/App/View/Web.pm +++ b/perllib/FixMyStreet/App/View/Web.pm @@ -75,6 +75,7 @@ sprintf (different name to avoid clash) sub tprintf { my ( $self, $c, $format, @args ) = @_; + @args = @{$args[0]} if ref $args[0] eq 'ARRAY'; return sprintf $format, @args; } diff --git a/perllib/FixMyStreet/Cobrand/Barnet.pm b/perllib/FixMyStreet/Cobrand/Barnet.pm index 9791b071a..6f115ec63 100644 --- a/perllib/FixMyStreet/Cobrand/Barnet.pm +++ b/perllib/FixMyStreet/Cobrand/Barnet.pm @@ -10,7 +10,9 @@ sub council_name { return 'Barnet Council'; } sub council_url { return 'barnet'; } sub disambiguate_location { + my $self = shift; return { + %{ $self->SUPER::disambiguate_location() }, centre => '51.612832,-0.218169', span => '0.0563,0.09', bounds => [ '51.584682,-0.263169', '51.640982,-0.173169' ], diff --git a/perllib/FixMyStreet/Cobrand/Bromley.pm b/perllib/FixMyStreet/Cobrand/Bromley.pm index 4caeb16b6..75174b638 100644 --- a/perllib/FixMyStreet/Cobrand/Bromley.pm +++ b/perllib/FixMyStreet/Cobrand/Bromley.pm @@ -18,12 +18,18 @@ sub path_to_web_templates { } sub disambiguate_location { + my $self = shift; return { + %{ $self->SUPER::disambiguate_location() }, centre => '51.366836,0.040623', span => '0.154963,0.24347', bounds => [ '51.289355,-0.081112', '51.444318,0.162358' ], }; } +sub example_places { + return ( 'BR1 3UH', 'Glebe Rd, Bromley' ); +} + 1; diff --git a/perllib/FixMyStreet/Cobrand/Default.pm b/perllib/FixMyStreet/Cobrand/Default.pm index a4b7cecf2..c45c36b0b 100644 --- a/perllib/FixMyStreet/Cobrand/Default.pm +++ b/perllib/FixMyStreet/Cobrand/Default.pm @@ -916,5 +916,9 @@ Get stats to display on the council reports page sub get_report_stats { return 0; } +sub example_places { + return [ 'B2 4QA', 'Tib St, Manchester' ]; +} + 1; diff --git a/perllib/FixMyStreet/Cobrand/LichfieldDC.pm b/perllib/FixMyStreet/Cobrand/LichfieldDC.pm index 91c5e10ec..4d93aaf76 100644 --- a/perllib/FixMyStreet/Cobrand/LichfieldDC.pm +++ b/perllib/FixMyStreet/Cobrand/LichfieldDC.pm @@ -21,7 +21,9 @@ sub problems_clause { # FIXME - need to double check this is all correct sub disambiguate_location { + my $self = shift; return { + %{ $self->SUPER::disambiguate_location() }, centre => '52.688198,-1.804966', span => '0.1196,0.218675', bounds => [ '52.807793,-1.586291', '52.584891,-1.963232' ], diff --git a/perllib/FixMyStreet/Cobrand/Reading.pm b/perllib/FixMyStreet/Cobrand/Reading.pm index 58d96c5ca..c8591924e 100644 --- a/perllib/FixMyStreet/Cobrand/Reading.pm +++ b/perllib/FixMyStreet/Cobrand/Reading.pm @@ -12,7 +12,9 @@ sub council_name { return 'Reading City Council'; } sub council_url { return 'reading'; } sub disambiguate_location { + my $self = shift; return { + %{ $self->SUPER::disambiguate_location() }, town => 'Reading', centre => '51.452983,-0.983827', span => '0.083355,0.1245', diff --git a/perllib/FixMyStreet/Cobrand/Southampton.pm b/perllib/FixMyStreet/Cobrand/Southampton.pm index 5bb7df3b6..b57091bef 100644 --- a/perllib/FixMyStreet/Cobrand/Southampton.pm +++ b/perllib/FixMyStreet/Cobrand/Southampton.pm @@ -10,7 +10,9 @@ sub council_name { return 'Southampton City Council'; } sub council_url { return 'southampton'; } sub disambiguate_location { + my $self = shift; return { + %{ $self->SUPER::disambiguate_location() }, town => 'Southampton', centre => '50.913822,-1.400493', span => '0.084628,0.15701', diff --git a/templates/web/fixmystreet/alert/index.html b/templates/web/fixmystreet/alert/index.html index 7bec66305..8d4459c01 100644 --- a/templates/web/fixmystreet/alert/index.html +++ b/templates/web/fixmystreet/alert/index.html @@ -21,7 +21,7 @@ within a certain distance of a particular location.') %] <form method="get" action="/alert/list" class="full-width"> <fieldset> <div class="form-txt-submit-box"> - <input type="text" name="pc" value="[% pc | html %]" placeholder="[% loc('e.g. ‘B2 4QA’ or ‘Tib St, Manchester’') %]"> + <input type="text" name="pc" value="[% pc | html %]" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]"> <input class="green-btn" type="submit" value="[% loc('Go') %]"> </div> </fieldset> diff --git a/templates/web/fixmystreet/index.html b/templates/web/fixmystreet/index.html index 605e428a3..04b23ca7f 100644 --- a/templates/web/fixmystreet/index.html +++ b/templates/web/fixmystreet/index.html @@ -38,7 +38,7 @@ Modernizr.load({ <form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm" id="postcodeForm"> <label for="pc">[% question %]:</label> <div> - <input type="text" name="pc" value="" id="pc" size="10" maxlength="200" placeholder="[% loc('e.g. ‘B2 4QA’ or ‘Tib St, Manchester’') %]"> + <input type="text" name="pc" value="" id="pc" size="10" maxlength="200" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]"> <input type="submit" value="[% loc('Go') %]" id="submit"> </div> </form> diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss index f997fcd5b..c0376274e 100644 --- a/web/cobrands/bromley/_colours.scss +++ b/web/cobrands/bromley/_colours.scss @@ -1,6 +1,6 @@ /* COLOURS */ -$primary: rgb(91,120,147); +$primary: rgb(76,120,168); $primary_b: #000000; $primary_text: #ffffff; diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss new file mode 100644 index 000000000..3dc34c6c7 --- /dev/null +++ b/web/cobrands/bromley/layout.scss @@ -0,0 +1,11 @@ +@import "_colours"; +@import "../fixmystreet/_layout"; + +body { + background: #fff; +} + +#front-main { + background: $primary; +} + diff --git a/web/cobrands/fixmystreet/_base.scss b/web/cobrands/fixmystreet/_base.scss index 0a559058a..4202564f7 100644 --- a/web/cobrands/fixmystreet/_base.scss +++ b/web/cobrands/fixmystreet/_base.scss @@ -5,7 +5,8 @@ body { margin:0; font-size:1em; line-height:1.5; - color:#222; + color: #222; + background-color: #fff; } diff --git a/web/cobrands/fixmystreet/_colours.scss b/web/cobrands/fixmystreet/_colours.scss index f583789b8..2463cdeeb 100644 --- a/web/cobrands/fixmystreet/_colours.scss +++ b/web/cobrands/fixmystreet/_colours.scss @@ -2,7 +2,7 @@ $primary: #FFD000; $primary_b: #F3B11E; -$primary_text: #000000; +$primary_text: #222; $contrast1: #00BD08; $contrast2: #AA8D11; diff --git a/web/cobrands/fixmystreet/_layout.scss b/web/cobrands/fixmystreet/_layout.scss new file mode 100644 index 000000000..534b285b1 --- /dev/null +++ b/web/cobrands/fixmystreet/_layout.scss @@ -0,0 +1,1065 @@ +@import "compass"; +@import "_mixins"; + +//hacks for desk/mob only stuff +.desk-only { + display:block !important; +} +.mob-only { + display:none !important; +} + +body { + background: #1A1A1A url(/cobrands/fixmystreet/images/tile.jpg) 0 0 repeat; +} + +h1 { + margin-top: 0; +} + +// Page wrapper and header bits follow + +.container{ + margin: 0 auto; + padding: 0em; + width: 60em; + position: relative; + z-index:1; +} + +//z-index stack order gets reset to 0 in ie6/7 if you position anything, +//so to fix things we give it a high value (don't ask me why) +//see: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ +//this affects #site-logo +.ie6, .ie7 { + .container { + z-index:100; + } +} + +.wrapper{ + display: table; + caption-side: top; + width: 100%; + .table-cell { + display:table-cell; + } +} + +//pad the top of the wrapper to allow space for the menu to fit in +//when its positioned absolute below +.ie6, .ie7 { + .wrapper { + padding-top:4em; + } +} + +.nav-wrapper{ + display: table-caption; + .nav-wrapper-2{ + width: 100%; + min-height: 4em; + position: absolute; + border-top:4px solid #1a1a1a; + @include border-image(url(/cobrands/fixmystreet/images/tile-y-border.jpg) 4 0 0 0); + border-left:0; + border-right:0; + z-index:2; + } +} + +//position absolute the menu as ie doesn't like display:table +.ie6, .ie7 { + .nav-wrapper { + position: absolute; + top:0; + left:0; + width:100%; + .nav-wrapper-2 { + // position static as well so we fix lots of the z-index issues + position:static; + } + } +} + +// Resets a lot of the mobile styling. #site-header only used to help position logo on desktop +#site-header { + height: auto; + background: none; + border-top: 0px; + .container { + position: static;//reset position so the nav links become clickable + } +} +#site-logo { + top: 0.9em; + position: absolute; + z-index: 3; +} +.ie6, .ie7 { + #site-header { + height:3em; + .container { + //ie broken z-index bug: the site-logo won't appear if we don't do this + //doesn't seem to render the nav link unclickable like in other browsers + position: relative; + } + } + #site-logo { + position: absolute; + top:-3.25em; + } +} +#nav-link { + left:-999999px; +} +#main-nav{ + margin: 0 auto; + padding: 0em; + width: 60em; + ul{ + list-style: none; + padding: 0px; + margin: 0px; + float:right; + li{ + list-style: none; + display: inline; + margin: 0px; + padding: 0px; + float:left; + a, + span { + display: block; + color:#fff; + background: none; + border-bottom: none; + } + } + &#main-menu{ + li{ + a, span{ + padding: 0.75em; + font-size: 0.9em; + } + a:hover{ + background:#444; + @include background(linear-gradient(#000, #444 10%, #444 95%, #111)); + } + a.report-a-problem-btn { + background:$primary; + padding:0.25em; + margin:0.5em; + color:#333; + @include border-radius(0.25em); + &:hover { + background:$primary/1.1; + } + } + span { + color:$primary; + } + } + } + &#mysoc-menu{ + padding: 0em 0.5em; + margin-left: 0.25em; + background:$primary url(/cobrands/fixmystreet/images/tile-y.jpg); + @include border-radius(0 0 0.375em 0.375em); + li{ + a{ + background:none; + color:#000; + text-transform: uppercase; + font-size: 0.6875em; + padding: 1.3em 0.7em 1em 0.7em; + &#mysoc-logo { + width:84px; + height:16px; + background-position:-260px -43px; + opacity: 0.8; + &:hover { + opacity: 1; + } + } + &:hover{ + color:#fff; + } + } + } + } + } +} + + + + +// .content Is the white box + +// The narrow single column box +.content{ + width: 27em; + margin-top: 3em; + background: #fff; + padding: 1em; + padding-bottom: 3em; + margin-left: 0.5em; + margin-bottom: -1em; + @include box-shadow(0px 0px 6px 1px #000); +} +.ie6, .ie7, .ie8 { + .content { + // If no box-shadow, just want a boring black border to stand it out from the map. + border: 1px solid black; + //take off margins so we line up properly + margin: 0; + } +} +//weird margining thing for ie8 +.ie8 .content { + margin-top:3em; +} + +// map page - has fixed header and different styling +body.mappage { + .content { + float:left; + } + #main-nav ul#main-menu li a, + #main-nav ul#main-menu li span { + padding: 1.4em 0.75em 1.35em 0.75em; + } + #main-nav ul#main-menu li a.report-a-problem-btn { + padding: 0.5em; + margin:0.9em 0.25em 0.85em 0.25em; + } + .nav-wrapper{ + .nav-wrapper-2{ + position: fixed; + background: #222; + @include background(linear-gradient(#000, #222 10%, #222 90%, #000)); + } + } + #site-logo{ + position: fixed; + } +} +.ie6, .ie7 { + body.mappage { + // The below is *mandatory* to allow pins/zoom to be clickable in IE6/7. Do NOT remove. + .container { + float: left; + width: 27em; + margin-left: 1.4em; + } + .nav-wrapper{ + z-index:1; + .nav-wrapper-2 { + position:static; + } + } + #site-logo { + position: absolute; + } + } +} +.ie6 { + body.mappage { + .container { + margin-left: 0.7em; + } + } +} +//ie8 needs different stuff on .nav-wrapper so we +//have to define all the rest of it again as this resets +//the z-index base yet again :S +.ie8 { + body.mappage { + .nav-wrapper{ + position: relative; + z-index:0; + .nav-wrapper-2 { + position:static; + } + } + #site-logo { + position: absolute; + } + } +} + + + +// full width page +body.fullwidthpage { + .content { + width: 57em; + } + .intro { + width:40em; + } +} +// two thirds width page, also has option for a sidebar which can be sticky or not +body.twothirdswidthpage { + @extend .fullwidthpage; + .content { + width:40em; + position: relative; + aside { + background:#eee; + position:absolute; + left:42em; + top:0; + z-index: -1; + width:13em; + padding:1em; + @include box-shadow(0px 0px 6px 1px #000); + h2 { + margin-top: 0; + } + img { + margin-bottom: 0.25em; + } + } + .sticky-sidebar { + position: absolute; + left:42em; + z-index: -1; + aside { + position: fixed; + top:7em; + left:auto; + } + } + } +} +//as ie6 doesn't like 'fixed' we will make it absolute again +.ie6 body.twothirdswidthpage .content .sticky-sidebar { + position:static; + aside { + position:absolute; + left:42em; + top:0; + } +} + + +// table wrapper - this enables anything to become a +// table with div children as table cells +.tablewrapper { + display:table; + width:100%; + padding:0 0 1em 0; + >div { + display:table-cell; + width:50%; + } + .full-width { + width:auto; + margin:0; + } +} + +//fix table to be a block for ie, float the children +.ie6, .ie7 { + .tablewrapper { + display:block; + div {//ie6 doesn't support '>div', so we'll go with the somewhat risker 'div' + width:48%; + display:block; + float: left; + border:none !important; + } + } +} + +// adds border to the top and goes full width +.bordered { + margin:0 -1em; + padding:0 1em; + width:auto; + border-top:0.25em solid $primary; +} + +//footer blocks +#footer-mobileapps { + border-right:1em solid #fff; + background:none; + padding:0; + @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0); + h2 { + color:#222; + margin-top:0; + } + ul { + @include list-reset; + li { + border-bottom:none; + float:left; + margin:0 1em 1em 0; + a { + color:#222; + padding:0; + width: 96px; + height: 32px; + margin:0 auto; + text-indent: -999999px; + background: url(/cobrands/fixmystreet/images/sprite.png) -12px -3610px no-repeat; + opacity: 0.8; + &:hover { + opacity: 1; + } + &.m-app-iphone { + background-position: -12px -3610px; + } + &.m-app-iphone-streetreport { + background-position: -12px -3678px; + height:50px; + } + &.m-app-droid { + background-position: -12px -3756px; + } + &.m-app-nokia { + background-position: -12px -3820px; + width:74px; + } + } + } + } +} +.ie6, .ie7 { + #footer-mobileapps { + margin:0 0.5em; + margin-right:2%; + } +} +.ie6 #footer-mobileapps ul li a { + background:url(/cobrands/fixmystreet/images/ie_mobileapps.gif) -1px -1px no-repeat; + &.m-app-iphone-streetreport { + background-position: -1px -69px; + height:50px; + } + &.m-app-droid { + background-position: -1px -148px; + } + &.m-app-nokia { + background-position: -1px -212px; + width:74px; + } +} + +#footer-help { + border-left:1em solid #fff; + ul { + display:table; + li { + display:table-cell; + border-bottom:none; + &:last-child { + border-left:1.25em solid #fff; + } + } + } +} +.ie6, .ie7 { + #footer-help { + margin-left:2%; + ul { + width:100%; + li { + float:left; + width:45% + } + } + } +} + + +// map box (fallback for non js really as most users +// will have fullscreen map) +#map_box{ + position: absolute; + height: 29em; + width: 29em; + right: 1em; + top: 3em; + z-index:1; +} + +// Pull OpenLayers navigation down a bit +#fms_pan_zoom { + top: 4.75em !important; +} + +// push zoom back over to right +#fms_pan_zoom_zoomin { + left:auto !important; + right:30px; + top:130px !important; +} +#fms_pan_zoom_zoomout { + left:auto !important; + right:30px; + top:174px !important; +} + +.olControlAttribution { + bottom:0.5em !important; + left: auto !important; +} + +#sub_map_links { + left:auto; + bottom:auto; + bottom:2em; + #map_links_toggle { + display:block; + cursor: pointer; + position:absolute; + left:-1em; + width:1em; + height:100%; + background:#000 url(/cobrands/fixmystreet/images/sprite.png) right -4119px no-repeat; + @include border-radius(0.25em 0 0 0.25em); + &:hover { + left:-1.5em; + //use border so we don't have to redefine the background-position + border-right:0.5em solid #000; + } + &.closed { + background-position: right -4159px; + } + } +} +.ie6 #sub_map_links #map_links_toggle { + height:1.75em; + background:#000 url('images/ie_sub_map_links_sprite.gif') center -143px no-repeat; + &.closed { + background-position: center -183px; + } +} + +// log in bit, pokes above the .content div +#user-meta{ + display:block; + position: relative; + max-width: 57em; + margin:0 auto; + p { + @include inline-block; + position:absolute; + top:1em; + height:2em; + padding:0.25em 6em 0.5em 0.5em; + @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); + a { + top:0.5em; + right:0.5em; + font-size:0.6875em; + padding:0.5em 0.75em; + line-height:1em; + &:hover { + text-decoration:none; + background:#444; + } + } + } +} +.ie6, .ie7 { + #user-meta { + z-index:1; + p { + top:-2em; + } + } +} +.ie6 #user-meta { + width:57em; //ie6 doesn't like max-width +} + + + +// Wraps around #key-tools box - sticks to the bottom of the screen on desktop +.shadow-wrap { + position:fixed; + z-index:10; //this is just to ensure anythign inside .content that has position set goes sites it + bottom: 0; + width: 29em; + overflow: hidden; + padding-top: 3em; + ul#key-tools { + border-top: 0.25em solid $primary; + margin: 0; + @include box-shadow(-0em 0px 1em 1em #fff); + li { + border:none; + a { + font-size: 0.75em; + color:#666; + padding: 0.5em 1.5em 0.5em 0; + text-transform:none; + &.abuse { + background-image:url(/cobrands/fixmystreet/images/sprite.png); + background-position:right -2935px; + } + &.feed { + background-image:url(/cobrands/fixmystreet/images/sprite.png); + background-position:right -3074px; + } + &.chevron { + background-image:url(/cobrands/fixmystreet/images/sprite.png); + background-position:right -3225px; + } + &.hover { + background-image:url(/cobrands/fixmystreet/images/sprite.png); + background-position:right -1876px; + } + } + } + &.singleton { + li { + text-align:right; + a { + padding-right:3em; + } + } + } + } + &.static { + padding:0 0 1em 0; + position: static; + } +} +// The padding is for the fading out when it's fixed positioned, which it isn't in IE6. +.ie6 .shadow-wrap { + padding-top: 0; +} + +// pokes over the RHS with a little triangle +.big-green-banner { + top:auto; + right:-1.25em; + margin-left:-2em; + font-size:1.375em; + padding:1em 3em 1em 1em; + background: $contrast1 url(/cobrands/fixmystreet/images/sprite.png) right -2188px no-repeat; + &:before { + right:0; + left:auto; + top:-0.5em; + position: absolute; + border-top: 0.5em solid transparent; + border-left: 0.5em solid #4B8304; + border-bottom:none; + } +} +.ie6 .big-green-banner { + background: $contrast1 url(/cobrands/fixmystreet/images/ie_green_chevron.gif) right center no-repeat; +} + +.banner { + // state banners + p { + top:-2.25em; + padding:1em; + &:before { + left:-0.75em; + border-left: 0.75em solid transparent; + border-bottom: 0.75em solid #888; + } + &#fixed { + padding-top:5em; + background-image:url(/cobrands/fixmystreet/images/sprite.png); + background-position:-324px -326px; + background-repeat:no-repeat; + &:before { + border-bottom: 0.75em solid #4B8304; + } + } + } +} +.ie6 .banner p { + top:-1.5em; + &#fixed { + background-image:url(/cobrands/fixmystreet/images/ie_fixed.gif); + background-position:center 0.75em; + } +} + + +// for pulling elements fullwidth regardless +// of .contents' padding +.full-width{ + margin: 0 0 0em -1em; + width: 29em; +} + +/*FORMS*/ +input[type=text], +input[type=password], +input[type=email], +textarea{ + width: 25em; +} +.form-box { + max-width:25em; +} + + +/* form errors */ +div.form-error, +p.form-error { + display:block; + width:24.7em; +} + +input.form-error, +textarea.form-error { + @include border-radius(0 0 0.25em 0.25em); +} + + +// Report a problem sidebar notes +#report-a-problem-sidebar { + position:absolute; + z-index:-1;//push behind .content, .container resets z-index for this + left:29.5em; + top:5em; + width:15em; + @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); + .sidebar-tips { + background:#eeeeee; + padding:1em; + font-size:0.75em; + } + .sidebar-notes { + background:#333333; + padding:1em; + color:#ffffff; + font-size:0.75em; + } +} +.ie6, .ie7 { + #report-a-problem-sidebar { + left: 29em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly. + } +} + +.no-js .general-sidebar-notes, +.no-js #report-a-problem-sidebar { + position: static; + width: auto; + @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0); + .sidebar-tips, + .sidebar-notes { + font-size:1em; + } +} + +// More general sidebar notes +.general-sidebar-notes { + position: absolute; + left:29.5em; + width:15em; + z-index: -1; //push behind .content, .container resets z-index for this + @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); + p { + background:#eeeeee; + font-size:0.75em; + padding:0.75em; + margin:0; + &.dark { + background:#333333; + color:#ffffff; + } + } +} + +// Frontpage + +body.frontpage { + .table-cell { + // we do this so we can have full screen width elements + >.container { + width:100%; + } + .content { + margin:14em auto 0 auto; + } + } + .nav-wrapper-2{ + height:6em; + } + #site-header{ + height:9em; + } + #site-logo{ + top:3em; + width: 300px; + height: 60px; + background-position:-2px -108px; + } + #user-meta { + z-index:10; + p { + top:-4em; + right:0; + color:#FFD000; + background:none; + @include box-shadow(rgba(0, 0, 0, 0) 0 0 0); + a { + background:#fff; + color:#1a1a1a; + &:hover { + background:#ddd; + } + } + } + } +} +//logo fix +.ie6, .ie7, .ie8 { + body.frontpage { + #site-logo { + position:relative; + width:60em; + margin:0 auto; + } + } +} +.ie6, .ie7 { + body.frontpage { + #site-header { + height:3em; + } + #site-logo { + top:-1em; + } + #user-meta p { + top:-2em; + } + } +} +.ie6 body.frontpage #site-logo { + background:url(/cobrands/fixmystreet/images/ie_front_logo.gif) 0 0 no-repeat; +} +//weird margining thing for ie8 +.ie8 body.frontpage { + #front-main { + top:-12em; + } + .table-cell .content { + margin-top:12em; + } +} + +// big yellow bit full screen width +#front-main { + color: $primary_text; + background: $primary url(/cobrands/fixmystreet/images/tile-y.jpg); + position:absolute; + width:100%; + left:0; + top:-15em; + #front-main-container { + max-width: 57em; + margin:0 auto; + } + h2 { + font-style:normal; + margin:0; + color:#222; + } + #postcodeForm { + background:none; + overflow:hidden; + margin-right:0.5em; + label { + margin:0.5em 0; + } + div { + display:block; + margin:0 auto; + width:20em; + overflow:hidden; + input#pc { + display:block; + float:left; + padding:0.25em 0.5em; + height:1.5em; + width:16em; + } + input#submit { + display:block; + float:right; + width:3em; + height:2.3em; + padding-top:0.2em; + } + } + } + a#geolocate_link { + background:none; + color:#222; + margin:-1em 0 0.5em 0; + &:hover { + text-decoration:underline; + background:none; + } + } +} +.ie6, .ie7 { + #front-main { + top:2em; + } +} + + +#front-howto { + border-right:1em solid #fff; + #front_stats { + background:none; + border-top:0.25em solid $primary; + padding-top:1em; + div { + big { + color:$primary; + font-size:3.2308em; + } + } + } +} +.ie6, .ie7 { + #front_stats { + div { + width:8em; + float:left; + } + } +} + +#front-recently { + border-left:1em solid #fff; +} + +#front-howto h2, +#front-recently h2 { + margin-top:0; +} + + +.ie6, .ie7 { + .tablewrapper { + #front-howto { + margin-right:2%; + } + #front-recently { + margin-left:2%; + } + } +} + + + + +/* MEDIA QUERIES */ +@media only screen and (min-width: 48em) and (max-width: 61em) { + .container { + width: 100%; + } + /*FORMS*/ + input[type=text], + input[type=password], + input[type=email], + textarea{ + width: 95%; + } + + // Remove central positioning of mainmenu and float right. + // Left padding is to ensure no overlap of the site-logo + // Background styling replicates header styling + + #main-nav{ + width: auto; + float:right; + padding-left: 180px; + } + .nav-wrapper { + // width:auto; + .nav-wrapper-2 { + // width:auto; + } + } + + //Main menu drops below logo and my-soc menu + #main-menu{ + margin-top: 3em; + } + //therefore header needs to open up + #site-header { + height:6em; + } + // Pull OpenLayers navigation down a bit more + #fms_pan_zoom { + top: 7em !important; + } + + //fix the left margin on login bit + #user-meta { + p { + left:1em; + } + } + body.frontpage { + #user-meta { + p { + left:auto; + } + } + } + + //Map becomes percentage width + #map_box{ + left: 32em; + width:auto; + } + + //put the RAP notes into the main copy area + // Note: Also used for the non-JS case. + #report-a-problem-sidebar, + .general-sidebar-notes { + position: static; + width: auto; + @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0); + .sidebar-tips, + .sidebar-notes { + font-size:1em; + } + } + + //Revert to mobile use of the .full-width class + .full-width{ + width: auto; + margin: 0em -1em 0 -1em; + } + + //make fullpage auto width + body.fullwidthpage .content { + width: auto; + } + + //make twothirdswidthpage nearly as small as main + //.content: just enough to still fit the sidebar in + body.twothirdswidthpage { + .content { + width:30em; + .sticky-sidebar { + left:32em; + top:30em; + aside { + top:9em; + } + } + } + } +} diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss index e1a6f474f..f9d5b3930 100644 --- a/web/cobrands/fixmystreet/layout.scss +++ b/web/cobrands/fixmystreet/layout.scss @@ -1,1066 +1,3 @@ - -@import "compass"; @import "_colours"; -@import "_mixins"; - -//hacks for desk/mob only stuff -.desk-only { - display:block !important; -} -.mob-only { - display:none !important; -} - -body { - background: #1A1A1A url(images/tile.jpg) 0 0 repeat; -} - -h1 { - margin-top: 0; -} - -// Page wrapper and header bits follow - -.container{ - margin: 0 auto; - padding: 0em; - width: 60em; - position: relative; - z-index:1; -} - -//z-index stack order gets reset to 0 in ie6/7 if you position anything, -//so to fix things we give it a high value (don't ask me why) -//see: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ -//this affects #site-logo -.ie6, .ie7 { - .container { - z-index:100; - } -} - -.wrapper{ - display: table; - caption-side: top; - width: 100%; - .table-cell { - display:table-cell; - } -} - -//pad the top of the wrapper to allow space for the menu to fit in -//when its positioned absolute below -.ie6, .ie7 { - .wrapper { - padding-top:4em; - } -} - -.nav-wrapper{ - display: table-caption; - .nav-wrapper-2{ - width: 100%; - min-height: 4em; - position: absolute; - border-top:4px solid #1a1a1a; - @include border-image(url(images/tile-y-border.jpg) 4 0 0 0); - border-left:0; - border-right:0; - z-index:2; - } -} - -//position absolute the menu as ie doesn't like display:table -.ie6, .ie7 { - .nav-wrapper { - position: absolute; - top:0; - left:0; - width:100%; - .nav-wrapper-2 { - // position static as well so we fix lots of the z-index issues - position:static; - } - } -} - -// Resets a lot of the mobile styling. #site-header only used to help position logo on desktop -#site-header { - height: auto; - background: none; - border-top: 0px; - .container { - position: static;//reset position so the nav links become clickable - } -} -#site-logo { - top: 0.9em; - position: absolute; - z-index: 3; -} -.ie6, .ie7 { - #site-header { - height:3em; - .container { - //ie broken z-index bug: the site-logo won't appear if we don't do this - //doesn't seem to render the nav link unclickable like in other browsers - position: relative; - } - } - #site-logo { - position: absolute; - top:-3.25em; - } -} -#nav-link { - left:-999999px; -} -#main-nav{ - margin: 0 auto; - padding: 0em; - width: 60em; - ul{ - list-style: none; - padding: 0px; - margin: 0px; - float:right; - li{ - list-style: none; - display: inline; - margin: 0px; - padding: 0px; - float:left; - a, - span { - display: block; - color:#fff; - background: none; - border-bottom: none; - } - } - &#main-menu{ - li{ - a, span{ - padding: 0.75em; - font-size: 0.9em; - } - a:hover{ - background:#444; - @include background(linear-gradient(#000, #444 10%, #444 95%, #111)); - } - a.report-a-problem-btn { - background:$primary; - padding:0.25em; - margin:0.5em; - color:#333; - @include border-radius(0.25em); - &:hover { - background:$primary/1.1; - } - } - span { - color:$primary; - } - } - } - &#mysoc-menu{ - padding: 0em 0.5em; - margin-left: 0.25em; - background:$primary url(images/tile-y.jpg); - @include border-radius(0 0 0.375em 0.375em); - li{ - a{ - background:none; - color:#000; - text-transform: uppercase; - font-size: 0.6875em; - padding: 1.3em 0.7em 1em 0.7em; - &#mysoc-logo { - width:84px; - height:16px; - background-position:-260px -43px; - opacity: 0.8; - &:hover { - opacity: 1; - } - } - &:hover{ - color:#fff; - } - } - } - } - } -} - - - - -// .content Is the white box - -// The narrow single column box -.content{ - width: 27em; - margin-top: 3em; - background: #fff; - padding: 1em; - padding-bottom: 3em; - margin-left: 0.5em; - margin-bottom: -1em; - @include box-shadow(0px 0px 6px 1px #000); -} -.ie6, .ie7, .ie8 { - .content { - // If no box-shadow, just want a boring black border to stand it out from the map. - border: 1px solid black; - //take off margins so we line up properly - margin: 0; - } -} -//weird margining thing for ie8 -.ie8 .content { - margin-top:3em; -} - -// map page - has fixed header and different styling -body.mappage { - .content { - float:left; - } - #main-nav ul#main-menu li a, - #main-nav ul#main-menu li span { - padding: 1.4em 0.75em 1.35em 0.75em; - } - #main-nav ul#main-menu li a.report-a-problem-btn { - padding: 0.5em; - margin:0.9em 0.25em 0.85em 0.25em; - } - .nav-wrapper{ - .nav-wrapper-2{ - position: fixed; - background: #222; - @include background(linear-gradient(#000, #222 10%, #222 90%, #000)); - } - } - #site-logo{ - position: fixed; - } -} -.ie6, .ie7 { - body.mappage { - // The below is *mandatory* to allow pins/zoom to be clickable in IE6/7. Do NOT remove. - .container { - float: left; - width: 27em; - margin-left: 1.4em; - } - .nav-wrapper{ - z-index:1; - .nav-wrapper-2 { - position:static; - } - } - #site-logo { - position: absolute; - } - } -} -.ie6 { - body.mappage { - .container { - margin-left: 0.7em; - } - } -} -//ie8 needs different stuff on .nav-wrapper so we -//have to define all the rest of it again as this resets -//the z-index base yet again :S -.ie8 { - body.mappage { - .nav-wrapper{ - position: relative; - z-index:0; - .nav-wrapper-2 { - position:static; - } - } - #site-logo { - position: absolute; - } - } -} - - - -// full width page -body.fullwidthpage { - .content { - width: 57em; - } - .intro { - width:40em; - } -} -// two thirds width page, also has option for a sidebar which can be sticky or not -body.twothirdswidthpage { - @extend .fullwidthpage; - .content { - width:40em; - position: relative; - aside { - background:#eee; - position:absolute; - left:42em; - top:0; - z-index: -1; - width:13em; - padding:1em; - @include box-shadow(0px 0px 6px 1px #000); - h2 { - margin-top: 0; - } - img { - margin-bottom: 0.25em; - } - } - .sticky-sidebar { - position: absolute; - left:42em; - z-index: -1; - aside { - position: fixed; - top:7em; - left:auto; - } - } - } -} -//as ie6 doesn't like 'fixed' we will make it absolute again -.ie6 body.twothirdswidthpage .content .sticky-sidebar { - position:static; - aside { - position:absolute; - left:42em; - top:0; - } -} - - -// table wrapper - this enables anything to become a -// table with div children as table cells -.tablewrapper { - display:table; - width:100%; - padding:0 0 1em 0; - >div { - display:table-cell; - width:50%; - } - .full-width { - width:auto; - margin:0; - } -} - -//fix table to be a block for ie, float the children -.ie6, .ie7 { - .tablewrapper { - display:block; - div {//ie6 doesn't support '>div', so we'll go with the somewhat risker 'div' - width:48%; - display:block; - float: left; - border:none !important; - } - } -} - -// adds border to the top and goes full width -.bordered { - margin:0 -1em; - padding:0 1em; - width:auto; - border-top:0.25em solid $primary; -} - -//footer blocks -#footer-mobileapps { - border-right:1em solid #fff; - background:none; - padding:0; - @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0); - h2 { - color:#222; - margin-top:0; - } - ul { - @include list-reset; - li { - border-bottom:none; - float:left; - margin:0 1em 1em 0; - a { - color:#222; - padding:0; - width: 96px; - height: 32px; - margin:0 auto; - text-indent: -999999px; - background: url(images/sprite.png) -12px -3610px no-repeat; - opacity: 0.8; - &:hover { - opacity: 1; - } - &.m-app-iphone { - background-position: -12px -3610px; - } - &.m-app-iphone-streetreport { - background-position: -12px -3678px; - height:50px; - } - &.m-app-droid { - background-position: -12px -3756px; - } - &.m-app-nokia { - background-position: -12px -3820px; - width:74px; - } - } - } - } -} -.ie6, .ie7 { - #footer-mobileapps { - margin:0 0.5em; - margin-right:2%; - } -} -.ie6 #footer-mobileapps ul li a { - background:url(images/ie_mobileapps.gif) -1px -1px no-repeat; - &.m-app-iphone-streetreport { - background-position: -1px -69px; - height:50px; - } - &.m-app-droid { - background-position: -1px -148px; - } - &.m-app-nokia { - background-position: -1px -212px; - width:74px; - } -} - -#footer-help { - border-left:1em solid #fff; - ul { - display:table; - li { - display:table-cell; - border-bottom:none; - &:last-child { - border-left:1.25em solid #fff; - } - } - } -} -.ie6, .ie7 { - #footer-help { - margin-left:2%; - ul { - width:100%; - li { - float:left; - width:45% - } - } - } -} - - -// map box (fallback for non js really as most users -// will have fullscreen map) -#map_box{ - position: absolute; - height: 29em; - width: 29em; - right: 1em; - top: 3em; - z-index:1; -} - -// Pull OpenLayers navigation down a bit -#fms_pan_zoom { - top: 4.75em !important; -} - -// push zoom back over to right -#fms_pan_zoom_zoomin { - left:auto !important; - right:30px; - top:130px !important; -} -#fms_pan_zoom_zoomout { - left:auto !important; - right:30px; - top:174px !important; -} - -.olControlAttribution { - bottom:0.5em !important; - left: auto !important; -} - -#sub_map_links { - left:auto; - bottom:auto; - bottom:2em; - #map_links_toggle { - display:block; - cursor: pointer; - position:absolute; - left:-1em; - width:1em; - height:100%; - background:#000 url(images/sprite.png) right -4119px no-repeat; - @include border-radius(0.25em 0 0 0.25em); - &:hover { - left:-1.5em; - //use border so we don't have to redefine the background-position - border-right:0.5em solid #000; - } - &.closed { - background-position: right -4159px; - } - } -} -.ie6 #sub_map_links #map_links_toggle { - height:1.75em; - background:#000 url('images/ie_sub_map_links_sprite.gif') center -143px no-repeat; - &.closed { - background-position: center -183px; - } -} - -// log in bit, pokes above the .content div -#user-meta{ - display:block; - position: relative; - max-width: 57em; - margin:0 auto; - p { - @include inline-block; - position:absolute; - top:1em; - height:2em; - padding:0.25em 6em 0.5em 0.5em; - @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); - a { - top:0.5em; - right:0.5em; - font-size:0.6875em; - padding:0.5em 0.75em; - line-height:1em; - &:hover { - text-decoration:none; - background:#444; - } - } - } -} -.ie6, .ie7 { - #user-meta { - z-index:1; - p { - top:-2em; - } - } -} -.ie6 #user-meta { - width:57em; //ie6 doesn't like max-width -} - - - -// Wraps around #key-tools box - sticks to the bottom of the screen on desktop -.shadow-wrap { - position:fixed; - z-index:10; //this is just to ensure anythign inside .content that has position set goes sites it - bottom: 0; - width: 29em; - overflow: hidden; - padding-top: 3em; - ul#key-tools { - border-top: 0.25em solid $primary; - margin: 0; - @include box-shadow(-0em 0px 1em 1em #fff); - li { - border:none; - a { - font-size: 0.75em; - color:#666; - padding: 0.5em 1.5em 0.5em 0; - text-transform:none; - &.abuse { - background-image:url(images/sprite.png); - background-position:right -2935px; - } - &.feed { - background-image:url(images/sprite.png); - background-position:right -3074px; - } - &.chevron { - background-image:url(images/sprite.png); - background-position:right -3225px; - } - &.hover { - background-image:url(images/sprite.png); - background-position:right -1876px; - } - } - } - &.singleton { - li { - text-align:right; - a { - padding-right:3em; - } - } - } - } - &.static { - padding:0 0 1em 0; - position: static; - } -} -// The padding is for the fading out when it's fixed positioned, which it isn't in IE6. -.ie6 .shadow-wrap { - padding-top: 0; -} - -// pokes over the RHS with a little triangle -.big-green-banner { - top:auto; - right:-1.25em; - margin-left:-2em; - font-size:1.375em; - padding:1em 3em 1em 1em; - background: $contrast1 url(images/sprite.png) right -2188px no-repeat; - &:before { - right:0; - left:auto; - top:-0.5em; - position: absolute; - border-top: 0.5em solid transparent; - border-left: 0.5em solid #4B8304; - border-bottom:none; - } -} -.ie6 .big-green-banner { - background: $contrast1 url(images/ie_green_chevron.gif) right center no-repeat; -} - -.banner { - // state banners - p { - top:-2.25em; - padding:1em; - &:before { - left:-0.75em; - border-left: 0.75em solid transparent; - border-bottom: 0.75em solid #888; - } - &#fixed { - padding-top:5em; - background-image:url(images/sprite.png); - background-position:-324px -326px; - background-repeat:no-repeat; - &:before { - border-bottom: 0.75em solid #4B8304; - } - } - } -} -.ie6 .banner p { - top:-1.5em; - &#fixed { - background-image:url(images/ie_fixed.gif); - background-position:center 0.75em; - } -} - - -// for pulling elements fullwidth regardless -// of .contents' padding -.full-width{ - margin: 0 0 0em -1em; - width: 29em; -} - -/*FORMS*/ -input[type=text], -input[type=password], -input[type=email], -textarea{ - width: 25em; -} -.form-box { - max-width:25em; -} - - -/* form errors */ -div.form-error, -p.form-error { - display:block; - width:24.7em; -} - -input.form-error, -textarea.form-error { - @include border-radius(0 0 0.25em 0.25em); -} - - -// Report a problem sidebar notes -#report-a-problem-sidebar { - position:absolute; - z-index:-1;//push behind .content, .container resets z-index for this - left:29.5em; - top:5em; - width:15em; - @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); - .sidebar-tips { - background:#eeeeee; - padding:1em; - font-size:0.75em; - } - .sidebar-notes { - background:#333333; - padding:1em; - color:#ffffff; - font-size:0.75em; - } -} -.ie6, .ie7 { - #report-a-problem-sidebar { - left: 29em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly. - } -} - -.no-js .general-sidebar-notes, -.no-js #report-a-problem-sidebar { - position: static; - width: auto; - @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0); - .sidebar-tips, - .sidebar-notes { - font-size:1em; - } -} - -// More general sidebar notes -.general-sidebar-notes { - position: absolute; - left:29.5em; - width:15em; - z-index: -1; //push behind .content, .container resets z-index for this - @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); - p { - background:#eeeeee; - font-size:0.75em; - padding:0.75em; - margin:0; - &.dark { - background:#333333; - color:#ffffff; - } - } -} - -// Frontpage - -body.frontpage { - .table-cell { - // we do this so we can have full screen width elements - >.container { - width:100%; - } - .content { - margin:14em auto 0 auto; - } - } - .nav-wrapper-2{ - height:6em; - } - #site-header{ - height:9em; - } - #site-logo{ - top:3em; - width: 300px; - height: 60px; - background-position:-2px -108px; - } - #user-meta { - z-index:10; - p { - top:-4em; - right:0; - color:#FFD000; - background:none; - @include box-shadow(rgba(0, 0, 0, 0) 0 0 0); - a { - background:#fff; - color:#1a1a1a; - &:hover { - background:#ddd; - } - } - } - } -} -//logo fix -.ie6, .ie7, .ie8 { - body.frontpage { - #site-logo { - position:relative; - width:60em; - margin:0 auto; - } - } -} -.ie6, .ie7 { - body.frontpage { - #site-header { - height:3em; - } - #site-logo { - top:-1em; - } - #user-meta p { - top:-2em; - } - } -} -.ie6 body.frontpage #site-logo { - background:url(images/ie_front_logo.gif) 0 0 no-repeat; -} -//weird margining thing for ie8 -.ie8 body.frontpage { - #front-main { - top:-12em; - } - .table-cell .content { - margin-top:12em; - } -} - -// big yellow bit full screen width -#front-main { - background:$primary url(images/tile-y.jpg); - position:absolute; - width:100%; - left:0; - top:-15em; - #front-main-container { - max-width: 57em; - margin:0 auto; - } - h2 { - font-style:normal; - margin:0; - color:#222; - } - #postcodeForm { - background:none; - overflow:hidden; - margin-right:0.5em; - label { - margin:0.5em 0; - } - div { - display:block; - margin:0 auto; - width:20em; - overflow:hidden; - input#pc { - display:block; - float:left; - padding:0.25em 0.5em; - height:1.5em; - width:16em; - } - input#submit { - display:block; - float:right; - width:3em; - height:2.3em; - padding-top:0.2em; - } - } - } - a#geolocate_link { - background:none; - color:#222; - margin:-1em 0 0.5em 0; - &:hover { - text-decoration:underline; - background:none; - } - } -} -.ie6, .ie7 { - #front-main { - top:2em; - } -} - - -#front-howto { - border-right:1em solid #fff; - #front_stats { - background:none; - border-top:0.25em solid $primary; - padding-top:1em; - div { - big { - color:$primary; - font-size:3.2308em; - } - } - } -} -.ie6, .ie7 { - #front_stats { - div { - width:8em; - float:left; - } - } -} - -#front-recently { - border-left:1em solid #fff; -} - -#front-howto h2, -#front-recently h2 { - margin-top:0; -} - - -.ie6, .ie7 { - .tablewrapper { - #front-howto { - margin-right:2%; - } - #front-recently { - margin-left:2%; - } - } -} - - - - -/* MEDIA QUERIES */ -@media only screen and (min-width: 48em) and (max-width: 61em) { - .container { - width: 100%; - } - /*FORMS*/ - input[type=text], - input[type=password], - input[type=email], - textarea{ - width: 95%; - } - - // Remove central positioning of mainmenu and float right. - // Left padding is to ensure no overlap of the site-logo - // Background styling replicates header styling - - #main-nav{ - width: auto; - float:right; - padding-left: 180px; - } - .nav-wrapper { - // width:auto; - .nav-wrapper-2 { - // width:auto; - } - } - - //Main menu drops below logo and my-soc menu - #main-menu{ - margin-top: 3em; - } - //therefore header needs to open up - #site-header { - height:6em; - } - // Pull OpenLayers navigation down a bit more - #fms_pan_zoom { - top: 7em !important; - } - - //fix the left margin on login bit - #user-meta { - p { - left:1em; - } - } - body.frontpage { - #user-meta { - p { - left:auto; - } - } - } - - //Map becomes percentage width - #map_box{ - left: 32em; - width:auto; - } - - //put the RAP notes into the main copy area - // Note: Also used for the non-JS case. - #report-a-problem-sidebar, - .general-sidebar-notes { - position: static; - width: auto; - @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0); - .sidebar-tips, - .sidebar-notes { - font-size:1em; - } - } - - //Revert to mobile use of the .full-width class - .full-width{ - width: auto; - margin: 0em -1em 0 -1em; - } - - //make fullpage auto width - body.fullwidthpage .content { - width: auto; - } +@import "_layout"; - //make twothirdswidthpage nearly as small as main - //.content: just enough to still fit the sidebar in - body.twothirdswidthpage { - .content { - width:30em; - .sticky-sidebar { - left:32em; - top:30em; - aside { - top:9em; - } - } - } - } -} |