web: Fix page header style

Signed-off-by: Eduardo L. Buratti <elb09@c3sl.ufpr.br>

web/app/index.html

@@ -17,26 +17,26 @@
         </div>
     </div>
 
-    <div class="wrapper">
-
+    <div class="container">
         <div class="header">
-            <div class="top-links">
-                <a href="">Pular para o conteúdo</a>
-                <a href="">Ouvidoria</a>
-                <a href="">Mapa do site</a>
-            </div>
+            <ul class="header-links">
+                <li><a href="">Pular para o conteúdo</a></li>
+                <li><a href="">Ouvidoria</a></li>
+                <li><a href="">Mapa do site</a></li>
+            </ul>
             
-            <div class="font-size-selector">
-                <a class="font-size-inc" href="#" title="Aumentar fonte">A+</a>
-                <a class="font-size-res" href="#" title="Tamanho normal da fonte">A </a>
-                <a class="font-size-dec" href="#" title="Diminuir fonte">A-</a>
+            <div class="header-font-size">
+                <a class="dec" href="#" title="Diminuir fonte">A-</a>
+                <a class="reset" href="#" title="Tamanho normal da fonte">A&nbsp;</a>
+                <a class="inc" href="#" title="Aumentar fonte">A+</a>
             </div>
-            
-            <h1>Sistema Integrado de Monitoramento</h1>
-            <h1>Ministério das Comunicações</h1>
-            
-            <div class="header-logo">
+
+            <div class="header-title">
+                <h1>Sistema Integrado de Monitoramento</h1>
+                <h1>Ministério das Comunicações</h1>
             </div>
+
+            <div class="header-logo"></div>
         </div>
 
         <div ui-view></div>

web/assets/less/main.less

 @import "barra-brasil.less";
 
 body {
-    font-family: Arial, sans-serif;
-    color: black;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
     font-size: 1.2em;
+    line-height: 1.5;
+    color: #333;
 }
 
-.wrapper {
-    width: 870px;
-    height: 820px;
+a {
+    color: #004B82;
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+.container {
+    width: 950px;
     margin: auto;
-    background-color: white;
-    position: relative;
 }
 
 .header {
@@ -25,11 +32,50 @@ body {
         }
     }
 
-    .top-links a {
+    .header-links {
         float: left;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+            float: left;
+            margin: 0 10px;
+        }
     }
 
-    .font-size-selector {
+    .header-font-size {
         float: right;
+        padding: 0px 5px;
+
+        .dec {
+            font-size: 1.25em;
+            padding-right: 5px;
+        }
+        .reset {
+            font-size: 1.5em;
+        }
+        .inc {
+            font-size: 2em;
+        }
+    }
+
+    .header-title {
+        clear: both;
+        padding-top: 1px;
+        padding-bottom: 16px;
+        text-align: right;
+
+        h1 {
+            font-size: 2.5em;
+            font-weight: bold;
+            color: #004b82;
+            line-height: 0.7;
+        }
+    }
+
+    .header-logo {
+        background: url('../img/header.png') no-repeat;
+        height: 100px;
     }
 }
\ No newline at end of file