websites/dennogumi.org-archive
Archived
1
0
Fork 0
Code Releases Activity

Update typography

Browse source
This commit is contained in:
Moritz »mo.« Sauer 2014-09-16 09:30:27 +02:00
parent e12be7b9fe
commit 9d7b40e9ca
4 changed files with 129 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

40
_posts/design/2014-07-05-elements.md
View file

@ -1,40 +0,0 @@
---
layout: post
title: "Elements"
subtitle: "Subheadline"
description: "Feeling Responsive offers lots of possibilities to style your articles. The theme turns around the corner with a headline, subheadline, a title and header image. A beautiful typography crafted to please the eyes delivers your ideas, explanations and articles to stick out."
date: 2014-07-05 07:00:00
categories:
- typography
- design
- elements
- design
permalink: "/design/elements/"
image:
header: "no"
thumb: "unsplash_5_thumb.jpg"
---
## Images
There are different ways to use images. The most present images can be positioned in the header or on top of the headline.
If you don't want any header image just write `image_header: "no"
` into front matter.
## Subheadlines
If you need a subheadline for an article, just define it in front matter like this:
`subtitle: "Subheadline"`
## Quotes
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>

115
_posts/design/2014-09-16-typography.md
View file

@ -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;