You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: _posts/design/2014-09-16-typography.md
+1Lines changed: 1 addition & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,6 +2,7 @@
2
2
layout: page
3
3
title: "Wonderful Typography"
4
4
subtitle: "Reading Experience"
5
+
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."
5
6
description: "<em>Feeling Responsive</em> uses Volkhov for headlines, Lato for everything else and if you are in need to show some code, it will be in Lucida Console."
Copy file name to clipboardExpand all lines: documentation.md
+16-10Lines changed: 16 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -56,37 +56,42 @@ permalink: "/documentation/"
56
56
57
57
58
58
59
-
## Possibilites to style your content {#styling}
59
+
## Style your content with {#styling}
60
60
61
-
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.
61
+
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.
62
62
63
-
## Subtitles
63
+
64
+
### Subtitles
64
65
If you need a subheadline for an article, just define a subheadline in front matter like this:
65
66
66
67
`subtitle: "Subheadline"`
67
68
68
69
69
-
70
-
## How to use images {#images}
70
+
### Different images: Header, Title, Thumbnails {#images}
71
71
72
72
There are four types of images you can define via frontmatter: thumbnails, header images, title images and images in your article.
73
73
74
-
### Thumbnails
75
74
76
-
Thumbnails are used on archive pages like the [blog index][2]. Define them in front matter like this:
75
+
### Header Images
76
+
77
+
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.
77
78
78
79
~~~
79
80
image:
80
-
thumb: thumbnail_image.jpg
81
+
header: thumbnail_image.jpg
81
82
~~~
82
83
83
-
### Header Images
84
+
85
+
### Thumbnails
86
+
87
+
Thumbnails are used on archive pages like the [blog index][2]. Define them in front matter like this:
84
88
85
89
~~~
86
90
image:
87
-
header: thumbnail_image.jpg
91
+
thumb: thumbnail_image.jpg
88
92
~~~
89
93
94
+
90
95
### Title Images
91
96
92
97
~~~
@@ -96,6 +101,7 @@ image:
96
101
97
102
You can choose to show a special full-width header image or not.
0 commit comments