From c0f62e958c5be315faf3c62c8bb1a2480025f52b Mon Sep 17 00:00:00 2001
From: Adrian Kummerlaender
Date: Sun, 22 Mar 2015 17:13:48 +0100
Subject: Revamped layout to be more minimalistic and readable * removed
 background image and as such it's fixed pixel width ** i.e. the layout is now
 completely dependent on the basic font size and scales accordingly * revamped
 master template and CSS to allow for nodes with varying lengths instead of
 truncating everything depending on the background width * increased font size
 of tag and archive pages * increased overall line height to improve
 readability * improved CSS to e.g. make use of `last-child` instead of adding
 `last` classes during static site generation * removed _microblog_ entries
 from archive as I have more or less stopped using _Twitter_

---
 source/00_content/microblog.xml        |   1 -
 source/99_result/archive.xsl           |  38 ++----------
 source/99_result/article/article.xsl   |   4 +-
 source/99_result/category/category.xsl |  27 ++++-----
 source/99_result/main.css              |  98 +++++++++++++++----------------
 source/99_result/media/bottom.png      | Bin 1527 -> 0 bytes
 source/99_result/media/single.png      | Bin 263 -> 0 bytes
 source/99_result/media/top.png         | Bin 1481 -> 0 bytes
 source/99_result/page/page.xsl         |   2 +-
 source/99_result/stream.xsl            |  68 ++++++++++------------
 source/99_result/tag/tag.xsl           |  10 ++--
 utility/master.xsl                     | 102 ++++++++++++++++-----------------
 12 files changed, 155 insertions(+), 195 deletions(-)
 delete mode 100644 source/00_content/microblog.xml
 delete mode 100644 source/99_result/media/bottom.png
 delete mode 100644 source/99_result/media/single.png
 delete mode 100644 source/99_result/media/top.png

diff --git a/source/00_content/microblog.xml b/source/00_content/microblog.xml
deleted file mode 100644
index 43637da..0000000
--- a/source/00_content/microblog.xml
+++ /dev/null
@@ -1 +0,0 @@
-<tweets><item><id>507122629690785792</id><link>https://twitter.com/KnairdA/status/507122629690785792</link><text>@Laser_Ulm F-Droid f&#252;r Open-Source, Aptoide f&#252;r alles &#252;brige</text></item><item><id>506560061645529088</id><link>https://twitter.com/KnairdA/status/506560061645529088</link><text>Back in mainland Europe since this morning http://t.co/tLYukcrzaZ</text></item><item><id>500692433282158592</id><link>https://twitter.com/KnairdA/status/500692433282158592</link><text>Heute nach der F&#228;hrfahrt von Amsterdam nach New Castle in Schottland angekommen :) http://t.co/smo0t0r3M3</text></item><item><id>487710933163442176</id><link>https://twitter.com/KnairdA/status/487710933163442176</link><text>Blogged on mapping arrays using tuples in #Cpp11 http://t.co/vZMF4Y0o2W</text></item><item><id>482569735637594112</id><link>https://twitter.com/KnairdA/status/482569735637594112</link><text>Absurd wie Politik und Verleger-Lobby gerade versuchen #Google als den Ursprung alles B&#246;sen zu stilisieren.</text></item><item><id>481830601339961344</id><link>https://twitter.com/KnairdA/status/481830601339961344</link><text>#ArchLinux hat ja jetzt den #grsec Kernel im offiziellen Repository \o/</text></item><item><id>479351684440023042</id><link>https://twitter.com/KnairdA/status/479351684440023042</link><text>Bin den Rest der Woche auf dem Metalfest Loreley \o/</text></item><item><id>477036515827412992</id><link>https://twitter.com/KnairdA/status/477036515827412992</link><text>RT @DasDaz: Ab heute beginnen wieder die Durchwink-Wochen f&#252;r Gesetze in Deutschland! Ich bin so aufgeregt!1</text></item><item><id>476826069715419136</id><link>https://twitter.com/KnairdA/status/476826069715419136</link><text>@lifescientology Es handelt sich um ein Thinkpad x220 von Lenovo, gebraucht gekauft von Thinkspot</text></item><item><id>476737604583686144</id><link>https://twitter.com/KnairdA/status/476737604583686144</link><text>Gebrauchten Laptop gekauft, kleiner Defekt, Vor-Ort Support, Ergebnis: Neues Mainboard inkl. Prozessor und neue Tastatur; besser gehts nicht</text></item><item><id>474273025702244352</id><link>https://twitter.com/KnairdA/status/474273025702244352</link><text>Neuer Laptop: #Thinkpad #x220 mit um Welten besserer Performance als altes #t60p und endlich wieder FDE der SSD aber schlechterer Aufl&#246;sung.</text></item><item><id>452784486959570945</id><link>https://twitter.com/KnairdA/status/452784486959570945</link><text>@lifescientology Wirklich fertige Builds f&#252;r Ger&#228;te != Jolla gibt es nach meinem Stand noch nicht; Nexus 4 Port.: http://t.co/9fyyCdf5NC</text></item><item><id>452377596207308800</id><link>https://twitter.com/KnairdA/status/452377596207308800</link><text>Heute: Masters of Symphonic Metal Festival im #z7 #pratteln</text></item><item><id>450304890230046720</id><link>https://twitter.com/KnairdA/status/450304890230046720</link><text>Released a new version of my #OpenSource #Cpp library for working with structures contained within binary buffers: https://t.co/3Gd2i2bsgd</text></item><item><id>446686666083033090</id><link>https://twitter.com/KnairdA/status/446686666083033090</link><text>Je l&#228;nger ich das UI des #Jolla nutze, desto an&#173;ti&#173;quierter erscheinen mir #Android und #iOS</text></item><item><id>440183456065007616</id><link>https://twitter.com/KnairdA/status/440183456065007616</link><text>Traurig wie gerade die CDU, SPD und Gr&#252;nen ihre antidemokratische Haltung zeigen... #3prozent</text></item><item><id>435126511461359616</id><link>https://twitter.com/KnairdA/status/435126511461359616</link><text>You want a nice way of working with structures in raw binary buffers in #Cpp? Try this #OpenSource template library: https://t.co/doT12rl1AU</text></item><item><id>435125351963197440</id><link>https://twitter.com/KnairdA/status/435125351963197440</link><text>RT @gnuheidix: Mein #Jolla war eindeutig eine der besten Kaufentscheidungen, die ich je getroffen habe. :-) #fact</text></item><item><id>434333739200819200</id><link>https://twitter.com/KnairdA/status/434333739200819200</link><text>Zwei W&#246;rter die nicht zusammengeh&#246;ren: Deutsche Algorithmen</text></item><item><id>419967487753863168</id><link>https://twitter.com/KnairdA/status/419967487753863168</link><text>RT @KenRoth: A cartoon that helps Americans imagine #drones from the Yemeni perspective, by @MattBors http://t.co/4Gfp8RaWR9</text></item></tweets>
\ No newline at end of file
diff --git a/source/99_result/archive.xsl b/source/99_result/archive.xsl
index e00d892..2df82ab 100644
--- a/source/99_result/archive.xsl
+++ b/source/99_result/archive.xsl
@@ -10,36 +10,19 @@
 <xsl:variable name="meta">
 	<datasource type="main"    mode="full" source="02_meta/articles.xml"     target="articles"/>
 	<datasource type="support" mode="full" source="02_meta/meta.xml"         target="meta"/>
-	<datasource type="support" mode="full" source="00_content/microblog.xml" target="microblog"/>
 	<target     mode="plain"   value="archive/index.html"/>
 </xsl:variable>
 
 <xsl:template name="title-text">Archive</xsl:template>
 
-<xsl:template match="datasource">
-	<div class="archiv columns">
-		<xsl:apply-templates />
-	</div>
-</xsl:template>
-
 <xsl:template match="articles">
-	<div class="column">
-		<xsl:text>Past articles:</xsl:text>
-
-		<ol class="topline articlelist archivlist">
-			<xsl:apply-templates select="entry"/>
-		</ol>
-	</div>
-</xsl:template>
-
-<xsl:template match="microblog">
-	<div class="column">
-		<a href="https://twitter.com/KnairdA">Microblog:</a>
+	<h3>
+		<xsl:text>Past articles</xsl:text>
+	</h3>
 
-		<ul class="prettylist sparselist topline">
-			<xsl:apply-templates select="item[substring(text, 1, 1) != '@'][position() &lt;= 9]" />
-		</ul>
-	</div>
+	<ol class="articlelist archivlist">
+		<xsl:apply-templates select="entry"/>
+	</ol>
 </xsl:template>
 
 <xsl:template match="articles/entry">
@@ -57,13 +40,4 @@
 	</li>
 </xsl:template>
 
-<xsl:template match="microblog/item">
-	<li>
-		<em>»</em>
-		<a href="{link}">
-			<xsl:value-of select="text" disable-output-escaping="yes" />
-		</a>
-	</li>
-</xsl:template>
-
 </xsl:stylesheet>
diff --git a/source/99_result/article/article.xsl b/source/99_result/article/article.xsl
index d34df77..70c22a7 100644
--- a/source/99_result/article/article.xsl
+++ b/source/99_result/article/article.xsl
@@ -48,7 +48,9 @@
 		<xsl:apply-templates select="content/node()" mode="xhtml"/>
 	</div>
 
-	<div id="isso-thread"></div>
+	<div id="isso-thread">
+		<xsl:text> </xsl:text>
+	</div>
 
 	<script type="text/javascript" src="/comments/js/embed.min.js" data-isso-avatar="false" data-isso-vote="false" data-isso-css="false">
 		<xsl:text> </xsl:text>
diff --git a/source/99_result/category/category.xsl b/source/99_result/category/category.xsl
index e0532aa..adbf98b 100644
--- a/source/99_result/category/category.xsl
+++ b/source/99_result/category/category.xsl
@@ -20,25 +20,14 @@
 	<xsl:value-of select="/datasource/category/entry/@handle"/>
 </xsl:template>
 
-<xsl:template match="entry/page">
-	<li>
-		<em>»</em>
-		<a href="/page/{@handle}">
-			<strong><xsl:value-of select="title"/></strong>
-			<p>
-				<xsl:apply-templates select="digest/node()" mode="xhtml"/>
-			</p>
-		</a>
-	</li>
-</xsl:template>
-
 <xsl:template match="category/entry">
 	<h3>
 		<xsl:text>All pages categorized as &#187;</xsl:text>
 		<xsl:value-of select="@handle"/>
 		<xsl:text>&#171;</xsl:text>
 	</h3>
-	<div class="archiv columns">
+
+	<div class="columns">
 		<ul class="prettylist">
 			<xsl:apply-templates select="page">
 				<xsl:sort select="digest/@size" data-type="number" order="descending"/>
@@ -47,4 +36,16 @@
 	</div>
 </xsl:template>
 
+<xsl:template match="entry/page">
+	<li>
+		<em>»</em>
+		<a href="/page/{@handle}">
+			<strong><xsl:value-of select="title"/></strong>
+			<p>
+				<xsl:apply-templates select="digest/node()" mode="xhtml"/>
+			</p>
+		</a>
+	</li>
+</xsl:template>
+
 </xsl:stylesheet>
