| // Typography.less |
| // Headings, body text, lists, code, and more for a versatile and durable typography system |
| // ---------------------------------------------------------------------------------------- |
| |
| |
| // BODY TEXT |
| // --------- |
| |
| p { |
| margin: 0 0 @baseLineHeight / 2; |
| font-family: @baseFontFamily; |
| font-size: @baseFontSize; |
| line-height: @baseLineHeight; |
| small { |
| font-size: @baseFontSize - 2; |
| color: @grayLight; |
| } |
| } |
| .lead { |
| margin-bottom: @baseLineHeight; |
| font-size: 20px; |
| font-weight: 200; |
| line-height: @baseLineHeight * 1.5; |
| } |
| |
| // HEADINGS |
| // -------- |
| |
| h1, h2, h3, h4, h5, h6 { |
| margin: 0; |
| font-weight: bold; |
| color: @grayDark; |
| text-rendering: optimizelegibility; // Fix the character spacing for headings |
| small { |
| font-weight: normal; |
| color: @grayLight; |
| } |
| } |
| h1 { |
| font-size: 30px; |
| line-height: @baseLineHeight * 2; |
| small { |
| font-size: 18px; |
| } |
| } |
| h2 { |
| font-size: 24px; |
| line-height: @baseLineHeight * 2; |
| small { |
| font-size: 18px; |
| } |
| } |
| h3 { |
| line-height: @baseLineHeight * 1.5; |
| font-size: 18px; |
| small { |
| font-size: 14px; |
| } |
| } |
| h4, h5, h6 { |
| line-height: @baseLineHeight; |
| } |
| h4 { |
| font-size: 14px; |
| small { |
| font-size: 12px; |
| } |
| } |
| h5 { |
| font-size: 12px; |
| } |
| h6 { |
| font-size: 11px; |
| color: @grayLight; |
| text-transform: uppercase; |
| } |
| |
| // Page header |
| .page-header { |
| padding-bottom: @baseLineHeight - 1; |
| margin: @baseLineHeight 0; |
| border-bottom: 1px solid @grayLighter; |
| } |
| .page-header h1 { |
| line-height: 1; |
| } |
| |
| |
| |
| // LISTS |
| // ----- |
| |
| // Unordered and Ordered lists |
| ul, ol { |
| padding: 0; |
| margin: 0 0 @baseLineHeight / 2 25px; |
| } |
| ul ul, |
| ul ol, |
| ol ol, |
| ol ul { |
| margin-bottom: 0; |
| } |
| ul { |
| list-style: disc; |
| } |
| ol { |
| list-style: decimal; |
| } |
| li { |
| line-height: @baseLineHeight; |
| } |
| ul.unstyled, |
| ol.unstyled { |
| margin-left: 0; |
| list-style: none; |
| } |
| |
| // Description Lists |
| dl { |
| margin-bottom: @baseLineHeight; |
| } |
| dt, |
| dd { |
| line-height: @baseLineHeight; |
| } |
| dt { |
| font-weight: bold; |
| } |
| dd { |
| margin-left: @baseLineHeight / 2; |
| } |
| |
| // MISC |
| // ---- |
| |
| // Horizontal rules |
| hr { |
| margin: @baseLineHeight 0; |
| border: 0; |
| border-top: 1px solid @hrBorder; |
| border-bottom: 1px solid @white; |
| } |
| |
| // Emphasis |
| strong { |
| font-weight: bold; |
| } |
| em { |
| font-style: italic; |
| } |
| .muted { |
| color: @grayLight; |
| } |
| |
| // Abbreviations and acronyms |
| abbr { |
| font-size: 90%; |
| text-transform: uppercase; |
| border-bottom: 1px dotted #ddd; |
| cursor: help; |
| } |
| |
| // Blockquotes |
| blockquote { |
| padding: 0 0 0 15px; |
| margin: 0 0 @baseLineHeight; |
| border-left: 5px solid @grayLighter; |
| p { |
| margin-bottom: 0; |
| #font > .shorthand(16px,300,@baseLineHeight * 1.25); |
| } |
| small { |
| display: block; |
| line-height: @baseLineHeight; |
| color: @grayLight; |
| &:before { |
| content: '\2014 \00A0'; |
| } |
| } |
| |
| // Float right with text-align: right |
| &.pull-right { |
| float: right; |
| padding-left: 0; |
| padding-right: 15px; |
| border-left: 0; |
| border-right: 5px solid @grayLighter; |
| p, |
| small { |
| text-align: right; |
| } |
| } |
| } |
| |
| // Quotes |
| q:before, |
| q:after, |
| blockquote:before, |
| blockquote:after { |
| content: ""; |
| } |
| |
| // Addresses |
| address { |
| display: block; |
| margin-bottom: @baseLineHeight; |
| line-height: @baseLineHeight; |
| font-style: normal; |
| } |
| |
| // Misc |
| small { |
| font-size: 100%; |
| } |
| cite { |
| font-style: normal; |
| } |