Add article theme support

theme/static/css/light.css

@@ -40,6 +40,20 @@ header nav > ul > li > div > a {
 }
 
 /* Page */
-.updated, .translations, .translation a {
-	color: #888;
+.page_title {
+	border-bottom: #000 solid 0.1em;
+}
+.page_title a {
+	text-decoration: none;
+}
+.page_title .translations {
+	font-size: 50%;
+}
+.page_title .translations a {
+	color: #888;
+	font-style: italic;
+}
+.details, .details a {
+	color: #888;
+	font-style: italic;
 }

theme/static/css/main.css

@@ -74,9 +74,17 @@ header nav > ul > li:hover > div > a, header nav > ul > li.active > div > a {
 }
 
 /* page */
+main {
+	margin: 0.5em;
+}
 .translations {
 	float: right;
 }
-.updated {
-	font-style: italic;
+.page_title {
+	font-size: 200%;
+	font-weight: bold;
+}
+.details {
+	display: inline-grid;
+	grid-template-columns: auto auto;
 }

theme/templates/article.html

@@ -0,0 +1,59 @@
+{% extends "base.html" %}
+{% block html_lang %}{{ article.lang }}{% endblock %}
+
+{% block title %}{{ article.title }} | {{ SITENAME }}{% endblock %}
+
+{% block head %}
+	{{ super() }}
+
+	{% import 'translations.html' as translations with context %}
+	{% if translations.entry_hreflang(article) %}
+		{{ translations.entry_hreflang(article) }}
+	{% endif %}
+
+	{% if article.description %}
+		<meta name="description" content="{{article.description}}" />
+	{% endif %}
+
+	{% for tag in article.tags %}
+		<meta name="tags" content="{{tag}}" />
+	{% endfor %}
+{% endblock %}
+
+{% block content %}
+	<main>
+		<div class="page_title">
+			{% import 'translations.html' as translations with context %}
+			{{ translations.translations_for(article) }}
+			<a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark" title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a>
+		</div>
+		<div class="details">
+			<span class="left-side">Erstellt:&nbsp;</span><span class="created"><time datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time></span>
+			{% if article.modified %}
+				<span class="left-side">Aktualisiert:&nbsp;</span><span class="updated"><time class="modified" datetime="{{ article.modified.isoformat() }}">{{ article.locale_modified }}</time></span>
+			{% endif %}
+			{% if article.authors %}
+				<span class="left-side">Von:&nbsp;</span>
+				<div class="authors">
+					{% for author in article.authors %}
+						<a href="{{ SITEURL }}/{{ author.url }}">{{ author }}</a>
+					{% endfor %}
+				</div>
+			{% endif %}
+			{% if article.category %}
+				<span class="left-side">Kategorie:&nbsp;</span><div class="categories"><a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a></div>
+			{% endif %}
+			{% if article.tags %}
+				<span class="left-side">Tags:&nbsp;</span>
+				<div class="tags">
+					{% for tag in article.tags %}
+						<a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>
+					{% endfor %}
+				</div>
+			{% endif %}
+		</div>
+		<article>
+			{{ article.content }}
+		</article>
+	</main>
+{% endblock %}

theme/templates/page.html

@@ -20,7 +20,9 @@
 			{{ page.title }}
 		</div>
 		{% if page.modified %}
-			<p style="updated">Zuletzt aktualisiert: {{ page.locale_modified }}</p>
+			<div class="details">
+				<span>Aktualisiert:&nbsp;</span><span class="updated"><time datetime="{{ article.modified.isoformat() }}">{{ article.locale_modified }}</time></span>
+			</div>
 		{% endif %}
 
 		<article>