consul/grecia
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Cleans and improves styles for header and homepage

Browse Source
This commit is contained in:
Alberto Garcia Cabeza
2015-12-15 16:35:55 +01:00
parent a45288a48f
commit ca18eb99de
7 changed files with 34 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/images/icon_home.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

82
app/assets/stylesheets/layout.scss
View File

@@ -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;
@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);
padding-top: 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;

2
app/assets/stylesheets/variables.scss
View File

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

16
app/views/layouts/_header.html.erb
View File

@@ -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>
<%= link_to t("layouts.header.see_all"), proposals_path, class: "button radius see-more warning" %>
<%= link_to t("layouts.header.more_information"), "/more_information", class: "more-info" %>
<p>
<%= t("layouts.header.open_city_slogan_html") %>&nbsp;
<%= 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>
<i class="icon-debates icon-home-small"></i>
<%= image_tag("icon_home.png", size: "330x240", alt:"", role:"presentation") %>
</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>
<i class="icon-debates icon-home-small"></i>
<%= image_tag("icon_home.png", size: "330x240", alt:"", role:"presentation") %>
</div>
</div>
<% end %>

16
app/views/welcome/index.html.erb
View File

@@ -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")) %>
<h3><%= t("welcome.debates.title") %></h3>
<%= image_tag("icon_home_debate.png", size: "168x168", alt: t("welcome.debates.alt"), title: t("welcome.debates.title")) %>
<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")) %>
<h3><%= t("welcome.proposal.title") %></h3>
<%= image_tag("icon_home_proposal.png", size: "168x168", alt: t("welcome.proposal.alt"), title: t("welcome.proposal.title")) %>
<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")) %>
<h3><%= t("welcome.decide.title") %></h3>
<%= image_tag("icon_home_decide.png", size: "168x168", alt: t("welcome.decide.alt"), title: t("welcome.decide.title")) %>
<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")) %>
<h3><%= t("welcome.do.title") %></h3>
<%= image_tag("icon_home_do.png", size: "168x168", alt: t("welcome.do.alt"), title: t("welcome.do.title")) %>
<h2><%= t("welcome.do.title") %></h2>
<p><%= t("welcome.do.description") %></p>
</div>
</div>

4
config/locales/en.yml
View File

@@ -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"

4
config/locales/es.yml
View File

@@ -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"