Style for tags, codehilite, social icons

Added CSS styles for tags, color scheme for code highlighting, social links and icons, and improvements in the archive page.

18 files changed, 1140 insertions, 405 deletions

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,164 +6,276 @@
 
 // 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;
+a{
+	color: @link;
+	text-decoration: none;
+	
+		&:hover{
+			color: darken(@link, 40%);
+			text-decoration:underline;
+		}
 }
 
 h1{
-	.title;
 	.huge;
 	margin: 0 0 (@line * 1.5px) 0;
+	.title;	
 }
 
 h2{
-	.title;
 	.large;
 	margin: (@line * 2px) 0 (@line * 1px);
-	
+	.title;	
 }
 
 h3{
-	.title;
-	.normal;
+	color: lighten(@black, 60%);
 	margin: (@line * 1.5px) 0 (@line * 1px);
+	.normal;
 	text-transform: uppercase;
-	color: lighten(@black, 60%);
-	
+	.title;
 }
 
 h4, h5, h6{
-	.title;
-	.normal;
-	margin: (@line * 1px) 0;
 	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();	
+}
 
-.tagcloud li{
+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;
-	margin-bottom: @line / 8px;
 }
-.tagcloud a{
-	color: @black;
+
+.archive a{
+	border-bottom: 1px dotted lighten(@black, 80%);
 	display: block;
-	background-color: lighten(@link, 50%);
-	padding: (@line / 8px) (@line / 4px);
-	.small;
-	.rounded();
-	.border-box;
+	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{
-		text-decoration:none;
-		background-color: lighten(@link, 30%);
+		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%; 		 
+	}	
+	
 }
 
-// Four-column grid active
-// ----------------------------------------
-// Margin   | #  1   2   3   4   |   Margin
-// 5.55555% | %  25  50  75  100 | 5.55555%
+// CSS tags
 
-.wrapper {
-	padding: 0 (@line/2)/@em;
-	.border-box;
+.tag li{
+	list-style: none;
+	margin-bottom: @line / 8px;
 }
 
-
-a{
-	color: @link;
-	text-decoration: none;
-	.transition();
+.tag a{
+	.border-box;
 	
-		&:hover{
-			color: darken(@link, 40%);
-			text-decoration:underline;
-		}
+	-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,117 +285,113 @@ 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;
 }
 
-.content{
-	margin:0 @column;
+.social{
+	margin-bottom: @line * 1px;
+	
+		li{
+			list-style: none;
+			display: inline;
+			padding-right: @line / 2px;
+		}	
 }
 
-.meta{
-	background: lighten(@black, 95%);
-	padding-top: (@line * 1px);
-	padding-bottom: (@line * 1px);
-	.rounded();
+.icon{
+	margin-right: 2px; 
+	vertical-align: -3px;
 }
 
-time{
-	.small;
-	text-transform: uppercase;
-}
+.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;}
 
-.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);
-}
+// Four-column grid active
+// ----------------------------------------
+// Margin   | #  1   2   3   4   |   Margin
+// 5.55555% | %  25  50  75  100 | 5.55555%
 
-.post ul li{
-	list-style-image: url('../images/bullet.png'); // or use something less colorful, like list-style-type: square
+.wrapper {
+	.border-box;
+	padding: 0 (@line/2)/@em;	
 }
 
-.main + .main{
-	margin-top: (@line * 4px);
+.content{
+	margin:0 @column;
 }
 
-.archive li{
-	list-style: none;
+.meta{
+	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;
+		}
 }
 
-.archive a{
+.tag li{
 	display: block;
-	padding: (@line / 2px) 0;
-	border-bottom: 1px dotted lighten(@black, 80%);
-	
-	&:hover{
-		text-decoration:none;
-	}
+	float: left;
+	width: 50%;
 }
 
-.archive time{
-	display: inline;
-	color: lighten(@black, 40%);
+blockquote, code, .codehilite, .post ul, .post ol, p, .archive{
+	margin: 0 0 (@line * 1px) 0;
 }
 
-.tag-1 a{
-	width: 100%;
-}
-.tag-2 a{
-	width: 75%;
-}
-.tag-3 a{
-	width: 50%;
-}
-.tag-4 a{
-	width: 25%;
+.main + .main{
+	margin-top: (@line * 4px);
 }
 
 
@@ -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
--- a/Just-Read/psd/bullet.pxm
+++ b/Just-Read/psd/bullet.pxm
diff --git a/Just-Read/screenshot.png b/Just-Read/screenshot.png
index 6659f99..37308d3 100644
--- a/Just-Read/screenshot.png
+++ b/Just-Read/screenshot.png
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,47 +53,48 @@ img {
 .clearfix {
   *zoom: 1;
 }
-.border-box {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -o-box-sizing: border-box;
-  box-sizing: border-box;
-}
-.sans, .fancy-font {
-  font-family: 'Droid Sans', sans-serif;
-}
-.mono {
-  font-family: 'Droid Sans Mono', monospace;
-}
 figure {
-  position: relative;
   margin: 0 0 24px 0;
+  position: relative;
 }
 figure img,
 figure object,
 figure embed,
 figure video {
-  max-width: 100%;
   display: block;
+  height: auto;
+  max-width: 100%;
 }
 figcaption {
-  margin-top: 24px;
   color: #999999;
+  margin-top: 24px;
 }
 .video-container {
-  position: relative;
+  height: 0;
+  margin-bottom: 24px;
   padding-bottom: 56.25%;
   padding-top: 30px;
-  height: 0;
+  position: relative;
   overflow: hidden;
-  margin-bottom: 24px;
 }
 .video-container iframe, .video-container object, .video-container embed {
+  height: 100%;
+  left: 0;
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
-  height: 100%;
+}
+.border-box {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -o-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.sans, .fancy-font {
+  font-family: 'Droid Sans', sans-serif;
+}
+.mono {
+  font-family: 'Droid Sans Mono', monospace;
 }
 .small {
   font-size: 12px;
@@ -112,95 +114,259 @@ figcaption {
 .gigantic {
   font-size: 48px;
 }
+.title {
+  line-height: 1;
+  font-family: 'Droid Sans', sans-serif;
+  font-weight: 700;
+}
 body {
-  font-size: 14px;
-  line-height: 24px;
   background: #ffffff;
   color: #404040;
+  line-height: 24px;
+  font-size: 14px;
   font-family: 'Droid Sans', sans-serif;
 }
-.title {
-  line-height: 1;
-  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;
-  font-size: 24px;
-  margin: 0 0 36px 0;
 }
 h2 {
+  font-size: 18px;
+  margin: 48px 0 24px;
   line-height: 1;
   font-family: 'Droid Sans', sans-serif;
   font-weight: 700;
-  font-size: 18px;
-  margin: 48px 0 24px;
 }
 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;
+}
+time {
+  font-size: 12px;
+  text-transform: uppercase;
+}
+.post ul li {
+  list-style-image: url('../images/bullet.png');
+}
+.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;
+}
+.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%;
 }
-.tagcloud a:hover {
+.tabmenu li a:hover {
   text-decoration: none;
-  background-color: #c5efec;
 }
-.wrapper {
-  padding: 0 0.75em;
+.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;
 }
-a {
-  color: #4ecdc4;
+.tag a:hover {
+  background-color: #85bdec;
   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;
+.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
--- a/Just-Read/static/images/bullet.png
+++ b/Just-Read/static/images/bullet.png
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 %}