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     margin-top: 9px;
  77     font-weight: bold;
  78     .lightbox & {
  79       color: $white;
  80     }
  81   }
  82 }
  83
  84 a,
  85 a:link,
  86 a:visited {
  87   color: $link-color;
  88   font-weight: bold;
  89   text-decoration: none;
  90   word-wrap: break-word;
  91   transition: opacity 0.3s ease 0s;
  92   &:hover,
  93   &:focus {
  94     color: $link-hover-color;
  95   }
  96 }
  97 a.section-anchor {
  98   display: block;
  99   padding-top: 3.33em;
 100 }
 101
 102 footer[role="contentinfo"] {
 103   font-size: 0.84615385em;
 104   a,
 105   a:link,
 106   a:visited {
 107     color: $footer-link-color;
 108     font-weight: normal;
 109     font-weight: 600;
 110     text-decoration: none;
 111     word-wrap: break-word;
 112     &:hover,
 113     &:focus {
 114       color: $link-hover-color;
 115     }
 116   }
 117 }
 118
 119 table {
 120   font-size: $body-font-size;
 121 }
 122
 123 td dl {
 124   margin: 0.4em 0;
 125 }
 126
 127 td dt {
 128   margin: 0 0 0.4em 0;
 129 }
 130
 131 em {
 132   padding-right: 2px; /* "kerning" adjustment */
 133 }
 134
 135 img {
 136   vertical-align: middle;
 137 }
 138
 139 figcaption {
 140   font-family: $alt-font;
 141 //  @include adjust-font-size-to(12px);
 142   color: lighten($text, 20%);
 143 }
 144
 145 blockquote {
 146   margin: rhythm(0.5) $indent-amount;
 147 }
 148
 149 cite {
 150   margin: rhythm(0.5) $indent-amount;
 151 //  @include adjust-font-size-to(12px);
 152   color: lighten($text, 30%);
 153   font-style: normal;
 154 }
 155
 156 canvas {
 157   background: $white;
 158   margin: rhythm(1) 0;
 159 }
 160
 161 .code,
 162 code,
 163 pre {
 164   color: $monospace-font-color;
 165   font-family: $sourcecode;
 166   //font-size: $monospace-font-size;
 167 }
 168
 169 a > code {
 170   color: $link-color;
 171 }
 172
 173 pre {
 174   margin: 2em 0;
 175   word-wrap: break-word;
 176   position: relative;
 177
 178   &[data-filename] {
 179
 180
 181     &::after {
 182       content: attr(data-filename);
 183       background-color: $gray-medium;
 184       color: #fff;
 185       padding: 2px 12px;
 186       position: absolute;
 187       right: 0;
 188       top: 0;
 189     }
 190   }
 191   a {
 192     text-decoration: underline;
 193   }
 194 }
 195 .static-code-container {
 196 //  @include adjust-font-size-to(13px);
 197   line-height: 1em;
 198   clear: both;
 199 }
 200
 201 code,
 202 kbd,
 203 samp {
 204   margin: rhythm(1) 0;
 205 //  @include adjust-font-size-to(13px);
 206   line-height: 1em;
 207 }
 208
 209 dl,
 210 menu,
 211 ol,
 212 ul,
 213 .item-list ul {
 214   margin: 0.8em 0;
 215 }
 216 ul {
 217   padding-left: $indent-amount*1.6;
 218 }
 219 ol {
 220   padding-left: $indent-amount*1.9;
 221 }
 222
 223 hr {
 224   height: 1px;
 225   border: 0;
 226   border-bottom: $default-border;
 227   padding-bottom: -1px;
 228   margin: rhythm(1) 0;
 229 }
 230
 231 /*
 232 * Use the data-inline-block attribute rather than a class on the element
 233 * because the templates may end up overriding the class attribute.
 234 */
 235 [data-list-item] {
 236   display: list-item;
 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   box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
 252   border-radius: 3px;
 253 }