Refactors a little of SCSS for header

app/assets/stylesheets/layout.scss

@@ -38,32 +38,24 @@
 }
 
 @mixin logo {
-
-  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);
-
-    span {
-      opacity: .5;
-
-      &.logo-site {
-        font-size: rem-calc(16);
-        font-weight: lighter;
-        opacity: 1;
-        vertical-align: top;
-      }
-    }
 
   @media (min-width: $small-breakpoint) {
-      font-size: rem-calc(28);
+    font-size: rem-calc(24);
-
+    line-height: rem-calc(48);
-      span {
-        font-size: rem-calc(20);
   }
+
+  img {
+    height: 48px;
+    width: 48px;
+
+    @media (min-width: $small-breakpoint) {
+      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;
+      @include logo;
-      font-family: 'Lato';
+      line-height: rem-calc(48);
-      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;
-        }
-      }
 
       @media (min-width: $small-breakpoint) {
-        font-size: rem-calc(24);
+        line-height: rem-calc(80);
-        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;
-        }
       }
     }
   }
@@ -558,6 +496,7 @@ header {
 
   ul {
     margin-left: 0;
+    margin-right: rem-calc(12);
 
     @media (min-width: $small-breakpoint) {
       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);
-
+  padding-right: rem-calc(12);
-  .row {
-    padding: 0 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);

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;

app/views/layouts/_header.html.erb

@@ -35,7 +35,7 @@
         <li class="toggle-topbar menu-icon"><a href="#"><span><%= t("application.menu")%></span></a></li>
         <li class="name">
           <%= 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')}") %> <span>|</span>

config/locales/es.yml

@@ -14,7 +14,7 @@ es:
       external_link_blog_url: "/blog"
       open_gov: "Gobierno %{open}"
       open: "abierto"
-      participation_html: "Madrid <strong>Decide</strong>"
+      participation_html: "Madrid Decide"
       transparency: "Transparencia"
       open_data: "Datos abiertos"
       open_city_title: "La ciudad que quieres será la ciudad que quieras."