diff --git a/Just-Read/less/base.less b/Just-Read/less/base.less
index 7d31c62..5997dcc 100644
--- a/Just-Read/less/base.less
+++ b/Just-Read/less/base.less
@@ -3,7 +3,7 @@
 
 // HTML5 display definitions
 
-article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, time { 
+article, figcaption, figure, footer, header, nav, section, time { 
 	display: block;
 }
 
@@ -11,12 +11,11 @@ article, aside, details, figcaption, figure, footer, header, hgroup, nav, sectio
 
 html {
     font-size: 100%;
-    overflow-y: scroll;
-    -webkit-text-size-adjust: 100%;
     -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;    
 }
 
-body{
+body {
     margin: 0;
 }
 
@@ -27,6 +26,7 @@ body{
 	color: #000; 
 	text-shadow: none; 
 }
+
 ::selection { 
 	background: #fd7; 
 	color: #000; 
@@ -39,9 +39,17 @@ a:hover, a:active {
 	outline: 0;
 }
 
+// Code 
+
+pre { 
+	white-space: pre; 
+	white-space: pre-wrap; 
+	word-wrap: break-word; 
+}
+
 // Lists
 
-ul, ol{
+ol, ul{
 	margin: 0;
 	padding: 0;
 }
@@ -65,4 +73,43 @@ img {
 }
 .clearfix { 
 	*zoom: 1; 
+}
+
+// Simple fluid media
+
+figure {
+	margin: 0 0 (@line * 1px) 0;
+	position: relative;	
+}
+
+figure img, figure object, figure embed, figure video {
+	display: block;
+	height: auto;
+	max-width: 100%; 	
+}
+
+figcaption{
+	color: lighten(@black, 60%);
+	margin-top: @line * 1px;
+}
+
+// Elastic Object & Iframe Embedded Videos  http://webdesignerwall.com/tutorials/css-elastic-videos
+
+.video-container {
+	height: 0;	
+	margin-bottom: @line * 1px;	
+	padding-bottom: 56.25%;
+	padding-top: 30px;
+	position: relative;
+	overflow: hidden;
+}
+
+.video-container iframe,  
+.video-container object,  
+.video-container embed {
+	height: 100%;
+	left: 0;
+	position: absolute;
+	top: 0;	
+	width: 100%;
 }
\ No newline at end of file
diff --git a/Just-Read/less/codehilite.less b/Just-Read/less/codehilite.less
new file mode 100644
index 0000000..9de1d28
--- /dev/null
+++ b/Just-Read/less/codehilite.less
@@ -0,0 +1,70 @@
+// Color scheme for CodeHilite (code/syntax highlighting using Pygments)
+
+@c1: #757575; // grayish
+@c2: #fa4753; // orange
+@c3: #6bc5d9; // teal
+@c4: #514986; // purple
+@c5: #f8f8f2; // whiteish
+@c6: #f92672; // pink
+@c7: #f4e07c; // yellow
+@c8: #9cc52c; // green
+
+.hll {}
+.c { color:  @c1 } /* Comment */
+.err { color: @c2;} /* Error */
+.k { color: @c3 } /* Keyword */
+.l { color: @c4 } /* Literal */
+.n { color: @c5 } /* Name */
+.o { color: @c6 } /* Operator */
+.p { color: @c5 } /* Punctuation */
+.cm { color:  @c1 } /* Comment.Multiline */
+.cp { color:  @c1 } /* Comment.Preproc */
+.c1 { color:  @c1 } /* Comment.Single */
+.cs { color:  @c1 } /* Comment.Special */
+.ge {} /* Generic.Emph */
+.gs {} /* Generic.Strong */
+.kc { color: @c3 } /* Keyword.Constant */
+.kd { color: @c3 } /* Keyword.Declaration */
+.kn { color: @c6 } /* Keyword.Namespace */
+.kp { color: @c3 } /* Keyword.Pseudo */
+.kr { color: @c3 } /* Keyword.Reserved */
+.kt { color: @c3 } /* Keyword.Type */
+.ld { color: @c7 } /* Literal.Date */
+.m { color: @c4 } /* Literal.Number */
+.s { color: @c7 } /* Literal.String */
+.na { color: @c8 } /* Name.Attribute */
+.nb { color: @c5 } /* Name.Builtin */
+.nc { color: @c8 } /* Name.Class */
+.no { color: @c3 } /* Name.Constant */
+.nd { color: @c8 } /* Name.Decorator */
+.ni { color: @c5 } /* Name.Entity */
+.ne { color: @c8 } /* Name.Exception */
+.nf { color: @c8 } /* Name.Function */
+.nl { color: @c5 } /* Name.Label */
+.nn { color: @c5 } /* Name.Namespace */
+.nx { color: @c8 } /* Name.Other */
+.py { color: @c5 } /* Name.Property */
+.nt { color: @c6 } /* Name.Tag */
+.nv { color: @c5 } /* Name.Variable */
+.ow { color: @c6 } /* Operator.Word */
+.w { color: @c5 } /* Text.Whitespace */
+.mf { color: @c4 } /* Literal.Number.Float */
+.mh { color: @c4 } /* Literal.Number.Hex */
+.mi { color: @c4 } /* Literal.Number.Integer */
+.mo { color: @c4 } /* Literal.Number.Oct */
+.sb { color: @c7 } /* Literal.String.Backtick */
+.sc { color: @c7 } /* Literal.String.Char */
+.sd { color: @c7 } /* Literal.String.Doc */
+.s2 { color: @c7 } /* Literal.String.Double */
+.se { color: @c4 } /* Literal.String.Escape */
+.sh { color: @c7 } /* Literal.String.Heredoc */
+.si { color: @c7 } /* Literal.String.Interpol */
+.sx { color: @c7 } /* Literal.String.Other */
+.sr { color: @c7 } /* Literal.String.Regex */
+.s1 { color: @c7 } /* Literal.String.Single */
+.ss { color: @c7 } /* Literal.String.Symbol */
+.bp { color: @c5 } /* Name.Builtin.Pseudo */
+.vc { color: @c5 } /* Name.Variable.Class */
+.vg { color: @c5 } /* Name.Variable.Global */
+.vi { color: @c5 } /* Name.Variable.Instance */
+.il { color: @c4 } /* Literal.Number.Integer.Long */
\ No newline at end of file
diff --git a/Just-Read/less/main.less b/Just-Read/less/main.less
index 2903288..39e705c 100644
--- a/Just-Read/less/main.less
+++ b/Just-Read/less/main.less
@@ -6,142 +6,24 @@
 
 // Important numbers
 
-@line: 24;
 @column: 100% / 18;
-@font-size: 16;
 @em: @font-size*1em;
+@font-size: 16;
+@line: 24;
 
-
-// Simple fluid media
-
-figure {
-	position: relative;
-	margin: 0 0 (@line * 1px) 0;
-}
-
-figure img, figure object, figure embed, figure video {
-	max-width: 100%; 
-	display: block;
-}
-
-figcaption{
-	margin-top: @line * 1px;
-	color: lighten(@black, 60%);
-}
-
-// 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;}
+// Mobile first
 
 body {
-	.normal; 
-	line-height: @line * 1px;
 	background: @white;
 	color: lighten(@black, 25%);
+	line-height: @line * 1px;	
+	.normal; 
 	.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;
-}
-
-
-.tagcloud li{
-	list-style: none;
-	margin-bottom: @line / 8px;
-}
-.tagcloud a{
-	color: @black;
-	display: block;
-	background-color: lighten(@link, 50%);
-	padding: (@line / 8px) (@line / 4px);
-	.small;
-	.rounded();
-	.border-box;
-	
-	&:hover{
-		text-decoration:none;
-		background-color: lighten(@link, 30%);
-	}
-}
-
-// Four-column grid active
-// ----------------------------------------
-// Margin   | #  1   2   3   4   |   Margin
-// 5.55555% | %  25  50  75  100 | 5.55555%
-
-.wrapper {
-	padding: 0 (@line/2)/@em;
-	.border-box;
-}
-
-
 a{
 	color: @link;
 	text-decoration: none;
-	.transition();
 	
 		&:hover{
 			color: darken(@link, 40%);
@@ -149,21 +31,251 @@ a{
 		}
 }
 
+h1{
+	.huge;
+	margin: 0 0 (@line * 1.5px) 0;
+	.title;	
+}
+
+h2{
+	.large;
+	margin: (@line * 2px) 0 (@line * 1px);
+	.title;	
+}
+
+h3{
+	color: lighten(@black, 60%);
+	margin: (@line * 1.5px) 0 (@line * 1px);
+	.normal;
+	text-transform: uppercase;
+	.title;
+}
+
+h4, h5, h6{
+	font-weight: 400;
+	margin: (@line * 1px) 0;
+	.normal;
+	.title;		
+}
+
+b, strong{
+	font-weight: 700;
+}
+
+blockquote{
+	border-left: (@line / 4px) solid @link;
+	margin-left: -(@line / 2px);	
+	padding-left: (@line / 4px);
+}
+
+code, .codehilite{
+	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);
+	color: @white;
+	display: block;
+	margin-left: -(@line * 1px);
+	.mono();
+	padding: (@line * 1px);	
+	.rounded();	
+}
+
+time{
+	.small;
+	text-transform: uppercase;
+}
+
+.post ul li{
+	list-style-image: url('../images/bullet.png'); // or use something less colorful, like list-style-type: square
+}
+
+// Archive
+
+.archive li{
+	list-style: none;
+}
+
+.archive a{
+	border-bottom: 1px dotted lighten(@black, 80%);
+	display: block;
+	padding: (@line / 2px) 0;
+	.transition();
+		
+		&:hover{
+			background-color: lighten(@black, 95%);
+			text-decoration:none;
+		}
+}
+
+.archive time{
+	color: lighten(@black, 40%);
+	display: inline;
+	padding-left: @line / 2px;
+}
+
+// jQuery UI tabs (in the archive)
+
+.tabmenu li{
+	list-style-type: none;
+		
+		a{
+			border: 1px solid @link;
+			.border-box;			
+			display: block;
+			float: left;
+			padding: (@line / 2px) 0;
+			text-align: center;
+			width: 50%;
+			
+				&:hover{
+					text-decoration:none
+				}
+		}
+		
+		&:last-child a{
+			border-left: none;
+		}
+}
+
+// Make jQuery tabs work (because I don't use the themes's CSS)
+
+.ui-tabs-hide{
+	display: none;
+}
+
+.tabmenu li a:hover, .ui-tabs-selected a, .ui-tabs-selected a{
+	background-color: lighten(@black, 95%);
+}
+
+// Push the button
+
+.btn { 
+	color: @white; 
+	background-color: @color;
+	border: none;
+	
+	-webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
+	-moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
+	box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
+	
+	padding: 8px 14px 10px;  
+	position: relative;
+	.rounded(3px);
+	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);	
+	-webkit-user-select: none;
+	
+	&:hover{
+		color: @white;
+		text-decoration: none;		
+	}
+	
+	&:active { 
+		-webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
+		-moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
+		box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
+		
+		position: relative; 
+		top: 3px;
+	}
+	
+	&:active:after { 
+		content: ""; 
+		background: @white;
+		bottom: -1px; 
+		height: 3px;
+		left: 0;
+		position: absolute;
+		width: 100%; 		 
+	}	
+	
+}
+
+// CSS tags
+
+.tag li{
+	list-style: none;
+	margin-bottom: @line / 8px;
+}
+
+.tag a{
+	.border-box;
+	
+	-moz-border-radius-bottomright: 4px;
+	-webkit-border-bottom-right-radius: 4px;	
+	border-bottom-right-radius: 4px;
+	-moz-border-radius-topright: 4px;
+	-webkit-border-top-right-radius: 4px;	
+	border-top-right-radius: 4px;
+	
+	color: @black;
+	background-color: lighten(@link, 50%);
+	display: block;
+	margin-left: 20px;
+	padding: 0 10px 0 12px;
+	position: relative;
+	.small;
+		
+	&:hover{
+		background-color: lighten(@link, 30%);
+		text-decoration:none;		
+	}
+	
+	&:before{
+		content: "";
+		border-color: transparent lighten(@link, 50%) transparent transparent;
+		border-style: solid;
+		border-width: 12px 12px 12px 0;
+		float: left;
+		height: 0;
+		left: -12px;
+		position: absolute;
+		top: 0;
+		width: 0;	
+	}
+	
+	&:after{
+		content: "";
+		background: @white;
+		.box-shadow(-1px -1px 2px darken(@link, 50%));
+		float: left;
+		height: 4px;
+		left: 0;
+		position: absolute;
+		.rounded(2px);
+		top: 10px;
+		width: 4px;
+	}
+	
+	&:hover:before {
+		border-color: transparent lighten(@link, 30%) transparent transparent;
+	}
+}
+
+// Tagcloud
+.tag-1 a{width: 100%;}
+.tag-2 a{width: 90%;}
+.tag-3 a{width: 80%;}
+.tag-4 a{width: 70%;}
+.tag-5 a{width: 60%;}
+.tag-6 a{width: 50%;}
+.tag-7 a{width: 40%;}
+.tag-8 a{width: 30%;}
+
+// Header
+
 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);
-	
+	padding: (@line * 1px) @column;
+		
 	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-decoration: none;
+		// 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%), 
@@ -173,119 +285,115 @@ header{
 			0 6px 0 lighten(@black, 20%), 
 			0px 7px 0 lighten(@black, 10%), 
 			0 8px 7px lighten(@black, 5%);
-			
-			
-			&:hover{
-				color: @white;
-				text-decoration:none;
+				
+				&:hover{
+					color: @white;
+					text-decoration:none;
 				}			
 	}
 }
 
+// Footer
+
 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);
+	color: fade(@black, 60%);
 	margin-top: (@line * 4px);
-	color: fade(@black, 60%);	
+	padding: (@line * 2px) @column (@line * 1px);	
 }
 
