From 176e46f7fbadb4fa42d55ac7b09bbf0866c176d9 Mon Sep 17 00:00:00 2001
From: Leonardo Merlin <leonardo.merlin@gmail.com>
Date: Wed, 17 Jun 2015 22:29:07 -0300
Subject: [PATCH] update: small improvements on header (issue #303)

---
 index.html      |  6 +++---
 js/main.js      |  2 ++
 sass/style.sass | 17 ++++++++++++++---
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index bfea006..e597315 100644
--- a/index.html
+++ b/index.html
@@ -98,11 +98,11 @@
     <script id="proposal-template" type="text/x-handlebars-template">
       <header class="container">
         <div class="row" style="margin: 10px 0 0 0">
-          <div class="col-xs-5">
+          <div class="col-xs-6">
             <button type="button" id="display-contrast" class="btn btn-link"><i class="fa fa-adjust"></i> Alto Contraste</button>
           </div>
-          <div class="col-xs-7">
-            <div class="participar">
+          <div class="col-xs-6">
+            <div class="participar hide">
               <button type="button" id="login-button" class="btn login"><i class="icon icon-login"></i>Entrar</button>
               <button type="button" id="logout-button" class="btn logout hide"><i class="icon icon-login"></i><span class="name"></span>Sair</button>
             </div>
diff --git a/js/main.js b/js/main.js
index 715da56..2ec6c84 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1121,6 +1121,8 @@ define(['jquery', 'handlebars', 'fastclick', 'handlebars_helpers', 'piwik'], fun
 
         $loginPanel.toggle();
       });
+
+      $('.participar').removeClass('hide');
     })();
 
   });
diff --git a/sass/style.sass b/sass/style.sass
index 7524964..de8e645 100644
--- a/sass/style.sass
+++ b/sass/style.sass
@@ -77,6 +77,11 @@ $link-color: #387bfa
 //   1.6 - escurecer
 $darken: 15%
 
+//   1.7 - screens
+$screen-xs: 480px
+$screen-sm: 768px 
+$screen-md: 992px 
+$screen-lg: 1200px 
 
 // ------------------------------------
 // 2 - Mixins
@@ -401,12 +406,16 @@ h1
 .top-menu
   float: left
   margin: $gutter ($gutter * 0.75)
+  @media (max-width: $screen-xs)
+    margin: auto
   a
     color: $header-color
     display: block
     float: left
     margin: ($gutter * 2) ($gutter * 0.5) 0
     text-transform: uppercase
+    @media (max-width: $screen-xs)
+      margin: 0 ($gutter)
 
 //   6.3 - video
 #content
@@ -568,7 +577,7 @@ h1
       font-weight: 500
       margin-top: $gutter * 0.5
       // height: $gutter * 2
-      // @media (min-width: 768px)
+      // @media (min-width: $screen-md)
       //   height: $gutter * 3
   &-body
     padding: $gutter
@@ -714,6 +723,8 @@ h1
   .btn
     color: $link-color
     font-weight: normal
+    .contrast &
+      color: #fff
   .participe
     font-size: 14px
     padding: 2px 10px
@@ -1112,7 +1123,7 @@ td
     .#{$category} &
       color: $color
   
-  @media (max-width: 767px)
+  @media (max-width: $screen-md)
     width: 100%
     margin-left: 0
 
@@ -1353,7 +1364,7 @@ h3.titulo-destaque
 // ------------------------------------
 // 10 - mobile
 // ------------------------------------
-@media (max-width: 480px)
+@media (max-width: $screen-xs)
   #content
     // margin-top: $gutter * 1.5 * (-1)
     margin-bottom: 0
--
libgit2 0.21.2