adding css changes, varia website new style!

themes/cetcat/static/css/main.css

@@ -10,6 +10,18 @@
 	font-weight: normal;
 	font-style: normal;
 }
+@font-face{
+	font-family: "CMUconcrete";
+	src:url('../fonts/cmunorm.ttf');
+	font-weight: normal;
+	font-style: normal;
+}
+@font-face{
+	font-family: "CMUconcrete";
+	src:url('../fonts/cmunobx.ttf');
+	font-weight: bold;
+	font-style: normal;
+}
 @font-face{
 	font-family: "liberation";
 	src:url('../fonts/cmunit.ttf');
@@ -25,21 +37,31 @@ body{
 	margin:0 auto 5em auto;
 	padding: 0px 15px;
 	font-family: "liberation", monospace;
-	font-size: 18px;
+	font-size: 16px;
-	line-height:1.7;
+	line-height:1.8;
 	font-style: normal;
 	background-color: rgb(252, 255, 120);
 	color:black;
 }
 header {
 	width:calc(100% - 50px);
-	margin-top:15px;
+	margin-top:0;
 	margin-bottom:4em;
 	padding-bottom:1em;
 	font-size: 12px;
 	line-height: 1.7;
 	letter-spacing: 0;
 }
+	#content.index header{
+		font-family: 'CMUconcrete';
+		font-size: 26px;
+		line-height: 1.6;
+		letter-spacing: .035em;
+	}
+	#content.index header em{
+		font-size: 100%;
+		padding-right: 10px;
+	}
 #content{
 	margin-top:1em;
 }
@@ -58,8 +80,7 @@ hr, .separator hr {
 	border:0;
 	border-top:1px dotted #7e5211;
 	color: black;
-	margin-top:1em;
+	margin:2em 0;
-	margin-bottom:1em;
 }
 
 blockquote {
@@ -90,6 +111,7 @@ p{
 	margin:0 0 1em 0;
 }
 em{
+	font-family: 'liberation';
 	letter-spacing: 0;
 	font-size: 125%;
 	line-height: 1.0;
@@ -113,14 +135,14 @@ pre{
 #translation{
 	position: absolute;
 	font-size: 12px;
-	top:-5px;
+	top:0px;
-	right:5px;
+	right:15px;
 	margin:0;
 	padding:0;
+	text-align: right;
 }
 	#translation li{
 		list-style: none;
-		display: inline-block;
 	}
 	#translation li.active a{
 		text-decoration: none;
@@ -137,10 +159,6 @@ pre{
 .summary p{
 	display: inline;
 }
-.summary img{
-	width: 100%;
-	margin:0 0 1em 0;
-}
 .long-read .hentry{
 	width:calc(400px + 2em);
 }
@@ -153,7 +171,12 @@ pre{
 	padding:0;
 	vertical-align: top;
 }
+	.hentry .article-info{
+		width: 200px;
+	}
+	/* title */
 	.hentry .article-info .entry-title{
+		width: 100%;
 		font-family: "cmusans";
 		font-size: 190%;
 		font-weight: bold;
@@ -162,46 +185,55 @@ pre{
 	}
 		.hentry .article-info .entry-title a{
 			text-decoration: none;
-	8}
+		}
+	/* date */
+	.event-details{
+		width: 100%;
+		font-family: 'CMUconcrete';
+		font-size: 12px;
+		margin:.5em 0 1em 0;
+	}
 	/* ascii art styling */
 	.hentry pre{
 		font-size: 14.4px;
 		font-weight: normal;
 	}
-	.event-details{
+	/* featured image */
-		font-weight: bold;
+	.hentry .article-info .featured-image img{
-		margin:.5em 0 1em 0;
+		width:200px;
+		max-height: 100%;
+	}
+	/* double-blocks for super important categories */
+	.hentry.longread, .hentry.longread .article-info, .hentry.longread .featured-image img{
+		width: calc(400px + 2em);
 	}
 
 /****************************/
 /* article */
+#content.body .entry-title{
+	display:inline-block;
+	font-family: "cmusans";
+	font-size: 180%;
+	line-height: 1.25;
+	font-weight: bold;
+	margin:30px 0 30px 275px;
+	color:#7e5211;
+	width: calc(100% - 275px);
+}
 .article-info, .post-info{
 	color:#7e5211;
 }
 .article-info{
+	width:200px;
+	float: left;
 	margin-bottom:1em;
-}
-	.article-info .post-info time sup{
-		font-size: 100%;
 }
 	.article-info .entry-title{
-		width:100%;
-		display:inline-block;
-		font-family: "cmusans";
-		font-size: 280%;
-		line-height: 1.5;
-		font-weight: bold;
-	}
 		
-.entry-content, #page-content{
-	width: 800px;
-	margin:0;
-}
-	.entry-content img, .summary img, #page-content img{
-		max-width:100%;
 	}
