diff --git a/app/assets/fonts/icons.eot b/app/assets/fonts/icons.eot index a876f3ced..f43277dfc 100644 Binary files a/app/assets/fonts/icons.eot and b/app/assets/fonts/icons.eot differ diff --git a/app/assets/fonts/icons.svg b/app/assets/fonts/icons.svg index 6753ba685..d15481e5b 100644 --- a/app/assets/fonts/icons.svg +++ b/app/assets/fonts/icons.svg @@ -36,5 +36,6 @@ - + + diff --git a/app/assets/fonts/icons.ttf b/app/assets/fonts/icons.ttf index e052053e7..7a786cc38 100644 Binary files a/app/assets/fonts/icons.ttf and b/app/assets/fonts/icons.ttf differ diff --git a/app/assets/fonts/icons.woff b/app/assets/fonts/icons.woff index 37e8833db..0f52d3a54 100644 Binary files a/app/assets/fonts/icons.woff and b/app/assets/fonts/icons.woff differ diff --git a/app/assets/images/header_bg.jpg b/app/assets/images/header_bg.jpg index a7eb62333..4449c9897 100644 Binary files a/app/assets/images/header_bg.jpg and b/app/assets/images/header_bg.jpg differ diff --git a/app/assets/images/header_logo_madrid.png b/app/assets/images/header_logo_madrid.png index 51b3cebc9..8ce7251ef 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/admin.scss b/app/assets/stylesheets/admin.scss index 866394bfc..378ff15c0 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -53,8 +53,8 @@ body.admin { // - - - - - - - - - - - - - - - - - - - - - - - - - .admin-sidebar { - margin-left: rem-calc(-15); - margin-top: rem-calc(-48); + margin-left: rem-calc(-20); + margin-top: rem-calc(24); ul { list-style-type: none; diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss index a86e204b7..bf379eef8 100644 --- a/app/assets/stylesheets/debates.scss +++ b/app/assets/stylesheets/debates.scss @@ -2,6 +2,8 @@ // // 01. Debates // 02. Index +// 02.1. Featured +// 02.2. List // 03. Show // 04. New // 05. Comments @@ -165,6 +167,9 @@ // 02. Index // - - - - - - - - - - - - - - - - - - - - - - - - - +// 02.1. Featured +// - - - - - - - - - - - - - + .debate-featured { .panel { @@ -267,9 +272,13 @@ p { color: $text; - font-size: rem-calc(13); + font-size: rem-calc(14); line-height: $line-height; margin-bottom: rem-calc(12); + + &.debate-info { + font-size: rem-calc(13); + } } } @@ -278,8 +287,14 @@ } } +// 02.2. List +// - - - - - - - - - - - - - + .debates-list { - margin-bottom: rem-calc(48); + + @media (min-width: $small-breakpoint) { + margin-bottom: rem-calc(48); + } } .debate { @@ -288,12 +303,15 @@ margin-top: 0; .panel { - border: 0; border-radius: 0; - border-bottom: 1px solid rgba(0,0,0,.1); + box-shadow: 0px 1px 3px 0 $border; margin-bottom: rem-calc(12); min-height: rem-calc(192); - padding: rem-calc(12); + padding-top: rem-calc(12); + + @media (min-width: $small-breakpoint) { + padding-bottom: rem-calc(12); + } .label { line-height: $line-height; @@ -305,10 +323,6 @@ min-height: rem-calc(48); } - p { - text-align: justify; - } - .debate-content { margin: 0; min-height: rem-calc(180); @@ -332,11 +346,11 @@ .votes { border: 1px solid $votes-border; - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; margin: 0 rem-calc(-12); @media (min-width: $small-breakpoint) { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; margin: 0 rem-calc(-24) 0 rem-calc(12); } @@ -373,12 +387,13 @@ } } - .like { + @media (min-width: $small-breakpoint) { + .like { - span { - color: white; - display: block; - line-height: $line-height/2; + span { + display: block; + line-height: $line-height/2; + } } } @@ -407,8 +422,7 @@ // - - - - - - - - - - - - - - - - - - - - - - - - - .debate-show { - background: white; - padding: rem-calc(24) rem-calc(12) 0; + padding-top: rem-calc(12); .back { @include back; @@ -420,7 +434,7 @@ h1 { clear: both; - font-size: rem-calc(24); + font-size: rem-calc(30); font-weight: bold; margin: 0; text-transform: lowercase; @@ -446,7 +460,7 @@ } p { - font-size: rem-calc(14); + font-size: rem-calc(15); line-height: $line-height; margin-bottom: 0; } @@ -473,7 +487,7 @@ } h3 { - border-top: 1px solid $votes-border; + border-top: 2px solid $brand; display: inline-block; font-size: rem-calc(16); margin: -1px 0 rem-calc(12); @@ -483,8 +497,8 @@ .votes { @include votes; - border: 1px solid $votes-border; - border-radius: rem-calc(3); + border: 0; + border-radius: 0; margin: 0; .total-votes { @@ -523,7 +537,7 @@ .tags { display: block; - margin-top: rem-calc(24); + margin: rem-calc(24) 0; a { margin-right: rem-calc(6); @@ -642,6 +656,10 @@ .comment-body { margin-left: rem-calc(42); + p { + font-size: rem-calc(14); + } + .reply { background: white; border: 1px solid $border; diff --git a/app/assets/stylesheets/icons.scss b/app/assets/stylesheets/icons.scss index 1fe6915ee..2cc97f8e8 100644 --- a/app/assets/stylesheets/icons.scss +++ b/app/assets/stylesheets/icons.scss @@ -124,6 +124,9 @@ .icon-language:before { content: "C"; } -.icon-book:before { - content: "D"; +.icon-search:before { + content: "E"; +} +.icon-external:before { + content: "F"; } diff --git a/app/assets/stylesheets/participacion.scss b/app/assets/stylesheets/participacion.scss index 9efdb099d..bf4882ef4 100644 --- a/app/assets/stylesheets/participacion.scss +++ b/app/assets/stylesheets/participacion.scss @@ -77,7 +77,7 @@ html, body { } body { - background: $body; + background: white; font-family: $font-family-sans-serif; font-size: rem-calc(13); font-weight: normal; @@ -87,15 +87,11 @@ body { background: $brand !important; color: white !important; } - - &.bg-white { - background: white; - } } p { - font-size: rem-calc(13); - line-height: $line-height; + font-size: rem-calc(15); + line-height: $line-height*1.25; margin-bottom: rem-calc(12); } @@ -138,7 +134,7 @@ h6 { .button { background: $brand; - font-size: rem-calc(13); + font-size: rem-calc(14); font-family: $font-family-sans-serif !important; padding: rem-calc(15) rem-calc(32); } @@ -262,7 +258,8 @@ h6 { } .footer { - background: $brand; + background: #DEE0E2; + border-top: rem-calc(10) solid $brand; } // 04. Header @@ -270,24 +267,21 @@ h6 { header { background: image-url('header_bg.jpg'); - background-position: 50% 50%; + background-position: bottom; background-repeat: no-repeat; background-size: cover; color: $text; - min-height: rem-calc(696); + min-height: rem-calc(552); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/header_bg.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='assets/header_bg.jpg',sizingMethod='scale')"; &.results { border-bottom: rem-calc(1) solid $border; min-height: rem-calc(48); - - @media (min-width: $small-breakpoint) { - min-height: 189px; - } } h1 { + color: white; font-size: rem-calc(36); font-weight: bolder; line-height: $line-height*2; @@ -296,30 +290,48 @@ header { } p { - font-size: rem-calc(14); - line-height: $line-height; + color: white; + font-size: rem-calc(16); + line-height: rem-calc(30); } .button { - color: white; + background: white; + color: $brand; font-family: inherit; + font-size: rem-calc(16); margin-top: 0; } - .home-page { - background-color: rgba(255,255,255,.85); - clear: both; - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#ffffff'); /* IE */ + .more-info { + color: white; + font-size: rem-calc(14); + margin-left: rem-calc(24); + text-decoration: underline; - @media (min-width: $small-breakpoint) { - margin-top: rem-calc(66); + &:hover { + opacity: .75; } + } - .button { - color: white; - font-family: inherit; - margin-top: 0; - } + .icon-home-big { + color: white; + font-size: rem-calc(300); + line-height: rem-calc(300); + opacity: .75; + } + + .icon-home-small { + color: white; + font-size: rem-calc(100); + opacity: .75; + position: absolute; + right: rem-calc(24); + } + + .icon-external { + color: #D01A6C; + font-size: rem-calc(12); } .selected { @@ -365,14 +377,24 @@ header { float: right; } } + + .search-form { + padding-top: rem-calc(14); + + .postfix { + background: $brand; + border: 0; + color: white; + } + } } .contain-to-grid { - background: none; + background: rgba(0,0,0,.5); } .top-bar { - background: rgba(0,0,0,.5); + background: none; color: white; height: rem-calc(48); max-width: 1170px !important; @@ -390,7 +412,11 @@ header { font-size: rem-calc(16); font-weight: lighter; line-height: $line-height*2; - padding-left: 0; + padding-left: rem-calc(12); + + @media (min-width: $small-breakpoint) { + padding-left: 0; + } span { *display: inline; /* IE */ @@ -423,12 +449,13 @@ header { img { height: 48px; - margin-right: rem-calc(6); + margin-top: rem-calc(24); width: 48px; - @media (min-width: $small-breakpoint) { + @media (min-width: $medium-breakpoint) { height: 96px; margin-right: rem-calc(12); + margin-top: 0; width: 96px; } } @@ -481,7 +508,7 @@ header { @media (min-width: $small-breakpoint) { &.button { border-radius: rem-calc(3); - line-height: normal; + line-height: rem-calc(15); margin-top: rem-calc(24); text-align: center; } @@ -511,10 +538,6 @@ header { @media (min-width: $small-breakpoint) { margin-left: 0; - - &.right:first-child { - margin-right: rem-calc(12); - } } li:not(.has-form) a:not(.button) { @@ -542,14 +565,10 @@ header { } .top-links { + background: #0B0C0C; color: white; font-size: rem-calc(14); - .row { - background-color: rgba(0,0,0,.5); - padding: 0 rem-calc(10); - } - a { color: white; @@ -559,13 +578,19 @@ header { } } +.subnavigation-container { + background: white; +} + .subnavigation { background: white; clear: both; - height: rem-calc(47); + min-height: rem-calc(72); @media (min-width: $small-breakpoint) { - text-align: center; + & > .column { + padding-left: 0; + } } a { @@ -573,33 +598,27 @@ header { display: block; font-size: rem-calc(14); font-weight: bold; - min-width: rem-calc(192); + line-height: $line-height*2; position: relative; text-align: left; - margin-left: rem-calc(12); @media (min-width: $small-breakpoint) { display: inline-block; - line-height: $line-height*2; - margin-left: 0; - min-width: rem-calc(192); - text-align: center; + line-height: $line-height*3; + margin-left: rem-calc(12); + margin-right: rem-calc(72); } &:hover { color: $link; - - @media (min-width: $small-breakpoint) { - background: rgba(0,119,185,.25); - } } &.active { - color: $link; + color: $brand; @media (min-width: $small-breakpoint) { - background: $brand; - color: white; + border-bottom: 2px solid $brand; + line-height: rem-calc(24); } } } @@ -609,61 +628,55 @@ header { // - - - - - - - - - - - - - - - - - - - - - - - - - footer { - color: white; - padding: rem-calc(24) 0 rem-calc(48) 0; + color: #171819; + padding: rem-calc(48) 0; .logo { @include logo; a { + color: #454A4C; line-height: rem-calc(36); padding-left: 0; + text-decoration: none; } } - h4 { - color: white; - font-weight: normal; + p { + font-size: rem-calc(14); } - a { - color: white; + a, a:active, a:focus { + color: #454A4C; + text-decoration: underline; &:hover { - color: white; - opacity: .5; - transition: opacity 275ms; - } - - &:active, &:focus { - color: white; - } - } - - .footer-description { - a { - text-decoration: underline; - - &:hover { - color: white; - opacity: .5; - transition: opacity 275ms; - } - - &:active, &:focus { - color: white; - opacity: 1; - } + color: #171819; } } .footer-sections { padding-left: 0; } + + h4 { + + a { + border-bottom: 1px solid #BFC1C3; + display: block; + margin-bottom: rem-calc(6); + padding-bottom: rem-calc(6); + text-decoration: none; + } + } } .subfooter { - padding-top: $line-height; + border-top: 1px solid #BFC1C3; + opacity: .75; + margin-top: rem-calc(24); + padding-top: rem-calc(12); + } // 06. Tags @@ -704,10 +717,16 @@ footer { } a { + background: white; + border: 2px solid $border; padding: rem-calc(6) rem-calc(8); .label { color: white; + + &.info { + background: $brand; + } } &:hover { @@ -820,10 +839,7 @@ form { &.search-form { height: rem-calc(37); - - @media (min-width: $small-breakpoint) { - border-right: 0; - } + padding: 0 rem-calc(6); } &.error { @@ -1029,17 +1045,26 @@ img.initialjs-avatar { h2 { display: inline-block; font-size: rem-calc(24); - margin: rem-calc(24) 0; + margin: rem-calc(24) 0 rem-calc(12); + + @media (min-width: $small-breakpoint) { + margin: rem-calc(24) 0; + } } select { + background-color: #DEE0E2; height: auto; - margin: rem-calc(24) rem-calc(6); + margin-bottom: rem-calc(24); min-width: rem-calc(180); outline: 0; padding: rem-calc(12); width: auto; + @media (min-width: $small-breakpoint) { + margin: 0 rem-calc(6) rem-calc(24); + } + optgroup { font-size: rem-calc(14); } @@ -1270,8 +1295,6 @@ table { // - - - - - - - - - - - - - - - - - - - - - - - - - .page { - background: white; - min-height: rem-calc(480); padding-bottom: rem-calc(48); .menu { @@ -1295,7 +1318,6 @@ table { .text { margin-top: rem-calc(24); - text-align: justify; h1, h2, h3, h4, h5, h6 { text-align: left; @@ -1305,10 +1327,15 @@ table { margin-left: rem-calc(12); li { - font-size: rem-calc(13); + font-size: rem-calc(15); margin-bottom: rem-calc(12); } } + + p { + font-size: rem-calc(15); + line-height: rem-calc(30); + } } .more-information { @@ -1327,24 +1354,16 @@ table { li { border-bottom: 1px solid $border; font-size: rem-calc(16); + font-weight: bold; padding-bottom: rem-calc(12); - padding-left: rem-calc(36); position: relative; text-align: left; span { color: $text-medium; display: block; - font-size: rem-calc(13); - } - - &:before { - content: 'D'; - color: $link; - font-family: "icons" !important; - left: 0; - margin-right: rem-calc(12); - position: absolute; + font-size: rem-calc(14); + font-weight: normal; } &:after { diff --git a/app/views/debates/index.html.erb b/app/views/debates/index.html.erb index bd641d152..f0db765d2 100644 --- a/app/views/debates/index.html.erb +++ b/app/views/debates/index.html.erb @@ -38,13 +38,15 @@ +
+ <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button radius expand' %> +
<%= render @debates %> <%= paginate @debates %>
diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb index f71c6b8ee..9cb5bd1a5 100644 --- a/app/views/layouts/_footer.html.erb +++ b/app/views/layouts/_footer.html.erb @@ -2,23 +2,22 @@
-
+
-

<%= t("layouts.footer.description", - more_info: link_to(t("layouts.footer.more_info"), t("layouts.footer.more_info_url")), open_source: link_to(t("layouts.footer.open_source"), t("layouts.footer.open_source_url"), target: "blank"), - github: link_to(t("layouts.footer.github"), t("layouts.footer.github_url"), target: "blank")).html_safe + consul: link_to(t("layouts.footer.consul"), t("layouts.footer.consul_url"), target: "blank")).html_safe %> <%= t("layouts.footer.contact_us") %> <%= mail_to "web.gobiernoabierto@madrid.es" %>

-