Improved navigation on small screens

* extracted navigation and tag list style into `buttonlist` class
* navigation is now aligned left and non-overlapping on small screens

5 files changed, 35 insertions, 29 deletions

diff --git a/source/01_data/tags.xsl b/source/01_data/tags.xsl
index 25b12b8..51bbf24 100644
--- a/source/01_data/tags.xsl
+++ b/source/01_data/tags.xsl
@@ -8,7 +8,7 @@
 
 <xsl:variable name="meta">
 	<datasource type="main"  mode="xpath" source="$source_tree/directory[@name = '00_content']/directory" target="files"/>
-	<target     mode="plain" value="tags.xml"/> 
+	<target     mode="plain" value="tags.xml"/>
 </xsl:variable>
 
 <xsl:template match="files/directory[@name = 'tags']/directory">
diff --git a/source/99_result/archive.xsl b/source/99_result/archive.xsl
index 8ef7d9a..e00d892 100644
--- a/source/99_result/archive.xsl
+++ b/source/99_result/archive.xsl
@@ -23,10 +23,10 @@
 </xsl:template>
 
 <xsl:template match="articles">
-	<div class="column articlelist archivlist">
+	<div class="column">
 		<xsl:text>Past articles:</xsl:text>
 
-		<ol class="topline">
+		<ol class="topline articlelist archivlist">
 			<xsl:apply-templates select="entry"/>
 		</ol>
 	</div>
diff --git a/source/99_result/main.css b/source/99_result/main.css
index 4d64279..239a260 100644
--- a/source/99_result/main.css
+++ b/source/99_result/main.css
@@ -1,17 +1,14 @@
 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}
 ul{margin:0;padding:0;list-style:none}
-ul li{float:left;padding:0 0 0 .2em}
-ul li a{text-decoration:none;color:#272828;background:#e3e8e8;border-radius:.3em;padding:.2em}
-ul li a:hover{text-decoration:underline}
 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-bottom:.1em}
-#navigation ul{float:right;padding:.4em 0}
-#navigation h1{color:#F80;font-size:1.2em;font-weight:normal;float:left;padding:.2em;padding-left:0;margin:0}
+#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}
@@ -44,13 +41,12 @@ code{margin:0 .1em;padding:0 .5em;border:.1em solid #e3e8e8;background-color:#f8
 #pagination span a:hover{text-decoration:underline}
 #pagination span a.pagination-previous{float:left}
 #pagination span a.pagination-next{float:right}
-#tags{overflow:hidden;border-top:.3em solid #e3e8e8}
-#tags ul{padding:.2em;float:none;overflow:hidden}
-#tags ul li{margin:.2em 0 .2em 0;padding:.2em}
+#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 a{text-decoration:none;color:#272828}
 #footer a:hover{text-decoration:underline}
-#footer ul{margin-top:-0.2em;float:right;padding:.4em 0}
+#footer ul{float:right;padding:0}
 #isso-thread{margin-top:1em;font-size:.95em}
 #isso-thread h4{font-weight:normal;font-size:1.25em;margin:0;border:none}
 #isso-thread .form-wrapper{padding:1em;overflow:hidden}
@@ -78,27 +74,37 @@ code{margin:0 .1em;padding:0 .5em;border:.1em solid #e3e8e8;background-color:#f8
 .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}
-.articlelist ol{padding:.3em;list-style:none}
-.articlelist ol li{background:#e3e8e8;border-radius:.3em;margin:.2em;padding:.2em}
-.articlelist ol li a{color:#272828;text-decoration:none}
-.articlelist ol li a:hover{text-decoration:underline}
-.archivlist ol li{background:0;padding-left:1em;font-size:.8em}
-.archivlist ol li.dateitem{padding:0;font-weight:bold}
+.buttonlist{overflow:hidden}
+.buttonlist li{float:left;background:#e3e8e8;border-radius:.3em;padding:.2em;margin:0 0 .2em .2em}
+.buttonlist li a{text-decoration:none;color:#272828;}
+.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:hover{text-decoration:underline}
+.archivlist li{background:0;padding-left:1em;font-size:.8em}
+.archivlist li.dateitem{padding:0;font-weight:bold}
 .sparselist li{padding:.5em}
-.prettylist li{float:none;display:inline-block}
-.prettylist li a{background:0}
+.prettylist li{display:inline-block;padding:.5em 0}
+.prettylist li a{margin-left:.2em}
 .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:0 auto;padding:0}
+@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%}
+@media screen and (max-width:725px){
+	#content{width:98%}
 	#main img{width:98%}
 	#main .article h2 a{max-width:90%}
 	.columns{column-count:1;-moz-column-count:1;-webkit-column-count:1}
 	.columns .column{width:100%}
 }
+@media screen and (max-width:429px){
+	#navigation h1{float:none}
+	#navigation ul{float:none}
+}
diff --git a/source/99_result/tag/tag.xsl b/source/99_result/tag/tag.xsl
index 7043c1b..39469f7 100644
--- a/source/99_result/tag/tag.xsl
+++ b/source/99_result/tag/tag.xsl
@@ -18,12 +18,12 @@
 </xsl:template>
 
 <xsl:template match="tag/entry">
-	<div class="archiv articlelist archivlist">
+	<div class="archiv">
 		<xsl:text>All articles tagged as &#187;</xsl:text>
 		<xsl:value-of select="@handle"/>
 		<xsl:text>&#171;</xsl:text>
 
-		<ol class="topline">
+		<ol class="topline articlelist archivlist">
 			<xsl:apply-templates />
 		</ol>
 	</div>
diff --git a/utility/master.xsl b/utility/master.xsl
index cb9e025..f805df5 100644
--- a/utility/master.xsl
+++ b/utility/master.xsl
@@ -48,7 +48,7 @@
 					<xsl:value-of select="$root/meta/title"/>
 				</h1>
 
-				<ul>
+				<ul class="buttonlist">
 					<li>
 						<a href="/0">Start</a>
 					</li>
@@ -72,7 +72,7 @@
 			</div>
 
 			<div id="tags">
-				<ul>
+				<ul class="buttonlist">
 					<xsl:apply-templates select="datasource/meta/tags/entry" mode="master"/>
 				</ul>
 			</div>
@@ -80,7 +80,7 @@
 			<div id="footer">
 				<a href="/page/static_xslt/">Made with XSLT</a>
 
-				<ul>
+				<ul class="buttonlist">
 					<li>
 						<a href="/page/contact">Contact</a>
 					</li>