added Just Read theme

Just-Read/.gitignore

@@ -0,0 +1,35 @@
+# Compiled source #
+###################
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.so
+
+# Packages #
+############
+# it's better to unpack these files and commit the raw source
+# git has its own built in compression methods
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# Logs and databases #
+######################
+*.log
+*.sql
+*.sqlite
+
+# OS generated files #
+######################
+.DS_Store*
+ehthumbs.db
+Icon?
+Thumbs.db
+.DS_Store

Just-Read/less/base.less

@@ -0,0 +1,68 @@
+// Credits: [HTML Boilerplate[(https://github.com/h5bp/html5-boilerplate)
+
+
+// HTML5 display definitions
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, time { 
+	display: block;
+}
+
+// Base
+
+html {
+    font-size: 100%;
+    overflow-y: scroll;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+}
+
+body{
+    margin: 0;
+}
+
+// Remove text-shadow in selection highlight: h5bp.com/i
+
+::-moz-selection { 
+	background: #fd7; // This color should play well with any design
+	color: #000; 
+	text-shadow: none; 
+}
+::selection { 
+	background: #fd7; 
+	color: #000; 
+	text-shadow: none; 
+}
+
+// Improve readability when focused and hovered in all browsers: h5bp.com/h
+
+a:hover, a:active { 
+	outline: 0;
+}
+
+// Lists
+
+ul, ol{
+	margin: 0;
+	padding: 0;
+}
+
+// Embedded content
+
+img { 
+	border: 0; 
+	-ms-interpolation-mode: bicubic; 
+	vertical-align: middle; 
+}
+
+// Contain floats: h5bp.com/q
+
+.clearfix:before, .clearfix:after { 
+	content: ""; 
+	display: table; 
+}
+.clearfix:after { 
+	clear: both; 
+}
+.clearfix { 
+	*zoom: 1; 
+}

Just-Read/less/main.less

