src/chrome/common/extensions/docs/static/sass/_typography.scss

   1 /* =============================================================================
   2    Typography
   3
   4    To achieve a pleasant vertical rhythm, we use Compass' Vertical Rhythm mixins
   5    so that the line height of our base font becomes the basic unit of vertical
   6    measurement. We use multiples of that unit to set the top and bottom margins
   7    for our block level elements and to set the line heights of any fonts.
   8    For more information, see http://24ways.org/2006/compose-to-a-vertical-rhythm
   9    ========================================================================== */
  10
  11
  12 html {
  13   font-family: $base-font;
  14   color: $text;
  15 }
  16 body {
  17   font-size: $body-font-size;
  18   color: $text;
  19 }
  20
  21 h1, h2, h3, h4 ,h5 ,h6 {
  22   font-family: $headline-font;
  23   font-weight: 600;
  24   color: $headline-color;
  25 }
  26 h1, h2 {
  27   font-weight: 300;
  28 }
  29 h1 {
  30   @include adjust-font-size-to( $h1-font-size );
  31 }
  32 h1 + h1 {
  33   @include leader (0);
  34 }
  35 h2 {
  36   @include adjust-font-size-to( $h2-font-size );
  37   @include leader(2, $h2-font-size);
  38   @include trailer(0, $h2-font-size);
  39   @include adjust-leading-to(1.4, $h2-font-size);
  40 }
  41 h3 {
  42   @include adjust-font-size-to( $h3-font-size );
  43   @include leader(1, $h3-font-size);
  44   @include trailer(0.4, $h3-font-size);
  45   @include adjust-leading-to(1.4, $h2-font-size);
  46 }
  47 h4 {
  48   @include adjust-font-size-to( $h4-font-size );
  49   @include leader(0, $h4-font-size);
  50   @include trailer(0, $h4-font-size);
  51 }
  52 h5 {
  53   @include adjust-font-size-to( $h5-font-size );
  54   @include leader(0, $h5-font-size);
  55   @include trailer(0, $h5-font-size);
  56 }
  57 h6 {
  58   @include adjust-font-size-to( $h6-font-size );
  59   @include leader(0, $h6-font-size);
  60   @include trailer(0, $h6-font-size);
  61 }
  62
  63 // @media only screen and (max-width: $break-small) {
  64 //   h1 {
  65 //     font-size: $h1-font-size - 0.6 !important;
  66 //   }
  67 // }
  68
  69 p {
  70   margin: rhythm(1) 0;
  71   &.noindent, &.caption & {
  72     text-indent: 0;
  73   }
  74   &.caption {
  75     text-align: left;
  76     .lightbox & {
  77       color: $white;
  78     }
  79   }
  80 }
  81
  82 a,
  83 a:link,
  84 a:visited {
  85   color: $link-color;
  86   font-weight: bold;
  87   text-decoration: none;
  88   word-wrap: break-word;
  89   transition: opacity 0.3s ease 0s;
  90   &:hover,
  91   &:focus {
  92     color: $link-hover-color;
  93   }
  94 }
  95 a.section-anchor {
  96   display: block;
  97   padding-top: 3.33em;
  98 }
  99
 100 footer[role="contentinfo"] {
 101   font-size: 0.84615385em;
 102   a,
 103   a:link,
 104   a:visited {
 105     color: $footer-link-color;
 106     font-weight: normal;
 107     font-weight: 600;
 108     text-decoration: none;
 109     word-wrap: break-word;
 110     &:hover,
 111     &:focus {
 112       color: $link-hover-color;
 113     }
 114   }
 115 }
 116
 117 em {
 118   padding-right: 2px; /* "kerning" adjustment */
 119 }
 120
 121 img {
 122   vertical-align: middle;
 123 }
 124
 125 figcaption {
 126   font-family: $alt-font;
 127 //  @include adjust-font-size-to(12px);
 128   color: lighten($text, 20%);
 129 }
 130
 131 blockquote {
 132   margin: rhythm(0.5) $indent-amount;
 133 }
 134
 135 cite {
 136   margin: rhythm(0.5) $indent-amount;
 137 //  @include adjust-font-size-to(12px);
 138   color: lighten($text, 30%);
 139   font-style: normal;
 140 }
 141
 142 canvas {
 143   background: $white;
 144   margin: rhythm(1) 0;
 145 }
 146
 147 .code,
 148 code,
 149 pre {
 150   color: $monospace-font-color;
 151   font-family: $sourcecode;
 152   //font-size: $monospace-font-size;
 153 }
 154
 155 a > code {
 156   color: $link-color;
 157 }
 158
 159 pre {
 160   margin: 2em 0;
 161   word-wrap: break-word;
 162   position: relative;
 163
 164   &[data-filename] {
 165
 166
 167     &::after {
 168       content: attr(data-filename);
 169       background-color: $gray-medium;
 170       color: #fff;
 171       padding: 2px 12px;
 172       position: absolute;
 173       right: 0;
 174       top: 0;
 175     }
 176   }
 177   a {
 178     text-decoration: underline;
 179   }
 180 }
 181 .static-code-container {
 182 //  @include adjust-font-size-to(13px);
 183   line-height: 1em;
 184   clear: both;
 185 }
 186
 187 code,
 188 kbd,
 189 samp {
 190   margin: rhythm(1) 0;
 191 //  @include adjust-font-size-to(13px);
 192   line-height: 1em;
 193 }
 194
 195 dl,
 196 menu,
 197 ol,
 198 ul,
 199 .item-list ul {
 200   margin: 0.8em 0;
 201 }
 202 ul {
 203   padding-left: $indent-amount*1.6;
 204 }
 205 ol {
 206   padding-left: $indent-amount*1.9;
 207 }
 208
 209 hr {
 210   height: 1px;
 211   border: 0;
 212   border-bottom: $default-border;
 213   padding-bottom: -1px;
 214   margin: rhythm(1) 0;
 215 }
 216
 217 .capitalize {
 218   text-transform: uppercase;
 219 }
 220
 221 /* Support a hack for the ::first-element rules below, which only apply if
 222 * the element has a subset of displays, which include inline-block.
 223 *
 224 * Use the data-inline-block attribute rather than a class on the element
 225 * because the templates may end up overriding the class attribute.
 226 */
 227 [data-list-item] {
 228   display: list-item;
 229 }
 230
 231 .uncapitalize::first-letter {
 232   text-transform: lowercase;
 233 }
 234
 235 .capitalize::first-letter {
 236   text-transform: uppercase;
 237 }
 238
 239 .kbd {
 240   background-color: #f7f7f7;
 241   border: 1px solid #ccc;
 242   color: #333;
 243   font-size: 11px;
 244   line-height: 1.4;
 245   text-shadow: 0 1px 0 #fff;
 246   font-family: Arial,Helvetica,sans-serif;
 247   display: inline-block;
 248   padding: 0.1em 0.6em;
 249   margin: 0 0.1em;
 250   white-space: nowrap;
 251   -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
 252   -moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
 253   box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
 254   -webkit-border-radius: 3px;
 255   -moz-border-radius: 3px;
 256   border-radius: 3px;
 257 }