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 img {
 118   vertical-align: middle;
 119 }
 120
 121 figcaption {
 122   font-family: $alt-font;
 123 //  @include adjust-font-size-to(12px);
 124   color: lighten($text, 20%);
 125 }
 126
 127 blockquote {
 128   margin: rhythm(0.5) $indent-amount;
 129 }
 130
 131 cite {
 132   margin: rhythm(0.5) $indent-amount;
 133 //  @include adjust-font-size-to(12px);
 134   color: lighten($text, 30%);
 135   font-style: normal;
 136 }
 137
 138 canvas {
 139   background: $white;
 140   margin: rhythm(1) 0;
 141 }
 142
 143 .code,
 144 code,
 145 pre {
 146   color: $monospace-font-color;
 147   font-family: $sourcecode;
 148   //font-size: $monospace-font-size;
 149 }
 150
 151 pre {
 152   margin: 2em 0;
 153   word-wrap: break-word;
 154   position: relative;
 155
 156   &[data-filename] {
 157
 158
 159     &::after {
 160       content: attr(data-filename);
 161       background-color: $gray-medium;
 162       color: #fff;
 163       padding: 2px 12px;
 164       position: absolute;
 165       right: 0;
 166       top: 0;
 167     }
 168   }
 169   a {
 170     text-decoration: underline;
 171   }
 172 }
 173 .static-code-container {
 174 //  @include adjust-font-size-to(13px);
 175   line-height: 1em;
 176   clear: both;
 177 }
 178
 179 code,
 180 kbd,
 181 samp {
 182   margin: rhythm(1) 0;
 183 //  @include adjust-font-size-to(13px);
 184   line-height: 1em;
 185 }
 186
 187 dl,
 188 menu,
 189 ol,
 190 ul,
 191 .item-list ul {
 192   margin: 0.8em 0;
 193 }
 194 ul {
 195   padding-left: $indent-amount*1.6;
 196 }
 197 ol {
 198   padding-left: $indent-amount*1.9;
 199 }
 200
 201 hr {
 202   height: 1px;
 203   border: 0;
 204   border-bottom: $default-border;
 205   padding-bottom: -1px;
 206   margin: rhythm(1) 0;
 207 }
 208
 209 .capitalize {
 210   text-transform: uppercase;
 211 }
 212
 213 /* Support a hack for the ::first-element rules below, which only apply if
 214 * the element has a subset of displays, which include inline-block.
 215 *
 216 * Use the data-inline-block attribute rather than a class on the element
 217 * because the templates may end up overriding the class attribute.
 218 */
 219 [data-list-item] {
 220   display: list-item;
 221 }
 222
 223 .uncapitalize::first-letter {
 224   text-transform: lowercase;
 225 }
 226
 227 .capitalize::first-letter {
 228   text-transform: uppercase;
 229 }