New styling applied

css/site.css

@@ -0,0 +1,270 @@
+/*
+Theme Name:         Recline   
+Description:        Layout and styling for reclinejs.com
+Author:             Sam Smith
+Author URI:         http://www.mintcanary.com/
+*/
+
+/* -------------------------------------------------- 
+   Table of Contents
+-----------------------------------------------------
+:: General Styles
+:: Layout
+:: 
+:: 
+:: 
+*/
+
+/* ---------------------------------------------------
+   General Styles
+--------------------------------------------------- */
+
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700);
+
+h1, h2, h3, h4, h5, h6 {
+	font-family:'Open Sans', Helvetica, Arial, sans-serif;
+}
+
+a {
+  color: #c7231d;
+}
+a:hover {
+  color: #bc130e;
+}
+a.dotted {
+	border-bottom-width: 1px;
+	border-bottom-style: dotted;
+	border-bottom-color: #333;
+	color:#333;
+}
+a.dotted:hover {
+	text-decoration:none;
+}
+
+.btn-info {
+  background: #545454; /* Old browsers */
+	background: -moz-linear-gradient(top, #545454 0%, #454545 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#545454), color-stop(100%,#454545)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top, #545454 0%,#454545 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top, #545454 0%,#454545 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top, #545454 0%,#454545 100%); /* IE10+ */
+	background: linear-gradient(top, #545454 0%,#454545 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#454545',GradientType=0 ); /* IE6-9 */
+  border-color: #454545 #454545 #454545;
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+  border: 1px solid #454545;
+  border-bottom-color: #454545;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+	color:#FFF;
+	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.btn-info:hover,
+.btn-info:active,
+.btn-info.active,
+.btn-info.disabled,
+.btn-info[disabled] {
+  background-color: #454545;
+	background-image:none;
+	color:#FFF;
+}
+.btn-info:active,
+.btn-info.active {
+	background-color: #454545 \9;
+	background-image:none;
+	color:#FFF;
+}
+
+.btn-large {
+  padding: 9px 14px;
+  -webkit-border-radius: 25px;
+  -moz-border-radius: 25px;
+  border-radius: 25px;
+	margin-right:10px;
+}
+
+.btn-primary {
+  background: #c7231d; /* Old browsers */
+	background: -moz-linear-gradient(top, #c7231d 0%, #bc130e 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c7231d), color-stop(100%,#bc130e)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top, #c7231d 0%,#bc130e 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top, #c7231d 0%,#bc130e 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top, #c7231d 0%,#bc130e 100%); /* IE10+ */
+	background: linear-gradient(top, #c7231d 0%,#bc130e 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7231d', endColorstr='#bc130e',GradientType=0 ); /* IE6-9 */
+  border-color: #0055cc #0055cc #003580;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  filter: progid:dximagetransform.microsoft.gradient(enabled=false);
+}
+.btn-primary:hover,
+.btn-primary:active,
+.btn-primary.active,
+.btn-primary.disabled,
+.btn-primary[disabled] {
+  background-color: #bc130e;
+	background-image:none;
+}
+.btn-primary:active,
+.btn-primary.active {
+  background-color: #bc130e \9;
+}
+
+a.btn-large.showtitle[title] {
+	position:relative;
+	margin-bottom:26px;
+	min-width:117px;
+}
+a.btn-large.showtitle[title]:after {
+  content: attr(title);
+	position:absolute;
+	bottom:-26px;
+	left:0px;
+	font-size:12px;
+	height:26px;
+	line-height:26px;
+	min-width:145px;
+	text-align:center;
+}
+
+.btn-large .icon-large {
+	height:25px;
+	width:25px;
+	margin-top:-2px;
+	margin-left:-25px;
+	margin-right:7px;
+}
+.btn-large .icon-white.icon-large {
+	background-image: url(images/icons/white.png);
+	background-repeat: no-repeat;
+}
+.btn-large .icon-white.icon-arrow-down.icon-large {
+	background-position: 3px 1px;
+}
+.btn-large .icon-white.icon-graph.icon-large {
+	background-position: -50px 4px;
+}
+
+/* ---------------------------------------------------
+   Layout
+--------------------------------------------------- */
+
+.navbar .brand {
+	font-family:'Open Sans', Helvetica, Arial, sans-serif;
+	font-style:italic;
+	font-size:18px;
+	font-weight:400;
+	letter-spacing:-1px;
+	line-height:40px;
+}
+
+.navbar .nav > li > a {
+  padding: 15px 10px;
+}
+
+.navbar-inner {
+	height:50px;
+	background: #303030; /* Old browsers */
+	background: -moz-linear-gradient(top, #303030 0%, #2d2d2d 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#303030), color-stop(100%,#2d2d2d)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top, #303030 0%,#2d2d2d 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top, #303030 0%,#2d2d2d 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top, #303030 0%,#2d2d2d 100%); /* IE10+ */
+	background: linear-gradient(top, #303030 0%,#2d2d2d 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#2d2d2d',GradientType=0 ); /* IE6-9 */
+	-webkit-box-shadow:none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+section {
+	padding-top:20px;
+}
+
+.page-header {
+	margin-top:50px;
+	background: #2d2d2d; /* Old browsers */
+	background: -moz-linear-gradient(top, #2d2d2d 0%, #040404 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d2d2d), color-stop(100%,#040404)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top, #2d2d2d 0%,#040404 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top, #2d2d2d 0%,#040404 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top, #2d2d2d 0%,#040404 100%); /* IE10+ */
+	background: linear-gradient(top, #2d2d2d 0%,#040404 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#040404',GradientType=0 ); /* IE6-9 */
+	color:#FFF;
+	padding:0px;
+	margin-bottom:0px;
+	border:none;
+	font-family:'Open Sans', Helvetica, Arial, sans-serif;
+}
+.page-header a {
+	color:#FFF;
+}
+.page-header a.dotted {
+	border-color:#FFF;
+}
+.page-header .container {
+	background-image: url(images/header-screen.png);
+	background-repeat: no-repeat;
+	background-position: -3px 0px;
+}
+.page-header .inner {
+	padding:0px 0px 30px 40px;
+	font-size:16px;
+}
+.page-header .inner ol {
+	list-style-type:upper-latin;
+	font-size:20px;
+	font-style:italic;
+}
+.page-header .inner .header-button {
+	display:inline-block;
+}
+
+.page-header:after {
+	margin-top:-14px;
+}
+
+section.grey {
+	background-color:#f5f5f5;
+}
+
+section:after {
+	content: " ";
+	height:14px;
+	display:block;
+	background-image: url(images/zigzags.png);
+	background-repeat: repeat-x;
+	background-position: center 1px;
+}
+
+section.grey:after {
+	background-position: center -50px;
+}
+
+.footer {
+	background-color:#040404;
+	color:#CCC;
+}
+.footer:before {
+	content: " ";
+	height:14px;
+	display:block;
+	background-image: url(images/zigzags.png);
+	background-repeat: repeat-x;
+	background-position: center -100px;
+	margin-top:-34px;
+}
+.footer:after {
+	display:none;
+}
+.footer .row {
+	margin-top:15px;
+	margin-bottom:15px;
+}
+.footer a {
+	color:#CCC;
+}
+.footer a.btn {
+	color:#333333;
+}

index.html

@@ -10,90 +10,55 @@
   <![endif]-->
 
   <link rel="stylesheet" href="vendor/bootstrap/2.0.2/css/bootstrap.css" />
-  <link rel="stylesheet" href="http://opendatahandbook.org/en/_static/bootstrap-sphinx.css" />
-  <link rel="stylesheet" href="vendor/bootstrap/2.0.2/css/bootstrap-responsive.css" />
+  <link href="css/site.css" rel="stylesheet" type="text/css" />
 
-  <style type="text/css">
-    html, body {
-      background-color: #eee;
-    }
-    body {
-      padding-top: 50px;
-    }
-
-    .content {
-      background-color: #fff;
-      padding: 20px;
-      margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
-      -webkit-border-radius: 0 0 6px 6px;
-         -moz-border-radius: 0 0 6px 6px;
-              border-radius: 0 0 6px 6px;
-      -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
-         -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
-              box-shadow: 0 1px 2px rgba(0,0,0,.15);
-    }
-
-    .page-header {
-      background-color: #f5f5f5;
-      padding: 20px 20px 10px;
-      margin: -20px -20px 20px;
-    }
-
-    .page-header h1 {
-      font-size: 30px;
-    }
-
-    ul.deps {
-      font-size: 85%;
-    }
-
-    .getit-btn {
-      margin: 10px 0px;
-    }
-    
-    .getit-btn a {
-      width: 95%;
-      text-align: center;
-    }
-  </style>
 </head>
 <body>
 <div class="navbar navbar-fixed-top">
   <div class="navbar-inner">
     <div class="container">
-      <a class="brand" href="#">Recline Data Explorer and Library</a>
-      <ul class="nav">
+      <a class="brand" href="#"><strong>Recline</strong> Data Explorer and Library</a>
+      <ul class="nav pull-right">
         <li><a href="app/">Data Explorer</a></li>
         <li><a href="#docs">Docs</a></li>
         <li><a href="http://github.com/okfn/recline/">Code on GitHub</a></li>
       </ul>
-      <a class="nav-logo pull-right" href="http://okfn.org/" title="An Open Knowledge Foundation Project">
-        <img src="http://assets.okfn.org/p/okfn/img/logo_28x30.png" alt="Open Knowledge Foundation logo" />
-      </a>
-      <ul class="nav" style="float: right;">
-        <li><a href="http://twitter.com/maxogden">@maxogden</a></li>
-        <li><a href="http://twitter.com/rufuspollock">@rufuspollock</a></li>
-      </ul>
+      
     </div>
   </div>
 </div>
+
+<section class="page-header">
   <div class="container">
-  <div class="row"><div class="span9"><div class="content">
-
-<div class="page-header">
+    <div class="row">
+      <div class="span8 offset4">
         <h1>
-    Recline Data Explorer and Library<br />
-    <small>
-      A. Powerful data explorer built in pure javascript and html
-      <br />
-      B. Suite of data components - grid, graphing and data connectors
-      <br />
-      &mdash; All built with <a href="http://backbonejs.org/">Backbone</a></small>
+          <img src="images/logo.png" width="455" height="190" alt="Recline Data Explorer and Library">
         </h1>
+        <div class="inner">
+          <ol style="list-style-type:upper-latin;">
+            <li>Powerful data explorer built in pure javascript and html</li>
+            <li>Suite of data components - grid, graphing and data connectors</li>
+          </ol>
+          &mdash; All built with <a href="http://backbonejs.org/" class="dotted">Backbone</a>
         </div>
-
-<p>Recline is two things:</p>
-
+        <div class="inner">
+          <a class="btn btn-large btn-info showtitle" href="app/" title="the data explorer"><i class="icon-graph icon-white icon-large"></i>Use It</a>
+          <a class="btn btn-large btn-primary showtitle" href="http://github.com/okfn/recline/" title="code on GitHub"><i class="icon-arrow-down icon-white icon-large"></i>Get It</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<section class="grey">
+	<div class="container">
+    <div class="row">
+      <div class="span12">
+        <h2>Recline is Two Things</h2>
+      </div>
+    </div>
+    <div class="row">
+      <div class="span6">
         <ul>
           <li>A Data Explorer combining a data grid, Google Refine-style data
           transforms and visualizations all in lightweight javascript and html.</li>
@@ -101,12 +66,16 @@
           grid, graphing, and data connectors - which you can selectively use and build
           on.</li>
         </ul>
-
+			</div>
+      <div class="span6">
         <p>The Explorer can be used standalone (just download and use) or can be
         embedded into your own site. Recline builds on the powerful but lightweight
         Backbone framework making it extremely easy to extend and adapt. The library's
         modular design mean means you only have to take what you need.</p>
-
+      </div>
+    </div>
+    <div class="row">
+      <div class="span4">
         <h2 id="features">Main Features</h2>
         <ul>
           <li>View and edit your data in a clean grid / table interface</li>
@@ -122,29 +91,42 @@ modular design mean means you only have to take what you need.</p>
           <li>Properly designed model with clean separation of data and presentation</li>
           <li>Componentized design means you use only what you need</li>
         </ul>
+      </div>
+      <div class="span8">
+        <a href="app/"><img src="images/screenshot-1.jpg" width="632" height="428" alt="Recline Data Explorer Screenshot"></a>
+      </div>
+    </div>
+  </div>
+</section>
 
-<h2>Screenshots</h2>
-<p><a href="app/"><img src="http://farm8.staticflickr.com/7020/6847468031_0f474de5f7_b.jpg" alt="Recline Data Explorer Screenshot" style="width: 700px; display: block; margin-bottom: 30px;" /></a></p>
-
-<h2 id="demo">Demo</h2>
-<p><a href="app/index.html" class="btn">For demo see the Data Explorer &raquo;</a></p>
-
-<h2 id="docs">Data Explorer Documentation</h2>
-
+<section id="docs">
+  <div class="container">
+    <div class="row">
+      <div class="span12">
+        <h2>Data Explorer Documentation</h2>
+      </div>
+    </div>
+    <div class="row">
+      <div class="span6">
         <p>Usage instructions are built into the <a href="app/">Data Explorer</a>
         itself so no specific additional documentation is provided on usage.</p>
-
         <p>To embed the data explorer in another site you can use a simple iframe in
         your web page:</p>
-
+      </div>
+      <div class="span6">
       <textarea class="span6">&lt;iframe src="http://okfnlabs.org/recline/app/" width="100%"&gt;&lt;/iframe&gt;</textarea>
-
+      </div>
+    </div>
+    <div class="row">
+      <div class="span12">
         <p>Alternatively, you can initialize the explorer yourself from javascript. To
         see how to do this just take at look at the Explorer's initialization
         javascript in: <a href="app/js/app.js">app.js</a>.</p>
-
-
-<h2 id="docs">Library Documentation</h2>
+      </div>
+    </div>
+    <div class="row">
+      <div class="span12">    
+        <h2>Library Documentation</h2>
         
         <h3 id="docs-using">Examples</h3>
         
@@ -197,8 +179,15 @@ var dataset = recline.Model.Dataset({
           backend
         );
         </pre>
-
+      </div>
+    </div>
+    <div class="row">
+      <div class="span12">
         <h3 id="docs-concepts">Concepts and Structure</h3>
+      </div>
+    </div>
+    <div class="row">
+      <div class="span6">
         
         <p>Recline has a simple structure layered on top of the basic Model/View
         distinction inherent in Backbone.</p>
@@ -229,6 +218,10 @@ distinction inherent in Backbone.</p>
         <p>More detail of how these work can be found in the <a
           href="docs/model.html">Model source docs</a>.</p>
         
+        
+      </div>
+
+      <div class="span6">
         <h4>Backends</h4>
         <p>Backends connect Dataset and Documents to data from a
         specific 'Backend' data source. They provide methods for loading and saving
@@ -259,9 +252,15 @@ are useful:</p>
           <li>QueryEditor: a query editor view</li>
           <li>FacetViewer: display facets</li>
         </ul>
-
-
+      </div>
+    </div>
+    <div class="row">
+      <div class="span12">
         <h3 id="docs-source">Source Docs (via Docco)</h3>
+      </div>
+    </div>
+    <div class="row">
+      <div class="span6">
         <h4>Models and Views (Widgets)</h4>
         <ul>
           <li><a href="docs/model.html">Models</a></li>
@@ -270,7 +269,8 @@ are useful:</p>
           <li><a href="docs/view-graph.html">Graph View (based on Flot)</a></li>
           <li><a href="docs/view-map.html">Map View (based on Leaflet)</a></li>
         </ul>
-
+      </div>
+      <div class="span6">
         <h4>Backends</h4>
         <ul>
           <li><a href="docs/backend/base.html">Backend: Base (base class providing a template for backends)</a></li>
@@ -280,11 +280,21 @@ are useful:</p>
           <li><a href="docs/backend/gdocs.html">Backend: Google Docs (Spreadsheet)</a></li>
           <li><a href="docs/backend/localcsv.html">Backend: Local CSV file</a></li>
         </ul>
-
+      </div>
+    </div>
+    <div class="row">
+      <div class="span6">
         <h2 id="tests">Tests</h2>
         <p><a href="test/index.html">Run the tests online</a>.</p>
-
+      </div>
+    </div>
+    <div class="row">
+      <div class="span12">
         <h2 id="history">History</h2>
+      </div>
+    </div>
+    <div class="row">
+      <div class="span6">
         <p>Max Ogden was developing Recline as the frontend data browser and editor for
         his <a href="http://datacouch.com/">http://datacouch.com/</a> project.
         Meanwhile, Rufus Pollock and the <a href="http://ckan.org/">CKAN team</a> at
@@ -296,21 +306,29 @@ on a <a href="http://github.com/okfn/dataexplorer">Data Explorer</a> for use in
         <p>When they met up, they realized that they were pretty much working on the
         same thing and so decided to join forces to produce the new Recline Data
         Explorer.</p>
-
+      </div>
+      <div class="span6">
         <p>The new project forked off <a
           href="https://github.com/maxogden/recline">Max's original recline
           codebase</a> combining some portions of the <a
           href="http://github.com/okfn/dataexplorer">original Data Explorer</a>.
         However, it has been rewritten from the ground up using Backbone.</p>
+      </div>
+    </div>
+  </div>
+</section>
 
-</div></div> <!-- /span9 /content -->
-  <div class="span3 sidebar">
-    <div class="well sidebar-nav">
-      <h3 class="nav-header">Use the Explorer</h3>
+<section class="footer">
+	<div class="container">
+    <div class="row">
+      <div class="span3">
+        <h5>Use the Explorer</h5>
         <p class="getit-btn"><a href="app/" class="btn primary">Visit the Data Explorer &raquo;</a></p>
-      <h3 class="nav-header">Get the Library</h3>
+        <h5>Get the Library</h5>
         <p class="getit-btn"><a href="recline.js" class="btn primary">Development Version<br />v0.3 (67k)</a></p>
-      <h4>Dependencies</h4>
+      </div>
+      <div class="span3">
+        <h5>Dependencies</h5>
         <ul class="deps">
           <li>JQuery &gt;= 1.6</li>
           <li><a href="http://backbonejs.org/">Backbone</a> &gt;= 0.5.1</li>
@@ -320,15 +338,28 @@ However, it has been rewritten from the ground up using Backbone.</p>
           <li><a href="http://leaflet.cloudmade.com/">Leaflet &gt;= 0.3.1</a>: (Optional) for mapping</li>
           <li><a href="http://twitter.github.com/bootstrap/">Bootstrap</a> &gt;= v2.0: (Optional) for CSS/JS</li>
         </ul>
-
-      <h3 class="nav-header">Documentation</h3>
-      <ul class="nav nav-list">
+      </div>
+      <div class="span3">
+        <h5>Documentation</h5>
+        <ul>
           <li><a href="#docs-using">Using it</a></li>
           <li><a href="#docs-concepts">Concepts and Structure</a></li>
           <li><a href="#docs-source">Source Docs (Docco)</a></li>
         </ul>
-    </div><!--/.well -->
-  </div><!--/span-->
-</div></div> <!-- /row /container -->
+      </div>
+      <div class="span3">
+        <h5>Contacts</h5>
+        <ul>
+          <li><a href="http://twitter.com/maxogden">@maxogden</a></li>
+          <li><a href="http://twitter.com/rufuspollock">@rufuspollock</a></li>
+        </ul>
+        <a class="nav-logo" href="http://okfn.org/" title="An Open Knowledge Foundation Project">
+          <img src="http://assets.okfn.org/p/okfn/img/logo_28x30.png" alt="Open Knowledge Foundation logo" />
+        </a>
+      </div>
+    </div>
+  </div>
+</section>
+
 </body>
 </html>