Skip to content

Instantly share code, notes, and snippets.

@PhDP

PhDP/scriptoria-mockup.html

Last active December 19, 2015 03:49
Show Gist options
  • Save PhDP/5893346 to your computer and use it in GitHub Desktop.
Save PhDP/5893346 to your computer and use it in GitHub Desktop.
Download ZIP
A first (failed) design for Scriptoria based on a Bootstrap example. I like the Orange/Red theme (revolution!!!!), and I like the idea of having each article in a small touch-friendly orange box, but it's very hard to read... UPDATE: I now use a less obnoxious color theme.
Raw
scriptoria-mockup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Scriptoria -- a database of scientific documents written with distributed revision control systems.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.navbar-inverse .brand {
color: #fff;
}
.navbar-inverse .brand, .navbar-inverse .nav > li > a {
color: #fff;
}
.navbar-inverse .navbar-inner {
background-color: #2a30a5;
background-image: -moz-linear-gradient(top, #4b2d63, #2a30a5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4b2d63), to(#2a30a5));
}
div.span6 {
margin: 1em;
color: #000;
background-color: #f5f4ff;
}
a, a:link, a:visited {
color: #7f2aa5;
text-decoration: none;
}
a:hover {
color: #00f;
text-decoration: none;
}
div.span6 h2 {
font-size: 1.6em;
color: #000;
text-align: center;
}
div.document {
font-size: 1.2em;
padding: 0.5em;
margin: 0.5em;
}
</style>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://twitter.github.io/bootstrap/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://twitter.github.io/bootstrap/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://twitter.github.io/bootstrap/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="http://twitter.github.io/bootstrap/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="http://twitter.github.io/bootstrap/assets/ico/favicon.png">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://twitter.github.io/bootstrap/examples/hero.html#">Scriptoria</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="http://twitter.github.io/bootstrap/examples/hero.html#">Home</a></li>
<li><a href="http://twitter.github.io/bootstrap/examples/hero.html#about">About</a></li>
<li><a href="http://twitter.github.io/bootstrap/examples/hero.html#contact">Contact</a></li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
<button type="submit" class="btn">Register</button>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="span6">
<h2><a href="https://github.com/weecology/data-sharing-paper/">Nine simple ways to make it easier to (re)use your data</a></h2>
<div class="document">
<p><b>By</b> EP White, E Baldridge, ZT Brym, KJ Locey, DJ McGlinn, and SR Supp</p>
<p><b>On GitHub:</b> <a href="https://github.com/weecology/data-sharing-paper/">https://github.com/weecology/data-sharing-paper/</a></p>
<p><b>Description:</b> Paper on data sharing in ecology for IEE special issue.</p>
<p><b>Started on:</b> Feb 15, 2013.</p>
<p><b>Last activity:</b> Jun 28, 2013.</p>
<p><b>DOI:</b> None (yet).</p>
</div>
</div>
<div class="span6">
<h2><a href="https://github.com/karthikram/smb_git">Git: A powerful tool to facilitate greater reproducibility and transparency in science</a></h2>
<div class="document">
<p><b>By</b> K Ram</p>
<p><b>On GitHub:</b> <a href="https://github.com/karthikram/smb_git">https://github.com/karthikram/smb_git</a></p>
<p><b>Description:</b> A review paper describing how git can be used to improve reproducibility in science.</p>
<p><b>Started on:</b> Jan 08, 2013.</p>
<p><b>Last activity:</b> May 02, 2013.</p>
<p><b>DOI:</b> doi:10.1186/1751-0473-8-7.</p>
</div>
</div>
<div class="span6">
<h2><a href="https://github.com/PhDP/article_preprint">The Case for Open Preprints in Biology</a></h2>
<div class="document">
<p><b>By</b> P Desjardins-Proulx, EP White, JJ Adamson, K Ram, T Poisot, and D Gravel.</p>
<p><b>On GitHub:</b> <a href="https://github.com/PhDP/article_preprint">https://github.com/PhDP/article_preprint</a></p>
<p><b>Description:</b> An article on preprints in biology.</p>
<p><b>Started on:</b> Aug 27, 2012.</p>
<p><b>Last activity:</b> May 18, 2013.</p>
<p><b>DOI:</b> 10.1371/journal.pbio.1001563.</p>
</div>
</div>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./hero_files/jquery.js"></script>
<script src="./hero_files/bootstrap-transition.js"></script>
<script src="./hero_files/bootstrap-alert.js"></script>
<script src="./hero_files/bootstrap-modal.js"></script>
<script src="./hero_files/bootstrap-dropdown.js"></script>
<script src="./hero_files/bootstrap-scrollspy.js"></script>
<script src="./hero_files/bootstrap-tab.js"></script>
<script src="./hero_files/bootstrap-tooltip.js"></script>
<script src="./hero_files/bootstrap-popover.js"></script>
<script src="./hero_files/bootstrap-button.js"></script>
<script src="./hero_files/bootstrap-collapse.js"></script>
<script src="./hero_files/bootstrap-carousel.js"></script>
<script src="./hero_files/bootstrap-typeahead.js"></script>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment