@@ -6,11 +6,9 @@ - redcloth
 title: About
 type: page
 -----
-!</images/theme/heraldry/pegasus.png!
-
 !>/images/theme/heraldry/unicorn.png!
 
-This is a _minimalist_ web site: I do not care about fancy graphics or nitfy effects. I do care, however, about content and I want you to read what I write comfortably. As you can see, this site has no sidebars: it only has a header, a main column and a footer, exactly where you expect them to be.
+<span class="dropcap">T</span>his is a _minimalist_ web site: I do not care about fancy graphics or nitfy effects. I do care, however, about content and I want you to read what I write comfortably. As you can see, this site has no sidebars: it only has a header, a main column and a footer, exactly where you expect them to be.
 
 This site was designed to work with all the major modern browsers (hint: Internet Explorer 6 is _not_ a modern browser). It validates as XHTML 1.1 Strict and CSS 2.1.
 

@@ -15,8 +15,6 @@ all_articles = latest_articles
 latest = latest_articles 5
 popular = popular_articles 5
 %>
-!</images/theme/heraldry/gryphon.png!
-
 !>/images/theme/heraldry/lion.png!
 
 <span class="dropcap">T</span>his is Fabio Cevasco's web site, featuring <%= all_articles.length %> "articles":/archives/ and <%= 5 %> open source "projects":/projects/. Fabio is a full-time technical writer working in Genoa, Italy. In his free time, he enjoys writing (surprise, surprise), reading about technology and programming a little bit in Ruby and other languages.

@@ -3,11 +3,9 @@ permalink: projects
 title: Projects
 type: page
 -----
-!</images/theme/heraldry/wyvern.png!
-
 !>/images/theme/heraldry/dragon.png!
 
-This page lists all my _projects_. Except for a few cases, they normally are:
+<span class="dropcap">T</span>his page lists all my _projects_. Except for a few cases, they normally are:
 * open source
 * programming-related
 * developed using the "Ruby programming language":http://www.ruby-lang.org

@@ -0,0 +1,121 @@ 
+-----
+-----
+/* TEXT */
+
+body
+{
+	color: #000;
+	font: 0.9em Georgia, Serif;
+}
+
+h1
+{
+	height: 60px;
+}
+
+h2, h3, h4, h5
+{
+	margin: 0;
+	font-family: 'Book Antiqua', Palatino, serif;
+	font-variant: small-caps;
+}
+
+h2
+{
+	font-size: 2.3em;
+}
+
+h3
+{
+	font-size: 1.7em;
+}
+
+h4
+{
+	font-size: 1.3em;
+}
+
+.dropcap {
+	font-family: 'Book Antiqua', Palatino, serif;
+	float: left;
+	font-size: 4.2em;
+	line-height: 0.75em;
+	margin-top: 0.15em;
+	padding-right: 0.25em;
+	text-transform: uppercase;
+
+}
+
+h2 + p:first-line {
+	font-variant:small-caps;
+}
+
+#services h3
+{
+	padding-top: 10px;
+	text-align: center;
+}
+
+#navigation a
+{
+	font-size: 2em;
+}
+
+
+em {
+	font-style: italic;
+}
+
+#footer, #border-bottom
+{
+	color: #BDB7BA;
+}
+
+/**** Article Lists ****/
+
+.article-list h3, .left-column h3, .right-column h3
+{
+	margin-bottom: 1.5em;
+	text-align: center;
+}
+
+.article-item h4
+{	
+	margin: 0;
+	padding: 0;
+}
+
+.article-tags
+{
+	padding-top: -0.1em;
+	font-size: 90%;
+	padding-left: 1em;
+}
+
+.article-summary
+{
+	padding-top: 0.5em;
+	padding-left: 1em;
+	font-style: italic;
+}
+
+
+
+/******* LINKS *******/
+
+a, a.gs-title
+{
+	text-decoration:none;
+	outline:none;
+}
+
+a, a.gs-title, .gsc-cursor-page
+{
+	color: #A4282D;
+}
+
+a:hover, a.gs-title:hover, .gsc-cursor-page:hover
+{
+	color: #CF282D;
+}
+

@@ -2,7 +2,9 @@ -----
 filter: erb
 -----
 <div class="article-item"> 
