Use more figcaption.attribution instead of div.attribution

Reference #31.

README.md

@@ -25,9 +25,12 @@ Teilüberschriften starten mit `#` und dann für jede Ebene ein `#` mehr.
 
 Bis eine bessere Lösung gefunden wird, kann eine Bildquelle im Text mit
 
-    <div class="attribution"><p><a href="https://xkcd.com/208/">xkcd</a></p></div>
+    <figure>
+    ![xkcd about regular expressions](/images/regular_expressions.png)
+    <figcaption class="attribution"><cite><a href="https://xkcd.com/208/">xkcd 208</a></cite></figcaption>
+    </figure>
 
-angegeben werden.
+angegeben werden. `cite` sollte der HTML-Spezifikation den vollen Titel der Quelle enthalten.
 
 Der Post, dessen `meetup-announcement`-Datum am nähesten in der Zukunft liegt, wird auf der Hauptseite angezeigt und gibt das Datum des nächsten Treffens an.
 

css/default.hs

@@ -113,10 +113,10 @@ postCss = do
         display block
         sym2 margin auto auto
     img ? maxWidth (pct 100)
-    img |+ (div # ".attribution") ? do
+    img |+ (figcaption # ".attribution") ? do
       color ourPurple
       textAlign end
-      p ? sym2 margin (em 0.5) nil
+      sym2 margin (em 0.5) nil
       ((a # link) <> (a # visited)) ?
         color ourPurple
     ".portrait" ** img ? do

posts/2015-05-03-wir-bauen-einen-parserkombinator.md

@@ -101,8 +101,10 @@ parseList = do
 - Wir geben keine guten Parse-Fehlermeldungen aus
 - Wir haben keine Kombinatoren zum Parsen von Termen mit Operatoren
 
+<figure>
 ![xkcd about regular expressions](/images/regular_expressions.png)
-<div class="attribution"><p><a href="https://xkcd.com/208/">xkcd</a></p></div>
+<figcaption class="attribution"><cite><a href="https://xkcd.com/208/">xkcd 208</a></cite></figcaption>
+</figure>
 
 Danke [Ingo Blechschmidt][ingo] für den tollen Vortrag! Das Ergebnis kann [hier][parserc] bestaunt werden.
 

templates/post.html

@@ -7,12 +7,13 @@ <h1>$title$</h1>
           von $author$
       $endif$
     </div>
-    $if(image)$
-    <img src="$image$" alt="$image-alt$" />
-    $endif$
-    $if(image-attr)$
-    <div class="attribution"><p>$image-attr$</p></div>
-    $endif$
+    <figure>
+      $if(image)$
+      <img src="$image$" alt="$image-alt$" />
+      $endif$
+      $if(image-attr)$
+      <figcaption class="attribution">$image-attr$</figcaption>
+      $endif$
   </header>
 
   $body$