|
| 1 | +/* |
| 2 | + * What follows is the result of much research on cross-browser styling. |
| 3 | + * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, |
| 4 | + * Kroc Camen, and the H5BP dev community and team. |
| 5 | + */ |
| 6 | + |
| 7 | +/* ========================================================================== |
| 8 | + Base styles: opinionated defaults |
| 9 | + ========================================================================== */ |
| 10 | + |
| 11 | +html { |
| 12 | + color: #222; |
| 13 | + font-size: 1em; |
| 14 | + line-height: 1.4; |
| 15 | +} |
| 16 | + |
| 17 | +/* |
| 18 | + * Remove text-shadow in selection highlight: |
| 19 | + * https://twitter.com/miketaylr/status/12228805301 |
| 20 | + * |
| 21 | + * These selection rule sets have to be separate. |
| 22 | + * Customize the background color to match your design. |
| 23 | + */ |
| 24 | + |
| 25 | +::selection { |
| 26 | + background: #b3d4fc; |
| 27 | + text-shadow: none; |
| 28 | +} |
| 29 | + |
| 30 | +/* |
| 31 | + * A better looking default horizontal rule |
| 32 | + */ |
| 33 | + |
| 34 | +hr { |
| 35 | + display: block; |
| 36 | + height: 1px; |
| 37 | + border: 0; |
| 38 | + border-top: 1px solid #ccc; |
| 39 | + margin: 1em 0; |
| 40 | + padding: 0; |
| 41 | +} |
| 42 | + |
| 43 | +/* |
| 44 | + * Remove the gap between audio, canvas, iframes, |
| 45 | + * images, videos and the bottom of their containers: |
| 46 | + * https://github.com/h5bp/html5-boilerplate/issues/440 |
| 47 | + */ |
| 48 | + |
| 49 | +audio, |
| 50 | +canvas, |
| 51 | +iframe, |
| 52 | +img, |
| 53 | +svg, |
| 54 | +video { |
| 55 | + vertical-align: middle; |
| 56 | +} |
| 57 | + |
| 58 | +/* |
| 59 | + * Remove default fieldset styles. |
| 60 | + */ |
| 61 | + |
| 62 | +fieldset { |
| 63 | + border: 0; |
| 64 | + margin: 0; |
| 65 | + padding: 0; |
| 66 | +} |
| 67 | + |
| 68 | +/* |
| 69 | + * Allow only vertical resizing of textareas. |
| 70 | + */ |
| 71 | + |
| 72 | +textarea { |
| 73 | + resize: vertical; |
| 74 | +} |
| 75 | + |
| 76 | +/* ========================================================================== |
| 77 | + Browser Upgrade Prompt |
| 78 | + ========================================================================== */ |
| 79 | + |
| 80 | +.browserupgrade { |
| 81 | + margin: 0.2em 0; |
| 82 | + background: #ccc; |
| 83 | + color: #000; |
| 84 | + padding: 0.2em 0; |
| 85 | +} |
| 86 | + |
| 87 | +/* ========================================================================== |
| 88 | + Author's custom styles |
| 89 | + ========================================================================== */ |
| 90 | + |
| 91 | + |
| 92 | + |
| 93 | + |
| 94 | + |
| 95 | + |
| 96 | + |
| 97 | + |
| 98 | + |
| 99 | + |
| 100 | + |
| 101 | + |
| 102 | + |
| 103 | + |
| 104 | + |
| 105 | + |
| 106 | + |
| 107 | +/* ========================================================================== |
| 108 | + Helper classes |
| 109 | + ========================================================================== */ |
| 110 | + |
| 111 | +/* |
| 112 | + * Hide visually and from screen readers: |
| 113 | + */ |
| 114 | + |
| 115 | +.hidden { |
| 116 | + display: none !important; |
| 117 | +} |
| 118 | + |
| 119 | +/* |
| 120 | + * Hide only visually, but have it available for screen readers: |
| 121 | + * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility |
| 122 | + */ |
| 123 | + |
| 124 | +.visuallyhidden { |
| 125 | + border: 0; |
| 126 | + clip: rect(0 0 0 0); |
| 127 | + height: 1px; |
| 128 | + margin: -1px; |
| 129 | + overflow: hidden; |
| 130 | + padding: 0; |
| 131 | + position: absolute; |
| 132 | + width: 1px; |
| 133 | +} |
| 134 | + |
| 135 | +/* |
| 136 | + * Extends the .visuallyhidden class to allow the element |
| 137 | + * to be focusable when navigated to via the keyboard: |
| 138 | + * https://www.drupal.org/node/897638 |
| 139 | + */ |
| 140 | + |
| 141 | +.visuallyhidden.focusable:active, |
| 142 | +.visuallyhidden.focusable:focus { |
| 143 | + clip: auto; |
| 144 | + height: auto; |
| 145 | + margin: 0; |
| 146 | + overflow: visible; |
| 147 | + position: static; |
| 148 | + width: auto; |
| 149 | +} |
| 150 | + |
| 151 | +/* |
| 152 | + * Hide visually and from screen readers, but maintain layout |
| 153 | + */ |
| 154 | + |
| 155 | +.invisible { |
| 156 | + visibility: hidden; |
| 157 | +} |
| 158 | + |
| 159 | +/* |
| 160 | + * Clearfix: contain floats |
| 161 | + * |
| 162 | + * For modern browsers |
| 163 | + * 1. The space content is one way to avoid an Opera bug when the |
| 164 | + * `contenteditable` attribute is included anywhere else in the document. |
| 165 | + * Otherwise it causes space to appear at the top and bottom of elements |
| 166 | + * that receive the `clearfix` class. |
| 167 | + * 2. The use of `table` rather than `block` is only necessary if using |
| 168 | + * `:before` to contain the top-margins of child elements. |
| 169 | + */ |
| 170 | + |
| 171 | +.clearfix:before, |
| 172 | +.clearfix:after { |
| 173 | + content: " "; /* 1 */ |
| 174 | + display: table; /* 2 */ |
| 175 | +} |
| 176 | + |
| 177 | +.clearfix:after { |
| 178 | + clear: both; |
| 179 | +} |
| 180 | + |
| 181 | +/* ========================================================================== |
| 182 | + EXAMPLE Media Queries for Responsive Design. |
| 183 | + These examples override the primary ('mobile first') styles. |
| 184 | + Modify as content requires. |
| 185 | + ========================================================================== */ |
| 186 | + |
| 187 | +@media only screen and (min-width: 35em) { |
| 188 | + /* Style adjustments for viewports that meet the condition */ |
| 189 | +} |
| 190 | + |
| 191 | +@media print, |
| 192 | + (min-resolution: 1.25dppx), |
| 193 | + (min-resolution: 120dpi) { |
| 194 | + /* Style adjustments for high resolution devices */ |
| 195 | +} |
| 196 | + |
| 197 | +/* ========================================================================== |
| 198 | + Print styles. |
| 199 | + Inlined to avoid the additional HTTP request: |
| 200 | + http://www.phpied.com/delay-loading-your-print-css/ |
| 201 | + ========================================================================== */ |
| 202 | + |
| 203 | +@media print { |
| 204 | + *, |
| 205 | + *:before, |
| 206 | + *:after, |
| 207 | + *:first-letter, |
| 208 | + *:first-line { |
| 209 | + background: transparent !important; |
| 210 | + color: #000 !important; /* Black prints faster: |
| 211 | + http://www.sanbeiji.com/archives/953 */ |
| 212 | + box-shadow: none !important; |
| 213 | + text-shadow: none !important; |
| 214 | + } |
| 215 | + |
| 216 | + a, |
| 217 | + a:visited { |
| 218 | + text-decoration: underline; |
| 219 | + } |
| 220 | + |
| 221 | + a[href]:after { |
| 222 | + content: " (" attr(href) ")"; |
| 223 | + } |
| 224 | + |
| 225 | + abbr[title]:after { |
| 226 | + content: " (" attr(title) ")"; |
| 227 | + } |
| 228 | + |
| 229 | + /* |
| 230 | + * Don't show links that are fragment identifiers, |
| 231 | + * or use the `javascript:` pseudo protocol |
| 232 | + */ |
| 233 | + |
| 234 | + a[href^="#"]:after, |
| 235 | + a[href^="javascript:"]:after { |
| 236 | + content: ""; |
| 237 | + } |
| 238 | + |
| 239 | + pre, |
| 240 | + blockquote { |
| 241 | + border: 1px solid #999; |
| 242 | + page-break-inside: avoid; |
| 243 | + } |
| 244 | + |
| 245 | + /* |
| 246 | + * Printing Tables: |
| 247 | + * http://css-discuss.incutio.com/wiki/Printing_Tables |
| 248 | + */ |
| 249 | + |
| 250 | + thead { |
| 251 | + display: table-header-group; |
| 252 | + } |
| 253 | + |
| 254 | + tr, |
| 255 | + img { |
| 256 | + page-break-inside: avoid; |
| 257 | + } |
| 258 | + |
| 259 | + img { |
| 260 | + max-width: 100% !important; |
| 261 | + } |
| 262 | + |
| 263 | + p, |
| 264 | + h2, |
| 265 | + h3 { |
| 266 | + orphans: 3; |
| 267 | + widows: 3; |
| 268 | + } |
| 269 | + |
| 270 | + h2, |
| 271 | + h3 { |
| 272 | + page-break-after: avoid; |
| 273 | + } |
| 274 | +} |
0 commit comments