typographic changes

themes/varia/static/css/main.css

@@ -1,30 +1,36 @@
 @font-face{
 	font-family: "header";
+	src:url('../fonts/cmuntt.ttf');
+	font-weight: normal;
+	font-style: normal;
+}
+@font-face{
+	font-family: "kop";
 	src:url('../fonts/cmunssdc.ttf');
 	font-weight: normal;
 	font-style: normal;
 }
 @font-face{
 	font-family: "main";
-	src:url('../fonts/CourierCode-Roman.ttf');
+	src:url('../fonts/cooper-hewitt/CooperHewitt-Medium.otf');
 	font-weight: normal;
 	font-style: normal;
 }
 @font-face{
 	font-family: "main";
-	src:url('../fonts/CourierCode-Bold.ttf');
+	src:url('../fonts/cooper-hewitt/CooperHewitt-Bold.otf');
 	font-weight: bold;
 	font-style: normal;
 }
 @font-face{
 	font-family: "main";
-	src:url('../fonts/CourierCode-Italic.ttf');
+	src:url('../fonts/cooper-hewitt/CooperHewitt-MediumItalic.otf');
 	font-weight: normal;
 	font-style: italic;
 }
 @font-face{
 	font-family: "main";
-	src:url('../fonts/CourierCode-BoldItalic.ttf');
+	src:url('../fonts/cooper-hewitt/CooperHewitt-BoldItalic.otf');
 	font-weight: bold;
 	font-style: italic;
 }
@@ -34,13 +40,14 @@ body{
 	min-width: 500px;
 	top:0px;
 	left:0px;
-	margin:14px auto 5em auto;
+	margin:0 auto 5em auto;
-	padding: 0px 15px;
+	padding: 14px 15px;
 	font-family: "main", monospace;
-	font-size: 15px;
+	font-size: 22px;
-	line-height:1.8;
+	line-height:1.65;
-	background-color: rgba(252, 255, 120, .7);
+	/*letter-spacing: 0.01em;*/
-	color:black;
+	background-color: rgba(238, 238, 238, 0.5);
+	color:#164515;
 }
 #content{
 	margin-top:1em;
@@ -55,34 +62,12 @@ a:hover{
 	border:0;
 	text-decoration: none;
 }
