Finalizado header

Author: sergiors

_includes/header.html

@@ -1,29 +1,35 @@
-<header>
-  <nav class="navbar navbar-static-top navbar-purple">
-      <div class="container">
-          <div class="navbar-header">
-              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
-                  <span class="sr-only">Toggle navigation</span>
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
-              </button>
-              <a class="navbar-brand" href="{{ site.baseurl }}/">{{ site.title }}</a>
-          </div>
+<nav class="navbar navbar-static-top navbar-purple">
+  <div class="container">
+      <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
+              <span class="sr-only">Toggle navigation</span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+              <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="{{ site.baseurl }}/">{{ site.title }}</a>
+      </div>
 
-          <div class="collapse navbar-collapse" id="collapse">
-              <ul class="nav navbar-nav">
-                  {% for page in site.pages %}
-                    {% if page.title %}
-                        <li><a href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a></li>
-                    {% endif %}
-                  {% endfor %}
-              </ul>
-              <ul class="nav navbar-nav navbar-right">
-                  <li><a href="http://www.meetup.com/pt/PHPSC-Floripa/">Reuniões</a></li>
-                  <li><a href="https://phpsc-slackin.herokuapp.com/">Slack</a></li>
-              </ul>
-          </div><!-- /.navbar-collapse -->
-      </div><!-- /.container -->
-  </nav>
+      <div class="collapse navbar-collapse" id="collapse">
+          <ul class="nav navbar-nav">
+              {% for page in site.pages %}
+                {% if page.title %}
+                    <li><a href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a></li>
+                {% endif %}
+              {% endfor %}
+          </ul>
+          <ul class="nav navbar-nav navbar-right">
+              <li><a href="http://www.meetup.com/pt/PHPSC-Floripa/">Reuniões</a></li>
+              <li><a href="https://phpsc-slackin.herokuapp.com/">Slack</a></li>
+          </ul>
+      </div><!-- /.navbar-collapse -->
+  </div><!-- /.container -->
+</nav>
+
+<header class="header">
+    <div class="container">
+        <a href="{{ site.baseurl }}/">
+            <img src="{{ site.baseurl }}/img/logo_branca.png" class="logo" alt="{{ site.title }}">
+        </a>
+    </div><!-- /.container -->
 </header>

_sass/_layout.scss

@@ -4,22 +4,37 @@
 /**
  * Site header
  */
-.site-header {
-    min-height: 500px;
 
-    background: transparent url(../img/capa_grupo_face.png) no-repeat center center;
+.header {
+    position: relative;
+    height: 300px;
+    background: {
+        image: url("../img/elephants.jpg");
+        repeat: no-repeat;
+        position: center;
+        size: cover;
+    }
 
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
+    .container {
+        position: relative;
+        z-index: 20;
+    }
 
-    // Positioning context for the mobile navigation icon
-    position: relative;
+    &:before {
+        position: absolute;
+        z-index: 10;
+        content: "";
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: $blue;
+        opacity: 0.5;
+    }
 
-    @include media-query($on-palm) {
-        min-height: 200px;
-        background-position: top right;
+    .logo {
+        height: 200px;
+        margin-top: 50px;
     }
 }
 
@@ -283,7 +298,7 @@
 
     .fork-me-on-github img {
         position: absolute;
-        top: 0;
+        top: 51px;
         right: 0;
         z-index: 1500;
         border: 0;
@@ -292,6 +307,10 @@
     }
 }
 
+.navbar {
+    margin-bottom: 0;
+}
+
 .navbar-purple {
     background-color: #fff;
 

_sass/_vars.scss

@@ -1,4 +1,5 @@
 $purple: #662D91;
+$blue: #1B6E8D;
 
 //== Media queries breakpoints
 //