diff --git a/source/99_result/main.css b/source/99_result/main.css
index 239a260..9d5977f 100644
--- a/source/99_result/main.css
+++ b/source/99_result/main.css
@@ -1,40 +1,41 @@
-body{margin:0;padding:0;font:1em Droid Sans,sans-serif,Verdana,Arial,FreeSans;color:#272828;word-wrap:break-word}
-p{margin:0;line-height:1.5em}
+body{margin:0;padding:0;font:1em Droid Sans,sans-serif;color:#272828;word-wrap:break-word}
+a, a:visited{color:#272822}
+p{margin:0;line-height:1.75em}
 ul{margin:0;padding:0;list-style:none}
 blockquote{border-left:.4em solid #e3e8e8;margin-left:0;padding-left:1em}
 pre{padding:1em;border-radius:.75em;color:#f8f8f2;background:#272822;white-space:pre-wrap}
 code{margin:0 .1em;padding:0 .5em;border:.1em solid #e3e8e8;background-color:#f8f8f8;border-radius:.3em}
-#wrapper{width:870px;margin:2em auto;background:url(media/top.png) no-repeat top center,url(media/bottom.png) no-repeat bottom center,url(media/single.png) repeat top center}
-#content{width:720px;margin:0 auto;padding-top:70px;padding-bottom:70px}
-#navigation{overflow:hidden;border-bottom:.3em solid #e3e8e8;padding:.1em 0}
-#navigation h1{color:#F80;font-size:1.2em;font-weight:normal;float:left;padding:0 .2em 0 0;margin:0}
-#navigation ul{float:right}
-#main{overflow:hidden}
-#main .article{border-bottom:.3em dotted #e3e8e8;padding-bottom:.5em;margin-top:1em;text-align:justify}
-#main .last{border:none}
-#main p{margin-bottom:.7em;text-align:justify}
-#main h2{font-size:1.4em;margin:0;color:#F80}
-#main h2 a{font-size:.8em;text-decoration:none !important;color:#272828;font-weight:normal;display:inline-block;vertical-align:middle;max-width:95%}
-#main h2 a:hover{text-decoration:underline !important}
-#main h3, #main h4{font-size:1.05em;font-weight:normal;padding-bottom:.2em;margin-bottom:.5em;border-bottom:.1em solid #e3e8e8}
-#main .article a{text-decoration:underline;color:#272828}
-#main .article a:hover{color:black}
-#main .article ul{float:none;margin-left:2em;text-align:left}
-#main .article ul li{list-style-type:circle;float:none}
-#main .article ul li a{background:0}
-#main .article .info{font-size:.8em;margin-bottom:.5em;margin-left:1.5em}
-#main .article .info a{text-decoration:none;color:#272828}
-#main .article .info a:hover{text-decoration:underline}
-#main .article table{border-collapse:collapse;border-left:.4em solid #e3e8e8;margin:1em}
-#main .article table thead{border-bottom:.1em solid #272828}
-#main .article table tr{border-bottom:.1em solid #272828}
-#main .article table tr:last-child{border-bottom:0}
-#main .article table tr th{font-weight:normal;padding:.2em 1em}
-#main .article table tr td{padding:.2em 1em}
-#main .footnotes {border-top:.3em dotted #e3e8e8}
-#main img{padding:.2em;border:.1em solid #e3e8e8;display:block;margin-left:auto;margin-right:auto}
-#main img.full{max-width:100%}
-#main img.clear{border:0}
+.full{width:100%}
+.center{width:45em;margin:0 auto;overflow:hidden}
+.border_bottom{border-bottom:.3em solid #e3e8e8}
+.border_top{border-top:.3em solid #e3e8e8}
+#navigation{padding:2em 0 0 0}
+#navigation h1{color:#F80;font-size:1.4em;font-weight:normal;float:left;padding:0 .2em 0 0;margin:0}
+#navigation ul{float:right;font-size:1.1em}
+#content p{margin-bottom:.7em;text-align:justify}
+#content h2{font-size:1.4em;margin:0;color:#F80}
+#content h2 a, h2 span{font-size:.8em;text-decoration:none !important;color:#272828;font-weight:normal;display:inline-block;vertical-align:middle;max-width:95%}
+#content h2 a:hover{text-decoration:underline !important}
+#content h3, #content h4{font-size:1.05em;font-weight:normal;padding-bottom:.2em;margin-bottom:.5em;border-bottom:.1em solid #e3e8e8}
+#content .article{border-bottom:.3em dotted #e3e8e8;padding-bottom:.5em;margin-top:1em;text-align:justify}
+#content .article:last-child{border:none}
+#content .article a{text-decoration:underline;color:#272828}
+#content .article a:hover{color:black}
+#content .article ul{float:none;margin-left:2em;text-align:left}
+#content .article ul li{list-style-type:circle;float:none}
+#content .article ul li a{background:0}
+#content .article .info{font-size:.9em;margin-bottom:.5em;margin-left:1.4em}
+#content .article .info a{text-decoration:none;color:#272828}
+#content .article .info a:hover{text-decoration:underline}
+#content .article table{border-collapse:collapse;border-left:.4em solid #e3e8e8;margin:1em}
+#content .article table thead{border-bottom:.1em solid #272828}
+#content .article table tr{border-bottom:.1em solid #272828}
+#content .article table tr:last-child{border-bottom:0}
+#content .article table tr th{font-weight:normal;padding:.2em 1em}
+#content .article table tr td{padding:.2em 1em}
+#content .footnotes {border-top:.3em dotted #e3e8e8}
+#content img{padding:.2em;border:.1em solid #e3e8e8;display:block;margin-left:auto;margin-right:auto;max-width:100%}
+#content img.clear{border:0}
 #pagination{height:1.5em;margin-top:.5em}
 #pagination span.disabled{display:none}
 #pagination span a{text-decoration:none;color:#272828}
@@ -43,7 +44,7 @@ code{margin:0 .1em;padding:0 .5em;border:.1em solid #e3e8e8;background-color:#f8
 #pagination span a.pagination-next{float:right}
 #tags{overflow:hidden;border-top:.3em solid #e3e8e8;padding:.2em 0 0 0}
 #tags li:first-child {margin-left:0}
-#footer{border-top:.3em solid #e3e8e8;height:1.5em;padding-top:.3em}
+#footer{padding-top:.3em}
 #footer a{text-decoration:none;color:#272828}
 #footer a:hover{text-decoration:underline}
 #footer ul{float:right;padding:0}
@@ -68,11 +69,7 @@ code{margin:0 .1em;padding:0 .5em;border:.1em solid #e3e8e8;background-color:#f8
 #isso-root .isso-comment-footer .edit{display:none}
 #isso-root .isso-comment-footer .downvote{display:none}
 #isso-root .isso-comment-footer .upvote{display:none}
-.archiv{margin-top:1em}
-.topline{margin-top:.2em;border-top:.1em solid #e3e8e8}
 .columns{column-count:2;-moz-column-count:2;-webkit-column-count:2;column-gap:1em;-moz-column-gap:1em;-webkit-column-gap:1em}
-.columns a{color:#272828;text-decoration:none}
-.columns a:hover{text-decoration:underline}
 .column{-webkit-column-break-inside:avoid;break-inside:avoid-column;overflow:hidden}
 .buttonlist{overflow:hidden}
 .buttonlist li{float:left;background:#e3e8e8;border-radius:.3em;padding:.2em;margin:0 0 .2em .2em}
@@ -80,31 +77,26 @@ code{margin:0 .1em;padding:0 .5em;border:.1em solid #e3e8e8;background-color:#f8
 .buttonlist li a:hover{text-decoration:underline}
 .articlelist {padding:.3em;list-style:none}
 .articlelist li{background:#e3e8e8;border-radius:.3em;margin:.2em;padding:.2em}
-.articlelist li a{color:#272828;text-decoration:none}
+.articlelist li a{text-decoration:none}
 .articlelist li a:hover{text-decoration:underline}
-.archivlist li{background:0;padding-left:1em;font-size:.8em}
+.archivlist li{background:0;padding-left:1em}
 .archivlist li.dateitem{padding:0;font-weight:bold}
-.sparselist li{padding:.5em}
 .prettylist li{display:inline-block;padding:.5em 0}
-.prettylist li a{margin-left:.2em}
+.prettylist li a{margin-left:.2em;color:#272828;text-decoration:none}
+.prettylist li a:hover{text-decoration:underline}
 .prettylist li p{margin:0 !important}
 .prettylist li em{font-style:normal;font-size:1.4em;color:#F80}
 .commentlist ol{margin-top:.2em;border-top:.1em solid #e3e8e8}
 .commentlist ol li{background:0;font-size:.8em}
 .commentlist ol li.dateitem{padding:0;font-weight:bold}
-
-@media screen and (max-width:870px){
-	#wrapper{width:100%;margin:0;background:0}
-	#content{margin:.3em auto;padding:0}
-}
-@media screen and (max-width:725px){
-	#content{width:98%}
-	#main img{width:98%}
-	#main .article h2 a{max-width:90%}
+@media screen and (max-width:46em){
+	#content .article h2 a{max-width:90%}
+	#navigation{padding:.3em 0 0 0}
+	.center{width:98%}
 	.columns{column-count:1;-moz-column-count:1;-webkit-column-count:1}
-	.columns .column{width:100%}
+	.column{width:100%}
 }
-@media screen and (max-width:429px){
+@media screen and (max-width:30em){
 	#navigation h1{float:none}
 	#navigation ul{float:none}
 }
diff --git a/source/99_result/media/bottom.png b/source/99_result/media/bottom.png
deleted file mode 100644
index ff2afa7..0000000
Binary files a/source/99_result/media/bottom.png and /dev/null differ
diff --git a/source/99_result/media/single.png b/source/99_result/media/single.png
deleted file mode 100644
index 514d39a..0000000
Binary files a/source/99_result/media/single.png and /dev/null differ
diff --git a/source/99_result/media/top.png b/source/99_result/media/top.png
deleted file mode 100644
index ca71f84..0000000
Binary files a/source/99_result/media/top.png and /dev/null differ
diff --git a/source/99_result/page/page.xsl b/source/99_result/page/page.xsl
index 5e29cdb..672e7d8 100644
--- a/source/99_result/page/page.xsl
+++ b/source/99_result/page/page.xsl
@@ -19,7 +19,7 @@
 </xsl:template>
 
 <xsl:template match="page/entry">
-	<div class="last article">
+	<div class="article">
 		<h2>
 			<xsl:text>» </xsl:text>
 			<a href="/page/{@handle}">
diff --git a/source/99_result/stream.xsl b/source/99_result/stream.xsl
index d71b094..5469ff4 100644
--- a/source/99_result/stream.xsl
+++ b/source/99_result/stream.xsl
@@ -28,6 +28,37 @@
 	</xsl:choose>
 </xsl:template>
 
+<xsl:template match="page/entry">
+	<div>
+		<xsl:apply-templates select="article"/>
+	</div>
+
+	<div id="pagination">
+		<xsl:if test="@index > 0">
+			<span>
+				<a class="pagination-previous" href="/{@index - 1}">
+					<xsl:text>« newer</xsl:text>
+				</a>
+			</span>
+		</xsl:if>
+		<xsl:if test="@index &lt; @total - 1">
+			<span>
+				<a class="pagination-next" href="/{@index + 1}">
+					<xsl:text>older »</xsl:text>
+				</a>
+			</span>
+		</xsl:if>
+	</div>
+</xsl:template>
+
+<xsl:template match="entry/article">
+	<xsl:variable name="handle" select="@handle"/>
+
+	<div class="article">
+		<xsl:apply-templates select="$root/articles/entry[@handle = $handle]" mode="resolve"/>
+	</div>
+</xsl:template>
+
 <xsl:template match="articles/entry" mode="resolve">
 	<h2>
 		<xsl:text>» </xsl:text>
@@ -54,42 +85,5 @@
 	<xsl:apply-templates select="content/node()" mode="xhtml"/>
 </xsl:template>
 
-<xsl:template match="page/entry">
-	<xsl:apply-templates />
-
-	<div id="pagination">
-		<xsl:if test="@index > 0">
-			<span>
-				<a class="pagination-previous" href="/{@index - 1}">
-					<xsl:text>« newer</xsl:text>
-				</a>
-			</span>
-		</xsl:if>
-		<xsl:if test="@index &lt; @total - 1">
-			<span>
-				<a class="pagination-next" href="/{@index + 1}">
-					<xsl:text>older »</xsl:text>
-				</a>
-			</span>
-		</xsl:if>
-	</div>
-</xsl:template>
-
-<xsl:template match="page/entry/article">
-	<xsl:variable name="handle" select="@handle"/>
-
-	<xsl:choose>
-		<xsl:when test="position() = last()">
-			<div class="last article">
-				<xsl:apply-templates select="$root/articles/entry[@handle = $handle]" mode="resolve"/>
-			</div>
-		</xsl:when>
-		<xsl:otherwise>
-			<div class="article">
-				<xsl:apply-templates select="$root/articles/entry[@handle = $handle]" mode="resolve"/>
-			</div>
-		</xsl:otherwise>
-	</xsl:choose>
-</xsl:template>
 
 </xsl:stylesheet>
diff --git a/source/99_result/tag/tag.xsl b/source/99_result/tag/tag.xsl
index 39469f7..7162b64 100644
--- a/source/99_result/tag/tag.xsl
+++ b/source/99_result/tag/tag.xsl
@@ -18,15 +18,15 @@
 </xsl:template>
 
 <xsl:template match="tag/entry">
-	<div class="archiv">
+	<h3>
 		<xsl:text>All articles tagged as &#187;</xsl:text>
 		<xsl:value-of select="@handle"/>
 		<xsl:text>&#171;</xsl:text>
+	</h3>
 
-		<ol class="topline articlelist archivlist">
-			<xsl:apply-templates />
-		</ol>
-	</div>
+	<ol class="articlelist archivlist">
+		<xsl:apply-templates />
+	</ol>
 </xsl:template>
 
 <xsl:template match="tag/entry/article">
diff --git a/utility/master.xsl b/utility/master.xsl
index f805df5..0fc400e 100644
--- a/utility/master.xsl
+++ b/utility/master.xsl
@@ -16,14 +16,6 @@
 
 <xsl:variable name="root" select="datasource"/>
 
-<xsl:template match="meta/tags/entry" mode="master">
-	<li>
-		<a href="/tag/{@handle}">
-			<xsl:value-of select="@handle"/>
-		</a>
-	</li>
-</xsl:template>
-
 <xsl:template match="/">
 <html>
 <head>
@@ -41,60 +33,66 @@
 	</title>
 </head>
 <body>
-	<div id="wrapper">
-		<div id="content">
-			<div id="navigation">
-				<h1>
-					<xsl:value-of select="$root/meta/title"/>
-				</h1>
+	<div id="header" class="full border_bottom">
+		<div id="navigation" class="center">
+			<h1>
+				<xsl:value-of select="$root/meta/title"/>
+			</h1>
 
-				<ul class="buttonlist">
-					<li>
-						<a href="/0">Start</a>
-					</li>
-					<li>
-						<a href="/archive">Archive</a>
-					</li>
-					<li>
-						<a href="/category/projects">Projects</a>
-					</li>
-					<li>
-						<a href="/page/contact">Contact</a>
-					</li>
-					<li>
-						<a href="/atom.xml">Feed</a>
-					</li>
-				</ul>
-			</div>
+			<ul class="buttonlist">
+				<li>
+					<a href="/0">Start</a>
+				</li>
+				<li>
+					<a href="/archive">Archive</a>
+				</li>
+				<li>
+					<a href="/category/projects">Projects</a>
+				</li>
+				<li>
+					<a href="/page/contact">Contact</a>
+				</li>
+				<li>
+					<a href="/atom.xml">Feed</a>
+				</li>
+			</ul>
+		</div>
+	</div>
 
-			<div id="main">
-				<xsl:apply-templates />
-			</div>
+	<div id="content" class="center">
+		<xsl:apply-templates />
+	</div>
 
-			<div id="tags">
-				<ul class="buttonlist">
-					<xsl:apply-templates select="datasource/meta/tags/entry" mode="master"/>
-				</ul>
-			</div>
+	<div id="tags" class="center border_top border_bottom">
+		<ul class="buttonlist">
+			<xsl:apply-templates select="datasource/meta/tags/entry" mode="master"/>
+		</ul>
+	</div>
 
-			<div id="footer">
-				<a href="/page/static_xslt/">Made with XSLT</a>
+	<div id="footer" class="center">
+		<a href="/page/static_xslt/">Made with XSLT</a>
 
-				<ul class="buttonlist">
-					<li>
-						<a href="/page/contact">Contact</a>
-					</li>
-					<li>
-						<a href="/atom.xml">Feed</a>
-					</li>
-				</ul>
-			</div>
-		</div>
+		<ul class="buttonlist">
+			<li>
+				<a href="/page/contact">Contact</a>
+			</li>
+			<li>
+				<a href="/atom.xml">Feed</a>
+			</li>
+		</ul>
 	</div>
 </body>
 </html>
 </xsl:template>
 
+<xsl:template match="meta/tags/entry" mode="master">
+	<li>
+		<a href="/tag/{@handle}">
+			<xsl:value-of select="@handle"/>
+		</a>
+	</li>
+</xsl:template>
+
 <xsl:template match="text()|@*"/>
 
 </xsl:stylesheet>
-- 
cgit v1.2.3