-	<h4><a href="/articles/<%= @article.attributes[:permalink]%>/"><%= @article.attributes[:title]%></a></h4><% unless (@article.attributes[:tags].empty?) then %><div class="article-tags"><%=	@article.attributes[:tags].map{ |t| %{<span class="tag"><a href="/tags/#{t}/">#{t}</a></span>} }.join(" &middot; ") %>
+	<h4><a href="/articles/<%= @article.attributes[:permalink]%>/"><%= @article.attributes[:title]%></a></h4><% unless (@article.attributes[:tags].empty?) then %>
+		<div class="date"><%= @article.attributes[:date].strftime("%A, %d %B %Y") %></div>
+		<div><%=	@article.attributes[:tags].map{ |t| %{<span class="tag"><a href="/tags/#{t}/">#{t}</a></span>} }.join(" &middot; ") %>
 	</div>
 	<% end %><%	if (@article.attributes[:summary] && !@no_summary) then %><div class="article-summary"><%= @article.attributes[:summary] %>
 	</div><% end %>

@@ -3,5 +3,5 @@ filter: erb
 -----
 <ul class="article-meta">
 	<li>Composed on <span class="date"><%= @article.attributes[:date].strftime("%A, %d %B %Y") %></span></li>
-	<li>Archived as <%= tags_for(@article) %></li>
+	<li>Archived in <%= tags_for(@article) %></li>
 </ul>

@@ -63,7 +63,10 @@ <% 	case @item[:type]
 								when 'article' then%>
 								<%= render 'article_meta', :article => @item %>
 						<% end %>
-						<%= yield %>
+						<hr />
+						<div class="content-body">
+							<%= yield %>
+						</div>
 					</div>
 					<!-- CONTENT END -->
 				</div>

@@ -4,17 +4,17 @@ -----
 <div id="services">
 	<div class ="footer-left">
 		<div id="backtype">
-			<h3><a href="http://www.backtype.com/h3rald">Opinions</a></h3>
+			<h3><a href="http://www.backtype.com/h3rald"><img src="/images/theme/buttons/opinions.png" class="hover" alt="OPINIONS"/></a></h3>
 		</div>
 	</div>
 	<div class ="footer-center">
 		<div id="twitter">
-			<h3><a href="http://www.twitter.com/h3rald">Tweets</a></h3>
+			<h3><a href="http://www.twitter.com/h3rald"><img src="/images/theme/buttons/tweets.png" class="hover" alt="TWEETS"/></a></h3>
 		</div>
 	</div>
 	<div class ="footer-right">
 		<div id="delicious">
-			<h3><a href="http://www.delicious.com/h3rald">Bookmarks</a></h3>
+			<h3><a href="http://www.delicious.com/h3rald"><img src="/images/theme/buttons/bookmarks.png" class="hover" alt="BOOKMARKS"/></a></h3>
 		</div>
 	</div>
 </div> <!-- SERVICES END -->

@@ -105,11 +105,6 @@ {
 	margin-left: 0;
 }
 
-#services img
-{
-	float: left;
-}
-
 .spacer-20
 {
 	display: block;
@@ -185,6 +180,9 @@ 
 ul.article-meta
 {
 	list-style-type: none;
+	border-left: 3px solid #ccc;
+	padding-left: 1em;
+	margin-left: 0.5em;
 }
 
 .date

@@ -14,7 +14,7 @@ 
 h2, h3, h4, h5
 {
 	margin: 0;
-	font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
+	font-family: 'Book Antiqua', Palatino, serif;
 	font-variant: small-caps;
 }
 
@@ -34,9 +34,9 @@ font-size: 1.3em;
 }
 
 .dropcap {
-	font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
+	font-family: 'Book Antiqua', Palatino, serif;
 	float: left;
-	font-size: 4em;
+	font-size: 4.2em;
 	line-height: 0.75em;
 	margin-top: 0.15em;
 	padding-right: 0.25em;
@@ -44,7 +44,7 @@ text-transform: uppercase;
 
 }
 
-h2 + p:first-line {
+p.first-p:first-line {
 	font-variant:small-caps;
 }
 

@@ -8,18 +8,14 @@ 
 $(document).ready(function() {
 		$('.timeago').timeago();
 		// Drop Caps
-		$('h2 + p').each(function(){
-			var first_paragraph = this;//$('#content p')[0];
+		$('.content-body p').each(function(){
+			var first_paragraph = $('.content-body p:first');
+			first_paragraph.addClass('first-p');
 			if (!first_paragraph) return false;
-			var node = first_paragraph;
-			while (node.childNodes.length) {
-			node = node.firstChild;
-			}
-			var text = node.nodeValue;
-			if (!text) return false;
-			var first_letter = text.substr(0,1);
+			var t = first_paragraph.html();
+			var first_letter = t.substr(0,1);
 			if (first_letter.match(/[a-z]/i)){
-				node.nodeValue = text.slice(1,text.length);
+				first_paragraph.html(t.slice(1,t.length));
 				$('<span></span>').addClass('dropcap').html(first_letter).prependTo( first_paragraph );
 			}
 			});