-
Notifications
You must be signed in to change notification settings - Fork 116
Expand file tree
/
Copy pathtypebase.less
More file actions
98 lines (80 loc) · 2.03 KB
/
typebase.less
File metadata and controls
98 lines (80 loc) · 2.03 KB
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
/*! Typebase.less v0.1.0 | MIT License */
// Typesetting variables. Edit these!
@baseFontSize: 22; // in pixels. This would result in 22px on desktop
@baseLineHeight: 1.5; // how large the line height is as a multiple of font size
@leading: @baseLineHeight * 1rem;
// Rate of growth for headings
// I actually like this to be slightly smaller then the leading. Makes for tight headings.
@scale: 1.414;
/* Setup */
html {
/* Change default typefaces here */
font-family: serif;
font-size: @baseFontSize / 16 * 100%;
// Make everything look a little nicer in webkit
-webkit-font-smoothing: antialiased;
// -webkit-text-size-adjust: auto;
// -moz-text-size-adjust: auto;
// -ms-text-size-adjust: auto;
// -o-text-size-adjust: auto;
// text-size-adjust: auto;
}
/* Copy & Lists */
p {
line-height: @leading;
margin-top: @leading;
margin-bottom: 0;
}
ul, ol {
margin-top: @leading;
margin-bottom: @leading;
li {
line-height: @leading;
}
ul, ol {
margin-top: 0;
margin-bottom: 0;
}
}
blockquote {
line-height: @leading;
margin-top: @leading;
margin-bottom: @leading;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
/* Change heading typefaces here */
font-family: sans-serif;
margin-top: @leading;
margin-bottom: 0;
line-height: @leading;
}
h1 { font-size: 3 * @scale * 1rem; line-height: 3 * @leading; margin-top: 2 * @leading; }
h2 { font-size: 2 * @scale * 1rem; line-height: 2 * @leading; margin-top: 2 * @leading; }
h3 { font-size: 1 * @scale * 1rem; }
h4 { font-size: @scale / 2 * 1rem; }
h5 { font-size: @scale / 3 * 1rem; }
h6 { font-size: @scale / 4 * 1rem; }
/* Tables */
table {
margin-top: @leading;
border-spacing: 0px;
border-collapse: collapse;
td, th {
padding: 0;
line-height: @baseLineHeight * @baseFontSize - 0px;
}
}
/* Code blocks */
code {
// Forces text to constrain to the line-height. Not ideal, but works.
vertical-align: bottom;
}
/* Leading paragraph text */
.lead {
font-size: @scale * 1rem;
}
/* Hug a the block above you */
.hug {
margin-top: 0;
}