diff --git a/app/assets/images/header_logo_madrid.png b/app/assets/images/header_logo_madrid.png index 8ce7251ef..50e388cad 100644 Binary files a/app/assets/images/header_logo_madrid.png and b/app/assets/images/header_logo_madrid.png differ diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 0be3d4eea..ceab7e12f 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -38,32 +38,24 @@ } @mixin logo { + color: white; + font-family: 'Lato' !important; + font-weight: lighter; - a { - color: white; - font-family: 'Lato' !important; - font-size: rem-calc(20); - font-weight: lighter; - line-height: $line-height*4; - padding-left: rem-calc(6); + @media (min-width: $small-breakpoint) { + font-size: rem-calc(24); + line-height: rem-calc(48); + } - span { - opacity: .5; - - &.logo-site { - font-size: rem-calc(16); - font-weight: lighter; - opacity: 1; - vertical-align: top; - } - } + img { + height: 48px; + width: 48px; @media (min-width: $small-breakpoint) { - font-size: rem-calc(28); - - span { - font-size: rem-calc(20); - } + height: 80px; + margin-right: rem-calc(12); + margin-top: 0; + width: 80px; } } } @@ -392,27 +384,13 @@ header { } .selected { + border-bottom: 2px solid white; + padding-bottom: rem-calc(2); position: relative; - - &:before { - top: -14px; - left: 50%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - border-top-color: white; - border-width: 8px; - margin-left: -8px; - } } .locale { float: none; - height: rem-calc(48); - padding-top: rem-calc(3); - text-align: center; @media (min-width: $small-breakpoint) { float: left; @@ -427,7 +405,7 @@ header { .external-links { float: none; - padding: rem-calc(12) 0; + padding: rem-calc(6) 0; text-align: center; @media (min-width: $small-breakpoint) { @@ -447,73 +425,33 @@ header { } .contain-to-grid { - background: #112E51; + background: $brand; } .top-bar { - background: #112E51 !important; + background: $brand !important; color: white; - height: rem-calc(48); + min-height: rem-calc(48); max-width: 1170px !important; padding: 0 rem-calc(12); @media (min-width: $small-breakpoint) { - height: rem-calc(96); + height: auto; + padding: 0; } .name { - height: rem-calc(48); + + @media (min-width: $small-breakpoint) { + margin-left: rem-calc(12); + } a { - color: white; - font-family: 'Lato'; - font-size: rem-calc(16); - font-weight: lighter; - line-height: $line-height*2; - - span { - *display: inline; /* IE */ - opacity: .5; - - &.logo-site { - *display: inline; /* IE */ - font-size: rem-calc(14); - opacity: 1; - } - } + @include logo; + line-height: rem-calc(48); @media (min-width: $small-breakpoint) { - font-size: rem-calc(24); - line-height: $line-height*4; - - span, span.logo-site { - font-size: rem-calc(16); - } - } - - @media (min-width: $medium-breakpoint) { - font-size: rem-calc(30); - line-height: $line-height*4; - - span, span.logo-site { - font-size: rem-calc(20); - } - } - - img { - height: 48px; - width: 48px; - - @media (min-width: $small-breakpoint) { - margin-top: rem-calc(24); - } - - @media (min-width: $medium-breakpoint) { - height: 96px; - margin-right: rem-calc(12); - margin-top: 0; - width: 96px; - } + line-height: rem-calc(80); } } } @@ -558,9 +496,10 @@ header { ul { margin-left: 0; + margin-right: rem-calc(12); @media (min-width: $small-breakpoint) { - margin-left:rem-calc(24); + margin-left: rem-calc(24); } } @@ -581,10 +520,11 @@ header { @media (min-width: $small-breakpoint) { &.button { - background: $brand; + background: white; border-radius: rem-calc(3); + color: $brand; line-height: rem-calc(15); - margin-top: rem-calc(24); + margin-top: rem-calc(16); padding-left: rem-calc(15); text-align: center; } @@ -600,12 +540,11 @@ header { } ul li, ul li:hover:not(.has-form) > a:not(.button) { - line-height: $line-height; @media (min-width: $small-breakpoint) { background: none; border: 0; - line-height: $line-height*4; + line-height: rem-calc(80); } } @@ -622,7 +561,7 @@ header { padding: rem-calc(12) 0; @media (min-width: $small-breakpoint) { - line-height: $line-height*4; + line-height: rem-calc(80); padding: 0 rem-calc(12); } @@ -643,21 +582,22 @@ header { } .top-links { - background: #0B0C0C; + background: $dark; color: white; font-size: rem-calc(14); - - .row { - padding: 0 rem-calc(12); - } + padding-right: rem-calc(12); a { color: white; + margin: 0 rem-calc(6); &:hover { text-decoration: underline; } } + .social { + padding-top: rem-calc(6); + } } .subnavigation-container { @@ -850,13 +790,6 @@ footer { h1 { @include logo; - - a { - - span.logo-site { - vertical-align: middle; - } - } } } @@ -911,6 +844,7 @@ form.locale-form { background-color: transparent; border: 0; color: white; + margin-bottom: 0; outline: none; padding-left: rem-calc(3); padding-right: rem-calc(24); diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss index b7077e54b..b5556477f 100644 --- a/app/assets/stylesheets/variables.scss +++ b/app/assets/stylesheets/variables.scss @@ -19,8 +19,9 @@ $line-height: rem-calc(24); $body: #E9E9E9; $background: #EDEFF0; +$dark: #0B0C0C; $border: #DEE0E3; -$brand: #0077B9; +$brand: #004A83; $text: #222222; $text-medium: #999999; diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index 7bba71b76..8c62cf434 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -35,7 +35,7 @@
  • <%= t("application.menu")%>
  • <%= link_to root_path do %> - <%= image_tag('header_logo_madrid.png', class: 'show-for-medium-up left', size: '96x96', alt: t("layouts.header.logo")) %> + <%= image_tag('header_logo_madrid.png', class: 'show-for-medium-up left', size: '80x80', alt: t("layouts.header.logo")) %> <% if transparency_page? %> <%= t("layouts.header.open_gov", open: "#{t('layouts.header.open')}") %> | diff --git a/config/locales/es.yml b/config/locales/es.yml index 483a0c313..be8dcca77 100644 --- a/config/locales/es.yml +++ b/config/locales/es.yml @@ -14,7 +14,7 @@ es: external_link_blog_url: "/blog" open_gov: "Gobierno %{open}" open: "abierto" - participation_html: "Madrid Decide" + participation_html: "Madrid Decide" transparency: "Transparencia" open_data: "Datos abiertos" open_city_title: "La ciudad que quieres será la ciudad que quieras."