-	.entry-content .seperator hr, #page-content hr{
+	.article-info .featured-image img{
-		max-width: 50%;
+		max-width: 200px;
+		max-height: 300px;
 	}
 	.post-info{
 		font-size: 14px;
@@ -214,6 +246,41 @@ pre{
 		.post-info .categories{
 			margin: 5px 0;
 		}	
+.entry-content-container, #page-content-container{
+	width: calc(100% - 285px);
+	background-color: rgba(255,255,0,.3);
+	float: right;
+	padding:30px;
+	margin-bottom:25px;
+}
+	.entry-content, #page-content{
+		position: relative;
+		max-width: 700px;
+		margin:0 auto 0 20px;
+	}
+		.entry-content img, #page-content img{
+			max-height:400px;
+		}
+		.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-left:-270px;
+		}
+		.entry-content span.simple-footnote-content{
+			font-size: 12px;
+			line-height: 1.1;
+			word-wrap:break-word;
+		}
+		.entry-content blockquote{
+			font-size: 150%;
+			margin:0 3em;
+			line-height: 1.5;
+		}
+
 
 /****************************/
 /* other */
@@ -246,8 +313,8 @@ pre{
 }
 
 /* add a monochrome filter over past events */
-.past-event img{
+.featured-image.past-event img{
-	filter:opacity(0.1);
+	filter:opacity(0.25);
 	/*filter: url("/images/filter.svg#monochrome");
 	-webkit-filter: url("/images/filter.svg#monochrome");*/
 }

themes/cetcat/templates/article.html

@@ -18,20 +18,27 @@
 
 	{% block content %}
 	<section id="content" class="body">
-		<div class="article-info">
+		<header id="banner">
+		    {% for p in pages %}
+		        {% if p.title == 'header' %}
+		            <div id="title">{{ p.content }}</div>
+		        {% endif %}
+		    {% endfor %}
+		</header>
 		<div class="entry-title">
 			{{ article.title }}
 		</div>
+		<div class="article-info">
+			<div class="featured-image">
+				{% if article.featured_image %}
+					<img src="{{ article.featured_image }}">
+				{% endif %}
+			</div>
 			<div class="event-details">
 				{% if article.event_start %}
 					{{ article.event_start }}
 				{% endif %}
 			</div>
-		</div>
-	<div class="entry-content">
-		{{ article.content }}
-		<div class="separator"><hr></div>
-	</div><!-- /.entry-content -->
 			<div class="post-info">
 				{% if article.category %}
 				<div class="categories">
@@ -48,5 +55,13 @@
 					</div>
 				{% endif %}
 			</div>
+		</div>
+	<div class="entry-content-container">
+		<div class="entry-content">
+
+			{{ article.content }}
+			<div class="separator"><hr></div>
+		</div><!-- /.entry-content -->
+	</div><!-- /.entry-content-container -->
 	</section>
 {% endblock %}

themes/cetcat/templates/base.html

@@ -32,13 +32,6 @@
             <li><a href="feeds/all-{{ DEFAULT_LANG }}.rss.xml" type="application/rss+xml"><i class="fa fa-rss "></i>RSS</a></li>
         {% endif %}
     </div>
-    <header id="banner">
-        {% for p in pages %}
-            {% if p.title == 'header' %}
-                <div id="title">{{ p.content }}</div>
-            {% endif %}
-        {% endfor %}
-    </header>
 
     {% block content %}
     {% endblock %}

themes/cetcat/templates/index.html

@@ -1,6 +1,13 @@
 {% extends "base.html" %}
 {% block content %}
 <section id="content" class="index">
+<header id="banner">
+    {% for p in pages %}
+        {% if p.title == 'header' %}
+            <div id="title">{{ p.content }}</div>
+        {% endif %}
+    {% endfor %}
+</header>
 {% block content_title %}
 {% endblock %}
 {% if articles_page.has_other_pages() %}
@@ -23,8 +30,13 @@
 
 				{% endif %}
 			</div>
+			<div class="featured-image {{past}}">
+				{% if article.featured_image %}
+					<img src="{{ article.featured_image }}">
+				{% endif %}
+			</div>
 		</div>
-		<div class="summary {{past}}">{{ article.summary }}
+		<div class="summary">{{ article.summary }}
 			<span>
 				<a href="{{ article.url }}">
 					{% if DEFAULT_LANG == 'en' %}