Home | History | Annotate | Download | only in sass 
      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   box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
    252   border-radius: 3px;
    253 }
    254