diff options
52 files changed, 517 insertions, 212 deletions
diff --git a/assets/images/homepage-background-small.jpg b/assets/images/homepage-background-small.jpg Binary files differnew file mode 100644 index 0000000..c503d25 --- /dev/null +++ b/assets/images/homepage-background-small.jpg diff --git a/assets/images/homepage-background.jpg b/assets/images/homepage-background.jpg Binary files differnew file mode 100644 index 0000000..426485d --- /dev/null +++ b/assets/images/homepage-background.jpg diff --git a/assets/images/icon_application_octet-stream_large.png b/assets/images/icon_application_octet-stream_large.png Binary files differindex 33e6a38..02347f1 100644 --- a/assets/images/icon_application_octet-stream_large.png +++ b/assets/images/icon_application_octet-stream_large.png diff --git a/assets/images/icon_application_pdf_large.png b/assets/images/icon_application_pdf_large.png Binary files differindex 4158629..1374851 100644 --- a/assets/images/icon_application_pdf_large.png +++ b/assets/images/icon_application_pdf_large.png diff --git a/assets/images/icon_application_rtf_large.png b/assets/images/icon_application_rtf_large.png Binary files differindex d09e93b..fbed2e9 100644 --- a/assets/images/icon_application_rtf_large.png +++ b/assets/images/icon_application_rtf_large.png diff --git a/assets/images/icon_application_vnd.ms-excel_large.png b/assets/images/icon_application_vnd.ms-excel_large.png Binary files differindex fe5dbca..86e1ee4 100644 --- a/assets/images/icon_application_vnd.ms-excel_large.png +++ b/assets/images/icon_application_vnd.ms-excel_large.png diff --git a/assets/images/icon_application_vnd.ms-powerpoint_large.png b/assets/images/icon_application_vnd.ms-powerpoint_large.png Binary files differindex 81f834b..6374b3b 100644 --- a/assets/images/icon_application_vnd.ms-powerpoint_large.png +++ b/assets/images/icon_application_vnd.ms-powerpoint_large.png diff --git a/assets/images/icon_application_vnd.ms-word_large.png b/assets/images/icon_application_vnd.ms-word_large.png Binary files differindex c45c6b8..5a2916a 100644 --- a/assets/images/icon_application_vnd.ms-word_large.png +++ b/assets/images/icon_application_vnd.ms-word_large.png diff --git a/assets/images/icon_application_zip_large.png b/assets/images/icon_application_zip_large.png Binary files differindex bdb7b9c..042d8c7 100644 --- a/assets/images/icon_application_zip_large.png +++ b/assets/images/icon_application_zip_large.png diff --git a/assets/images/icon_image_img_large.png b/assets/images/icon_image_img_large.png Binary files differindex f860fd3..06e263d 100644 --- a/assets/images/icon_image_img_large.png +++ b/assets/images/icon_image_img_large.png diff --git a/assets/images/icon_image_tiff_large.png b/assets/images/icon_image_tiff_large.png Binary files differindex 2d574a1..be2029a 100644 --- a/assets/images/icon_image_tiff_large.png +++ b/assets/images/icon_image_tiff_large.png diff --git a/assets/images/icon_message_delivery-status_large.png b/assets/images/icon_message_delivery-status_large.png Binary files differindex a4d13f7..8a895bc 100644 --- a/assets/images/icon_message_delivery-status_large.png +++ b/assets/images/icon_message_delivery-status_large.png diff --git a/assets/images/icon_text_html_large.png b/assets/images/icon_text_html_large.png Binary files differindex eb1214a..f772ea3 100644 --- a/assets/images/icon_text_html_large.png +++ b/assets/images/icon_text_html_large.png diff --git a/assets/images/icon_text_plain_large.png b/assets/images/icon_text_plain_large.png Binary files differindex 98cdddb..fe31dc4 100644 --- a/assets/images/icon_text_plain_large.png +++ b/assets/images/icon_text_plain_large.png diff --git a/assets/images/icon_text_x-vcard_large.png b/assets/images/icon_text_x-vcard_large.png Binary files differindex 75d7dc0..112ffb1 100644 --- a/assets/images/icon_text_x-vcard_large.png +++ b/assets/images/icon_text_x-vcard_large.png diff --git a/assets/images/icon_unknown.png b/assets/images/icon_unknown.png Binary files differindex 71fc306..a10dd3d 100644 --- a/assets/images/icon_unknown.png +++ b/assets/images/icon_unknown.png diff --git a/assets/images/logo.png b/assets/images/logo.png Binary files differindex 36f5f38..6f8e723 100644 --- a/assets/images/logo.png +++ b/assets/images/logo.png diff --git a/assets/images/logo@2.png b/assets/images/logo@2.png Binary files differnew file mode 100644 index 0000000..ab890df --- /dev/null +++ b/assets/images/logo@2.png diff --git a/assets/images/status/classification.png b/assets/images/status/classification.png Binary files differindex 32d8067..5ffd8af 100644 --- a/assets/images/status/classification.png +++ b/assets/images/status/classification.png diff --git a/assets/images/status/classification@2x.png b/assets/images/status/classification@2x.png Binary files differindex f3991db..c5e9ba8 100644 --- a/assets/images/status/classification@2x.png +++ b/assets/images/status/classification@2x.png diff --git a/assets/images/status/delayed.png b/assets/images/status/delayed.png Binary files differindex 515e42c..e2c3a29 100644 --- a/assets/images/status/delayed.png +++ b/assets/images/status/delayed.png diff --git a/assets/images/status/delayed@2x.png b/assets/images/status/delayed@2x.png Binary files differindex d08d207..9de5293 100644 --- a/assets/images/status/delayed@2x.png +++ b/assets/images/status/delayed@2x.png diff --git a/assets/images/status/delivery_error.png b/assets/images/status/delivery_error.png Binary files differindex a6d7280..cd93f43 100644 --- a/assets/images/status/delivery_error.png +++ b/assets/images/status/delivery_error.png diff --git a/assets/images/status/delivery_error@2x.png b/assets/images/status/delivery_error@2x.png Binary files differindex 8bb2400..10fcb0e 100644 --- a/assets/images/status/delivery_error@2x.png +++ b/assets/images/status/delivery_error@2x.png diff --git a/assets/images/status/locked.png b/assets/images/status/locked.png Binary files differindex 7201f26..b932609 100644 --- a/assets/images/status/locked.png +++ b/assets/images/status/locked.png diff --git a/assets/images/status/locked@2x.png b/assets/images/status/locked@2x.png Binary files differindex 772fd2d..5f4ac75 100644 --- a/assets/images/status/locked@2x.png +++ b/assets/images/status/locked@2x.png diff --git a/assets/images/status/notheld.png b/assets/images/status/notheld.png Binary files differindex 5a41cfb..042ecb3 100644 --- a/assets/images/status/notheld.png +++ b/assets/images/status/notheld.png diff --git a/assets/images/status/notheld@2x.png b/assets/images/status/notheld@2x.png Binary files differindex d90b2fb..bf1c1e8 100644 --- a/assets/images/status/notheld@2x.png +++ b/assets/images/status/notheld@2x.png diff --git a/assets/images/status/overdue.png b/assets/images/status/overdue.png Binary files differindex 29bf083..aa1a391 100644 --- a/assets/images/status/overdue.png +++ b/assets/images/status/overdue.png diff --git a/assets/images/status/overdue@2x.png b/assets/images/status/overdue@2x.png Binary files differindex fcaa662..96e3b95 100644 --- a/assets/images/status/overdue@2x.png +++ b/assets/images/status/overdue@2x.png diff --git a/assets/images/status/partiallysuccessful.png b/assets/images/status/partiallysuccessful.png Binary files differindex 0368a2e..99cecad 100644 --- a/assets/images/status/partiallysuccessful.png +++ b/assets/images/status/partiallysuccessful.png diff --git a/assets/images/status/partiallysuccessful@2x.png b/assets/images/status/partiallysuccessful@2x.png Binary files differindex 81688d9..f429896 100644 --- a/assets/images/status/partiallysuccessful@2x.png +++ b/assets/images/status/partiallysuccessful@2x.png diff --git a/assets/images/status/postal.png b/assets/images/status/postal.png Binary files differindex 589cd9b..ff53de6 100644 --- a/assets/images/status/postal.png +++ b/assets/images/status/postal.png diff --git a/assets/images/status/postal@2x.png b/assets/images/status/postal@2x.png Binary files differindex e08aea5..51c4036 100644 --- a/assets/images/status/postal@2x.png +++ b/assets/images/status/postal@2x.png diff --git a/assets/images/status/refused.png b/assets/images/status/refused.png Binary files differindex a184e72..b49f73f 100644 --- a/assets/images/status/refused.png +++ b/assets/images/status/refused.png diff --git a/assets/images/status/refused@2x.png b/assets/images/status/refused@2x.png Binary files differindex 7605335..ea18dff 100644 --- a/assets/images/status/refused@2x.png +++ b/assets/images/status/refused@2x.png diff --git a/assets/images/status/reported.png b/assets/images/status/reported.png Binary files differindex f61b364..c86c635 100644 --- a/assets/images/status/reported.png +++ b/assets/images/status/reported.png diff --git a/assets/images/status/reported@2x.png b/assets/images/status/reported@2x.png Binary files differindex 0139ecd..5aab446 100644 --- a/assets/images/status/reported@2x.png +++ b/assets/images/status/reported@2x.png diff --git a/assets/images/status/review.png b/assets/images/status/review.png Binary files differindex f1412b9..95b9c31 100644 --- a/assets/images/status/review.png +++ b/assets/images/status/review.png diff --git a/assets/images/status/review@2x.png b/assets/images/status/review@2x.png Binary files differindex 5013074..0f95e0d 100644 --- a/assets/images/status/review@2x.png +++ b/assets/images/status/review@2x.png diff --git a/assets/images/status/successful.png b/assets/images/status/successful.png Binary files differindex 042bea9..097035d 100644 --- a/assets/images/status/successful.png +++ b/assets/images/status/successful.png diff --git a/assets/images/status/successful@2x.png b/assets/images/status/successful@2x.png Binary files differindex b311012..f863675 100644 --- a/assets/images/status/successful@2x.png +++ b/assets/images/status/successful@2x.png diff --git a/assets/images/status/unusual.png b/assets/images/status/unusual.png Binary files differindex abca813..3a83785 100644 --- a/assets/images/status/unusual.png +++ b/assets/images/status/unusual.png diff --git a/assets/images/status/unusual@2x.png b/assets/images/status/unusual@2x.png Binary files differindex 2e47740..07e0bd9 100644 --- a/assets/images/status/unusual@2x.png +++ b/assets/images/status/unusual@2x.png diff --git a/assets/images/status/waiting.png b/assets/images/status/waiting.png Binary files differindex 7af9696..a668f70 100644 --- a/assets/images/status/waiting.png +++ b/assets/images/status/waiting.png diff --git a/assets/images/status/waiting@2x.png b/assets/images/status/waiting@2x.png Binary files differindex 174fd7d..4e84eb9 100644 --- a/assets/images/status/waiting@2x.png +++ b/assets/images/status/waiting@2x.png diff --git a/assets/images/status/withdrawn.png b/assets/images/status/withdrawn.png Binary files differindex c629418..1a68146 100644 --- a/assets/images/status/withdrawn.png +++ b/assets/images/status/withdrawn.png diff --git a/assets/images/status/withdrawn@2x.png b/assets/images/status/withdrawn@2x.png Binary files differindex 164056c..f023e7a 100644 --- a/assets/images/status/withdrawn@2x.png +++ b/assets/images/status/withdrawn@2x.png diff --git a/assets/stylesheets/responsive/custom.scss b/assets/stylesheets/responsive/custom.scss index 9debf2f..12bf0b7 100644 --- a/assets/stylesheets/responsive/custom.scss +++ b/assets/stylesheets/responsive/custom.scss @@ -1,76 +1,37 @@ -$color_sand: #f7eee1; -$color_light_blue: #67848C; -$color_blue: #336C86; -$color_dark_blue: #2c5d74; -$color_darker_blue: #354C56; -$color_red: #8c6673; -$color_dark_red: #A1432C; -$color_teal: #6d918d; -$color_green: #8b9352; -$color_bright_green: #839310; -$color_light_green: #AAB26E; -$color_pale_green: #D7DABD; -$color_orange: #CC8245; -$color_bright_orange: #FF7959; -$color_pale_orange: #EBC3A9; -$color_yellow: #E69E5D; -$color_pale_yellow: #EDD3B8; -$color_black_alt: #3d3b38; +$color_sand: #f3f1eb; $color_black: #333333; -$color_mid_grey: #999999; -$color_light_grey: #CCCCCC; -$color_lighter_grey: #D3D3D3; -$color_mid_cold_grey: #9AA6AB; +$color_orange: #f4a140; +$color_blue: #4faded; +$color_green: #62b356; +$color_yellow: #ffd836; +$color_red: #e04b4b; +$color_violet: #a94ca6; +$color_purple: #5c377f; $color_white: #ffffff; -$body-bg: $color_sand; +$color_neutral_light: $color_sand; +$color_neutral_dark: $color_black; +$color_primary: $color_violet; +$color_secondary: $color_orange; -$locale-bg: $color_black; -$locale-color: $color_mid_grey; -$locale-hover-color: $color_white; +$body-bg: $color_neutral_light; -$body-font-color: $color_black; -$link-color: $color-blue; -$heading-color: $color_black-alt; -$font-family: "Roboto Slab", Georgia, serif; -$sans-serif-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +$body-font-color: $color_neutral_dark; +$link-color: darken($color_blue, 20%); +$action-color: $color_green; +$font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; $form_input-bg: $color_white; -$button-bg: $color_green; +$button-bg: $action-color; $button-color: $color_white; -$banner_bg: $color_darker_blue; +$status-success: $color_green; +$status-failure: $color_red; +$status-pending: $color_orange; -$main_menu-bg: $color_dark_blue; -$main_menu-search_text: $color_black; -$main_menu-link_text: $color_white; -$main_menu-search_bg: $color_light_blue; -$main_menu-link_bg: $color_dark_blue; -$main_menu-active_link_text: $main_menu-link_bg; -$main_menu-active_link_bg: $body-bg; -$submenu-color: $color_mid_cold_grey; - -$footer-bg: $color_black; -$footer-color: $color_light_grey; -$footer-link-color: $color_white; - -$incoming-correspondence-color: $color_red; -$outgoing-correspondence-color: $color_teal; -$correspondence-bg: $color_white; -$correspondence-shadow: $color_light_grey; - -$status-success: $color_light_green; -$status-failure: $color_bright_orange; -$status-pending: $color_yellow; - -$notice-bg: $color_pale_green; -$notice-border: $color_bright_green; - -$error-bg: $color_pale_orange; -$error-border: $color_dark_red; - -$action-bg: $color_pale_yellow; -$action-border: $color_orange; +$notice-color: $color_green; +$error-color: $color_red; +$action-color: $color_orange; /* Mixin styles */ @@ -84,16 +45,14 @@ $action-border: $color_orange; /* General styling of nav menu items */ %menu-item { text-decoration: none; - background-color: $main_menu-link_bg; - color: transparentize($main_menu-link_text, 0.2); + color: transparentize($color_white, 0.2); @include ie8 { - color: $main_menu-link_text; + color: $color_white; } transition: background-color 0.5s ease-out; - &:hover{ - background-color: darken($main_menu-bg, 5%); - color: transparentize($main_menu-link_text, 0); + background-color: darken($color_primary, 15%); + color: $color_white; } } @@ -101,22 +60,10 @@ $action-border: $color_orange; /* Selected menu item */ %selected-menu-item { font-weight: bold; - color: $main_menu-active_link_text; - background-color: $main_menu-active_link_bg; + color: $color_primary; + background-color: $color_neutral_light; &:hover{ - background-color: $main_menu-active_link_bg; - } -} - -/* Styling if not part of the main menu on larger screens */ -%sub-menu-item { - @include respond-min( $main_menu-mobile_menu_cutoff ){ - background-color: $banner_bg; - color: $submenu-color; - &:hover{ - background-color: $banner_bg; - color: transparentize($main_menu-link_text, 0); - } + background-color: $color_neutral_light; } } @@ -130,13 +77,16 @@ body{ font-family: $font-family; } -a{ - color: $link-color; -} - -h1, h2, h3, h4, h5, h6 { - color: $heading-color; - font-family: $font-family; +a { + &:link, + &:visited { + color: $link-color; + } + &:hover, + &:active, + &:focus { + color: darken($link-color, 10%); + } } /* Let h1s be a little smaller on small screens */ @@ -171,75 +121,121 @@ input.use-datepicker[type=text] { background:image-url('calendar.png') no-repeat 100px 5px $form_input-bg; } -form input[type=submit], a.link_button_green, a.link_button_green_large { - text-decoration: none; - color: $button-color; - background-color: darken($button-bg, 5%); +/* Button styles */ + +@mixin button-base($size: normal, $disabled: false) { + padding: 0.5em 1.25em; + border-radius: 3px; display: inline-block; - cursor: pointer; - /* This style is expressed for all borders to avoid triggering an IE9 border rendering bug */ - border-style: solid; border-color: darken($button-bg, 15%); border-width: 0 0 4px 0; - border-radius: 0; - padding: 3px 7px; - line-height: normal; - font-size: 1.1rem; - /* Same height as form elements */ - height: 2.3125rem; - @include ie8 { - height: 2.3125em; - font-size: 1.1em; - } - vertical-align: top; - &:focus, &:hover{ + font-weight: 600; + text-decoration: none; + transition: background-color 300ms ease-out; + margin-bottom: 0; + font-family: $font-family; + @if $size == large { + font-size: 2.2em; + } + &:hover, + &:active, + &:focus { text-decoration: none; - background-color: darken($button-bg, 10%); - border-bottom: 4px solid darken($button-bg, 20%); + transition: background-color 300ms ease-out; + } + @if $disabled { + opacity: 0.333; + transition: none; + &:hover, + &:active, + &:focus { + background-color: inherit; + color: inherit; + cursor: default; + transition: none; + } } } -@include lte-ie7{ +@mixin button-primary($args...) { + @include button-base($args...); + color: $color_white; + background-color: $button-bg; + border: none; + &:hover, + &:active, + &:focus, + &:visited:hover, + &:visited:active, + &:visited:focus { + background-color: darken($button-bg, 10%); + color: $color_white; + } +} - a.link_button_green, a.link_button_green_large { - padding: 0 7px; - height: 31px; - font-weight: bold; +@mixin button-secondary($args...) { + @include button-base($args...); + background-color: desaturate(darken($color_sand, 10%), 5%); + color: $color_black; + font-weight: normal; + &:hover, + &:active, + &:focus { + color: $color_black; + background-color: desaturate(darken($color_sand, 20%), 5%); } +} - form input[type=submit] { - padding: 0; - height: 35px; +@mixin button-tertiary($args...) { + @include button-base($args...); + background-color: desaturate(darken($color_sand, 5%), 5%);; + color: $color_black; + font-weight: normal; + border: 1px solid desaturate(darken($color_sand, 15%),5%); + &:hover, + &:active, + &:focus { + background-color: darken($color_sand, 7.5%); + border: 1px solid desaturate(darken($color_sand, 25%),5%); } } +form input[type=submit], a.link_button_green, a.link_button_green_large { + @include button-primary; + text-decoration: none; +} + a.link_button_green_large { - font-size: 2.2rem; - height: inherit; - padding: 0 10px; - @include ie8 { - font-size: 2.2em; - height: 66px; - } - @include lte-ie7 { - height: 50px; - } + @include button-primary($size: large); } /* Popups */ .popup { - background-color: $notice-bg; - border: 3px solid $notice-border; + background-color: desaturate(lighten($notice-color, 30%),10%); + border: 3px solid $notice-color; } /* Header */ #banner_inner { - background-color: $banner-bg; + background-color: $color_primary; } #topnav { - background-color: $main_menu-bg; + background-color: darken($color_primary, 10%); +} + +.site-title__logo { + // Smaller logo on mobiles + width: ($logo-width / 2); + height: ($logo-height / 2); + background-size: ($logo-width / 2) ($logo-height / 2); + + @include respond-min( $main_menu-mobile_menu_cutoff ){ + width: $logo-width; + height: $logo-height; + background-size: $logo-width $logo-height; + } } #navigation{ @@ -274,15 +270,12 @@ a.link_button_green_large { } #navigation_search_button{ - background-color: mix($main_menu-search_bg, $main_menu-bg, 50%); + background-color: $color_white; border: none; transition: all 0.3s ease-out; - color: $main_menu-search_text; + color: $color_primary; border-radius: 0; font-size: inherit; - &:focus{ - background-color: $form_input-bg; - } } } @@ -293,8 +286,7 @@ a.link_button_green_large { #notice, #error, .errorExplanation, #request_header_text, #hidden_request, .describe_state_form form, .undescribed_requests, .warning { border-top: 10px solid; - font-size: 1.2em; - border-radius: 0; + font-size: 1em; margin:1em 0; padding: 1.5em; @@ -312,69 +304,210 @@ a.link_button_green_large { } #notice, #request_header_text { - background-color: $notice-bg; - border-color: $notice-border; + background-color: desaturate(lighten($notice-color, 30%),10%); + border-color: $notice-color; } #error, .errorExplanation, #hidden_request, .warning { - background-color: $error-bg; - border-color: $error-border; + background-color: desaturate(lighten($error-color, 30%),10%); + border-color: $error-color; } .undescribed_requests { - background-color: $action-bg; - border-color: $action-border; + background-color: desaturate(lighten($action-color, 30%),10%); + border-color: $action-color; } /* Logged and local options act like submenus */ #logged_in_bar{ a { @extend %menu-item; - @extend %sub-menu-item; + background-color: transparent; font-weight: normal; + color: $color_white; + &:hover, + &:active, + &:focus { + background-color: transparent; + } } #logged_in_links { - top: 4em; - .greeting, a { + top: 2em; + a { font-weight: normal; } } } +/* LANGUAGE SWITCHER */ #user_locale_switcher { - @include respond-min( $main_menu-mobile_menu_cutoff ){ - background-image: image-url('locale-switcher.png'); - background-repeat: no-repeat; - background-position: 0.5em 0.5em; - background-color: $locale-bg; - border-radius: 0 0 1.25em 1.25em; - padding: 0 1em 0 2.5em; - right: 15px; + background-color: $color_primary; + @include respond-min($main_menu-mobile_menu_cutoff) { + background-color: transparent; } - a { - @extend %menu-item; - font-family: $sans-serif-font-family; - @include respond-min( $main_menu-mobile_menu_cutoff ){ - padding: 0.5em 0.2em; - background-color: $locale-bg; - border-radius: 0 0 1.25em 1.25em; - color: $locale-color; - &:hover{ - background-color: $locale-bg; - color: $locale-hover-color; +} + +/* Dropdown list for switching locale */ +.locale-list { + border-bottom: 0; + @include respond-min($main_menu-mobile_menu_cutoff) { + position: absolute; + left: ($logo-width + 40px); + top: 2.2em; + right: auto; + } + .locale-list-trigger { + margin-bottom: 0; + color: $color_white; + color: transparentize($color_white, 0.8); + @include respond-min($main_menu-mobile_menu_cutoff) { + margin-top: 0; + border: 1px solid desaturate(lighten($color_primary, 5%), 5%); + border-radius: 3px; + color: $link-color; + padding: 0; + } + } +} + +.locale-list-trigger .current-locale { + position: relative; + z-index: 999; + border-radius: 3px; + color: $color_white; + @include respond-min($main_menu-mobile_menu_cutoff) { + padding: 0.66em 2em 0.66em 0.66em; + } +} + +.locale-list-trigger .current-locale:after { + display: block; + position: absolute; + content: ''; + right: 10px; + top: 12px; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + @include ie8 { + border-top: 5px solid $color_white; + } + border-top: 5px solid transparentize($color_white, 0.6); +} + +.locale-list-trigger .current-locale, +.locale-list .available-languages a { + display: block; + cursor: pointer; + font-weight: normal; + @include respond-min($main_menu-mobile_menu_cutoff) { + font-size: 0.8125em; + line-height: 1em; + } +} + +.locale-list .available-languages { + display: none; + padding: 0; + margin-bottom: 0; + margin-top: 0; + font-size: 0.8125em; + @include respond-min($main_menu-mobile_menu_cutoff) { + position: absolute; + top: 2em; + left: 0; + z-index: 1000; + border-radius: 3px; + font-size: 1em; + width: 100%; + } + +} + +.locale-list li { + list-style-type: none; + border-bottom: 1px solid desaturate(lighten($color_primary, 3%), 5%); + @include respond-min($main_menu-mobile_menu_cutoff) { + border-bottom-color: $color_neutral_dark; + display: block; + } + &:last-child { + @include respond-min($main_menu-mobile_menu_cutoff) { + border-bottom: 0; + a { + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; } } } } +.locale-list .available-languages a, +.locale-list .available-languages a:link, +.locale-list .available-languages a:visited { + display: block; + background-color: $color_primary; + padding: 0.66em 1em; + width: 100%; + text-decoration: none; + color: transparentize($color_white, 0.2); + @include ie8 { + color: $color_white; + } + @include respond-min($main_menu-mobile_menu_cutoff) { + background-color: lighten($color_neutral_dark, 6%); + } + transition: background-color 0.5s ease-out; +} -#banner { +.locale-list .available-languages a:hover, +.locale-list .available-languages a:focus { + border-bottom: none; + background-color: darken($color_primary, 5%); + @include respond-min($main_menu-mobile_menu_cutoff) { + background-color: $color_neutral_dark + } + color: $color_white; - /* locale border */ - @include respond-min( $main_menu-mobile_menu_cutoff ){ - border-top: 4px solid $locale-bg; +} + +/* JS interactivity */ +.no-js .locale-list .available-languages, +.locale-list.active .available-languages { + display: block; +} + +.locale-list.active .current-locale { + background-color: $color_primary; + color: $color_white; + border-color: $color_primary; + @include respond-min($main_menu-mobile_menu_cutoff) { + background-color: lighten($color_neutral_dark, 6%); + border-bottom: 1px solid lighten($color_neutral_dark, 2%); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } +} + +.locale-list.active .current-locale:after { + @include ie8 { + border-top-color: $color_white; } + border-top-color: transparentize($color_white, 0.6); +} + + +.locale-list.active .locale-list-trigger { + border-color: transparent; + @include respond-min($main_menu-mobile_menu_cutoff) { + border-color: $color_neutral_dark; + } +} + + +#banner { /* Hide the greeting on smaller devices */ .greeting { @@ -383,9 +516,8 @@ a.link_button_green_large { .rsp_menu_button{ position: absolute; - top: 0; - /* 15px for margin minus 9 for background offset*/ - right: 4px; + top: 5px; // vertically centre the button in the header + right: 4px; // 15px for margin minus 9 for background offset @extend .image-replacement; background-image: image-url('hamburger.png'); background-repeat: no-repeat; @@ -401,6 +533,13 @@ a.link_button_green_large { } } + &:target { + .rsp_menu_button { + top: 5px; + right: 4px; + } + } + /* Pad evenly top and bottom on smaller devices */ #logo_wrapper{ @@ -422,44 +561,55 @@ a.link_button_green_large { /* Footer */ #footer { - background-color: $footer-bg; - color: $footer-color; - padding: 2em 4em; - font-family: $sans-serif-font-family; + background-color: $color_neutral_dark; + color: darken($color_neutral_light, 10%); a { text-decoration: none; - color: $footer-link-color; + color: $color_white; + &:hover, + &:active, + &:focus { + color: lighten($color_primary, 10%); + text-decoration: underline; + } } - ul > li:nth-child(4n+1) { - padding-top: 0; +} + +.footer__about { + h2 { + color: $color_white; } +} - ul li { - padding: 1em 0 0 0 ; - text-align: bottom; +.footer__final { + .row { + border-top: 1px solid lighten($color_neutral_dark, 6%); } } /* Request page */ div.correspondence { - background-color: $correspondence-bg; + background-color: $color_white; + box-shadow: 0 2px 2px transparentize($color_black, 0.8); + border: none; + border-radius: 5px; + margin-bottom: 2em; } .incoming.correspondence { - border: none; - border-top: 8px solid $incoming-correspondence-color; - box-shadow: 0 3px 3px $correspondence-shadow; + border-top: 8px solid $color_secondary; + a { + color: $color_secondary; + } a.link_to_this { - background-color: $incoming-correspondence-color; + background-color: $color_secondary; } } .outgoing.correspondence { - border: none; - border-top: 8px solid $outgoing-correspondence-color; - box-shadow: 0 3px 3px $correspondence-shadow; + border-top: 8px solid $color_primary; a.link_to_this { - background-color: $outgoing-correspondence-color; + background-color: $color_primary; } } @@ -474,7 +624,7 @@ a.link_to_this { } background-position: center center; background-repeat: no-repeat; - background-size: 70% 70%; + background-size: 14px; border-radius: 50%; height: 20px; width: 20px; @@ -483,9 +633,9 @@ a.link_to_this { #link_box { font-family: $font-family; border-radius: 0; - border: 1px solid $heading-color; + border: 1px solid $color_neutral_dark; .close-button { - background-color: $correspondence-bg; + background-color: $color_secondary; float: right; } } @@ -494,17 +644,29 @@ a.link_to_this { padding: 0; form{ - background-color: $action-bg; - border-color: $action-border; + background-color: desaturate(lighten($action-color, 30%),10%); + border-color: $action-color; h2 { margin-top: 0; } hr { - border-color: $action-border; + border-color: $action-color; } } } +.feed_link_sidebar .link_button_green { + @include button-primary(); +} + +.report-this-request { + @include button-secondary(); + color: $color_black !important; + /* Using !important here as a temporary fix for a bad declaration (a:link) + in Alaveteli core. When this is fixed it can be removed. + */ +} + /* Status lines and icons */ .icon_waiting_classification, .icon_waiting_response, @@ -535,19 +697,25 @@ a.link_to_this { .view_html_prefix { font-family: $font-family; - background-color: $banner-bg; - color: transparentize($main_menu-link_text, 0.2); + background-color: $color_primary; + color: transparentize($color_white, 0.2); @include ie8 { - color: $main_menu-link_text; + color: $color_white; } a { - color: $main_menu-link_text; + color: $color_white; } .view_html_logo, .view_html_description { padding-top: 1em; } } +#header_right { + .link_button_green { + @include button-secondary; + } +} + /* User page */ #user_photo_on_profile { img, #set_photo { @@ -558,7 +726,6 @@ a.link_to_this { /* Help pages */ dt { - color: $heading-color; font-weight: 700; @include respond-min( $main_menu-mobile_menu_cutoff ){ font-size: 2em; @@ -568,11 +735,79 @@ dt { /* Front page */ /* Drop the extract indentation on small screens */ -#frontpage_examples .excerpt { +#frontpage_examples { + .excerpt { padding: 0.2em 0 0 0; @include respond-min( $main_menu-mobile_menu_cutoff ){ padding: 0 0 0 2em; } + } + p strong a { + @include button-secondary; + } +} + +/* How it works section */ +.steps__list { + li { + @include respond-min( $main_menu-mobile_menu_cutoff ){ + width: 33.3333%; + margin-left: 0 !important; + } + } +} + +.steps__step-box { + background-color: $color_white; + padding: 2em; + box-shadow: 0 1px 2px transparentize($color_black, 0.75); + @include respond-min( $main_menu-mobile_menu_cutoff ){ + min-height: 11em; + } + p { + line-height: 1.5em; + color: $color_neutral_dark; + } +} + +.steps__step-number { + height: 3.5em; + width: 3.5em; + background-color: $color_primary; + box-shadow: 0 1px 2px transparentize($color_black, 0.75); + padding: 1em; + border-radius: 100%; + color: $color_white; + @include respond-min( $main_menu-mobile_menu_cutoff ){ + left: 50%; + margin-left: -1.75em; + bottom: -1em; + top: auto; + } +} + +.learn-more-foi { + @include respond-min( $main_menu-mobile_menu_cutoff ){ + margin-top: 3em; + } + a { + @include button-secondary; + } +} + +.learn-more-foi { + @include respond-min( $main_menu-mobile_menu_cutoff ){ + margin-top: 3em; + } + a { + @include button-secondary; + } +} + +.latest-requests { + .button-secondary { + @include button-secondary; + } } /* Authority page */ @@ -581,4 +816,71 @@ dt { font-size: 1.1rem; } +.action-bar__follow-button { + .link_button_green { + @include button-secondary(); + } +} +.authority__body__sidebar form input[type=submit] { + @include button-secondary(); +} + +.homepage-hero { + background-color: $color_neutral_dark; + background-image: image-url('homepage-background-small.jpg'); + background-repeat: no-repeat; + background-position: center top; + background-size: cover; + color: $color_white; + padding: 2em 0 5em; + position: relative; + @include respond-min($main_menu-mobile_menu_cutoff) { + padding: 5em 0 8em; + background-image: image-url('homepage-background.jpg'); + } + + a { + color: $color_secondary; + &:hover, + &:active, + &:focus { + color: $color_white; + } + } + + .new-request__make-new-requests { + @include button-base; + background-color: desaturate(darken($color_secondary, 10%), 5%); + color: $color_white; + &:hover, + &:active, + &:focus { + background-color: darken($color_secondary, 20%); + } + } +} + +.intro__title { + color: $color_white; + text-shadow: 0 1px 2px transparentize($color_black, 0.7); +} + +.new-request__content { + background-color: $color_neutral_dark; + border-radius: 5px; + padding: 1.888888889em; +} + +.new-request__title { + color: $color_white; + font-size: 1.4375em; + margin: 0 0 0.5em; +} + +.new-request__description { + color: transparentize($color_white, 0.2); + @include ie8 { + color: $color_white; + } +} diff --git a/lib/views/general/_before_body_end.html.erb b/lib/views/general/_before_body_end.html.erb new file mode 100644 index 0000000..daeaeb2 --- /dev/null +++ b/lib/views/general/_before_body_end.html.erb @@ -0,0 +1,7 @@ +<script> + jQuery('#user_locale_switcher').find('.locale-list-trigger').each(function() { + jQuery(this).click(function(){ + jQuery(this).parent().toggleClass('active'); + }); + }); +</script> diff --git a/lib/views/general/_before_head_end.html.erb b/lib/views/general/_before_head_end.html.erb index 19a54a0..7f33fa9 100644 --- a/lib/views/general/_before_head_end.html.erb +++ b/lib/views/general/_before_head_end.html.erb @@ -1 +1 @@ - <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto+Slab:400,700&subset=latin,latin-ext,cyrillic,cyrillic-ext"> +<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'> diff --git a/lib/views/general/_frontpage_intro_sentence.html.erb b/lib/views/general/_frontpage_intro_sentence.html.erb deleted file mode 100644 index cfba8f6..0000000 --- a/lib/views/general/_frontpage_intro_sentence.html.erb +++ /dev/null @@ -1,4 +0,0 @@ -<h2> - Your <strong>Right to Know</strong> -</h2> -<p>Every citizen has the right to access information held by public bodies. <strong>By law, they have to respond</strong>. <a href="<%= help_about_url %>">Find out more about Freedom of Information.</a></p> |
