Cleans and improves styles for header and homepage

app/assets/stylesheets/layout.scss

@@ -147,6 +147,10 @@ h6 {
 }
 
 h1, h2, h3, h4, h5, h6 {
+  clear: both;
+  font-family: $font-sans;
+  line-height: $heading-line-height;
+  margin: rem-calc(12) 0 rem-calc(6);
 
   &.lead {
     border-bottom: rem-calc(6) solid $brand;
@@ -176,11 +180,6 @@ body {
   font-size: $base-font-size;
   font-weight: normal;
   text-rendering: optimizeLegibility;
-
-  &::selection, ::-moz-selection {
-    background: $brand !important;
-    color: white !important;
-  }
 }
 
 p, ul, table {
@@ -197,13 +196,6 @@ ol, ul, li, p {
   font-size: $small-font-size;
 }
 
-h1, h2, h3, h4, h5, h6 {
-  clear: both;
-  font-family: $font-sans;
-  line-height: $heading-line-height;
-  margin: rem-calc(12) 0 rem-calc(6);
-}
-
 a {
   color: $link;
 
@@ -373,72 +365,11 @@ a {
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 header {
-  background: #E7F2FC;
+  background: $highlight;
   border-bottom: rem-calc(1) solid $border;
 
-  a {
-    font-family: $font-sans;
-  }
-
-  h1 {
-    margin: rem-calc(24) 0;
-  }
-
-  h2 {
-    font-size: rem-calc(16);
-    font-weight: normal;
-    line-height: rem-calc(30);
-  }
-
-  .button {
-    background: white;
-    color: $brand;
-    font-family: inherit;
-    font-size: rem-calc(16);
-    margin-top: 0;
-
-    &.see-more {
-      width: 100%;
-
-      @media (min-width: $small-breakpoint) {
-        width: auto;
-      }
-    }
-  }
-
   .home-page {
-    text-align: center;
+    padding-top: rem-calc(24);
-
-    @media (min-width: $small-breakpoint) {
-      text-align: left;
-    }
-  }
-
-  .more-info {
-    display: block;
-    margin-bottom: rem-calc(24);
-    text-decoration: underline;
-
-    @media (min-width: $small-breakpoint) {
-      display: inline-block;
-      margin-bottom: 0;
-      margin-left: rem-calc(12);
-    }
-  }
-
-  .icon-home-big {
-    color: $brand;
-    font-size: rem-calc(300);
-    line-height: rem-calc(300);
-    opacity: .75;
-  }
-
-  .icon-home-small {
-    color: $brand;
-    font-size: rem-calc(100);
-    opacity: .75;
-    position: absolute;
-    right: rem-calc(24);
   }
 
   .icon-external {
@@ -690,6 +621,7 @@ header {
   a {
     color: $text;
     display: inline-block;
+    font-family: $font-sans;
     font-weight: bold;
     line-height: $line-height*2;
     position: relative;

app/assets/stylesheets/variables.scss

@@ -65,6 +65,8 @@ $check:             #46DB91;
 $proposals:         #FFA42D;
 $proposals-border:  #CC8425;
 
+$highlight:         #E7F2FC;
+
 // 03. Forms
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 

app/views/layouts/_header.html.erb

@@ -73,14 +73,17 @@
     <div class="row home-page">
       <div class="small-12 medium-7 column">
         <h1><%= t("layouts.header.open_city_title") %></h1>
-        <h2><%= t("layouts.header.open_city_slogan_html") %></h2>
+        <p>
-        <%= link_to t("layouts.header.see_all"), proposals_path, class: "button radius see-more warning" %>
+          <%= t("layouts.header.open_city_slogan_html") %>&nbsp;
-        <%= link_to t("layouts.header.more_information"), "/more_information", class: "more-info" %>
+          <%= link_to t("layouts.header.more_information"), page_path('more_information') %>
+        </p>
+        <div class="small-12 medium-6">
+          <%= link_to t("layouts.header.see_all"), proposals_path, class: "button radius see-more warning expand" %>
+        </div>
       </div>
 
       <div class="show-for-medium-up small-12 medium-5 column text-center">
-        <i class="icon-debates icon-home-big"></i>
+        <%= image_tag("icon_home.png", size: "330x240", alt:"", role:"presentation") %>
-        <i class="icon-debates icon-home-small"></i>
       </div>
     </div>
   <% end %>
@@ -93,8 +96,7 @@
         <%= link_to t("pages.opendata.go_old"), t("layouts.header.external_link_opendata_url"), target: "_blank", class: "button radius" %>
       </div>
       <div class="show-for-medium-up small-12 medium-5 column text-center">
-        <i class="icon-debates icon-home-big"></i>
+        <%= image_tag("icon_home.png", size: "330x240", alt:"", role:"presentation") %>
-        <i class="icon-debates icon-home-small"></i>
       </div>
     </div>
   <% end %>

app/views/welcome/index.html.erb

@@ -2,25 +2,25 @@
   <section role="main">
     <div class="row text-center">
       <div class="small-12 medium-3 column">
-        <%= image_tag("icon_home_debate.png", size: "168x168", alt: t("welcome.debates.title")) %>
+        <%= image_tag("icon_home_debate.png", size: "168x168", alt: t("welcome.debates.alt"), title: t("welcome.debates.title")) %>
-        <h3><%= t("welcome.debates.title") %></h3>
+        <h2><%= t("welcome.debates.title") %></h2>
         <p><%= t("welcome.debates.description") %></p>
 
       </div>
       <div class="small-12 medium-3 column">
-        <%= image_tag("icon_home_proposal.png", size: "168x168", alt: t("welcome.proposal.title"))  %>
+        <%= image_tag("icon_home_proposal.png", size: "168x168", alt: t("welcome.proposal.alt"), title: t("welcome.proposal.title"))  %>
-        <h3><%= t("welcome.proposal.title") %></h3>
+        <h2><%= t("welcome.proposal.title") %></h2>
         <p><%= t("welcome.proposal.description") %></p>
       </div>
 
       <div class="small-12 medium-3 column">
-        <%= image_tag("icon_home_decide.png", size: "168x168", alt: t("welcome.decide.title")) %>
+        <%= image_tag("icon_home_decide.png", size: "168x168", alt: t("welcome.decide.alt"), title: t("welcome.decide.title")) %>
-        <h3><%= t("welcome.decide.title") %></h3>
+        <h2><%= t("welcome.decide.title") %></h2>
         <p><%= t("welcome.decide.description") %></p>
       </div>
       <div class="small-12 medium-3 column">
-        <%= image_tag("icon_home_do.png", size: "168x168", alt: t("welcome.do.title")) %>
+        <%= image_tag("icon_home_do.png", size: "168x168", alt: t("welcome.do.alt"), title: t("welcome.do.title")) %>
-        <h3><%= t("welcome.do.title") %></h3>
+        <h2><%= t("welcome.do.title") %></h2>
         <p><%= t("welcome.do.description") %></p>
       </div>
     </div>

config/locales/en.yml

@@ -357,15 +357,19 @@ en:
     debates:
       title: "Debates"
       description: "For meeting, discussing and sharing the things that matter to us in our city."
+      alt: "Icon debates"
     proposal:
       title: "You propose"
       description: "Open space for citizen proposals about the kind of city we want to live in."
+      alt: "Icon propose"
     decide:
       title: "You decide"
       description: "The public decides if it accepts or rejects the most supported proposals."
+      alt: "Icon decide"
     do:
       title: "It gets done"
       description: "If the proposal is accepted by the majority, the City Council accepts it as its own and it gets done."
+      alt: "Icon it gets done"
     welcome:
       title: "Participate"
       go_to_index: "See proposals and debates"

config/locales/es.yml

@@ -357,15 +357,19 @@ es:
     debates:
       title: "Debates"
       description: "Encontrarnos, debatir y compartir lo que nos parece importante en nuestra ciudad."
+      alt: "Icono debates"
     proposal:
       title: "Propones"
       description: "Espacio abierto para propuestas ciudadanas sobre el tipo de ciudad en el que queremos vivir."
+      alt: "Icono propones"
     decide:
       title: "Decides"
       description: "La ciudadanía decide si acepta o rechaza las propuestas más apoyadas."
+      alt: "Icono decides"
     do:
       title: "Se hace"
       description: "Si la propuesta es aceptada mayoritariamente, el Ayuntamiento la asume como propia y se hace."
+      alt: "Icono se hace"
     welcome:
       title: "Empieza a participar"
       go_to_index: "Ver propuestas"