-
-	a.h-card{
-		color:black;
-		text-decoration: none;
-
-	}
-
-hr, .separator hr {
-	border:0;
-	border-top:1px dotted #7e5211;
-	color: black;
-	margin:1em 0 .5em;
-}
-
-blockquote {
-	font-style:italic;
-}
-
-ul {
-	padding-left:0px;
-}
-
 h1, h2, h3, h4, h5, h6, #header{
 	margin:0;
 	padding:0;
 }
 	h1{
-		font-family: "header";
+		font-family: "kop";
 		font-size: 100%;
 	}
 	h2{
@@ -97,10 +82,32 @@ h1, h2, h3, h4, h5, h6, #header{
 p{
 	margin:0 0 1em 0;
 }
+em{
+
+}
+sup{
+	font-size: 12px;
+}
 pre{
 	line-height: 1.0;
 	font-family: monospace;
 }
+
+hr, .separator hr {
+	border:0;
+	border-top:1px dotted #7e5211;
+	color: black;
+	margin:1em 0 .5em;
+}
+
+blockquote {
+	font-style:italic;
+}
+
+ul {
+	padding-left:0px;
+}
+
 .paginator{
 	float:right;
 	margin:0px;
@@ -120,7 +127,7 @@ ul li{
 
 /* article info */
 .article-info{
-	font-size: 14px;
+	font-size: 12px;
 	margin:0;
 }
 	/* date */
@@ -137,12 +144,17 @@ ul li{
 		font-size: 12px;
 		font-style: italic;
 	}
+		.post-info time{
+			display: block;
+		}
 		.post-info sup{
-			font-size: 100%;
+			font-size: 80%;
 		}
 		.post-info .categories:before, .post-info .article-translation:before{
 			content:'→';
 			color:#7e5211;
+			font-family: sans-serif;
+			padding-right: 5px;
 		}
 
 /****************************/
@@ -150,12 +162,13 @@ ul li{
 
 header {
 	width:calc(100% - 50px);
-	margin-top:0;
+	margin-top:26px;
 	margin-bottom:5em;
 	padding-bottom:1em;
-	font-family: 'main';
+	font-family: "header";
-	font-size: 14px;
+	font-size: 17px;
 	line-height: 1.6;
+	letter-spacing: -0.03em;
 }
 	header img{
 		width: 50px;
@@ -165,6 +178,9 @@ header {
 	}
 	/* custom font size for index */
 	#content.index header{
+		font-size: 24px;
+		line-height: 1.5;
+		margin-top:0;
 	}
 	header p{
 		display: inline;
@@ -204,23 +220,33 @@ header {
     	transform: skew(2deg);
 	}
 
-#translation{
+.buttons{
 	position: absolute;
-	font-size: 12px;
+	font-size: 14px;
-	top:0px;
-	right:15px;
 	margin:0;
 	padding:0;
-	text-align: right;
 }
-	#translation li{
+	.buttons.top, .buttons.side{
+		top:10px;
+		right:15px;
+		text-align: right;
+	}
+	.buttons.side{
+		top:40px;
+	}
+		.buttons.side li{
+			display: block;
+		}
+	.buttons li{
 		list-style: none;
+		display: inline-block;
+		padding-left: 3px;
 	}
-	#translation li.active a{
+	.buttons li.active a{
 		text-decoration: none;
 	}
-	#translation li.active{
+	.buttons li.active{
-		font-weight: bold;
+		/*font-weight: bold;*/
 	}
 
 /****************************/
@@ -231,14 +257,13 @@ header {
 .summary p{
 	display: inline;
 }
-.article.hentry{
+.article.hentry, /*.documentation.hentry*/{
 	width:calc(400px + 2em);
-	/*font-size: 125%;*/
 }
 .hentry{
 	display: inline-block;
 	width: 200px;
-	font-size: 13.5px;
+	font-size: 14px;
 	line-height: 1.65;
 	margin:0 2em 5em 0;
 	padding:0;
@@ -250,16 +275,16 @@ header {
 		.hentry .article-info .event-details{
 			margin:5px 0 2px;
 			min-height: 1.65em;
+			font-family: monospace;
 		}
 		/* title */
 		.hentry .article-info .entry-title{
 			display: block;
 			width: 100%;
-			font-family: "header";
+			font-family: "kop";
-			font-size: 165%;
+			font-size: 185%;
 			font-weight: bold;
 			line-height: 1.15;
-			letter-spacing: -0.01em;
 			margin:0;
 		}
 			.hentry .article-info .entry-title a{
@@ -280,7 +305,7 @@ header {
 /* article */
 #content.body .entry-title{
 	display:inline-block;
-	font-family: "header";
+	font-family: "kop";
 	font-size: 250%;
 	line-height: 1.25;
 	font-weight: bold;
@@ -309,24 +334,6 @@ header {
 		.entry-content .seperator hr, #page-content hr{
 			width:100%;
 		}
-		/* Roel's complex footnote effect */
-		.entry-content span.simple-footnote-container{
-			float: left;
-			width: 200px;
-			margin:.5em 0 0 -270px;
-		}
-		.entry-content span.simple-footnote-content{
-			display: block;
-			font-size: 12px;
-			line-height: 1.3;
-			word-wrap:break-word;
-		}
-		.entry-content blockquote{
-			font-size: 150%;
-			margin:1em 3em 0;
-			line-height: 1.5;
-		}
-
 
 /****************************/
 /* other */
@@ -348,22 +355,21 @@ header {
 	margin-top: 2em;
 	text-align: center;
 }
-/*.simple-footnotes{
-	font-size:14px;
-	margin:auto;
-	max-width:800px;
-}
-*/
 .author{
-	display: none;
+	/*display: none;*/
+}
+iframe{
+	width: 100%;
+	height: auto;
 }
-
 /*footnotes*/
 sup span{
 	float: right;
 	width: 200px;
 	margin:0.25em -150px 1em 3em;
 	clear:both;
+	font-size: 11px;
+	line-height: 1.5;
 	display: inline;
 }
 	sup span p{