/
html5-titles-inception.less
100 lines (87 loc) · 2.9 KB
/
html5-titles-inception.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/* ===========================================================================
*
* HTML Titles Inception: sectionned h* styles (the LESS way)
*
* How to style h1-h3 elements according to the number of sectioning
* elements they are embeded into, using LESS's nested rules to generate
* every possible combination.
*
* Author: Nicolas Hoizey ( http://gasteroprod.com/ )
*
* Inspirations:
* Paul Rouget's -moz-any selector tutorial: http://cas.im/moz-any-selector
* Rob Reyes's 5 levels of Inception: http://cas.im/5-levels-inception
* LESS: http://lesscss.org/
*
* =========================================================================== */
/* ---------------------------------------------------------------------------
* Reality
* Everything is real, h1 look like h1
* (.h1, .h2, etc. classes are there for LESS's nested rules)
* --------------------------------------------------------------------------- */
h1, .h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2, .h2 { font-size: 2em; margin-bottom: 0.75em; }
h3, .h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4, .h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5, .h5 { font-size:1em; font-weight:bold; margin-bottom:1.5em; }
h6, .h6 { font-size:1em; font-weight:bold; }
/* ---------------------------------------------------------------------------
* Inception level 1: The city
* one level deep h1 look like h2
* --------------------------------------------------------------------------- */
section, article, aside, nav {
h1 {
.h2;
}
h2 {
.h3;
}
h3 {
.h4;
}
/* ---------------------------------------------------------------------------
* Inception level 2: The hotel
* 2 levels deep h1 and 1 level deep h2s look like h3
* --------------------------------------------------------------------------- */
section, article, aside, nav {
h1 {
.h3;
}
h2 {
.h4;
}
h3 {
.h5;
}
/* ---------------------------------------------------------------------------
* Inception level 3: The hospital
* 3 levels deep h1, 2 levels deep h2 and 1 level deep h3 look like h4
* --------------------------------------------------------------------------- */
section, article, aside, nav {
h1 {
.h4;
}
h2 {
.h5;
}
h3 {
.h6;
}
/* ---------------------------------------------------------------------------
* Inception level 4: Limbo
* No fear, it's easy with LESS! But the generated file is pretty heavy.
* --------------------------------------------------------------------------- */
section, article, aside, nav {
h1 {
.h5;
}
h2 {
.h6;
}
h3 {
/* there is no h7... */
}
}
} /* End level 3 */
} /* End level 2 */
} /* End level 1 */