themes/default/less/type.less

   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   margin: 0 0 @baseLineHeight / 2;
  11   font-family: @baseFontFamily;
  12   font-size: @baseFontSize;
  13   line-height: @baseLineHeight;
  14   small {
  15     font-size: @baseFontSize - 2;
  16     color: @grayLight;
  17   }
  18 }
  19 .lead {
  20   margin-bottom: @baseLineHeight;
  21   font-size: 20px;
  22   font-weight: 200;
  23   line-height: @baseLineHeight * 1.5;
  24 }
  25
  26 // HEADINGS
  27 // --------
  28
  29 h1, h2, h3, h4, h5, h6 {
  30   margin: 0;
  31   font-weight: bold;
  32   color: @grayDark;
  33   text-rendering: optimizelegibility; // Fix the character spacing for headings
  34   small {
  35     font-weight: normal;
  36     color: darken(@grayLight, 10%);
  37   }
  38 }
  39 h1 {
  40   font-size: 30px;
  41   line-height: @baseLineHeight * 2;
  42   small {
  43     font-size: 18px;
  44   }
  45 }
  46 h2 {
  47   font-size: 24px;
  48   line-height: @baseLineHeight * 2;
  49   small {
  50     font-size: 18px;
  51   }
  52 }
  53 h3 {
  54   line-height: @baseLineHeight * 1.5;
  55   font-size: 18px;
  56   small {
  57     font-size: 14px;
  58   }
  59 }
  60 h4, h5, h6 {
  61   line-height: @baseLineHeight;
  62 }
  63 h4 {
  64   font-size: 14px;
  65   small {
  66     font-size: 12px;
  67   }
  68 }
  69 h5 {
  70   font-size: 12px;
  71 }
  72 h6 {
  73   font-size: 11px;
  74   color: @grayLight;
  75   text-transform: uppercase;
  76 }
  77
  78 // Page header
  79 .page-header {
  80   padding-bottom: @baseLineHeight - 1;
  81   margin: @baseLineHeight 0;
  82   border-bottom: 1px solid @grayLighter;
  83 }
  84 .page-header h1 {
  85   line-height: 1;
  86 }
  87
  88
  89
  90 // LISTS
  91 // -----
  92
  93 // Unordered and Ordered lists
  94 ul, ol {
  95   padding: 0;
  96   margin: 0 0 @baseLineHeight / 2 25px;
  97 }
  98 ul ul,
  99 ul ol,
 100 ol ol,
 101 ol ul {
 102   margin-bottom: 0;
 103 }
 104 ul {
 105   list-style: disc;
 106 }
 107 ol {
 108   list-style: decimal;
 109 }
 110 li {
 111   line-height: @baseLineHeight;
 112 }
 113 ul.unstyled,
 114 ol.unstyled {
 115   margin-left: 0;
 116   list-style: none;
 117 }
 118
 119 // Description Lists
 120 dl {
 121   margin-bottom: @baseLineHeight;
 122 }
 123 dt,
 124 dd {
 125   line-height: @baseLineHeight;
 126 }
 127 dt {
 128   font-weight: bold;
 129 }
 130 dd {
 131   margin-left: @baseLineHeight / 2;
 132 }
 133
 134 // MISC
 135 // ----
 136
 137 // Horizontal rules
 138 hr {
 139   margin: @baseLineHeight 0;
 140   border: 0;
 141   border-top: 1px solid @hrBorder;
 142   border-bottom: 1px solid @white;
 143 }
 144
 145 // Emphasis
 146 strong {
 147   font-weight: bold;
 148 }
 149 em {
 150   font-style: italic;
 151 }
 152 .muted {
 153   color: lighten(@gray, 20%);
 154 }
 155
 156 // Abbreviations and acronyms
 157 abbr {
 158   font-size: 90%;
 159   text-transform: uppercase;
 160   border-bottom: 1px dotted #ddd;
 161   cursor: help;
 162 }
 163
 164 // Blockquotes
 165 blockquote {
 166   padding: 0 0 0 15px;
 167   margin: 0 0 @baseLineHeight;
 168   border-left: 5px solid @grayLighter;
 169   p {
 170     margin-bottom: 0;
 171     #font > .shorthand(16px,300,@baseLineHeight * 1.25);
 172   }
 173   small {
 174     display: block;
 175     line-height: @baseLineHeight;
 176     color: @grayLight;
 177     &:before {
 178       content: '\2014 \00A0';
 179     }
 180   }
 181
 182   // Float right with text-align: right
 183   &.pull-right {
 184     float: right;
 185     padding-left: 0;
 186     padding-right: 15px;
 187     border-left: 0;
 188     border-right: 5px solid @grayLighter;
 189     p,
 190     small {
 191       text-align: right;
 192     }
 193   }
 194 }
 195
 196 // Quotes
 197 q:before,
 198 q:after,
 199 blockquote:before,
 200 blockquote:after {
 201   content: "";
 202 }
 203
 204 // Addresses
 205 address {
 206   display: block;
 207   margin-bottom: @baseLineHeight;
 208   line-height: @baseLineHeight;
 209   font-style: normal;
 210 }
 211
 212 // Misc
 213 small {
 214   font-size: 100%;
 215 }
 216 cite {
 217   font-style: normal;
 218 }