Includes first styles for header and debates
This commit is contained in:
Alberto García Cabeza
@@ -4,6 +4,7 @@
|
||||
// 02. Global styles
|
||||
// 03. Header
|
||||
// 04. Footer
|
||||
// 05. Debates
|
||||
|
||||
|
||||
// 01. Variables
|
||||
@@ -12,32 +13,129 @@
|
||||
$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
$line-height: rem-calc(24);
|
||||
|
||||
$brand: #0077B9;
|
||||
$debates: #008CCF;
|
||||
$header-color: #292B33;
|
||||
$text-color: #919399;
|
||||
|
||||
// 02. Global styles
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
body {
|
||||
font-family: $font-family-sans-serif;
|
||||
font-weight: 300;
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 02. Header
|
||||
// 03. Header
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
header {
|
||||
background: url('https://static.pexels.com/photos/2752/city-sunny-people-street-large.jpg');
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
min-height: $line-height*20;
|
||||
background: url('home-header-bg.jpg');
|
||||
background-position: 50% 50%;
|
||||
background-size: cover;
|
||||
min-height: $line-height*20;
|
||||
}
|
||||
|
||||
.contain-to-grid {
|
||||
background: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
background: white;
|
||||
color: $header-color;
|
||||
height: $line-height*4;
|
||||
|
||||
.name h1 a {
|
||||
color: black;
|
||||
font-family: 'Lato';
|
||||
font-size: rem-calc(36);
|
||||
font-weight: lighter;
|
||||
line-height: $line-height*4;
|
||||
padding-left: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
span {
|
||||
color: $brand;
|
||||
font-size: rem-calc(24);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-right: $line-height/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar-section li:not(.has-form) a:not(.button) {
|
||||
background: white;
|
||||
color: $brand;
|
||||
line-height: $line-height*4;
|
||||
}
|
||||
|
||||
.top-links {
|
||||
color: white;
|
||||
font-size: rem-calc(14);
|
||||
padding: $header-line-height/2+em 0;
|
||||
color: white;
|
||||
font-size: rem-calc(14);
|
||||
padding: $header-line-height/2+em 0;
|
||||
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
// 04. Footer
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 05. Debates
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
.debates-index {
|
||||
margin-top: $line-height;
|
||||
}
|
||||
|
||||
.debate {
|
||||
|
||||
.panel {
|
||||
|
||||
.fi-comment-quotes {
|
||||
color: $debates;
|
||||
font-size: rem-calc(36);
|
||||
line-height: $line-height;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-top: $line-height/4;
|
||||
}
|
||||
|
||||
h3 a {
|
||||
clear: both;
|
||||
color: $header-color;
|
||||
display: block;
|
||||
font-size: rem-calc(16);
|
||||
}
|
||||
|
||||
p {
|
||||
color: $text-color;
|
||||
font-size: rem-calc(13);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
<div id="debate-<%= debate.id %>" class='debate'>
|
||||
<p><%= link_to debate.title, debate %></p>
|
||||
<p><%= debate.description %></p>
|
||||
<div id="debate-<%= debate.id %>" class="small-12 medium-2 large-4 column debate">
|
||||
|
||||
<p>
|
||||
Creado el: <%= l debate.created_at.to_date %>
|
||||
por: <%= debate.author.name %>
|
||||
</p>
|
||||
<div class="panel">
|
||||
<i class="fi-comment-quotes left"></i>
|
||||
<span class="label radius right">Debate</span>
|
||||
|
||||
<p><%= render 'shared/tags', debate: debate %></p>
|
||||
<h3><%= link_to debate.title, debate %></h3>
|
||||
<p><%= debate.description %></p>
|
||||
<p> Creado el: <%= l debate.created_at.to_date %> por: <%= debate.author.name %></p>
|
||||
|
||||
<p><%= render 'shared/tags', debate: debate %></p>
|
||||
</div>
|
||||
</div>
|
||||
<br/><br/><br/><br/>
|
||||
@@ -1,10 +1,11 @@
|
||||
<h1>Debates sobre Madrid</h1>
|
||||
<%#= link_to 'New Debate', new_debate_path, :class => 'button radius right' %>
|
||||
|
||||
<div id='debates'>
|
||||
<%= render @debates %>
|
||||
</div>
|
||||
<section id='debates' class="debates-index">
|
||||
<div class="row">
|
||||
<%= render @debates %>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<%= render 'shared/tag_cloud' %>
|
||||
|
||||
<br/><br/>
|
||||
<%= link_to 'New Debate', new_debate_path %>
|
||||
<aside>
|
||||
<%= render 'shared/tag_cloud' %>
|
||||
</aside>
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
<div style="float:right; margin-right:50px">
|
||||
<% if user_signed_in? %>
|
||||
<li>
|
||||
<%= link_to('Logout', destroy_user_session_path, method: :delete) %>
|
||||
</li>
|
||||
<% else %>
|
||||
<li>
|
||||
<%= link_to('Login', new_user_session_path) %>
|
||||
</li>
|
||||
<% end %>
|
||||
</div>
|
||||
<ul class="right">
|
||||
<% if user_signed_in? %>
|
||||
<li>
|
||||
<%= link_to('Logout', destroy_user_session_path, method: :delete) %>
|
||||
</li>
|
||||
<% else %>
|
||||
<li>
|
||||
<%= link_to('Login', new_user_session_path) %>
|
||||
</li>
|
||||
<li class="active">
|
||||
<%#= link_to('Sign up', new_registration_path) %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
@@ -5,26 +5,27 @@
|
||||
<div class="right">
|
||||
<a href="#">Portal de Transparencia</a> | <a href="#">Datos abiertos</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="contain-to-grid">
|
||||
<nav class="top-bar" data-topbar role="navigation">
|
||||
<ul class="title-area">
|
||||
<li class="name">
|
||||
<h1><a href="#">gobierno<strong>abierto</strong> | Participación</a></h1>
|
||||
</li>
|
||||
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
|
||||
</ul>
|
||||
<li class="name">
|
||||
<h1>
|
||||
<%= link_to root_path do %>
|
||||
<%= image_tag('header-logo-madrid.png', :class => 'left', :size => '96x96') %>
|
||||
gobierno<strong>abierto</strong> | <span>Participación</span>
|
||||
<% end %>
|
||||
</h1>
|
||||
</li>
|
||||
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
|
||||
</ul>
|
||||
|
||||
<section class="top-bar-section">
|
||||
<ul class="right">
|
||||
<li><a href="#">Entrar</a></li>
|
||||
<li class="active"><a href="#">Registrarse</a></li>
|
||||
<%= render 'devise/menu/login_items' %>
|
||||
</ul>
|
||||
</section>
|
||||
<section class="top-bar-section">
|
||||
<%= render 'devise/menu/login_items' %>
|
||||
</section>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
@@ -1,22 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title><%= content_for?(:title) ? yield(:title) : "Participación" %></title>
|
||||
<title><%= content_for?(:title) ? yield(:title) : "Participación" %></title>
|
||||
|
||||
<%= stylesheet_link_tag "application" %>
|
||||
<%= javascript_include_tag "vendor/modernizr" %>
|
||||
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
|
||||
<%= csrf_meta_tags %>
|
||||
</head>
|
||||
<body style="margin:50px">
|
||||
<p class="alert"><%= notice %></p>
|
||||
<p class="alert"><%= alert %></p>
|
||||
<%= stylesheet_link_tag "application" %>
|
||||
<%= javascript_include_tag "vendor/modernizr" %>
|
||||
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
|
||||
<%= csrf_meta_tags %>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<%= render 'devise/menu/login_items' %>
|
||||
<%= render 'layouts/header' %>
|
||||
|
||||
<%= yield %>
|
||||
</body>
|
||||
<% if notice %>
|
||||
<p class="alert-box success"><%= notice %></p>
|
||||
<% end %>
|
||||
|
||||
<% if alert %>
|
||||
<p class="alert-box success"><%= alert %></p>
|
||||
<% end %>
|
||||
|
||||
<div class="row">
|
||||
<div class="small-12 column">
|
||||
<%= yield %>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user