Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
type.less 2.75 KiB
1 
/* Typography.less
2 
 * Headings, body text, lists, code, and more for a versatile and durable typography system
3 
 * ---------------------------------------------------------------------------------------- */
4
5
6 
// BODY TEXT
7 
// ---------
8
9 
p {
10 
  #font > .shorthand(normal,@basefont,@baseline);
11 
  margin-bottom: @baseline / 2;
12 
  small {
13 
    font-size: @basefont - 2;
14 
    color: @grayLight;
15 
  }
16 
}
17
18
19 
// HEADINGS
20 
// --------
21
22 
h1, h2, h3, h4, h5, h6 {
23 
  font-weight: bold;
24 
  color: @grayDark;
25 
  small {
26 
    color: @grayLight;
27 
  }
28 
}
29 
h1 {
30 
  margin-bottom: @baseline;
31 
  font-size: 30px;
32 
  line-height: @baseline * 2;
33 
  small {
34 
    font-size: 18px;
35 
  }
36 
}
37 
h2 {
38 
  font-size: 24px;
39 
  line-height: @baseline * 2;
40 
  small {
41 
    font-size: 14px;
42 
  }
43 
}
44 
h3 {
45 
  line-height: @baseline * 2;
46 
  font-size: 18px;
47 
  small {
48 
    font-size: 14px;
49 
  }
50 
}
51 
h4, h5, h6 {
52 
  line-height: @baseline;
53 
}
54 
h4 {
55 
  font-size: 16px;
56 
  small {
57 
    font-size: 12px;
58 
  }
59 
}
60 
h5 {
61 
  font-size: 14px;
62 
}
63 
h6 {
64 
  font-size: 13px;
65 
  color: @grayLight;
66 
  text-transform: uppercase;
67 
}
68
69
70 
// COLORS
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
// ------ // Unordered and Ordered lists ul, ol { margin: 0 0 @baseline 25px; } ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; } ul { list-style: disc; } ol { list-style: decimal; } li { line-height: @baseline; color: @gray; } ul.unstyled { list-style: none; margin-left: 0; } // Description Lists dl { margin-bottom: @baseline; dt, dd { line-height: @baseline; } dt { font-weight: bold; } dd { margin-left: @baseline / 2; } } // MISC // ---- // Horizontal rules hr { margin: 20px 0 19px; border: 0; border-bottom: 1px solid #eee; } // Emphasis strong { font-style: inherit; font-weight: bold; } em { font-style: italic; font-weight: inherit; line-height: inherit; } .muted { color: @grayLight; } // Blockquotes blockquote { margin-bottom: @baseline; border-left: 5px solid #eee; padding-left: 15px;
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
p { #font > .shorthand(300,14px,@baseline); margin-bottom: 0; } small { display: block; #font > .shorthand(300,12px,@baseline); color: @grayLight; &:before { content: '\2014 \00A0'; } } } // Addresses address { display: block; line-height: @baseline; margin-bottom: @baseline; } // Inline and block code styles code, pre { padding: 0 3px 2px; font-family: Monaco, Andale Mono, Courier New, monospace; font-size: 12px; .border-radius(3px); } code { background-color: lighten(@orange, 40%); color: rgba(0,0,0,.75); padding: 1px 3px; } pre { background-color: #f5f5f5; display: block; padding: (@baseline - 1) / 2; margin: 0 0 @baseline; line-height: @baseline; font-size: 12px; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); .border-radius(3px); white-space: pre; white-space: pre-wrap; word-wrap: break-word; }