diff --git a/_data/navigation.yml b/_data/navigation.yml index 1698007..3e9b461 100644 --- 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 deleted file mode 100644 index 433d433..0000000 --- a/_posts/design/2014-07-05-elements.md +++ /dev/null @@ -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. -Mark Twain - - diff --git a/_posts/design/2014-09-16-typography.md b/_posts/design/2014-09-16-typography.md index 112ad11..d915316 100644 --- 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 <h4>-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. + ### <hr> Horizontal Lines
+ ### <pre> Displaying Code ~~~ @@ -71,6 +73,7 @@ Here you'll find the [complete list of HTML5-Tags][1] and this is how they look ~~~ + ### <blockquote> Quotation
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -123,67 +126,157 @@ Pancetta flank sirloin pork ### <em> Let's *emphasize* how important responsive webdesign is. + + ### <strong> This looks like **bold** text. + + ### <small> This is small text. + + ### <s> It's nice getting things done. Just strike through finished tasks. + + ### <cite> +Albert Einstein + + + ### <q> +Text Example + + + ### <dfn> +Text Example + + + ### <abbr> +Text Example + + + ### <time> + + ### <code> Some `code: lucida console` displayed. + + ### <var> +Text example. + + + ### <samp> +Text example. + + + ### <kbd> Copycats enjoy pressing CMD + c and CMD + v. + + ### <sub> This text lays low and chills a bit. + + ### <i> +Text example. + + + ### <b> +Text example. + + + ### <u> +Text example. + + + ### <mark> Let's mark this hint to give you a clue. + + ### <br> Need a break? I give you three!


## Tables -<table> -<caption> -<colgroup> -<col> -<tbody> -<thead>Tabellenspalten enthalten. -<tfoot>Tabellenspalten enthalten. -<tr> Steht für eine Zeile mit Tabellenzellen. -<td> Kennzeichnet eine einzelne Tabellenzelle. -<th> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Cute Animals Per 1,000 People
Table HeaderTable HeaderTable HeaderTable Header
Content Goes HereThis is longer content Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
Content Goes HereThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
Content Goes HereThis is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.Content Goes HereContent Goes Here
+ + + + +<table> +<caption> +<colgroup> +<col> +<tbody> +<thead> Tabellenspalten enthalten. +<tfoot> Tabellenspalten enthalten. +<tr> Steht für eine Zeile mit Tabellenzellen. +<td> Kennzeichnet eine einzelne Tabellenzelle. +<th> diff --git a/documentation.md b/documentation.md index a90048e..8bf545e 100644 --- a/documentation.md +++ b/documentation.md @@ -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. +Mark Twain + + + + + +## 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. If you don't want any header image just write `image_header: "no"` into front matter. ~~~ 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 ~~~