Pull in some nice fonts

i.e. Oswald for titles and Vollkorn for text.

Including some markup changes to accomodate them.
New approach to aligning article-info to title should work independently of the selected font.

4 files changed, 43 insertions, 26 deletions

diff --git a/source/99_result/article/article.xsl b/source/99_result/article/article.xsl
index a9601a8..5d5013d 100644
--- a/source/99_result/article/article.xsl
+++ b/source/99_result/article/article.xsl
@@ -29,19 +29,26 @@
 		</h2>
 
 		<p class="info">
-			<xsl:call-template name="format-date">
-				<xsl:with-param name="date" select="date/full"/>
-				<xsl:with-param name="format" select="'M x, Y'"/>
-			</xsl:call-template>
-			<xsl:text> | </xsl:text>
+			<span class="spacer">
+				<xsl:text>» </xsl:text>
+			</span>
+			<span class="text">
+				<xsl:call-template name="format-date">
+					<xsl:with-param name="date" select="date/full"/>
+					<xsl:with-param name="format" select="'M x, Y'"/>
+				</xsl:call-template>
+				<xsl:text> | </xsl:text>
+			</span>
 			<xsl:for-each select="tags/tag">
 				<a href="/tag/{.}">
 					<xsl:value-of select="."/>
 				</a>
 				<xsl:text> </xsl:text>
 			</xsl:for-each>
-			<xsl:text> | </xsl:text>
-			<xsl:value-of select="$root/meta/author"/>
+			<span class="text">
+				<xsl:text> | </xsl:text>
+				<xsl:value-of select="$root/meta/author"/>
+			</span>
 		</p>
 
 		<xsl:apply-templates select="content/node()" mode="xhtml"/>