-.pages{
+.nav{
 	margin-bottom: (@line * 1px);
-}
-
-.nav li{
-	list-style: none;
-	display: inline;
-	padding-right: 10px;
+	
+		li{
+			list-style: none;
+			display: inline;
+			padding-right: 10px;
+		}
+		
+		a{
+			.transition();
+		}
 }
 
 p[role="contentinfo"]{
-	margin-top: (@line / 2px); // If you don't use the Twitter button, delete this line
 	.small;
 }
 
+.social{
+	margin-bottom: @line * 1px;
+	
+		li{
+			list-style: none;
+			display: inline;
+			padding-right: @line / 2px;
+		}	
+}
+
+.icon{
+	margin-right: 2px; 
+	vertical-align: -3px;
+}
+
+.social a[href*='behance.net']:before       {content: url('../images/icons/behance.png'); .icon;}
+.social a[href*='delicious.com']:before     {content: url('../images/icons/delicious.png'); .icon;}
+.social a[href*='facebook.com']:before      {content: url('../images/icons/facebook.png'); .icon;}
+.social a[href*='flickr.com']:before        {content: url('../images/icons/flickr.png'); .icon;}
+.social a[href*='forrst.com']:before        {content: url('../images/icons/forrst.png'); .icon;}
+.social a[href*='github.com']:before        {content: url('../images/icons/github.png'); .icon;}
+.social a[href*='plus.google.com']:before   {content: url('../images/icons/google_plus.png'); .icon;}
+.social a[href*='last.fm']:before           {content: url('../images/icons/lastfm.png'); .icon;}
+.social a[href*='linkedin.com']:before      {content: url('../images/icons/linkedin.png'); .icon;}
+.social a[href*='quora.com']:before         {content: url('../images/icons/quora.png'); .icon;}
+.social a[href*='rss.xml']:before           {content: url('../images/icons/rss.png'); .icon;}
+.social a[href*='stackoverflow.com']:before {content: url('../images/icons/stackoverflow.png'); .icon;}
+.social a[href*='twitter.com']:before       {content: url('../images/icons/twitter.png'); .icon;}
+.social a[href*='youtube.com']:before       {content: url('../images/icons/youtube.png'); .icon;}
+
+
+
+// Four-column grid active
+// ----------------------------------------
+// Margin   | #  1   2   3   4   |   Margin
+// 5.55555% | %  25  50  75  100 | 5.55555%
+
+.wrapper {
+	.border-box;
+	padding: 0 (@line/2)/@em;	
+}
+
 .content{
 	margin:0 @column;
 }
 
 .meta{
-	background: lighten(@black, 95%);
-	padding-top: (@line * 1px);
+	background: lighten(@black, 98%);
+	margin-top: @line * 2px;
 	padding-bottom: (@line * 1px);
+	padding-top: (@line * 1px);	
 	.rounded();
+	
+		time{
+			font-weight: 700;
+			margin-left: 20px;
+			margin-bottom: @line * 1px;
+		}
 }
 
-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{
+.tag li{
 	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);
+	float: left;
+	width: 50%;
 }
 
-.post ul li{
-	list-style-image: url('../images/bullet.png'); // or use something less colorful, like list-style-type: square
+blockquote, code, .codehilite, .post ul, .post ol, p, .archive{
+	margin: 0 0 (@line * 1px) 0;
 }
 
 .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%);
-}
-
-.tag-1 a{
-	width: 100%;
-}
-.tag-2 a{
-	width: 75%;
-}
-.tag-3 a{
-	width: 50%;
-}
-.tag-4 a{
-	width: 25%;
-}
-
 
 // Eight-column grid active
 // ----------------------------------------------------------------------
