includes header partial

app/assets/stylesheets/debates.scss

@@ -1,12 +1,43 @@
-#tag_cloud {
-  width: 400px;
-  line-height: 1.6em;
-  .s { font-size: 0.8em; }
-  .m { font-size: 1.2em; }
-  .l { font-size: 1.8em; }
-}
+// Table of Contents
+//
+// 01. Variables
+// 02. Global styles
+// 03. Header
+// 04. Footer
 
 
-body {
-	background: #fafafa;
+// 01. Variables
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$line-height: rem-calc(24);
+
+// 02. Global styles
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+
+
+
+// 02. 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; 
+}
+
+.contain-to-grid {
+	background: none;
+}
+
+.top-links {
+	color: white;
+	font-size: rem-calc(14);
+	padding: $header-line-height/2+em 0;
+
+	a {
+		color: white;
+	}
 }

app/views/layouts/_header.html.erb

@@ -0,0 +1,30 @@
+<header>
+	<section class="top-links">
+		<div class="row">
+			<div class="small-12 column">
+				<div class="right">
+					<a href="#">Portal de Transparencia</a> | <a href="#">Datos abiertos</a>
+				</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>
+
+		  	<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>
+		</nav>
+	</div>
+</header>