From e041d2fd9cceb78aa45f26d6dca3ab611387047a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Moritz=20=C2=BBmo=2E=C2=AB=20Sauer?= <kontakt@phlow.net>
Date: Tue, 16 Sep 2014 09:56:40 +0200
Subject: [PATCH] Update Typograph

---
 _posts/design/2014-09-16-typography.md | 41 +++++++++++++-------------
 documentation.md                       |  3 +-
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/_posts/design/2014-09-16-typography.md b/_posts/design/2014-09-16-typography.md
index 6d8e103..55c3106 100644
--- a/_posts/design/2014-09-16-typography.md
+++ b/_posts/design/2014-09-16-typography.md
@@ -152,24 +152,25 @@ It's nice getting things done. Just strike through <s>finished tasks</s>.
 
 ### &lt;q&gt;
 
-<q>Text Example</q>
+If you use &lt;q&gt; your text gets <q>automagically quotes around the text passage</q>.
 
 
 
 ### &lt;dfn&gt;
 
-<dfn>Text Example</dfn>
+The &lt;dfn&gt; tag is a phrase tag. It defines a <dfn>definition term</dfn>.
 
 
 
 ### &lt;abbr&gt;
 
-<abbr>Text Example</abbr>
+The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
 
 
 
 ### &lt;time&gt;
 
+The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.
 
 
 ### &lt;code&gt;
@@ -180,13 +181,13 @@ Some `code: lucida console` displayed.
 
 ### &lt;var&gt;
 
-<var>Text example.</var>
+The &lt;var&gt; tag is a phrase tag. It defines a <var>variable</var>.
 
 
 
 ### &lt;samp&gt;
 
-<samp>Text example.</samp>
+Text surrounded by &lt;samp&gt; <samp>looks like this in monospace</samp>.
 
 
 
@@ -204,19 +205,19 @@ This text <sub>lays low</sub> and chills a bit.
 
 ### &lt;i&gt;
 
-<i>Text example.</i>
+This looks <i>italic</i>.
 
 
 
 ### &lt;b&gt;
 
-<b>Text example.</b>
+This looks <b>bold</b>, too.
 
 
 
 ### &lt;u&gt;
 
-<u>Text example.</u>
+<u>Underlining</u> content for emphasize is not the best choice.
 
 
 
@@ -234,7 +235,7 @@ Need a break? I give you three!<br><br><br>
 
 <table>
   <thead>
-  <caption>Cute Animals Per 1,000 People</caption>
+  <caption>Caption For Table</caption>
     <tr>
       <th width="200">Table Header</th>
       <th>Table Header</th>
@@ -265,18 +266,18 @@ Need a break? I give you three!<br><br><br>
 </table>
 
 
+A table can consist of these elements
 
-
-&lt;table&gt;  
-&lt;caption&gt;  
-&lt;colgroup&gt;  
-&lt;col&gt;  
-&lt;tbody&gt;  
-&lt;thead&gt;  Tabellenspalten enthalten.
-&lt;tfoot&gt;  Tabellenspalten enthalten.
-&lt;tr&gt;      Steht für eine Zeile mit Tabellenzellen.
-&lt;td&gt;      Kennzeichnet eine einzelne Tabellenzelle.
-&lt;th&gt;  
+* `&lt;table&gt;
+* `&lt;caption&gt;
+* `&lt;colgroup&gt;
+* `&lt;col&gt;
+* `&lt;tbody&gt;
+* `&lt;thead&gt;
+* `&lt;tfoot&gt;
+* `&lt;tr&gt;
+* `&lt;td&gt;
+* `&lt;th&gt;
 
 
 
diff --git a/documentation.md b/documentation.md
index 7fd21fa..dd823f2 100644
--- a/documentation.md
+++ b/documentation.md
@@ -73,7 +73,8 @@ Quotes mix it up a little bit, if you write long articles. So use quotes:
 > Age is an issue of mind over matter. If you don't mind, it doesn't matter.
 <cite>Mark Twain</cite>
 
-
+<small markdown="1">[Up to table of contents](#toc)</small>
+{: .text-right }