@@ -298,43 +406,43 @@ code{
 	
 	
 	header .wrapper{
-		width: 75%;
 		float: right;
+		width: 75%;		
 	}
 	
 	.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
+		width: 25%;		
 	}
 	
 	.meta{
 		background: @white;
+		margin-top: 0;
 		padding-top: 24px + (@line * 1.5px); // h1 font-size + margin-bottom
 		
 			time{
 				margin-bottom: (@line * 1px);
+				margin-left: 0;
+				font-weight: 400;
 			}
 	}
 	
 	.post, .copy, .main{
-		width: 75%;
 		float: right;
+		width: 75%;		
 	}
 	
-	.tags li{
-		display: block;
+	.tag li{
+		float: none;
+		width: 100%;
 	}
 	
-	.tags a:hover, .nav 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{
+	.nav a:hover:after{
 		content:  "\2192 ";
 	}
 	
@@ -344,9 +452,10 @@ code{
 	}
 	
 	.archive time{
+		.border-box;
 		display: block;
-		width: 100/4%; // target 1 columns, context 4 columns
 		float: left;
+		width: 100/4%; // target 1 columns, context 4 columns
 	}
 }
 
@@ -354,14 +463,14 @@ code{
 // @media screen and (min-width: 888px)
 @media screen and (min-width: 55.5em) {
 	
-	.post p, .post blockquote, .post ul, .post ol{
+	.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%;
+		width: 50%;	
 	}
 }
 
@@ -430,8 +539,8 @@ code{
 	}
 	
 	.meta, .pages{
-		width: 18.75%;
 		padding-left: 6.25%;
+		width: 18.75%;		
 	}
 
 	.meta{
@@ -453,19 +562,17 @@ code{
 		margin-bottom: (@line * 1px);
 	}
 	
-	code{
-		.massive;
+	code, .codehilite{
 		line-height: 1.5;
+		.massive;		
 	}
 	
-	.post p, .post blockquote, .post ul, .post ol{
+	.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) {
 
@@ -477,4 +584,6 @@ code{
 
 @media print{
 	@import "print.less";
-}
\ No newline at end of file
+}
+
+@import "codehilite.less";
\ No newline at end of file
diff --git a/Just-Read/less/mixins.less b/Just-Read/less/mixins.less
index 356e9a3..9d5658d 100644
--- a/Just-Read/less/mixins.less
+++ b/Just-Read/less/mixins.less
@@ -46,8 +46,33 @@
 }
 
 .border-box{
--webkit-box-sizing: border-box;
--moz-box-sizing: border-box;
--o-box-sizing: border-box;
-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	   -moz-box-sizing: border-box;
+		 -o-box-sizing: border-box;
+			box-sizing: border-box;
+}
+
+
+// Typography mixins - Make the text bigger if you dare
+
+// 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;
+}
+
+.small    {font-size: 12px;}
+.normal   {font-size: 14px;}
+.large    {font-size: 18px;}
+.huge     {font-size: 24px;}
+.massive  {font-size: 36px;}
+.gigantic {font-size: 48px;}
+
+.title{
+	line-height: 1;
+	.fancy-font;
+	font-weight: 700;
 }
\ No newline at end of file
diff --git a/Just-Read/less/var.less b/Just-Read/less/var.less
index 21fce38..6d53ed7 100644
--- a/Just-Read/less/var.less
+++ b/Just-Read/less/var.less
@@ -2,16 +2,5 @@
 
 @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;
-}
\ No newline at end of file
+@color: #556270; // The color of the header.
+@link: #1d73bb; // The color of links, blockquote line and bullets. If you modify this color, edit static/images/bullet.png
\ No newline at end of file
diff --git a/Just-Read/pelican.conf.py-sample.py b/Just-Read/pelican.conf.py-sample.py
index e92e4e8..93689d3 100644
--- a/Just-Read/pelican.conf.py-sample.py
+++ b/Just-Read/pelican.conf.py-sample.py
@@ -1,10 +1,27 @@
 AUTHOR = 'Name Lastname'
-SITENAME = 'The name of your website'
+SITENAME = "The name of your website"
 SITEURL = 'http://example.com'
+TIMEZONE = ""
 
 DISQUS_SITENAME = ''
 
+DEFAULT_DATE_FORMAT = '%d/%m/%Y'
+REVERSE_ARCHIVE_ORDER = True
+TAG_CLOUD_STEPS = 8
+
+PATH = ''
+THEME = ''
+OUTPUT_PATH = ''
+
+MARKUP = 'md'
+MD_EXTENSIONS = 'extra'
+
+FEED_RSS = 'feeds/all.rss.xml'
+TAG_FEED_RSS = 'feeds/%s.rss.xml'
 
 GOOGLE_ANALYTICS = 'UA-XXXXX-X'
-HTML_LANG = 'en'
-TWITTER_USERNAME = 'yourtwitterhandle no @ please'
\ No newline at end of file
+HTML_LANG = 'es'
+TWITTER_USERNAME = ''
+
+SOCIAL = (('GitHub',  'http://github.com/yourusername'),
+          ('Twitter', 'http://twitter.com/yourusername'),)
\ No newline at end of file
diff --git a/Just-Read/psd/bullet.pxm b/Just-Read/psd/bullet.pxm
index 68b68b0..ab97851 100644
Binary files a/Just-Read/psd/bullet.pxm and b/Just-Read/psd/bullet.pxm differ
diff --git a/Just-Read/screenshot.png b/Just-Read/screenshot.png
index 6659f99..37308d3 100644
Binary files a/Just-Read/screenshot.png and b/Just-Read/screenshot.png differ
diff --git a/Just-Read/static/css/main.css b/Just-Read/static/css/main.css
index f5d4c6a..3537b3b 100644
--- a/Just-Read/static/css/main.css
+++ b/Just-Read/static/css/main.css
@@ -1,11 +1,8 @@
 article,
-aside,
-details,
 figcaption,
 figure,
 footer,
 header,
-hgroup,
 nav,
 section,
 time {
@@ -13,9 +10,8 @@ time {
 }
 html {
   font-size: 100%;
-  overflow-y: scroll;
-  -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
 }
 body {
   margin: 0;
@@ -33,7 +29,12 @@ body {
 a:hover, a:active {
   outline: 0;
 }
-ul, ol {
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+ol, ul {
   margin: 0;
   padding: 0;
 }
@@ -52,6 +53,37 @@ img {
 .clearfix {
   *zoom: 1;
 }
+figure {
+  margin: 0 0 24px 0;
+  position: relative;
+}
+figure img,
+figure object,
+figure embed,
+figure video {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+figcaption {
+  color: #999999;
+  margin-top: 24px;
+}
+.video-container {
+  height: 0;
+  margin-bottom: 24px;
+  padding-bottom: 56.25%;
+  padding-top: 30px;
+  position: relative;
+  overflow: hidden;
+}
+.video-container iframe, .video-container object, .video-container embed {
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
 .border-box {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -64,36 +96,6 @@ img {
 .mono {
   font-family: 'Droid Sans Mono', monospace;
 }
-figure {
-  position: relative;
-  margin: 0 0 24px 0;
-}
-figure img,
-figure object,
-figure embed,
-figure video {
-  max-width: 100%;
-  display: block;
-}
-figcaption {
-  margin-top: 24px;
-  color: #999999;
-}
-.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;
 }
@@ -112,95 +114,259 @@ figcaption {
 .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;
+body {
+  background: #ffffff;
+  color: #404040;
+  line-height: 24px;
+  font-size: 14px;
   font-family: 'Droid Sans', sans-serif;
-  font-weight: 700;
+}
+a {
+  color: #1d73bb;
+  text-decoration: none;
+}
+a:hover {
+  color: #02060a;
+  text-decoration: underline;
+}
+h1 {
   font-size: 24px;
   margin: 0 0 36px 0;
+  line-height: 1;
+  font-family: 'Droid Sans', sans-serif;
+  font-weight: 700;
 }
 h2 {
-  line-height: 1;
-  font-family: 'Droid Sans', sans-serif;
-  font-weight: 700;
   font-size: 18px;
   margin: 48px 0 24px;
+  line-height: 1;
+  font-family: 'Droid Sans', sans-serif;
+  font-weight: 700;
 }
 h3 {
+  color: #999999;
+  margin: 36px 0 24px;
+  font-size: 14px;
+  text-transform: uppercase;
   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 {
+  font-weight: 400;
+  margin: 24px 0;
+  font-size: 14px;
   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;
 }
-.tagcloud li {
-  list-style: none;
-  margin-bottom: 3px;
+blockquote {
+  border-left: 6px solid #1d73bb;
+  margin-left: -12px;
+  padding-left: 6px;
 }
-.tagcloud a {
-  color: #000000;
+code, .codehilite {
+  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;
+  color: #ffffff;
   display: block;
-  background-color: #ffffff;
-  padding: 3px 6px;
-  font-size: 12px;
+  margin-left: -24px;
+  font-family: 'Droid Sans Mono', monospace;
+  padding: 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;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -o-box-sizing: border-box;
-  box-sizing: border-box;
 }
-.tagcloud a:hover {
-  text-decoration: none;
-  background-color: #c5efec;
+time {
+  font-size: 12px;
+  text-transform: uppercase;
 }
-.wrapper {
-  padding: 0 0.75em;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -o-box-sizing: border-box;
-  box-sizing: border-box;
+.post ul li {
+  list-style-image: url('../images/bullet.png');
 }
-a {
-  color: #4ecdc4;
-  text-decoration: none;
+.archive li {
+  list-style: none;
+}
+.archive a {
+  border-bottom: 1px dotted #cccccc;
+  display: block;
+  padding: 12px 0;
   -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;
+.archive a:hover {
+  background-color: #f2f2f2;
+  text-decoration: none;
+}
+.archive time {
+  color: #666666;
+  display: inline;
+  padding-left: 12px;
+}
+.tabmenu li {
+  list-style-type: none;
+}
+.tabmenu li a {
+  border: 1px solid #1d73bb;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+  display: block;
+  float: left;
+  padding: 12px 0;
+  text-align: center;
+  width: 50%;
+}
+.tabmenu li a:hover {
+  text-decoration: none;
+}
+.tabmenu li:last-child a {
+  border-left: none;
+}
+.ui-tabs-hide {
+  display: none;
+}
+.tabmenu li a:hover, .ui-tabs-selected a, .ui-tabs-selected a {
+  background-color: #f2f2f2;
+}
+.btn {
+  color: #ffffff;
+  background-color: #556270;
+  border: none;
+  -webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
+  -moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
+  padding: 8px 14px 10px;
+  position: relative;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
+  -webkit-user-select: none;
+}
+.btn:hover {
+  color: #ffffff;
+  text-decoration: none;
+}
+.btn:active {
+  -webkit-box-shadow: inset 0px -3px 1px #ffffff, inset 0 0px 3px rgba(0, 0, 0, 0.9);
+  -moz-box-shadow: inset 0px -3px 1px #ffffff, inset 0 0px 3px rgba(0, 0, 0, 0.9);
+  box-shadow: inset 0px -3px 1px #ffffff, inset 0 0px 3px rgba(0, 0, 0, 0.9);
+  position: relative;
+  top: 3px;
+}
+.btn:active:after {
+  content: "";
+  background: #ffffff;
+  bottom: -1px;
+  height: 3px;
+  left: 0;
+  position: absolute;
+  width: 100%;
+}
+.tag li {
+  list-style: none;
+  margin-bottom: 3px;
+}
+.tag a {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-border-radius-bottomright: 4px;
+  -webkit-border-bottom-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+  -moz-border-radius-topright: 4px;
+  -webkit-border-top-right-radius: 4px;
+  border-top-right-radius: 4px;
+  color: #000000;
+  background-color: #ddedfa;
+  display: block;
+  margin-left: 20px;
+  padding: 0 10px 0 12px;
+  position: relative;
+  font-size: 12px;
+}
+.tag a:hover {
+  background-color: #85bdec;
+  text-decoration: none;
+}
+.tag a:before {
+  content: "";
+  border-color: transparent #ddedfa transparent transparent;
+  border-style: solid;
+  border-width: 12px 12px 12px 0;
+  float: left;
+  height: 0;
+  left: -12px;
+  position: absolute;
+  top: 0;
+  width: 0;
+}
+.tag a:after {
+  content: "";
+  background: #ffffff;
+  -webkit-box-shadow: -1px -1px 2px #000000;
+  -moz-box-shadow: -1px -1px 2px #000000;
+  box-shadow: -1px -1px 2px #000000;
+  float: left;
+  height: 4px;
+  left: 0;
+  position: absolute;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  top: 10px;
+  width: 4px;
+}
+.tag a:hover:before {
+  border-color: transparent #85bdec transparent transparent;
+}
+.tag-1 a {
+  width: 100%;
+}
+.tag-2 a {
+  width: 90%;
+}
+.tag-3 a {
+  width: 80%;
+}
+.tag-4 a {
+  width: 70%;
+}
+.tag-5 a {
+  width: 60%;
+}
+.tag-6 a {
+  width: 50%;
+}
+.tag-7 a {
+  width: 40%;
+}
+.tag-8 a {
+  width: 30%;
 }
 header {
   border-width: 0 0 2px;
@@ -218,15 +384,15 @@ header {
   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;
+  padding: 24px 5.555555555555555%;
 }
 header h1 {
   margin: 0;
 }
 header a {
-  text-decoration: none;
   color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
   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 {
@@ -239,11 +405,11 @@ footer {
   -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);
+  margin-top: 96px;
+  padding: 48px 5.555555555555555% 24px;
 }
-.pages {
+.nav {
   margin-bottom: 24px;
 }
 .nav li {
@@ -251,17 +417,112 @@ footer {
   display: inline;
   padding-right: 10px;
 }
+.nav a {
+  -webkit-transition: all 0.25s linear;
+  -moz-transition: all 0.25s linear;
+  -o-transition: all 0.25s linear;
+  transition: all 0.25s linear;
+}
 p[role="contentinfo"] {
-  margin-top: 12px;
   font-size: 12px;
 }
+.social {
+  margin-bottom: 24px;
+}
+.social li {
+  list-style: none;
+  display: inline;
+  padding-right: 12px;
+}
+.icon {
+  margin-right: 2px;
+  vertical-align: -3px;
+}
+.social a[href*='behance.net']:before {
+  content: url('../images/icons/behance.png');
+  margin-right: 2px;
+  vertical-align: -3px;
+}
+.social a[href*='delicious.com']:before {
+  content: url('../images/icons/delicious.png');
+  margin-right: 2px;
+  vertical-align: -3px;
+}
+.social a[href*='facebook.com']:before {
+  content: url('../images/icons/facebook.png');
+  margin-right: 2px;
+  vertical-align: -3px;
+}
+.social a[href*='flickr.com']:before {
+  content: url('../images/icons/flickr.png');
+  margin-right: 2px;
+  vertical-align: -3px;
+}
+.social a[href*='forrst.com']:before {
+  content: url('../images/icons/forrst.png');
+  margin-right: 2px;
+  vertical-align: -3px;
+}
+.social a[href*='github.com']:before {
+  content: url('../images/icons/github.png');
+  margin-right: 2px;
+  vertical-align: -3px;
+}
+.social a[href*='plus.google.com']:before {
+  content: url('../images/icons/google_plus.png');
+  margin-right: 2px;
+  vertical-align: -3px;
+}
+.social a[href*='last.fm']:before {
+  content: url('../images/icons/lastfm.png');
+  margin-right: 2px;
+  vertical-align: -3px;
+}
+.social a[href*='linkedin.com']:before {
+  content: url('../images/icons/linkedin.png');
+  margin-right: 2px;
+  vertical-align: -3px;
+}
+.social a[href*='quora.com']:before {
+  content: url('../images/icons/quora.png');
+  margin-right: 2px;
+  vertical-align: -3px;
+}
+.social a[href*='rss.xml']:before {
+  content: url('../images/icons/rss.png');
+  margin-right: 2px;
+  vertical-align: -3px;
+}
+.social a[href*='stackoverflow.com']:before {
+  content: url('../images/icons/stackoverflow.png');
+  margin-right: 2px;
+  vertical-align: -3px;
+}
+.social a[href*='twitter.com']:before {
+  content: url('../images/icons/twitter.png');
+  margin-right: 2px;
+  vertical-align: -3px;
+}
+.social a[href*='youtube.com']:before {
+  content: url('../images/icons/youtube.png');
+  margin-right: 2px;
+  vertical-align: -3px;
+}
+.wrapper {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 0.75em;
+}
 .content {
   margin: 0 5.555555555555555%;
 }
 .meta {
-  background: #f2f2f2;
-  padding-top: 24px;
+  background: #fafafa;
+  margin-top: 48px;
   padding-bottom: 24px;
+  padding-top: 24px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
@@ -269,107 +530,60 @@ p[role="contentinfo"] {
   -webkit-background-clip: padding-box;
   background-clip: padding-box;
 }
-time {
-  font-size: 12px;
-  text-transform: uppercase;
+.meta time {
+  font-weight: 700;
+  margin-left: 20px;
+  margin-bottom: 24px;
 }
-.tags li {
-  display: inline;
-  list-style: none;
+.tag li {
+  display: block;
+  float: left;
+  width: 50%;
 }
 blockquote,
 code,
+.codehilite,
 .post ul,
 .post ol,
-p {
+p,
+.archive {
   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;
-}
-.tag-1 a {
-  width: 100%;
-}
-.tag-2 a {
-  width: 75%;
-}
-.tag-3 a {
-  width: 50%;
-}
-.tag-4 a {
-  width: 25%;
-}
 @media screen and (min-width: 45em) {
   header .wrapper {
-    width: 75%;
     float: right;
+    width: 75%;
   }
   .meta, .pages {
-    width: 25%;
     float: left;
     text-align: right;
-  }
-  .pages {
-    padding-top: 52px;
+    width: 25%;
   }
   .meta {
     background: #ffffff;
+    margin-top: 0;
     padding-top: 60px;
   }
   .meta time {
     margin-bottom: 24px;
+    margin-left: 0;
+    font-weight: 400;
   }
   .post, .copy, .main {
-    width: 75%;
     float: right;
+    width: 75%;
   }
-  .tags li {
-    display: block;
+  .tag li {
+    float: none;
+    width: 100%;
   }
-  .tags a:hover, .nav a:hover {
+  .nav a:hover {
     padding-right: 6px;
   }
-  .tags a:hover:after, .nav a:hover:after, .more:hover:after {
+  .nav a:hover:after {
     content: "\2192 ";
   }
   .nav li {
@@ -377,22 +591,26 @@ code {
     padding-right: 0;
   }
   .archive time {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    box-sizing: border-box;
     display: block;
-    width: 25%;
     float: left;
+    width: 25%;
   }
 }
 @media screen and (min-width: 55.5em) {
-  .post p,
+  .post > p,
   .post blockquote,
   .post ul,
   .post ol {
     width: 66.66666666666667%;
   }
   .main {
-    width: 50%;
     float: none;
     margin-left: 25%;
+    width: 50%;
   }
 }
 @media screen and (min-width: 61.5em) {
@@ -435,8 +653,8 @@ code {
     margin-top: 48px;
   }
   .meta, .pages {
-    width: 18.75%;
     padding-left: 6.25%;
+    width: 18.75%;
   }
   .meta {
     padding-top: 96px;
@@ -453,11 +671,11 @@ code {
   .post li {
     margin-bottom: 24px;
   }
-  code {
-    font-size: 36px;
+  code, .codehilite {
     line-height: 1.5;
+    font-size: 36px;
   }
-  .post p,
+  .post > p,
   .post blockquote,
   .post ul,
   .post ol {
@@ -528,4 +746,230 @@ code {
   thead {
     display: table-header-group;
   }
-}
\ No newline at end of file
+}
+.c {
+  color: #757575;
+}
+/* Comment */
+.err {
+  color: #fa4753;
+}
+/* Error */
+.k {
+  color: #6bc5d9;
+}
+/* Keyword */
+.l {
+  color: #514986;
+}
+/* Literal */
+.n {
+  color: #f8f8f2;
+}
+/* Name */
+.o {
+  color: #f92672;
+}
+/* Operator */
+.p {
+  color: #f8f8f2;
+}
+/* Punctuation */
+.cm {
+  color: #757575;
+}
+/* Comment.Multiline */
+.cp {
+  color: #757575;
+}
+/* Comment.Preproc */
+.c1 {
+  color: #757575;
+}
+/* Comment.Single */
+.cs {
+  color: #757575;
+}
+/* Comment.Special */
+/* Generic.Emph */
+/* Generic.Strong */
+.kc {
+  color: #6bc5d9;
+}
+/* Keyword.Constant */
+.kd {
+  color: #6bc5d9;
+}
+/* Keyword.Declaration */
+.kn {
+  color: #f92672;
+}
+/* Keyword.Namespace */
+.kp {
+  color: #6bc5d9;
+}
+/* Keyword.Pseudo */
+.kr {
+  color: #6bc5d9;
+}
+/* Keyword.Reserved */
+.kt {
+  color: #6bc5d9;
+}
+/* Keyword.Type */
+.ld {
+  color: #f4e07c;
+}
+/* Literal.Date */
+.m {
+  color: #514986;
+}
+/* Literal.Number */
+.s {
+  color: #f4e07c;
+}
+/* Literal.String */
+.na {
+  color: #9cc52c;
+}
+/* Name.Attribute */
+.nb {
+  color: #f8f8f2;
+}
+/* Name.Builtin */
+.nc {
+  color: #9cc52c;
+}
+/* Name.Class */
+.no {
+  color: #6bc5d9;
+}
+/* Name.Constant */
+.nd {
+  color: #9cc52c;
+}
+/* Name.Decorator */
+.ni {
+  color: #f8f8f2;
+}
+/* Name.Entity */
+.ne {
+  color: #9cc52c;
+}
+/* Name.Exception */
+.nf {
+  color: #9cc52c;
+}
+/* Name.Function */
+.nl {
+  color: #f8f8f2;
+}
+/* Name.Label */
+.nn {
+  color: #f8f8f2;
+}
+/* Name.Namespace */
+.nx {
+  color: #9cc52c;
+}
+/* Name.Other */
+.py {
+  color: #f8f8f2;
+}
+/* Name.Property */
+.nt {
+  color: #f92672;
+}
+/* Name.Tag */
+.nv {
+  color: #f8f8f2;
+}
+/* Name.Variable */
+.ow {
+  color: #f92672;
+}
+/* Operator.Word */
+.w {
+  color: #f8f8f2;
+}
+/* Text.Whitespace */
+.mf {
+  color: #514986;
+}
+/* Literal.Number.Float */
+.mh {
+  color: #514986;
+}
+/* Literal.Number.Hex */
+.mi {
+  color: #514986;
+}
+/* Literal.Number.Integer */
+.mo {
+  color: #514986;
+}
+/* Literal.Number.Oct */
+.sb {
+  color: #f4e07c;
+}
+/* Literal.String.Backtick */
+.sc {
+  color: #f4e07c;
+}
+/* Literal.String.Char */
+.sd {
+  color: #f4e07c;
+}
+/* Literal.String.Doc */
+.s2 {
+  color: #f4e07c;
+}
+/* Literal.String.Double */
+.se {
+  color: #514986;
+}
+/* Literal.String.Escape */
+.sh {
+  color: #f4e07c;
+}
+/* Literal.String.Heredoc */
+.si {
+  color: #f4e07c;
+}
+/* Literal.String.Interpol */
+.sx {
+  color: #f4e07c;
+}
+/* Literal.String.Other */
+.sr {
+  color: #f4e07c;
+}
+/* Literal.String.Regex */
+.s1 {
+  color: #f4e07c;
+}
+/* Literal.String.Single */
+.ss {
+  color: #f4e07c;
+}
+/* Literal.String.Symbol */
+.bp {
+  color: #f8f8f2;
+}
+/* Name.Builtin.Pseudo */
+.vc {
+  color: #f8f8f2;
+}
+/* Name.Variable.Class */
+.vg {
+  color: #f8f8f2;
+}
+/* Name.Variable.Global */
+.vi {
+  color: #f8f8f2;
+}
+/* Name.Variable.Instance */
+.il {
+  color: #514986;
+}
+/* Literal.Number.Integer.Long */
\ No newline at end of file
diff --git a/Just-Read/static/images/bullet.png b/Just-Read/static/images/bullet.png
index b821648..96210f1 100644
Binary files a/Just-Read/static/images/bullet.png and b/Just-Read/static/images/bullet.png differ
diff --git a/Just-Read/templates/archives.html b/Just-Read/templates/archives.html
index 91c1c54..72fd2a5 100644
--- a/Just-Read/templates/archives.html
+++ b/Just-Read/templates/archives.html
@@ -1,18 +1,46 @@
 {% extends "base.html" %}
-{% block title %}{{ SITENAME }}{% endblock %}
+{% block title %}Archivo - {{ SITENAME }}{% endblock %}
+
+{% block scripts %}
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
+{% 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>
-	<ol class="archive">
-		{% for article in date_year %}
-		<li class="clearfix"><a href="{{ article.url }}"><time datetime="{{ article.date.isoformat() }}" pubdate>{{ article.locale_date }}</time> {{ article.title }}</a></li>
-		{% endfor %}
-	</ol>
+<div id="jquerytabs" class="wrapper main">
+	<ul class="tabmenu clearfix">
+		<li><a href="#fecha">By date</a></li>
+		<li><a href="#etiqueta">By topic</a></li>
+	</ul>
 	
+	<div id="fecha">	
+	{% for year, date_year in dates|groupby( 'date.year' )|sort(reverse=True) %}	
+		<h2>{{ year }}</h2>
+		<ol class="archive">
+			{% for article in date_year %}
+			<li class="clearfix"><a href="{{ article.url }}"><time datetime="{{ article.date.isoformat() }}" pubdate>{{ article.locale_date }}</time> {{ article.title }}</a></li>
+			{% endfor %}
+		</ol>
 	{% endfor %}
+	</div>
+	
+	<div id="etiqueta">
+		<h2>Tags</h2>
+		<ul class="tag">
+		{% for tag in tag_cloud|sort %}
+		    <li class="tag-{{ tag.1 }}"><a href="{{ SITEURL }}/tag/{{ tag.0 }}.html">{{ tag.0 }}</a></li>
+		{% endfor %}
+		</ul>
+	</div>
+		
 </div>
 </div>
+
+<script>
+	$(function() {
+		$("#jquerytabs").tabs();
+	});
+</script>
 {% endblock %}
\ No newline at end of file
diff --git a/Just-Read/templates/article.html b/Just-Read/templates/article.html
index a5bf08f..58df95f 100644
--- a/Just-Read/templates/article.html
+++ b/Just-Read/templates/article.html
@@ -6,6 +6,9 @@
 		<div class="post wrapper">
 			<h1>{{ article.title }}</h1>
 			{{ article.content }}
+			
+			<a href="https://twitter.com/share" class="twitter-share-button" data-via="{{ TWITTER_USERNAME }}" data-lang="en" data-size="large" data-related="{{ TWITTER_USERNAME }}">Tweet</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>
 						
 			{% if DISQUS_SITENAME %}
 			<div class="comments">
diff --git a/Just-Read/templates/base.html b/Just-Read/templates/base.html
index 65f549c..96511ad 100644
--- a/Just-Read/templates/base.html
+++ b/Just-Read/templates/base.html
@@ -16,6 +16,9 @@
 		<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
 	<![endif]-->
 	
+	{% block scripts %}
+	{% endblock %}
+	
 	<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" />
@@ -33,28 +36,27 @@
 	{% 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>
+<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>
+		</ul>
+	</div>
+	
+	<div class="copy wrapper">
+		<ul class="social">
+			{% for name, link in SOCIAL %}
+			<li><a href="{{ link }}">{{ name }}</a></li>
 			{% endfor %}
-				<li><a href="{{ SITEURL }}/archives.html">Archive</a></li>
-				<li><a href="{{ SITEURL }}/tags.html">Tags</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>
+		</ul>
+	
+		<p role="contentinfo">© 2012 {{ AUTHOR }}<br>
+		Proudly powered by <a href="http://alexis.notmyidea.org/pelican/">Pelican</a>.</p>
+	</div>
+</footer>
 	
 	<script>
 	  var _gaq=[['_setAccount','{{ GOOGLE_ANALYTICS }}'],['_trackPageview']];
diff --git a/Just-Read/templates/categories.html b/Just-Read/templates/categories.html
index 6b889e8..e69de29 100644
--- a/Just-Read/templates/categories.html
+++ b/Just-Read/templates/categories.html
@@ -1 +0,0 @@
-<!--must list all the tags. Can be a tag cloud.-->
\ No newline at end of file
diff --git a/Just-Read/templates/index.html b/Just-Read/templates/index.html
index 39513e2..f1dab78 100644
--- a/Just-Read/templates/index.html
+++ b/Just-Read/templates/index.html
@@ -8,7 +8,7 @@
 	{% 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.summary }} <a class="btn" href="{{ SITEURL }}/{{ article.url }}">read more →</a>
 	</article>
 
 	{% if loop.length  > 1 %}
@@ -21,6 +21,8 @@
 	{% endif %}
 	{% endfor %}
 		</ol>
+		
+		<p>More posts in the <a href="{{ SITEURL }}/archives.html">archive</a>.</p>
 	</div>
 </div>
 {% endblock content %}
\ No newline at end of file
diff --git a/Just-Read/templates/metadata.html b/Just-Read/templates/metadata.html
index 842a5d8..c051c75 100644
--- a/Just-Read/templates/metadata.html
+++ b/Just-Read/templates/metadata.html
@@ -1,6 +1,6 @@
 <div class="meta wrapper">
 	<time datetime="{{ article.date.isoformat() }}" pubdate>{{ article.locale_date }}</time>
-	<ul class="tags">
+	<ul class="tag clearfix">
 		<li><a href="{{ SITEURL }}/category/{{ article.category }}.html">{{ article.category }}</a></li>
 {% if article.tags %}
 	{% for tag in article.tags %}
diff --git a/Just-Read/templates/page.html b/Just-Read/templates/page.html
index ebf8da0..bb23568 100644
--- a/Just-Read/templates/page.html
+++ b/Just-Read/templates/page.html
@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% block title %}{{ page.title }}{% endblock %}
+{% block title %}{{ page.title }}- {{ SITENAME }}{% endblock %}
 {% block content %}
 <div role="main" class="content clearfix">	
 	<div class="post wrapper">
diff --git a/Just-Read/templates/tags.html b/Just-Read/templates/tags.html
index eed50d2..8ddbcd1 100644
--- a/Just-Read/templates/tags.html
+++ b/Just-Read/templates/tags.html
@@ -6,7 +6,7 @@
 <div class="wrapper main">  	
 	<h2>Tags</h2>
 	
-	<ul class="tagcloud">
+	<ul class="tag">
     {% for tag in tag_cloud %}
         <li class="tag-{{ tag.1 }}"><a href="{{ SITEURL }}/tag/{{ tag.0 }}.html">{{ tag.0 }}</a></li>
     {% endfor %}