Change header and hero styles

Author: timowest

css/navbar-fixed-top.css

@@ -2,12 +2,21 @@ body {
   padding-top: 70px;
 }
 
+.navbar-default .navbar-brand {
+  color: #202020;
+}
+
 .navbar-fixed-top {
   padding: 20px 0px;
-  height: 95px;
+  height: 90px;
   border: none;  
 }
 
+.navbar-fixed-top.slim {
+  padding: 8px 0px;
+  height: 60px;
+}
+
 .nav .active {
   background: none;
 }
@@ -18,29 +27,25 @@ h1, h2, h3 {
 }
 
 .hero {
-/*  background: #a0a0FF;*/
-  background: #74b73f;
+  background: url(img/jean-cocteau-museum-menton.png);
+  background: #a0a0ff;
   color: white;
-  height: 22em;
+  padding-top: 15em; 
+  margin-bottom: 1em;
+  height: 42em;
   width: 100%;
 }
 
-body.frontpage > .container {
-  margin-top: -21em;
+.hero h1 {
+  color: white;
+  font-size: 4em;
+  text-align: center;
 }
 
 body.releases > .container {
   margin-top: 3em;
 }
 
-.jumbotron {
-  background: none;
-}
-
-.jumbotron h1, .jumbotron h2 {
-  text-align: center;
-}
-
 #footer {
   /*background: #f8f8f8;*/
   margin-top: 5em;

img/jean-cocteau-museum-menton.png

@@ -56,16 +56,22 @@
       </div>
     </div>
 
-    <div class="hero"></div>
+    <div class="hero">
+      <h1>Unified Queries for Java.<br/>
+          Querydsl is compact, safe and easy to learn.<br/>
+          Try it today!
+      </h1>
+    </div>
 
     <div class="container">
 
-      <!-- Main component for a primary marketing message or call to action -->
+<!--
       <div class="jumbotron">
         <h1>Querydsl</h1>
         <h2>Unified Queries for Java</h2>
         <p>Querydsl provides a unified querying layer for multiple backends in Java. Compared to the alternatives Querydsl is more compact, safer and easier to learn. Try it today!</p>        
       </div>
+-->
 
       <div class="some-buttons">
         <table>
@@ -224,7 +230,9 @@ <h2>Examples</h2>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script src="js/bootstrap.min.js"></script>
     <script src="js/underscore-min.js"></script>
+    <script src="js/waypoints.min.js"></script>
     <script src="js/versions.js"></script>
+    <script src="js/scroll.js"></script>
 
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

index.html

@@ -0,0 +1,11 @@
+$(document).ready(function() {
+    $(".hero").waypoint(function(direction) {
+        if (direction === "down") {
+            return $(".navbar-fixed-top").addClass("slim");
+        } else {
+            return $(".navbar-fixed-top").removeClass("slim");
+        }
+      }, {
+        offset: 55
+    });
+});