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 12html { 13 font-family: $base-font; 14 color: $text; 15} 16body { 17 font-size: $body-font-size; 18 color: $text; 19} 20 21h1, h2, h3, h4 ,h5 ,h6 { 22 font-family: $headline-font; 23 font-weight: 600; 24 color: $headline-color; 25} 26h1, h2 { 27 font-weight: 300; 28} 29h1 { 30 @include adjust-font-size-to( $h1-font-size ); 31} 32h1 + h1 { 33 @include leader (0); 34} 35h2 { 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} 41h3 { 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} 47h4 { 48 @include adjust-font-size-to( $h4-font-size ); 49 @include leader(0, $h4-font-size); 50 @include trailer(0, $h4-font-size); 51} 52h5 { 53 @include adjust-font-size-to( $h5-font-size ); 54 @include leader(0, $h5-font-size); 55 @include trailer(0, $h5-font-size); 56} 57h6 { 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 69p { 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 82a, 83a:link, 84a: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} 95a.section-anchor { 96 display: block; 97 padding-top: 3.33em; 98} 99 100footer[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 117table { 118 font-size: $body-font-size; 119} 120 121td dl { 122 margin: 0.4em 0; 123} 124 125td dt { 126 margin: 0 0 0.4em 0; 127} 128 129em { 130 padding-right: 2px; /* "kerning" adjustment */ 131} 132 133img { 134 vertical-align: middle; 135} 136 137figcaption { 138 font-family: $alt-font; 139// @include adjust-font-size-to(12px); 140 color: lighten($text, 20%); 141} 142 143blockquote { 144 margin: rhythm(0.5) $indent-amount; 145} 146 147cite { 148 margin: rhythm(0.5) $indent-amount; 149// @include adjust-font-size-to(12px); 150 color: lighten($text, 30%); 151 font-style: normal; 152} 153 154canvas { 155 background: $white; 156 margin: rhythm(1) 0; 157} 158 159.code, 160code, 161pre { 162 color: $monospace-font-color; 163 font-family: $sourcecode; 164 //font-size: $monospace-font-size; 165} 166 167a > code { 168 color: $link-color; 169} 170 171pre { 172 margin: 2em 0; 173 word-wrap: break-word; 174 position: relative; 175 176 &[data-filename] { 177 178 179 &::after { 180 content: attr(data-filename); 181 background-color: $gray-medium; 182 color: #fff; 183 padding: 2px 12px; 184 position: absolute; 185 right: 0; 186 top: 0; 187 } 188 } 189 a { 190 text-decoration: underline; 191 } 192} 193.static-code-container { 194// @include adjust-font-size-to(13px); 195 line-height: 1em; 196 clear: both; 197} 198 199code, 200kbd, 201samp { 202 margin: rhythm(1) 0; 203// @include adjust-font-size-to(13px); 204 line-height: 1em; 205} 206 207dl, 208menu, 209ol, 210ul, 211.item-list ul { 212 margin: 0.8em 0; 213} 214ul { 215 padding-left: $indent-amount*1.6; 216} 217ol { 218 padding-left: $indent-amount*1.9; 219} 220 221hr { 222 height: 1px; 223 border: 0; 224 border-bottom: $default-border; 225 padding-bottom: -1px; 226 margin: rhythm(1) 0; 227} 228 229.capitalize { 230 text-transform: uppercase; 231} 232 233/* Support a hack for the ::first-element rules below, which only apply if 234* the element has a subset of displays, which include inline-block. 235* 236* Use the data-inline-block attribute rather than a class on the element 237* because the templates may end up overriding the class attribute. 238*/ 239[data-list-item] { 240 display: list-item; 241} 242 243.uncapitalize::first-letter { 244 text-transform: lowercase; 245} 246 247.capitalize::first-letter { 248 text-transform: uppercase; 249} 250 251.kbd { 252 background-color: #f7f7f7; 253 border: 1px solid #ccc; 254 color: #333; 255 font-size: 11px; 256 line-height: 1.4; 257 text-shadow: 0 1px 0 #fff; 258 font-family: Arial,Helvetica,sans-serif; 259 display: inline-block; 260 padding: 0.1em 0.6em; 261 margin: 0 0.1em; 262 white-space: nowrap; 263 box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset; 264 border-radius: 3px; 265} 266