diff --git a/source/99_result/main.css b/source/99_result/main.css
index e5b0d20..74d926c 100644
--- a/source/99_result/main.css
+++ b/source/99_result/main.css
@@ -1,4 +1,7 @@
-body{margin:0;padding:0;font:1em sans-serif;color:#272828;word-wrap:break-word}
+@font-face{font-family:'Vollkorn';font-style:normal;src:local('Vollkorn Regular'), local('Vollkorn-Regular'), url(https://static.kummerlaender.eu/font/Vollkorn-Regular.woff2) format('woff2'), url(https://static.kummerlaender.eu/font/Vollkorn-Regular.woff) format('woff'), url(https://static.kummerlaender.eu/font/Vollkorn-Regular.ttf) format('truetype')}
+@font-face{font-family:'Vollkorn';font-style:italic;src:local('Vollkorn Italic'), local('Vollkorn-Italic'), url(https://static.kummerlaender.eu/font/Vollkorn-Italic.woff2) format('woff2'), url(https://static.kummerlaender.eu/font/Vollkorn-Italic.woff) format('woff'), url(https://static.kummerlaender.eu/font/Vollkorn-Italic.ttf) format('truetype')}
+@font-face{font-family:'Oswald Regular';font-style:normal;src:local('Oswald Regular'), url(https://static.kummerlaender.eu/font/Oswald-Regular.woff2) format('woff2'), url(https://static.kummerlaender.eu/font/Oswald-Regular.woff) format('woff'), url(https://static.kummerlaender.eu/font/Oswald-Regular.ttf) format('truetype')}
+body{margin:0;padding:0;font-size:1.1em;font-family:'Vollkorn',sans-serif;color:#272828;word-wrap:break-word}
 a, a:visited{text-decoration:underline;color:#272828}
 a:hover{color:black}
 a.more{font-family:"Segoe UI Symbol",sons-serif}/*edge workaround*/
@@ -15,14 +18,14 @@ sub{vertical-align:baseline;position:relative;top:0.4em}
 .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{padding:2em 0 0 0;font-family:'Oswald Regular',sans-serif}
 #navigation h1{color:#F80;font-size:1.4em;font-weight:bold;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{font-family:'Oswald Regular',sans-serif;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:.8em 0 .5em 0;border-bottom:.1em solid #e3e8e8}
+#content h3, #content h4{font-size:1.05em;font-family:'Oswald Regular',sans-serif;font-weight:normal;padding-bottom:.2em;margin:.8em 0 .5em 0;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}
@@ -30,8 +33,10 @@ sub{vertical-align:baseline;position:relative;top:0.4em}
 #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{font-family:'Oswald Regular',sans-serif;margin:-.4em 0 .4em 0}
+#content .article .info .spacer{font-size:1.4em;font-weight:bold;visibility:hidden}
+#content .article .info .text{font-size:0.9em}
+#content .article .info a{font-size:.9em;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}
@@ -44,15 +49,15 @@ sub{vertical-align:baseline;position:relative;top:0.4em}
 #content img.clear{border:0;max-width:100%}
 #content p.math{padding:0.5em;line-height:0;text-align:center}
 #content span.math{line-height:0}
-#pagination{height:1.5em;margin-top:.5em}
+#pagination{font-family:'Oswald Regular',sans-serif;height:1.5em;margin-top:.5em}
 #pagination span.disabled{display:none}
 #pagination span a{text-decoration:none;color:#272828}
 #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;padding:.2em 0 0 0}
+#tags{overflow:hidden;border-top:.3em solid #e3e8e8;padding:.2em 0 0 0;font-family:'Oswald Regular',sans-serif}
 #tags li:first-child {margin-left:0}
-#footer{padding-top:.3em}
+#footer{padding-top:.3em;font-family:'Oswald Regular',sans-serif}
 #footer a{text-decoration:none;color:#272828}
 #footer a:hover{text-decoration:underline}
 #footer ul{float:right;padding:0}
@@ -68,7 +73,7 @@ sub{vertical-align:baseline;position:relative;top:0.4em}
 .articlelist li a:hover{text-decoration:underline}
 .archivlist li{background:0;padding-left:1em}
 .archivlist li.dateitem{padding:0;font-weight:bold}
-.menuhead{border-bottom:0.1em solid #e3e8e8;overflow:hidden;padding:0;margin-top:0.8em}
+.menuhead{font-family:'Oswald Regular',sans-serif;border-bottom:0.1em solid #e3e8e8;overflow:hidden;padding:0;margin-top:0.8em}
 .menuhead h3{float:left;padding:0.4em 0 0 0;margin:0 !important;border:none !important}
 .menuhead ul{float:right;padding:0;font-size:1.1em}
 @media screen and (max-width:46em){
diff --git a/source/99_result/start.xsl b/source/99_result/start.xsl
index bbb44b7..3a9aad6 100644
--- a/source/99_result/start.xsl
+++ b/source/99_result/start.xsl
@@ -49,19 +49,26 @@
 	</h2>
 
 	<p class="info">
-		<xsl:call-template name="format-date">
-			<xsl:with-param name="date" select="date/full"/>
-			<xsl:with-param name="format" select="'M x, Y'"/>
-		</xsl:call-template>
-		<xsl:text> | </xsl:text>
+		<span class="spacer">
+			<xsl:text>» </xsl:text>
+		</span>
+		<span class="text">
+			<xsl:call-template name="format-date">
+				<xsl:with-param name="date" select="date/full"/>
+				<xsl:with-param name="format" select="'M x, Y'"/>
+			</xsl:call-template>
+			<xsl:text> | </xsl:text>
+		</span>
 		<xsl:for-each select="tags/tag">
 			<a href="/tag/{.}">
 				<xsl:value-of select="."/>
 			</a>
 			<xsl:text> </xsl:text>
 		</xsl:for-each>
-		<xsl:text> | </xsl:text>
-		<xsl:value-of select="$root/meta/author"/>
+		<span class="text">
+			<xsl:text> | </xsl:text>
+			<xsl:value-of select="$root/meta/author"/>
+		</span>
 	</p>
 
 	<p>
diff --git a/source/99_result/tag/tag.xsl b/source/99_result/tag/tag.xsl
index 7162b64..67370cc 100644
--- a/source/99_result/tag/tag.xsl
+++ b/source/99_result/tag/tag.xsl
@@ -31,8 +31,6 @@
 
 <xsl:template match="tag/entry/article">
 	<li>
-		<xsl:value-of select="date"/>
-		<xsl:text> » </xsl:text>
 		<a href="/article/{@handle}">
 			<xsl:value-of select="title"/>
 		</a>