Update typography

Moritz »mo.« Sauer · Moritz »mo.« Sauer · commit 9d7b40e9cab2 · 2014-09-16T09:30:27.000+02:00
diff --git a/_data/navigation.yml b/_data/navigation.yml
@@ -6,8 +6,6 @@
   url: "/design/style-guide/"
   side: left
   dropdown:
-  - title: "Style Your Posts"
-    url: "/design/elements/"
   - title: "The Grid"
     url: "/design/grid/"
   - title: "Blog-Page"
diff --git a/_posts/design/2014-07-05-elements.md b/_posts/design/2014-07-05-elements.md
diff --git a/_posts/design/2014-09-16-typography.md b/_posts/design/2014-09-16-typography.md
@@ -39,7 +39,6 @@ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 
-
 #### Forth &lt;h4&gt;-Heading
 
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -54,13 +53,16 @@ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 
+
 ## Typographical Elements
 
 Here you'll find the [complete list of HTML5-Tags][1] and this is how they look like.
 
+
 ### &lt;hr&gt; Horizontal Lines
 <hr>
 
+
 ### &lt;pre&gt; Displaying Code
 ~~~
 <html>
@@ -71,6 +73,7 @@ Here you'll find the [complete list of HTML5-Tags][1] and this is how they look
 </html>
 ~~~
 
+
 ### &lt;blockquote&gt; Quotation
 <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>
 
@@ -123,67 +126,157 @@ Pancetta flank sirloin pork
 ### &lt;em&gt;
 Let's *emphasize* how important responsive webdesign is.
 
+
+
 ### &lt;strong&gt;
 This looks like **bold** text.
 
+
+
 ### &lt;small&gt;
 <small>This is small text.</small>
 
+
+
 ### &lt;s&gt;
 
 It's nice getting things done. Just strike through <s>finished tasks</s>.
 
+
+
 ### &lt;cite&gt;
 
+<cite>Albert Einstein</cite>
+
+
+
 ### &lt;q&gt;
 
+<q>Text Example</q>
+
+
+
 ### &lt;dfn&gt;
 
+<dfn>Text Example</dfn>
+
+
+
 ### &lt;abbr&gt;
 
+<abbr>Text Example</abbr>
+
+
+
 ### &lt;time&gt;
 
+
+
 ### &lt;code&gt;
 
 Some `code: lucida console` displayed.
 
+
+
 ### &lt;var&gt;
 
+<var>Text example.</var>
+
+
+
 ### &lt;samp&gt;
 
+<samp>Text example.</samp>
+
+
+
 ### &lt;kbd&gt;
 
 Copycats enjoy pressing <kbd>CMD</kbd> + <kbd>c</kbd> and <kbd>CMD</kbd> + <kbd>v</kbd>.
 
+
+
 ### &lt;sub&gt;
 
 This text <sub>lays low</sub> and chills a bit.
 
+
+
 ### &lt;i&gt;
 
+<i>Text example.</i>
+
+
+
 ### &lt;b&gt;
 
+<b>Text example.</b>
+
+
+
 ### &lt;u&gt;
 
+<u>Text example.</u>
+
+
+
 ### &lt;mark&gt;
 Let's <mark>mark this hint</mark> to give you a clue.
 
 
+
+
 ### &lt;br&gt;
 
 Need a break? I give you three!<br><br><br>
 
 ## Tables
-&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;
+
+<table>
+  <thead>
+  <caption>Cute Animals Per 1,000 People</caption>
+    <tr>
+      <th width="200">Table Header</th>
+      <th>Table Header</th>
+      <th width="150">Table Header</th>
+      <th width="150">Table Header</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Content Goes Here</td>
+      <td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
+      <td>Content Goes Here</td>
+      <td>Content Goes Here</td>
+    </tr>
+    <tr>
+      <td>Content Goes Here</td>
+      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+      <td>Content Goes Here</td>
+      <td>Content Goes Here</td>
+    </tr>
+    <tr>
+      <td>Content Goes Here</td>
+      <td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
+      <td>Content Goes Here</td>
+      <td>Content Goes Here</td>
+    </tr>
+  </tbody>
+</table>
+
+
+
+
+&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;  
 
 
 
diff --git a/documentation.md b/documentation.md
@@ -55,40 +55,40 @@ permalink: "/documentation/"
 
 
 
-
 ## Style your content with   {#styling}
 
-You can style your content in different ways. There are elements like subtitles, feature images, header images, meta data like categories and tags and many more.
+Feeling Responsive offers lots of possibilities to style your articles. You can style your content in different ways. There are elements like subtitles, feature images, header images, meta data like categories and tags and many more.
 
 
 ### Subtitles
+
 If you need a subheadline for an article, just define a subheadline in front matter like this:
 
 `subtitle:  "Subheadline"`
 
+### Quotes
 
-### Different images: Header, Title, Thumbnails   {#images}
+Quotes mix it up a little bit, if you write long articles. So use quotes:
 
-There are four types of images you can define via frontmatter: thumbnails, header images, title images and images in your article.
+> Age is an issue of mind over matter. If you don't mind, it doesn't matter.
+<cite>Mark Twain</cite>
 
 
-### Header Images
 
-Header images are displayed right under the top navigation. We use Backstretch to expand them from left to right. The width should be 1600 pixel or higher and in a ratio like 16:9 or 21:9 or 2:1.
 
-~~~
-image:
-   header: thumbnail_image.jpg
-~~~
 
+## Images: Header, Title, Thumbnails   {#images}
 
-### Thumbnails
+There are four types of images you can define via frontmatter: thumbnails, header images, title images and images in your article. 
 
-Thumbnails are used on archive pages like the [blog index][2]. Define them in front matter like this:
+
+### Header Images
+
+Header images are displayed right under the top navigation. We use Backstretch to expand them from left to right. The width should be 1600 pixel or higher and in a ratio like 16:9 or 21:9 or 2:1. <mark>If you don't want any header image just write `image_header: "no"` into front matter.</mark>
 
 ~~~
 image:
-   thumb: thumbnail_image.jpg
+   header: thumbnail_image.jpg
 ~~~
 
 
@@ -102,6 +102,16 @@ image:
 You can choose to show a special full-width header image or not.
 
 
+### Thumbnails
+
+Thumbnails are used on archive pages like the [blog index][2]. Define them in front matter like this:
+
+~~~
+image:
+   thumb: thumbnail_image.jpg
+~~~
+
+
 ### Define all three images
 
 ~~~
