From e12be7b9fe417da45f2aac67151bd90272f7646d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Moritz=20=C2=BBmo=2E=C2=AB=20Sauer?= Date: Tue, 16 Sep 2014 09:16:55 +0200 Subject: [PATCH] Update Dokumentation --- .../design/2014-09-16-typography.md | 1 + documentation.md | 28 +++++++++++-------- roadmap.md | 1 + 3 files changed, 19 insertions(+), 11 deletions(-) rename typography.md => _posts/design/2014-09-16-typography.md (97%) diff --git a/typography.md b/_posts/design/2014-09-16-typography.md similarity index 97% rename from typography.md rename to _posts/design/2014-09-16-typography.md index 8618710..112ad11 100644 --- a/typography.md +++ b/_posts/design/2014-09-16-typography.md @@ -2,6 +2,7 @@ layout: page title: "Wonderful Typography" subtitle: "Reading Experience" +meta_description: "Feeling Responsive uses Volkhov for headlines, Lato for everything else and if you are in need to show some code, it will be in Lucida Console." description: "Feeling Responsive uses Volkhov for headlines, Lato for everything else and if you are in need to show some code, it will be in Lucida Console." image: header: "no" diff --git a/documentation.md b/documentation.md index a669f9e..a90048e 100644 --- a/documentation.md +++ b/documentation.md @@ -56,21 +56,32 @@ permalink: "/documentation/" -## Possibilites to style your content {#styling} +## 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. This article shows the different possibilites. +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 + +### Subtitles If you need a subheadline for an article, just define a subheadline in front matter like this: `subtitle: "Subheadline"` - -## How to use images {#images} +### Different 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. + +~~~ +image: + header: thumbnail_image.jpg +~~~ + + ### Thumbnails Thumbnails are used on archive pages like the [blog index][2]. Define them in front matter like this: @@ -80,12 +91,6 @@ image: thumb: thumbnail_image.jpg ~~~ -### Header Images - -~~~ -image: - header: thumbnail_image.jpg -~~~ ### Title Images @@ -96,6 +101,7 @@ image: You can choose to show a special full-width header image or not. + ### Define all three images ~~~ diff --git a/roadmap.md b/roadmap.md index b801859..9d412f9 100644 --- a/roadmap.md +++ b/roadmap.md @@ -12,6 +12,7 @@ permalink: "/roadmap/" * Produce an introduction video to showcase *Feeling Responsive* * Produce some small tutorials to show features and how to customize *Feeling Responsive* +* Title and Credit for images * Optimize HTML and use Schema.org-Attributes * SEO › Add metadescription to header.html and front matter * Add draft-templates for new pages/posts