@@ -0,0 +1,445 @@
+@import "base.less";
+@import "mixins.less";
+@import "var.less";
+
+// Credits: [Golden Grid System](http://goldengridsystem.com/) by [Joni Korpi](http://jonikorpi.com/) licensed under [MIT](http://www.opensource.org/licenses/mit-license.php)
+
+// Important numbers
+
+@line: 24;
+@column: 100% / 18;
+@font-size: 16;
+@em: @font-size*1em;
+
+
+// Simple fluid media
+
+figure {
+	position: relative;
+}
+
+figure img, figure object, figure embed, figure video {
+	max-width: 100%; 
+	display: block;
+}
+
+// Elastic Object & Iframe Embedded Videos  http://webdesignerwall.com/tutorials/css-elastic-videos
+
+.video-container {
+	position: relative;
+	padding-bottom: 56.25%;
+	padding-top: 30px;
+	height: 0;
+	overflow: hidden;
+	margin-bottom: @line * 1px;
+}
+
+.video-container iframe,  
+.video-container object,  
+.video-container embed {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+// Typography settings - Make the text bigger if you dare
+
+.small    {font-size: 12px;}
+.normal   {font-size: 14px;}
+.large    {font-size: 18px;}
+.huge     {font-size: 24px;}
+.massive  {font-size: 36px;}
+.gigantic {font-size: 48px;}
+
+body {
+	.normal; 
+	line-height: @line * 1px;
+	background: @white;
+	color: lighten(@black, 25%);
+	.sans;
+}
+
+.title{
+	line-height: 1;
+	.fancy-font;
+	font-weight: 700;
+}
+
+h1{
+	.title;
+	.huge;
+	margin: 0 0 (@line * 1.5px) 0;
+}
+
+h2{
+	.title;
+	.large;
+	margin: (@line * 2px) 0 (@line * 1px);
+	
+}
+
+h3{
+	.title;
+	.normal;
+	margin: (@line * 1.5px) 0 (@line * 1px);
+	text-transform: uppercase;
+	color: lighten(@black, 60%);
+	
+}
+
+h4, h5, h6{
+	.title;
+	.normal;
+	margin: (@line * 1px) 0;
+	font-weight: 400;
+	
+}
+
+b, strong{
+	font-weight: 700;
+}
+
+
+// Four-column grid active
+// ----------------------------------------
+// Margin   | #  1   2   3   4   |   Margin
+// 5.55555% | %  25  50  75  100 | 5.55555%
+
+.wrapper {
+	padding: 0 (@line/2)/@em;
+	-webkit-box-sizing: border-box;
+	   -moz-box-sizing: border-box;
+		 -o-box-sizing: border-box;
+			box-sizing: border-box;
+}
+
+
+a{
+	color: @link;
+	text-decoration: none;
+	.transition();
+	
+		&:hover{
+			color: darken(@link, 40%);
+			text-decoration:underline;
+		}
+}
+
+header{
+	.border-image(0 0 2px, 0 0 2, '../images/2px.png', repeat); // It's a very small detail, delete this line if you want different colors and don't want to edit the image file
+	.gradient(@color, darken(@color, 6%));
+	padding: (@line * 2px) @column;
+	margin-bottom: (@line * 2px);
+	
+	h1{
+		margin: 0;
+	}
+	
+	a{
+		text-decoration: none;
+		color: fade(@white, 80%);
+		
+		// The 3d effect is kind of silly, so go ahead and delete the following lines xD
+		text-shadow: 
+			0 1px 0 lighten(@black, 70%), 
+			0 2px 0 lighten(@black, 60%), 
+			0 3px 0 lighten(@black, 50%), 
+			0 4px 0 lighten(@black, 40%), 
+			0 5px 0 lighten(@black, 30%), 
+			0 6px 0 lighten(@black, 20%), 
+			0px 7px 0 lighten(@black, 10%), 
+			0 8px 7px lighten(@black, 5%);
+			
+			
+			&:hover{
+				color: @white;
+				text-decoration:none;
+				}			
+	}
+}
+
+footer{
+	.border-image(20px 0 0, 20 0 0, '../images/pages.png', repeat); // Again, it's a detail. I used border-image to be able to use a gradient or background color for the footer, but now it's white
+	padding: (@line * 2px) @column (@line * 1px);
+	margin-top: (@line * 4px);
+	color: fade(@black, 60%);	
+}
+
+.pages{
+	margin-bottom: (@line * 1px);
+}
+
+.nav li{
+	list-style: none;
+	display: inline;
+	padding-right: 10px;
+}
+
+p[role="contentinfo"]{
+	margin-top: (@line / 2px); // If you don't use the Twitter button, delete this line
+	.small;
+}
+
+.content{
+	margin:0 @column;
+}
+
+.meta{
+	background: lighten(@black, 95%);
+	padding-top: (@line * 1px);
+	padding-bottom: (@line * 1px);
+	.rounded();
+}
+
+time{
+	.small;
+	text-transform: uppercase;
+}
+
+.tags li{
+	display: inline;
+	list-style: none;
+}
+
+blockquote, code, .post ul, .post ol, p{
+	margin: 0 0 (@line * 1px) 0;
+}
+
+blockquote{
+	margin-left: -(@line / 2px);
+	border-left: (@line / 4px) solid @link;
+	padding-left: (@line / 4px);
+}
+
+code{
+	display: block;
+	background: lighten(@black, 15%); // If you don't a dark scheme for code, we can't be friends
+	.box-shadow(inset 0 0 10px @black);
+	padding: (@line * 1px);
+	color: @white;
+	.rounded();
+	.mono();
+	margin-left: -(@line * 1px);
+}
+
+.post ul li{
+	list-style-image: url('../images/bullet.png'); // or use something less colorful, like list-style-type: square
+}
+
+.main + .main{
+	margin-top: (@line * 4px);
+}
+
+.archive li{
+	list-style: none;
+}
+
+.archive a{
+	display: block;
+	padding: (@line / 2px) 0;
+	border-bottom: 1px dotted lighten(@black, 80%);
+	
+	&:hover{
+		text-decoration:none;
+	}
+}
+
+.archive time{
+	display: inline;
+	color: lighten(@black, 40%);
+}
+
+
+// Eight-column grid active
+// ----------------------------------------------------------------------
+// Margin   | #  1     2     3     4     5     6     7     8   |   Margin
+// 5.55555% | %  12.5  25.0  37.5  50.0  62.5  75.0  87.5  100 | 5.55555%
+
+
+// @media screen and (min-width: 720px)
+@media screen and (min-width: 45em) {
+	
+	
+	header .wrapper{
+		width: 75%;
+		float: right;
+	}
+	
+	.meta, .pages{
+		width: 25%;
+		float: left;
+		text-align: right;
+	}
+	
+	.pages{
+		padding-top: 28px + (@line * 1px); // Twitter button size + [role="contentinfo"] margin-top. If you don't use the Twitter button, delete this line
+	}
+	
+	.meta{
+		background: @white;
+		padding-top: 24px + (@line * 1.5px); // h1 font-size + margin-bottom
+		
+			time{
+				margin-bottom: (@line * 1px);
+			}
+	}
+	
+	.post, .copy, .main{
+		width: 75%;
+		float: right;
+	}
+	
+	.tags li{
+		display: block;
+	}
+	
+	.tags a:hover, .nav a:hover{
+		padding-right: (@line / 4px); // If prefer your links to remain still, delete this nonsense
+	}
+	
+	.tags a:hover:after, .nav a:hover:after, .more:hover:after{
+		content:  "\2192 ";
+	}
+	
+	.nav li{
+		display: block;
+		padding-right: 0;
+	}
+	
+	.archive time{
+		display: block;
+		width: 100/4%; // target 1 columns, context 4 columns
+		float: left;
+	}
+}
+
+
+// @media screen and (min-width: 888px)
+@media screen and (min-width: 55.5em) {
+	
+	.post p, .post blockquote, .post ul, .post ol{
+		width: 400/6%; // target 4 columns, context 6 columns
+	}
+	
+	.main{
+		width: 50%;
+		float: none;
+		margin-left: 25%;
+	}
+}
+
+
+// @media screen and (min-width: 984px)
+@media screen and (min-width: 61.5em) {
+
+	.meta, .pages{
+		width: 12.5%;
+	}
+	
+	.pages{
+		padding-top: 0;
+	}
+
+	.meta{
+		padding-top: 24px + (@line * 1.5px);
+	}
+
+
+}
+
+
+// Sixteen-column grid active
+// ----------------------------------------------------------------------------------------------------------------------
+// Margin   | #  1     2     3     4     5     6     7     8     9     10    11    12    13    14    15    16  |   Margin
+// 5.55555% | %  6.25  12.5  18.75 25.0  31.25 37.5  43.75 50.0  56.25 62.5  68.75 75.0  81.25 87.5  93.75 100 | 5.55555%
+
+
+// @media screen and (min-width: 1872px)
+@media screen and (min-width: 117em) {
+
+	body{
+		.large;
+	}
+	
+	header{
+		margin-bottom: (@line * 4px);
+	}
+	
+	footer{
+		margin-top: (@line * 6px);
+	}
+	
+	h1{
+		.gigantic;
+		margin-bottom: (@line * 2px);
+	}
+	
+	h2, header .huge{
+		.massive;
+	}
+	
+	h2{
+		margin-top: (@line * 3px);
+	}
+	
+	h3{
+		.huge;
+		margin-top: (@line * 3px);
+	}
+	
+	h4, h5, h6{
+		.large;
+		margin-top: (@line * 2px);
+	}
+	
+	.meta, .pages{
+		width: 18.75%;
+		padding-left: 6.25%;
+	}
+
+	.meta{
+		padding-top: 48 * 2px;
+	}
+	
+	.post, .copy{
+		width: 75%;
+	}
+	
+	.post{
+		padding-right: 12.5%;
+	}
+	
+	.post ul{
+		margin-bottom: 0;
+	}
+	.post li{
+		margin-bottom: (@line * 1px);
+	}
+	
+	code{
+		.massive;
+		line-height: 1.5;
+	}
+	
+	.post p, .post blockquote, .post ul, .post ol{
+		width: 600/10%; // target 4 columns, context 6 columns
+	}
+	
+}
+
+
+
+// @media screen and (min-width: 2080px)
+@media screen and (min-width: 130em) {
+
+	body {
+		max-width: 2560/@em;
+	}
+	
+}
+
+@media print{
+	@import "print.less";
+}

Just-Read/less/mixins.less

@@ -0,0 +1,46 @@
+// Credits: [LESS Elements](http://lesselements.com)
+//          [Twitter Bootstrap](https://github.com/twitter/bootstrap) licensed under [Apache License](http://www.apache.org/licenses/LICENSE-2.0)
+
+.box-shadow(@arguments) {
+	-webkit-box-shadow: @arguments;
+	-moz-box-shadow: @arguments;
+	box-shadow: @arguments;
+}
+
+.gradient(@startColor: #555, @endColor: #333) {
+	background-color: @endColor;
+	background-repeat: repeat-x;
+	background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
+	background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
+	background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10
+	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
+	background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+	background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
+	background-image: linear-gradient(top, @startColor, @endColor); // The standard
+	filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down
+}
+
+.rounded(@radius: 4px) {
+	-webkit-border-radius: @radius;
+	-moz-border-radius: @radius;
+	border-radius: @radius;
+	
+	-moz-background-clip: padding; 
+	-webkit-background-clip: padding-box; 
+	background-clip: padding-box; 
+}
+
+.transition(@duration:0.25s, @ease:linear) {
+	-webkit-transition: all @duration @ease;
+	-moz-transition: all @duration @ease;
+	-o-transition: all @duration @ease;
+	transition: all @duration @ease;
+}
+
+.border-image(@width, @slice, @url, @repeat) {
+	border-width: @width;
+	-moz-border-image: url(@url) @slice @repeat;
+	-webkit-border-image: url(@url) @slice @repeat;
+	-o-border-image: url(@url) @slice @repeat;
+	border-image: url(@url) @slice @repeat;
+}

Just-Read/less/print.less

@@ -0,0 +1,76 @@
+// Credits: [HTML Boilerplate[(https://github.com/h5bp/html5-boilerplate)
+//          [Hartija - Css Print Framework](http://code.google.com/p/hartija/) licensed under [MIT](http://www.opensource.org/licenses/mit-license.php)
+
+* { 
+	background : transparent !important; 
+	box-shadow:none !important;
+	color : black !important; // Black prints faster: h5bp.com/s
+	filter : none !important; 
+	-ms-filter : none !important; 
+	text-shadow : none !important; 
+}
+
+@page { 
+	margin : 0.5cm; 
+}
+
+a, a:visited { 
+	color : @black !important; 
+	text-decoration : underline; 
+}
+
+a[href]:after { 
+	content : " (" attr(href) ")"; 
+}
+
+a[href^="javascript:"]:after, a[href^="#"]:after, .ir a:after { 
+	content : ""; 
+}
+
+abbr[title]:after { 
+	content : " (" attr(title) ")"; 
+}
+
+body{
+	font-size: 12pt;
+}
+
+blockquote, pre{
+	page-break-inside : avoid; 
+}
+
+blockquote, pre { 
+	margin-left: 0.5cm;
+	border-left : 0.2cm solid #999; 
+	padding-left: 0.2cm;
+}
+
+code, pre { 
+	font: 10pt Courier, monospace; 
+} 
+
+h1{
+	font-size: 18pt;
+}
+
+h2, h3 { 
+	page-break-after : avoid;
+	font-size: 16pt;
+}
+
+h2, h3, p { 
+	orphans : 3;  
+	widows : 3; 	
+}
+
+img { 
+	max-width : 100% !important;
+}
+
+img, tr { 
+	page-break-inside : avoid; 
+}
+
+thead { 
+	display : table-header-group; 
+}

Just-Read/less/var.less

@@ -0,0 +1,17 @@
+// Color Variables
+
+@black: #000;
+@white: #fff;
+@color: #556270; // The color of the header and footer. If you modify this color, edit the images in the PSD folder and export them to static/images
+@link: #4ECDC4; // The color of links, blockquote line and bullets. If you modify this color, edit static/images/bullet.png
+
+
+// Typography
+// If you modify the fonts, delete/modify the line 12 in base.html
+
+.sans, .fancy-font{
+	font-family: 'Droid Sans', sans-serif;
+}
+.mono{
+	font-family: 'Droid Sans Mono', monospace;
+}

Just-Read/pelican.conf.py-sample.py

@@ -0,0 +1,10 @@
+AUTHOR = 'Name Lastname'
+SITENAME = 'The name of your website'
+SITEURL = 'http://example.com'
+
+DISQUS_SITENAME = ''
+
+
+GOOGLE_ANALYTICS = 'UA-XXXXX-X'
+HTML_LANG = 'en'
+TWITTER_USERNAME = 'yourtwitterhandle no @ please'

Just-Read/readme.md

@@ -0,0 +1,11 @@
+# Just Read
+
+"Just Read" is a theme for [Pelican](http://alexis.notmyidea.org/pelican/). The fluid-width layout is based based on the Golden Grid System by [Joni Korpi](http://jonikorpi.com/).
+
+## Worth mentioning files
+
+- **pelican.com.py-sample** contains the variables used in the theme, use it as reference to build your own configuration file. 
+- **var.less** defines the colors and fonts used. Much more easy to edit than the main.css file.
+- the **psd folder** contains the images used in the theme, handful if you want to change the color scheme.
+
+*Note: I tested the theme only in the latests version of Chrome, Firefox, Opera and Safari. *

Just-Read/static/css/main.css

@@ -0,0 +1,483 @@
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+time {
+  display: block;
+}
+html {
+  font-size: 100%;
+  overflow-y: scroll;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+}
+::-moz-selection {
+  background: #fd7;
+  color: #000;
+  text-shadow: none;
+}
+::selection {
+  background: #fd7;
+  color: #000;
+  text-shadow: none;
+}
+a:hover, a:active {
+  outline: 0;
+}
+ul, ol {
+  margin: 0;
+  padding: 0;
+}
+img {
+  border: 0;
+  -ms-interpolation-mode: bicubic;
+  vertical-align: middle;
+}
+.clearfix:before, .clearfix:after {
+  content: "";
+  display: table;
+}
+.clearfix:after {
+  clear: both;
+}
+.clearfix {
+  *zoom: 1;
+}
+.sans, .fancy-font {
+  font-family: 'Droid Sans', sans-serif;
+}
+.mono {
+  font-family: 'Droid Sans Mono', monospace;
+}
+figure {
+  position: relative;
+}
+figure img,
+figure object,
+figure embed,
+figure video {
+  max-width: 100%;
+  display: block;
+}
+.video-container {
+  position: relative;
+  padding-bottom: 56.25%;
+  padding-top: 30px;
+  height: 0;
+  overflow: hidden;
+  margin-bottom: 24px;
+}
+.video-container iframe, .video-container object, .video-container embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.small {
+  font-size: 12px;
+}
+.normal {
+  font-size: 14px;
+}
+.large {
+  font-size: 18px;
+}
+.huge {
+  font-size: 24px;
+}
+.massive {
+  font-size: 36px;
+}
+.gigantic {
+  font-size: 48px;
+}
+body {
+  font-size: 14px;
+  line-height: 24px;
+  background: #ffffff;
+  color: #404040;
+  font-family: 'Droid Sans', sans-serif;
+}
+.title {
+  line-height: 1;
+  font-family: 'Droid Sans', sans-serif;
+  font-weight: 700;
+}
+h1 {
+  line-height: 1;
+  font-family: 'Droid Sans', sans-serif;
+  font-weight: 700;
+  font-size: 24px;
+  margin: 0 0 36px 0;
+}
+h2 {
+  line-height: 1;
+  font-family: 'Droid Sans', sans-serif;
+  font-weight: 700;
+  font-size: 18px;
+  margin: 48px 0 24px;
+}
+h3 {
+  line-height: 1;
+  font-family: 'Droid Sans', sans-serif;
+  font-weight: 700;
+  font-size: 14px;
+  margin: 36px 0 24px;
+  text-transform: uppercase;
+  color: #999999;
+}
+h4, h5, h6 {
+  line-height: 1;
+  font-family: 'Droid Sans', sans-serif;
+  font-weight: 700;
+  font-size: 14px;
+  margin: 24px 0;
+  font-weight: 400;
+}
+b, strong {
+  font-weight: 700;
+}
+.wrapper {
+  padding: 0 0.75em;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+}
+a {
+  color: #4ecdc4;
+  text-decoration: none;
+  -webkit-transition: all 0.25s linear;
+  -moz-transition: all 0.25s linear;
+  -o-transition: all 0.25s linear;
+  transition: all 0.25s linear;
+}
+a:hover {
+  color: #113e3a;
+  text-decoration: underline;
+}
+header {
+  border-width: 0 0 2px;
+  -moz-border-image: url('../images/2px.png') 0 0 2 repeat;
+  -webkit-border-image: url('../images/2px.png') 0 0 2 repeat;
+  -o-border-image: url('../images/2px.png') 0 0 2 repeat;
+  border-image: url('../images/2px.png') 0 0 2 repeat;
+  background-color: #48535f;
+  background-repeat: repeat-x;
+  background-image: -khtml-gradient(linear, left top, left bottom, from(#556270), to(#48535f));
+  background-image: -moz-linear-gradient(top, #556270, #48535f);
+  background-image: -ms-linear-gradient(top, #556270, #48535f);
+  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #556270), color-stop(100%, #48535f));
+  background-image: -webkit-linear-gradient(top, #556270, #48535f);
+  background-image: -o-linear-gradient(top, #556270, #48535f);
+  background-image: linear-gradient(top, #556270, #48535f);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#556270', endColorstr='#48535f', GradientType=0);
+  padding: 48px 5.555555555555555%;
+  margin-bottom: 48px;
+}
+header h1 {
+  margin: 0;
+}
+header a {
+  text-decoration: none;
+  color: rgba(255, 255, 255, 0.8);
+  text-shadow: 0 1px 0 #b3b3b3, 0 2px 0 #999999, 0 3px 0 #808080, 0 4px 0 #666666, 0 5px 0 #4d4d4d, 0 6px 0 #333333, 0px 7px 0 #1a1a1a, 0 8px 7px #0d0d0d;
+}
+header a:hover {
+  color: #ffffff;
+  text-decoration: none;
+}
+footer {
+  border-width: 20px 0 0;
+  -moz-border-image: url('../images/pages.png') 20 0 0 repeat;
+  -webkit-border-image: url('../images/pages.png') 20 0 0 repeat;
+  -o-border-image: url('../images/pages.png') 20 0 0 repeat;
+  border-image: url('../images/pages.png') 20 0 0 repeat;
+  padding: 48px 5.555555555555555% 24px;
+  margin-top: 96px;
+  color: rgba(0, 0, 0, 0.6);
+}
+.pages {
+  margin-bottom: 24px;
+}
+.nav li {
+  list-style: none;
+  display: inline;
+  padding-right: 10px;
+}
+p[role="contentinfo"] {
+  margin-top: 12px;
+  font-size: 12px;
+}
+.content {
+  margin: 0 5.555555555555555%;
+}
+.meta {
+  background: #f2f2f2;
+  padding-top: 24px;
+  padding-bottom: 24px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+time {
+  font-size: 12px;
+  text-transform: uppercase;
+}
+.tags li {
+  display: inline;
+  list-style: none;
+}
+blockquote,
+code,
+.post ul,
+.post ol,
+p {
+  margin: 0 0 24px 0;
+}
+blockquote {
+  margin-left: -12px;
+  border-left: 6px solid #4ecdc4;
+  padding-left: 6px;
+}
+code {
+  display: block;
+  background: #262626;
+  -webkit-box-shadow: inset 0 0 10px #000000;
+  -moz-box-shadow: inset 0 0 10px #000000;
+  box-shadow: inset 0 0 10px #000000;
+  padding: 24px;
+  color: #ffffff;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  font-family: 'Droid Sans Mono', monospace;
+  margin-left: -24px;
+}
+.post ul li {
+  list-style-image: url('../images/bullet.png');
+}
+.main + .main {
+  margin-top: 96px;
+}
+.archive li {
+  list-style: none;
+}
+.archive a {
+  display: block;
+  padding: 12px 0;
+  border-bottom: 1px dotted #cccccc;
+}
+.archive a:hover {
+  text-decoration: none;
+}
+.archive time {
+  display: inline;
+  color: #666666;
+}
+@media screen and (min-width: 45em) {
+  header .wrapper {
+    width: 75%;
+    float: right;
+  }
+  .meta, .pages {
+    width: 25%;
+    float: left;
+    text-align: right;
+  }
+  .pages {
+    padding-top: 52px;
+  }
+  .meta {
+    background: #ffffff;
+    padding-top: 60px;
+  }
+  .meta time {
+    margin-bottom: 24px;
+  }
+  .post, .copy, .main {
+    width: 75%;
+    float: right;
+  }
+  .tags li {
+    display: block;
+  }
+  .tags a:hover, .nav a:hover {
+    padding-right: 6px;
+  }
+  .tags a:hover:after, .nav a:hover:after, .more:hover:after {
+    content: "\2192 ";
+  }
+  .nav li {
+    display: block;
+    padding-right: 0;
+  }
+  .archive time {
+    display: block;
+    width: 25%;
+    float: left;
+  }
+}
+@media screen and (min-width: 55.5em) {
+  .post p,
+  .post blockquote,
+  .post ul,
+  .post ol {
+    width: 66.66666666666667%;
+  }
+  .main {
+    width: 50%;
+    float: none;
+    margin-left: 25%;
+  }
+}
+@media screen and (min-width: 61.5em) {
+  .meta, .pages {
+    width: 12.5%;
+  }
+  .pages {
+    padding-top: 0;
+  }
+  .meta {
+    padding-top: 60px;
+  }
+}
+@media screen and (min-width: 117em) {
+  body {
+    font-size: 18px;
+  }
+  header {
+    margin-bottom: 96px;
+  }
+  footer {
+    margin-top: 144px;
+  }
+  h1 {
+    font-size: 48px;
+    margin-bottom: 48px;
+  }
+  h2, header .huge {
+    font-size: 36px;
+  }
+  h2 {
+    margin-top: 72px;
+  }
+  h3 {
+    font-size: 24px;
+    margin-top: 72px;
+  }
+  h4, h5, h6 {
+    font-size: 18px;
+    margin-top: 48px;
+  }
+  .meta, .pages {
+    width: 18.75%;
+    padding-left: 6.25%;
+  }
+  .meta {
+    padding-top: 96px;
+  }
+  .post, .copy {
+    width: 75%;
+  }
+  .post {
+    padding-right: 12.5%;
+  }
+  .post ul {
+    margin-bottom: 0;
+  }
+  .post li {
+    margin-bottom: 24px;
+  }
+  code {
+    font-size: 36px;
+    line-height: 1.5;
+  }
+  .post p,
+  .post blockquote,
+  .post ul,
+  .post ol {
+    width: 60%;
+  }
+}
+@media screen and (min-width: 130em) {
+  body {
+    max-width: 160em;
+  }
+}
+@media print {
+  * {
+    background: transparent !important;
+    box-shadow: none !important;
+    color: black !important;
+    filter: none !important;
+    -ms-filter: none !important;
+    text-shadow: none !important;
+  }
+  @page  {
+    margin: 0.5cm;
+  }
+  a, a:visited {
+    color: #000000 !important;
+    text-decoration: underline;
+  }
+  a[href]:after {
+    content: " (" attr(href) ")";
+  }
+  a[href^="javascript:"]:after, a[href^="#"]:after, .ir a:after {
+    content: "";
+  }
+  abbr[title]:after {
+    content: " (" attr(title) ")";
+  }
+  body {
+    font-size: 12pt;
+  }
+  blockquote, pre {
+    page-break-inside: avoid;
+  }
+  blockquote, pre {
+    margin-left: 0.5cm;
+    border-left: 0.2cm solid #999;
+    padding-left: 0.2cm;
+  }
+  code, pre {
+    font: 10pt Courier, monospace;
+  }
+  h1 {
+    font-size: 18pt;
+  }
+  h2, h3 {
+    page-break-after: avoid;
+    font-size: 16pt;
+  }
+  h2, h3, p {
+    orphans: 3;
+    widows: 3;
+  }
+  img {
+    max-width: 100% !important;
+  }
+  img, tr {
+    page-break-inside: avoid;
+  }
+  thead {
+    display: table-header-group;
+  }
+}

Just-Read/templates/archives.html

@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+{% block title %}{{ SITENAME }} <small>[archive]</small>{% endblock %}
+{% block content %}
+<div role="main" class="content clearfix">
+<div class="wrapper main">		
+	{% for year, date_year in dates|groupby( 'date.year' ) %}
+	<h2>{{ year }}</h2>
+	{% for month, articles in date_year|groupby( 'date.month' ) %}
+	<h3>{{ articles[ 0 ].date.strftime( '%B' ) }}</h3>
+	
+	<ol class="archive">
+		{% for article in articles %}
+		<li class="clearfix"><a href="{{ article.url }}"><time datetime="{{ article.date.isoformat() }}" pubdate>{{ article.locale_date }}</time> {{ article.title }}</a></li>
+		{% endfor %}
+	</ol>
+	
+	{% endfor %}
+	{% endfor %}
+</div>
+</div>
+{% endblock %}

Just-Read/templates/article.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+{% block title %}{{ article.title }} - {{ SITENAME }}{% endblock %}
+{% block content %}
+<div role="main" class="content clearfix">	
+	<article>
+		<div class="post wrapper">
+			<h1>{{ article.title }}</h1>
+			{{ article.content }}
+						
+			{% if DISQUS_SITENAME %}
+			<div class="comments">
+			<h2>Comments !</h2>
+			    <div id="disqus_thread"></div>
+			    <script type="text/javascript">
+			       var disqus_identifier = "{{ article.url }}";
+			       (function() {
+			       var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+			       dsq.src = 'http://{{ DISQUS_SITENAME }}.disqus.com/embed.js';
+			       (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+			      })();
+			    </script>
+			</div>
+			{% endif %}			
+		</div>
+	
+	{% include 'metadata.html' %}
+	</article>	
+</div>
+{% endblock %}

Just-Read/templates/base.html

@@ -0,0 +1,65 @@
+<!doctype html>
+<html lang="{{ HTML_LANG }}">	
+<head>
+	<meta charset="utf-8"/>
+	<title>{% block title %}{{ SITENAME }}{%endblock%}</title>	
+	<meta name="author" content="{{ AUTHOR }}">
+	
+	<meta name="HandheldFriendly" content="True">
+	<meta name="MobileOptimized" content="320">
+	<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0">
+	
+	<link href='http://fonts.googleapis.com/css?family=Droid+Sans:700,400|Droid+Sans+Mono' rel='stylesheet' type='text/css'>
+	<link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}" type="text/css" />
+		
+	<!--[if lt IE 9]>
+		<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
+	<![endif]-->
+	
+	<link href="{{ SITEURL }}/{{ FEED }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed" />
+	{% if FEED_RSS %}
+	<link href="{{ SITEURL }}/{{ FEED_RSS }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" />
+	{% endif %}
+</head>
+	
+<body>		
+	<header class="clearfix" role="banner">
+		<div class="wrapper">
+			<h1 class="huge"><a href="{{ SITEURL }}">{{ SITENAME }}</a></h1>
+		</div>
+	</header>
+	
+	{% block content %}
+	{% endblock %}
+	
+		
+	<footer class="clearfix">
+		<div class="wrapper pages">
+			<ul class="nav">
+			{% for p in PAGES %}
+				<li><a href="{{ SITEURL }}/pages/{{ p.url }}">{{ p.title }}</a></li>
+			{% endfor %}
+				<li><a href="{{ SITEURL }}/archives.html">Archive</a></li>
+			{% if FEED_RSS %}
+				<li><a href="{{ SITEURL }}/{{ FEED_RSS }}">RSS Feed</a></li>
+			{% endif %}
+			</ul>
+		</div>
+		
+		<div class="copy wrapper">
+		<a href="https://twitter.com/{{ TWITTER_USERNAME }}" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @{{ TWITTER_USERNAME }}</a>
+			<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+			
+			<p role="contentinfo">© 2012 {{ AUTHOR }}<br>
+			Proudly powered by <a href="http://alexis.notmyidea.org/pelican/">Pelican</a>, which takes great advantages of <a href="http://python.org">Python</a>.</p>
+		</div>
+	</footer>
+	
+	<script>
+	  var _gaq=[['_setAccount','{{ GOOGLE_ANALYTICS }}'],['_trackPageview']];
+	  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+	  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
+	  s.parentNode.insertBefore(g,s)}(document,'script'));
+	</script>
+</body>
+</html>

Just-Read/templates/categories.html

@@ -0,0 +1 @@
+<!--must list all the tags. Can be a tag cloud.-->

Just-Read/templates/category.html

@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+{% block title %}{{ category }} - {{ SITENAME }}{% endblock %}
+
+{% block content %}
+<div role="main" class="content clearfix">
+<div class="wrapper main">		
+	<h2>Posts categorized under: {{ category }}</h2>
+	
+	<ol class="archive">
+		{% for article in articles %}
+		<li class="clearfix"><a href="{{ SITEURL }}/{{ article.url }}"><time datetime="{{ article.date.isoformat() }}" pubdate>{{ article.locale_date }}</time> {{ article.title }}</a></li>
+		{% endfor %}
+	</ol>
+
+</div>
+</div>
+{% endblock %}

Just-Read/templates/index.html

@@ -0,0 +1,26 @@
+{% extends "base.html" %}
+{% block content_title %}{% endblock %}
+
+{% block content %}
+<div role="main" class="content clearfix">
+{% for article in articles %}
+
+	{% if loop.index == 1 %}
+	<article class="wrapper main">
+		<h1><a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></h1>
+		{{ article.summary }} <a class="more" href="{{ SITEURL }}/{{ article.url }}">read more</a>
+	</article>
+
+	{% if loop.length  > 1 %}
+	<div class="wrapper main">		
+		<h3>More posts</h3>
+		<ol class="archive">
+	{% endif %}
+	{% else %}
+			<li class="clearfix"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title}}"><time datetime="{{ article.date.isoformat() }}" pubdate>{{ article.locale_date }}</time> {{ article.title }}</a></li>
+	{% endif %}
+	{% endfor %}
+		</ol>
+	</div>
+</div>
+{% endblock content %}

Just-Read/templates/metadata.html

@@ -0,0 +1,12 @@
+<div class="meta wrapper">
+	<time datetime="{{ article.date.isoformat() }}" pubdate>{{ article.locale_date }}</time>
+	<ul class="tags">
+		<li><a href="{{ SITEURL }}/category/{{ article.category }}.html">{{ article.category }}</a></li>
+{% if article.tags %}
+	{% for tag in article.tags %}
+		<li><a href="{{ SITEURL }}/tag/{{ tag }}.html">{{ tag }}</a></li>
+	{% endfor %}
+{% endif %}
+	</ul>
+	{% if PDF_PROCESSOR %}<p><a href="{{ SITEURL }}/pdf/{{ article.slug }}.pdf">Download the .pdf</a></p>{% endif %}
+</div>

Just-Read/templates/page.html

@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+{% block title %}{{ article.title }}{% endblock %}
+{% block content %}
+<div role="main" class="content clearfix">	
+	<div class="post wrapper">
+		<h1>{{ page.title }}</h1>
+		{{ page.content }}		
+	</div>
+</div>
+{% endblock %}

Just-Read/templates/tag.html

@@ -0,0 +1,16 @@
+{% extends "base.html" %}
+{% block title %}{{ tag }} - {{ SITENAME }}{% endblock %}
+{% block content %}
+<div role="main" class="content clearfix">
+<div class="wrapper main">		
+	<h2>Post tagged: {{ tag }}</h2>
+	
+	<ol class="archive">
+		{% for article in articles %}
+		<li class="clearfix"><a href="{{ SITEURL }}/{{ article.url }}"><time datetime="{{ article.date.isoformat() }}" pubdate>{{ article.locale_date }}</time> {{ article.title }}</a></li>
+		{% endfor %}
+	</ol>
+
+</div>
+</div>
+{% endblock %}

Just-Read/templates/tags.html

@@ -0,0 +1 @@
+<!--must list all the tags. Can be a tag cloud.-->