typographic details in the overview

themes/default/static/css/main.css

@@ -58,11 +58,11 @@ section#content{
 article{
 	margin: 0 0 2em;
 }
-	article:first-of-type{
+	article:first-child{
 		background-color: beige;
 		padding:2em 3em;
 	}
-	article:first-of-type:before{
+	article:first-child:before{
 		content: "Start of Section";
 		display: block;
 		margin:0 auto;
@@ -73,11 +73,14 @@ article{
 /* big pink boxes for the section titles */
 h1.category{
 	width: calc(100% - 4em);
-	background-color: beige;
-	padding: 2em;
+	background-color: #ec25ec;
+	color:white;
+	border-radius: 1em;
+	padding: 2em 2em 2.5em 2em;
 	margin: 2em 0;
 	font-size: 32px;
 	text-align: center;
+	font-weight: normal;
 }
 
 ul.navprevnext{

themes/default/templates/categories.html

@@ -9,9 +9,12 @@
 
 	{% for category, articles in categories | sort(attribute="slug") %}
 		<a class="nounderline" href="{{ SITEURL }}/{{ category.url }}" title="Permalink to {{ category|striptags }}">
-			<h1 class="category">{{ category }}</h1>
+			{% set c = category|replace("-","</em><br><br>") %}
+			{% set c = '<em>'+c %}
+			<h1 class="category">{{ c }}</h1>
 		</a>
-		{% for article in articles %}
+		<section>
+			{% for article in articles | reverse %}
 				<article class="hentry">
 					<header>
 						<h2 class="entry-title"><a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2>
@@ -20,5 +23,6 @@
 					<footer class="post-info"></footer>
 				</article>
 			{% endfor %}
+		</section>
 	{% endfor %}
 {% endblock %}

themes/default/templates/index.html

@@ -3,6 +3,7 @@
 {% block content_title %}
 {% endblock %}
 
+<section>
 {% for article in articles_page.object_list|sort(attribute="slug")%}
 	<article class="hentry">
 		<header>
@@ -12,4 +13,5 @@
 		<footer class="post-info"></footer>
 	</article></li>
 {% endfor %}
+</section>
 {% endblock content %}