[style] updating layout and adding header assets

doc/_layouts/page.html

@@ -16,23 +16,18 @@
 
     <!-- HEADER -->
     <div id="header_wrap" class="outer">
-        <header class="inner">
-          <a id="discuss_banner" href="https://groups.google.com/group/capnproto">Discuss on Groups</a>
-          <a id="forkme_banner" href="https://github.com/kentonv/capnproto">View on GitHub</a>
-
-          <h1 id="project_title">Cap'n Proto</h1>
-          <h2 id="project_tagline">Cap'n Proto serialization/RPC system</h2>
-
-            <section id="downloads">
-              <a class="zip_download_link" href="https://github.com/kentonv/capnproto/zipball/master">Download this project as a .zip file</a>
-              <a class="tar_download_link" href="https://github.com/kentonv/capnproto/tarball/master">Download this project as a tar.gz file</a>
-            </section>
-        </header>
+      <header class="inner">
+        <img src="images/captain_proto.png">
+        <div id="infinitely_faster">
+          <img src="images/infinitely_faster.png">
+        </div>
+      </header>
+      <a id="discuss_banner" href="https://groups.google.com/group/capnproto">Discuss on Groups</a>
+      <a id="forkme_banner" href="https://github.com/kentonv/capnproto">View on GitHub</a>
     </div>
 
     <!-- MAIN CONTENT -->
     <div id="main_content_wrap" class="outer">
-      <div id="corner_hack"><div> </div></div>
 
       <section id="menu">
         <ul>
@@ -69,7 +64,7 @@
                 document.body.className = "wide";
               }
 
-              if (window.scrollY < 219 || window.innerHeight < menu.clientHeight + 20) {
+              if (window.scrollY < 410 || window.innerHeight < menu.clientHeight + 20) {
                 menu.className = "";
               } else {
                 menu.className = "floating";
@@ -117,11 +112,11 @@
       </section>
     </div>
 
-    <!-- FOOTER  -->
+    <!-- FOOTER  --> 
     <div id="footer_wrap" class="outer">
       <footer class="inner">
         <p class="copyright">Cap'n Proto maintained by <a href="https://github.com/kentonv">kentonv</a></p>
-        <p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
+        <p>Design by <a href="http://www.starfruit-cafe.net/blog">sailorhg</a> ∙ Published with <a href="http://pages.github.com">GitHub Pages</a></p>
       </footer>
     </div>
 

doc/stylesheets/stylesheet.css

@@ -147,15 +147,6 @@ img {
   position: relative;
   margin: 0 auto;
   max-width: 739px;
-  padding: 5px;
-  margin: 10px 0 10px 0;
-  border: 1px solid #ebebeb;
-
-  box-shadow: 0 0 5px #ebebeb;
-  -webkit-box-shadow: 0 0 5px #ebebeb;
-  -moz-box-shadow: 0 0 5px #ebebeb;
-  -o-box-shadow: 0 0 5px #ebebeb;
-  -ms-box-shadow: 0 0 5px #ebebeb;
 }
 
 pre, code {
@@ -261,7 +252,6 @@ form {
 img {
   width: 100%;
   max-width: 100%;
-  background-color: white;
 }
 
 /*******************************************************************************
@@ -291,7 +281,7 @@ body.normal #main_content.inner {
   z-index: 10;
   padding: 10px 50px 10px 10px;
   color: #fff;
-  background: url('../images/groups-logo.png') #0090ff no-repeat 95% 50%;
+  background: url('../images/groups-logo.png') #333 no-repeat 95% 50%;
   font-weight: 700;
   box-shadow: 0 0 10px rgba(0,0,0,.5);
   border-bottom-left-radius: 2px;
@@ -299,14 +289,14 @@ body.normal #main_content.inner {
 }
 
 #forkme_banner {
-  display: block;
+  display: ;
   position: absolute;
   top:0;
-  right: 230px;
+  right: 210px;
   z-index: 10;
   padding: 10px 50px 10px 10px;
   color: #fff;
-  background: url('../images/blacktocat.png') #0090ff no-repeat 95% 50%;
+  background: url('../images/blacktocat.png') #333 no-repeat 95% 50%;
   font-weight: 700;
   box-shadow: 0 0 10px rgba(0,0,0,.5);
   border-bottom-left-radius: 2px;
@@ -314,7 +304,7 @@ body.normal #main_content.inner {
 }
 
 .groups_link {
-	display: inline-block;
+  display: inline-block;
   z-index: 10;
   padding: 10px 50px 10px 10px;
   margin: 5px;
@@ -346,12 +336,7 @@ body.normal #main_content.inner {
 }
 
 #header_wrap {
-  background: #212121;
-  background: -moz-linear-gradient(top, #373737, #212121);
-  background: -webkit-linear-gradient(top, #373737, #212121);
-  background: -ms-linear-gradient(top, #373737, #212121);
-  background: -o-linear-gradient(top, #373737, #212121);
-  background: linear-gradient(top, #373737, #212121);
+  background: #C42727;
 }
 
 #header_wrap .inner {
@@ -378,9 +363,8 @@ body.normal #main_content.inner {
   position: absolute;
   width: 210px;
   z-index: 10;
-  bottom: -40px;
-  right: 0;
-  height: 70px;
+  top: 50px;
+  right: 0px;
   background: url('../images/icon_download.png') no-repeat 0% 90%;
 }
 
@@ -484,11 +468,22 @@ Small Device Styles
   }
 }
 
+#infinitely_faster img{
+  position: absolute;
+  left: 600px;
+  top: 266px;
+  z-index: 10; 
+  max-width:222px;
+}
+
+body.narrow #infinitely_faster{
+  display:none;
+}
 
 body.wide #corner_hack, body.normal #corner_hack {
-	position: absolute;
-	left: 0px;
-	top: 209px;
+  position: absolute;
+  left: 0px;
+  top: 209px;
   right: 0px;
   height: 10px;
   background: #212121;
@@ -504,16 +499,16 @@ body.wide #corner_hack>div, body.normal #corner_hack>div {
 }
 
 body.wide #menu, body.normal #menu {
-	position: absolute;
-	left: 0px;
-	top: 219px;
-	width: 250px;
-	z-index: 10;
+  position: absolute;
+  left: 50px;
+  top: 460px;
+  width: 250px;
+  z-index: 10;
 }
 
 body.wide #menu.floating, body.normal #menu.floating {
   position: fixed;
-  top: 0px;
+  top: 50px;
 }
 
 body.narrow #menu {
@@ -546,10 +541,15 @@ body.narrow #menu {
 }
 
 body.wide #menu>ul>li:last-child, body.normal #menu>ul>li:last-child {
-  border-radius: 0px 0px 10px 0px;
+  border-radius: 0px 0px 10px 10px;
   border-bottom: 1px solid #111;
 }
 
+body.wide #menu>ul>li:first-child, body.normal #menu>ul>li:first-child {
+  border-radius: 10px 10px 0px 0px;
+  border-top: 1px solid #111;
+}
+
 body.narrow #menu>ul>li:first-child {
   border-radius: 10px 10px 0px 0px;
 }