knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[site/home][s]: massively simplify front page removing almost everything.

Browse Source
This commit is contained in:
Rufus Pollock 2012-06-18 22:11:55 +01:00
parent 4d3d910387
commit 215694f3be
3 changed files with 16 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
_layouts/default.html
View File

@ -78,19 +78,24 @@
<p class="getit-btn"><a href="library.html" class="btn">Use the Library &raquo;</a></p>
<p>Recline.js is freely redistributable under the terms of the MIT license.</p>
</div>
<div class="span4">
<div class="span3">
<ul>
<li><a href="http://datahub.io/">The DataHub</a></li>
<li><a href="http://OpenSpending.org/">OpenSpending.org</a></li>
<li><a href="http://datacouch.com/">DataCouch.com</a></li>
<li><a href="http://okfnlabs.org//">Open Knowledge Foundation (OKFN) Labs</a></li>
</ul>
</div>
<div class="span3">
<ul>
<li><a href="http://okfnlabs.org/">Open Knowledge Foundation Labs</a></li>
<li><a href="http://opendefinition.org/">Open Definition</a></li>
<li><a href="http://okfn.org/">Open Knowledge Foundation</a></li>
</ul>
</div>
<div class="span4">
<div class="span2">
<h5>Contacts</h5>
<ul style="list-style-type: none; margin-left: 0;">
<li><a href="http://twitter.com/ReclineJS">@ReclineJS</a></li>
<li><a href="http://twitter.com/maxogden">@maxogden</a></li>
<li><a href="http://twitter.com/rufuspollock">@rufuspollock</a></li>
</ul>

109
css/site/site.css
View File

@ -31,101 +31,6 @@ a {
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-explorer {
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-explorer:hover,
.btn-explorer:active,
.btn-explorer.active,
.btn-explorer.disabled,
.btn-explorer[disabled] {
background-color: #454545;
background-image:none;
color:#FFF;
}
.btn-explorer:active,
.btn-explorer.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-library {
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-library:hover,
.btn-library:active,
.btn-library.active,
.btn-library.disabled,
.btn-library[disabled] {
background-color: #bc130e;
background-image:none;
}
.btn-library:active,
.btn-library.active {
background-color: #bc130e \9;
}
.btn-large .icon-large {
height:25px;
width:25px;
margin-top:-4px;
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
@ -192,6 +97,10 @@ section {
margin-bottom:0px;
border:none;
font-family:'Open Sans', Helvetica, Arial, sans-serif;
padding: 60px;
padding-bottom: 150px;
/* hide crocodile top to footer on front page */
margin-bottom: -30px;
}
.home-page.page-header a {
color:#FFF;
@ -207,14 +116,8 @@ section {
.home-page.page-header .inner {
padding:0px 0px 30px 40px;
font-size:16px;
}
.home-page.page-header .inner ol {
list-style-type:upper-latin;
font-size:20px;
font-style:italic;
}
.home-page.page-header .inner .header-button {
display:inline-block;
line-height: 23px;
width: 400px;
}
.home-page.page-header:after {

91
index.html
View File

@ -11,98 +11,11 @@ title: Home
<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>A library of data components - grid, graphing and data connectors</li>
</ol>
&mdash; All built with <a href="http://backbonejs.org/" class="dotted">Backbone</a>
</div>
<div class="inner">
<a class="btn btn-large btn-explorer showtitle" href="app/" title="the data explorer"><i class="icon-graph icon-white icon-large"></i>Use the Explorer</a>
<a class="btn btn-large btn-library showtitle" href="library.html" title="the data library"><i class="icon-arrow-down icon-white icon-large"></i>Use the Library</a>
A simple but powerful library for building data applications in
pure Javascript and HTML.
</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>
<li>A simple but powerful library of extensible of data components - data
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>
<li>Bulk update/clean your data using an easy scripting UI</li>
<li>Easily extensible with new Backends so you can connect to your
database or storage layer</li>
<li>Visualize data</li>
<li>Open-source, pure javascript and designed for integration -- so it is
easy to embed in other sites and applications</li>
<li>Built on the simple but powerful <a
href="http://documentcloud.github.com/backbone/">Backbone</a> giving a
clean and robust design which is easy to extend</li>
<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>
<section>
<div class="container">
<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
the <a href="http://okfn.org/">Open Knowledge Foundation</a> had been working
on a <a href="http://github.com/okfn/dataexplorer">Data Explorer</a> for use in
<a href="http://thedatahub.org">the DataHub</a> and <a
href="http://ckan.org/">CKAN software</a>.</p>
<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>