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

2
_data/navigation.yml
View file

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

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;

40
documentation.md
View file

@ -55,26 +55,36 @@ 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>
## Images: Header, Title, Thumbnails {#images}
There are four types of images you can define via frontmatter: thumbnails, header images, title images and images in your article.
### 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.
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:
@ -82,16 +92,6 @@ image:
~~~
### Thumbnails
Thumbnails are used on archive pages like the [blog index][2]. Define them in front matter like this:
~~~
image:
thumb: thumbnail_image.jpg
~~~
### Title Images
~~~
@ -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
~~~