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_

1 files changed, 45 insertions, 53 deletions

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}
 }