Port CSS fixes

2 files changed, 46 insertions, 31 deletions

diff --git a/source/99_result/main.css b/source/99_result/main.css
index 67205ba..5b907a4 100644
--- a/source/99_result/main.css
+++ b/source/99_result/main.css
@@ -1,38 +1,53 @@
-@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{font-size:1.1em;font-family:'Vollkorn',sans-serif;color:#272828}
-a{text-decoration:underline;color:#272828}
-a:hover{color:black}
-a.more{font-family:'Segoe UI Symbol',sans-serif}/*edge workaround*/
-h1, h2{font-family:'Oswald Regular',sans-serif;margin:0;color:#272828;font-weight:bold}
+@font-face{font-family:'Vollkorn';font-style:normal;font-weight:normal;src:local('Vollkorn'), 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;font-weight:normal;src:local('Vollkorn'), 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';font-style:normal;font-weight:normal;src:local('Oswald'), 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')}
+@font-face{font-family:'Oswald';font-style:normal;font-weight:bold;src:local('Oswald'), url(https://static.kummerlaender.eu/font/Oswald-Bold.woff2) format('woff2'), url(https://static.kummerlaender.eu/font/Oswald-Bold.woff) format('woff'), url(https://static.kummerlaender.eu/font/Oswald-Bold.ttf) format('truetype')}
+
+body{margin:0;padding:0;font:normal 1.1em 'Vollkorn',sans-serif;color:#272828;word-wrap:break-word}
+a, a:visited{text-decoration:underline;color:#272828}
+a:hover{color:black;text-decoration:underline !important}
+a.more{font:normal 1em 'Segoe UI Symbol','Oswald',sans-serif}/*edge workaround*/
+a.footnote-ref{text-decoration:none}
+h1, h2, h3, h4{font-family:'Oswald',sans-serif;font-weight:normal;margin:0;color:#272828}
+h1{font-weight:bold}
 h1 a, h2 a{text-decoration:none}
-h3{font-size:1.2em;font-family:'Oswald Regular',sans-serif;color:#F80;font-weight:bold;margin-bottom:.2em;border-bottom:.1em solid #e3e8e8}
-h3 span{font-size:0.9em;color:#272828;font-weight:normal}
+h3{font-size:1.1em;margin:1em 0 .2em 0;border-bottom:.1em solid #e3e8e8}
+h3 .arrow{font:bold 1.3em 'Oswald',sans-serif;color:#F80}
 h3 a{text-decoration:none}
 p{margin:0 0 .5em 0;text-align:justify;line-height:1.75em}
-ul{margin:0;overflow:hidden}
+ul{margin:0;overflow:hidden;margin-bottom:.5em}
 ul li{list-style-type:circle;line-height:1.5em}
-code{margin:0 .1em;padding:0 .5em;border:.1em solid #e3e8e8;background-color:#f8f8f8;border-radius:.3em}
-pre{padding:1em;border-radius:.75em;color:#f8f8f2;background:#272822;white-space:pre-wrap}
-sup{vertical-align:baseline;position:relative;top:-0.4em}
+blockquote{border-left:.4em solid #e3e8e8;margin-left:0;padding-left:1em}
+pre{font-family:monospace;padding:1em;border-radius:.75em;color:#f8f8f2;background:#272822;white-space:pre-wrap}
+code{font-family:monospace;margin:0 .1em;padding:0 .5em;border:.1em solid #e3e8e8;background-color:#f8f8f8;border-radius:.3em}
+sup{vertical-align:baseline;position:relative;top:-0.6em}
 sub{vertical-align:baseline;position:relative;top:0.4em}
+
 #content{max-width:45em;margin:auto}
 #introduction{margin-top:1.5em;overflow:hidden}
 #introduction img{border-radius:0.5em;margin-right:1.5em;float:left;width:12em;height:12em}
 #introduction p{width:31.5em;float:right}
-#introduction .greeting{font-family:'Oswald Regular',sans-serif;font-size:1.3em;font-weight:bold;float:left;margin-right:0.5em}
-.info{font-family:'Oswald Regular',sans-serif;font-size:.8em;margin-bottom:.5em;display:block}
+#introduction .greeting{font:bold 1.1em 'Oswald',sans-serif;display:inline-block}
+
+.info{font:normal .8em 'Oswald',sans-serif;margin-bottom:.5em;display:block}
 .info a{margin:0 .1em 0 .1em}
 .large{font-size:1.8em}
 .normal{font-size:1.2em}
-.menuhead{font-family:'Oswald Regular',sans-serif;border-bottom:0.2em solid #e3e8e8;overflow:hidden;padding:0;margin-top:1.5em}
+.menuhead{font-family:'Oswald',sans-serif;border-bottom:0.2em solid #e3e8e8;overflow:hidden;padding:0;margin-top:1.5em}
 .menuhead h1, .menuhead h2{float:left;font-size:1em;line-height:1.75em}
-.menuhead ul {float:right;padding:0 0 .1em 0}
+.menuhead ul {float:right;padding:0 0 .1em 0;margin:0}
 .menuhead ul li{font-size:.9em;float:left;list-style-type:none;padding:.2em .1em;margin:.1em;background:#e3e8e8;border-radius:.3em;line-height:1.2em}
 .menuhead ul li:first-child{margin-left:0}
 .menuhead ul li:last-child{margin-right:0}
 .menuhead ul li a{text-decoration:none;color:#272828;padding:.2em}
 .menuhead ul li a:hover{text-decoration:underline}
-@media screen and (max-width:46em){#introduction p{width:auto;float:none}}
-@media screen and (max-width:32em){.menuhead:first-child{margin-top:0}.menuhead ul {float:none;clear:both;padding:.1em 0 .2em 0}#introduction img{display:block;margin:0 auto 1em;float:none}}
+
+@media screen and (max-width:51em){
+	#introduction p{width:auto;float:none}
+	.menuhead:first-child{margin-top:0}
+}
+@media screen and (max-width:32em){
+	#introduction img{display:block;margin:0 auto 1em;float:none}
+	.menuhead ul {float:none;clear:both;padding:.1em 0 .2em 0}
+	p{text-align:left}
+}
diff --git a/source/99_result/overview.xsl b/source/99_result/overview.xsl
index ddd5e85..6771d1f 100644
--- a/source/99_result/overview.xsl
+++ b/source/99_result/overview.xsl
@@ -43,12 +43,12 @@
 	]"/>
 
 	<h3>
-		<xsl:text>» </xsl:text>
-		<span>
-			<a href="{$commit/link}">
-				<xsl:value-of select="$commit/title"/>
-			</a>
+		<span class="arrow">
+			<xsl:text>» </xsl:text>
 		</span>
+		<a href="{$commit/link}">
+			<xsl:value-of select="$commit/title"/>
+		</a>
 	</h3>
 
 	<span class="info">
@@ -82,12 +82,12 @@
 
 <xsl:template match="articles/entry">
 	<h3>
-		<xsl:text>» </xsl:text>
-		<span>
-			<a href="{link}">
-				<xsl:value-of select="title"/>
-			</a>
+		<span class="arrow">
+			<xsl:text>» </xsl:text>
 		</span>
+		<a href="{link}">
+			<xsl:value-of select="title"/>
+		</a>
 	</h3>
 
 	<span class="info">
@@ -146,7 +146,7 @@
 			<div id="introduction">
 				<img src="https://static.kummerlaender.eu/media/me_in_the_garden.jpeg"/>
 				<p>
-					<span class="greeting">Hi there!</span> My name is Adrian Kummerländer and I am a software developer currently studying mathematics in Karlsruhe. On these pages you will find <a href="https://blog.kummerlaender.eu">blog articles</a> covering amongst other topics some of my experiences in software development, open source and self hosting as well as <a href="https://code.kummerlaender.eu">repositories</a> and information on some of my personal <a href="https://tree.kummerlaender.eu/projects">projects</a>. If you have any comments or questions feel free to <a href="https://tree.kummerlaender.eu/contact">reach out</a>. I hope you will find something here worth your time.
+					<span class="greeting">Hi there!</span> My name is Adrian Kummerländer and I am a software developer currently studying mathematics in Karlsruhe. On these pages you will find <a href="https://blog.kummerlaender.eu">blog articles</a> covering amongst other topics some of my experiences in software development, open source and related tinkerings as well as <a href="https://code.kummerlaender.eu">repositories</a> and information on some of my personal <a href="https://tree.kummerlaender.eu/projects">projects</a>. If you have any comments or questions feel free to <a href="https://tree.kummerlaender.eu/contact">reach out</a>. I hope you will find something here worth your time.
 				</p>
 			</div>