More stuff

tbranyen · tbranyen · commit 8f6eb7021c4b · 2014-10-12T20:52:31.000-04:00
diff --git a/index.html b/index.html
@@ -16,18 +16,50 @@
   <body>
     <div id="wrapper">
       <section id="api" class="full block">
-        <!--
-        <input tabindex="1" placeholder="Search API" type="search"><select>
-          <option disabled>Select Version</option>
-          <option selected value="wip">WIP</option>
-        </select>
-        -->
-
         <div>
           <ul id="list-api">
-            <a href="/"><li class="brand">NodeGit</li></a>
+            <a href="#"><li class="brand">NodeGit</li></a>
+            <li><input tabindex="1" placeholder="Search API" type="search"></li>
           </ul>
           <div class="api-content">
+            <div class="about">
+              <h3>About NodeGit</h3>
+              <p>Asynchronous native Node bindings to the libgit2 project.</p>
+              <span class="version">Version 0.1.0</span> |
+              <a href="https://github.com/nodegit/nodegit">GitHub repository</a>
+              <p>
+              <a href="https://travis-ci.org/nodegit/nodegit"><img src="https://camo.githubusercontent.com/be9d877bd751211f37a89a3609758d5c44a7505e/68747470733a2f2f7472617669732d63692e6f72672f746272616e79656e2f6e6f64656769742e706e67" alt="Build
+              Status" data-canonical-src="https://travis-ci.org/tbranyen/nodegit.png" style="max-width:100%;"></a>
+                <a href="https://ci.appveyor.com/project/TimBranyen/nodegit"><img src="https://ci.appveyor.com/api/projects/status/e5a5q75l9yfhnfv2/branch/master" alt="Build Status: Windows" height="18" /></a>
+
+              <h4>History:</h4>
+              <div class="wrap-content">
+                <p>
+                  Originally started in 2011 as a project by TJ Fontaine, current
+                  Node lead, as an FFI-binding to libgit2. Tim Branyen then
+                  forked the project and migrated it to use native wrapper
+                  bindings, which would increase performance.
+                </p>
+                <p>
+                  NodeGit was then led by Michael Robinson, who stabilized much
+                  of the core binding logic for the limited API exposed.  Nick
+                  Kallen came on much later and automated a majority of the
+                  native code.
+                </p>
+                <p>
+                  After benefiting from so many contributors, NodeGit is maturing
+                  and is slowly becoming a full suite of automated 1:1 bindings
+                  to libgit2.
+                </p>
+                <h3>Install</h3>
+                <pre>
+                <code>
+  npm install nodegit
+                </code>
+                </pre>
+              </div>
+              <h3>API Documentation</h3>
+            </div>
             <script type="inner-content">
             <div id="{{jsClassName}}" class="inner-content">
               <ul class="api-contents">
diff --git a/styles/api.css b/styles/api.css
@@ -7,6 +7,9 @@
   position: fixed;
   left: 0;
   top: 0;
+  font-size: 13px;
+  /* Cover #content */
+  z-index: 100;
 }
 
 #list-api a {
@@ -46,14 +49,15 @@
 .api-content {
   color: #333;
   float: left;
-  width: 50%;
+  width: calc(100% - 225px);
   min-height: 100%;
   position: relative;
+  overflow-x: hidden;
   left: 225px;
 }
 
 .api-content .inner-content {
-  width: calc(100% - 17px);
+  width: 50%;
   height: 100%;
   margin: 17px;
   margin-right: 0px;
diff --git a/styles/common.css b/styles/common.css
@@ -55,14 +55,14 @@ select {
 }
 
 input[type=search] {
-  width: calc(100% - 142px);
+  width: 100%;
   color: #FFF;
   outline: none;
   border: none;
   padding: 10px;
-  padding-left: 10px;
+  padding-left: 20px;
   background: #383838;
-  font-size: 1.2em;
+  font-size: 13px;
 }
 
 .brand {
@@ -152,3 +152,33 @@ footer a {
 .center {
   text-align: center;
 }
+
+.about {
+  background: #303030;
+  padding: 20px;
+  color: #FFF;
+  margin-left: 15px;
+  color: #FFF;
+  padding-bottom: 0;
+}
+
+.about p {
+  color: #BBB;
+}
+
+.about a {
+  color: #8A8A8A;
+}
+
+.about h4 {
+  color: #CCC;
+}
+
+.about h3:last-child {
+  padding-bottom: 20px;
+  margin-bottom: 0;
+}
+
+.wrap-content {
+  width: 50%;
+}
