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