changeset
Fix markup errors
Wed, 18 Jul 2012 16:26:12 -0400
- author
- fantasai <fantasai.cvs@inkedblade.net>
- date
- Wed, 18 Jul 2012 16:26:12 -0400
- changeset 6267
- b6ad5b5ab087
- parent 6266
- 42206370b48a
- child 6268
- eac2aaa3ba46
Fix markup errors
| css3-flexbox/Overview.html | file | annotate | diff | comparison | revisions | |
| css3-flexbox/Overview.src.html | file | annotate | diff | comparison | revisions |
1.1 --- a/css3-flexbox/Overview.html Wed Jul 18 12:22:45 2012 -0400 1.2 +++ b/css3-flexbox/Overview.html Wed Jul 18 16:26:12 2012 -0400 1.3 @@ -36,17 +36,68 @@ 1.4 margin-bottom: 0; 1.5 } 1.6 1.7 + /* Overview catalog example */ 1.8 + #overview-example { 1.9 + display:table; 1.10 + margin: 0 auto 1em; 1.11 + border-spacing: .5em 0; 1.12 + min-width: 672px; 1.13 + } 1.14 + #overview-example > .col { 1.15 + display: table-column; 1.16 + background: hsl(60,100%,90%); 1.17 + } 1.18 + #overview-example > .desc { 1.19 + display: table-cell; 1.20 + vertical-align: top; 1.21 + width: 300px; 1.22 + padding: 1em 1em 0; 1.23 + text-align: left; 1.24 + border: thick solid hsl(60,80%,50%); 1.25 + border-radius: 1em 1em 0 0; 1.26 + border-bottom: none; 1.27 + } 1.28 + #overview-example > .desc > img { 1.29 + margin: 0 auto; 1.30 + display: block; 1.31 + } 1.32 + #overview-example > .desc > h1 { 1.33 + background: transparent; 1.34 + } 1.35 + #overview-example > .buttons { 1.36 + display: table-row; 1.37 + } 1.38 + #overview-example > .buttons > div { 1.39 + display: table-cell; 1.40 + border: thick solid hsl(60,80%,50%); 1.41 + border-radius: 0 0 1em 1em; 1.42 + border-top: none; 1.43 + text-align: center; 1.44 + } 1.45 + #overview-example button { 1.46 + background-color: hsl(120,100%,40%); 1.47 + border: medium inset hsl(120,70%,40%); 1.48 + border-radius: 1em; 1.49 + padding: .5em; 1.50 + font-weight: bold; 1.51 + color: white; 1.52 + font-size: 1.6em; 1.53 + cursor: pointer; 1.54 + width: 90%; 1.55 + margin: 1em auto; 1.56 + } 1.57 + 1.58 /* Visibility: Collapse example */ 1.59 #visibility-collapse-example { 1.60 display: table; 1.61 width: 100%; 1.62 box-shadow: 3px 3px 10px #333; 1.63 } 1.64 - #visibility-collapse-example > #main, 1.65 + #visibility-collapse-example > article, 1.66 #visibility-collapse-example > nav { 1.67 display: table-cell; 1.68 } 1.69 - #main { 1.70 + #visibility-collapse-example > article { 1.71 width: 100%; 1.72 background: white; 1.73 } 1.74 @@ -91,6 +142,58 @@ 1.75 overflow: hidden; 1.76 } 1.77 1.78 + #auto-bar { 1.79 + overflow: hidden; 1.80 + padding: .25em 1em; 1.81 + background: #ddd; 1.82 + list-style: none; 1.83 + margin: 0; 1.84 + border-radius: .3em; 1.85 + } 1.86 + #auto-bar > li { 1.87 + float: left; s 1.88 + color: black; 1.89 + margin: 0; 1.90 + } 1.91 + #auto-bar > li:first-child:after, 1.92 + #auto-bar > li:first-child + li:after { 1.93 + content: " | "; 1.94 + white-space: pre; 1.95 + } 1.96 + #auto-bar > li > a { 1.97 + display: inline-block; 1.98 + padding: 0 .25em; 1.99 + border-radius: .3em; 1.100 + } 1.101 + #auto-bar > li > a:not(:hover):not(:focus) { 1.102 + text-decoration: none; 1.103 + } 1.104 + #auto-bar > li > a:hover { 1.105 + color: #ddd; 1.106 + background: #444; 1.107 + } 1.108 + #auto-bar > #login { float: right; } 1.109 + 1.110 + 1.111 + .cross-auto-figure > div { 1.112 + margin: 0 auto; 1.113 + width: 70px; 1.114 + background: #888; 1.115 + padding: 0 .5em; 1.116 + border-radius: 1em; 1.117 + border: 1px solid transparent; 1.118 + } 1.119 + .cross-auto-figure > div > div { 1.120 + border-spacing: 0; 1.121 + display: table; 1.122 + background: #ddd; 1.123 + color: black; 1.124 + text-align: center; 1.125 + margin: .5em auto; 1.126 + padding: .5em; 1.127 + border-radius: .5em; 1.128 + } 1.129 + 1.130 .axis { color: hsl( 0,80%,40%); } 1.131 .side { color: hsl(240,80%,50%); } 1.132 .size { color: hsl(120,80%,30%); } 1.133 @@ -103,11 +206,11 @@ 1.134 1.135 <h1 id=head-box-flexible>CSS Flexible Box Layout Module</h1> 1.136 1.137 - <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 17 July 2012</h2> 1.138 + <h2 class="no-num no-toc" id=w3c-working>Editor's Draft, 18 July 2012</h2> 1.139 1.140 <dl> 1.141 <dt>This version: 1.142 - <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120717/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120717/</a>--> 1.143 + <!--<dd><a href="http://www.w3.org/TR/2012/ED-css3-flexbox-20120718/">http://www.w3.org/TR/2012/WD-css3-flexbox-20120718/</a>--> 1.144 1.145 1.146 <dd><a 1.147 @@ -469,9 +572,10 @@ 1.148 <li> can be laid out in any <a href="#flex-direction-property">flow 1.149 direction</a> (leftwards, rightwards, downwards, or even upwards!) 1.150 1.151 - <li> can have their order <a href="#flex-flow-row-reverse">reversed</a> or 1.152 - <a href="#order-property">rearranged</a> at the style layer (i.e., 1.153 - display order can be independent of source order) 1.154 + <li> can have their visual order <a 1.155 + href="#flex-flow-row-reverse">reversed</a> or <a 1.156 + href="#order-property">rearranged</a> at the style layer (i.e., display 1.157 + order can be independent of source order) 1.158 1.159 <li> can be laid out linearly along a single (<a href="#main-axis"><i 1.160 title="main axis">main</i></a>) axis or <a 1.161 @@ -504,8 +608,9 @@ 1.162 column flex container, laying out its contents vertically. 1.163 1.164 <li> Within each entry, content is ordered logically with the title 1.165 - first, followed by the description and the photo. For a more compelling 1.166 - visual presentation, however, ‘<a href="#order"><code 1.167 + first, followed by the description and the photo. This provides a 1.168 + sensible ordering for speech rendering and in non-CSS browsers. For a 1.169 + more compelling visual presentation, however, ‘<a href="#order"><code 1.170 class=property>order</code></a>’ is used to pull the image up from 1.171 later in the content to the top, and ‘<a href="#align-self"><code 1.172 class=property>align-self</code></a>’ to center it horizontally. 1.173 @@ -533,7 +638,7 @@ 1.174 align-self: center; 1.175 } 1.176 .sale-item > button { 1.177 - margin: auto 1em 0; 1.178 + margin: auto 5% 0; 1.179 } 1.180 </style></pre> 1.181 </div> 1.182 @@ -553,7 +658,7 @@ 1.183 <li>Mouse 1.184 </ul> 1.185 <img src="images/computer.jpg" 1.186 - alt='[A white computer with matching peripherals.]'> 1.187 + alt='You get: a white computer with matching peripherals.'> 1.188 <button>BUY NOW</button> 1.189 </section> 1.190 1.191 @@ -565,83 +670,57 @@ 1.192 <ul> 1.193 <li>Paper and ink not included. 1.194 </ul> 1.195 - <img src="images/printer.jpg" alt=''> 1.196 + <img src="images/printer.jpg" alt='You get: beautiful ASCII art.'> 1.197 <button>BUY NOW</button> 1.198 </section> 1.199 </section></pre> 1.200 </div> 1.201 </div> 1.202 <figure> 1.203 - <div 1.204 - style="display:table; margin: 0 auto 1em; border-spacing: .5em; min-width: 672px;"> 1.205 - <section class=computer-example> <img 1.206 - alt="[A white computer with matching keyboard and monitor.]" 1.207 - src="images/computer.jpg"> 1.208 - <h1 style="font-size: 1.4em;">Computer Starter Kit</h1> 1.209 - 1.210 - <p> This is the best computer money can buy, if you don't have much 1.211 - money. 1.212 - 1.213 - <ul> 1.214 - <li>Computer 1.215 - 1.216 - <li>Monitor 1.217 - 1.218 - <li>Keyboard 1.219 - 1.220 - <li>Mouse 1.221 - </ul> 1.222 - <button>BUY NOW</button> </section> <section class=computer-example> <img 1.223 - alt="" src="images/printer.png"> 1.224 - <h1 style="font-size: 1.4em;">Printer</h1> 1.225 - 1.226 - <p> Only capable of printing ASCII art. 1.227 - 1.228 - <ul> 1.229 - <li>Paper and ink not included. 1.230 - </ul> 1.231 - <button>BUY NOW</button> </section></div> 1.232 + <div id=overview-example> 1.233 + <div class=col></div> 1.234 + 1.235 + <div class=col></div> 1.236 + 1.237 + <div class=desc> <img 1.238 + alt="You get: a white computer with matching keyboard and monitor." 1.239 + src="images/computer.jpg"> 1.240 + <h1 style="font-size: 1.4em;">Computer Starter Kit</h1> 1.241 + 1.242 + <p> This is the best computer money can buy, if you don't have much 1.243 + money. 1.244 + 1.245 + <ul> 1.246 + <li>Computer 1.247 + 1.248 + <li>Monitor 1.249 + 1.250 + <li>Keyboard 1.251 + 1.252 + <li>Mouse 1.253 + </ul> 1.254 + </div> 1.255 + 1.256 + <div class=desc> <img alt="You get: beautiful ASCII art." 1.257 + src="images/printer.png"> 1.258 + <h1 style="font-size: 1.4em;">Printer</h1> 1.259 + 1.260 + <p> Only capable of printing ASCII art. 1.261 + 1.262 + <ul> 1.263 + <li>Paper and ink not included. 1.264 + </ul> 1.265 + </div> 1.266 + 1.267 + <div class=buttons> 1.268 + <div><button>BUY NOW</button></div> 1.269 + 1.270 + <div><button>BUY NOW</button></div> 1.271 + </div> 1.272 + </div> 1.273 <figcaption> An example rendering of the code above. </figcaption> 1.274 </figure></div> 1.275 1.276 - <head> 1.277 - <style scoped> 1.278 - .computer-example { 1.279 - display: table-cell; 1.280 - vertical-align: top; 1.281 - width: 300px; 1.282 - padding: 1em 1em 100px; 1.283 - position: relative; 1.284 - background: hsl(60,100%,90%); 1.285 - border: thick solid hsl(60,80%,50%); 1.286 - border-radius: 1em; 1.287 - text-align: left; 1.288 - } 1.289 - .computer-example > img { 1.290 - margin: 0 auto; 1.291 - display: block; 1.292 - } 1.293 - .computer-example > h1 { 1.294 - background: transparent; 1.295 - text-decoration: underline; 1.296 - } 1.297 - .computer-example > button { 1.298 - background-color: hsl(120,100%,40%); 1.299 - border: medium inset hsl(120,70%,40%); 1.300 - border-radius: 1em; 1.301 - padding: .5em; 1.302 - font-weight: bold; 1.303 - color: white; 1.304 - font-size: 1.6em; 1.305 - cursor: pointer; 1.306 - position: absolute; 1.307 - left: 1em; 1.308 - right: 1em; 1.309 - bottom: 1em; 1.310 - } 1.311 - </style> 1.312 - 1.313 - <body> 1.314 <h3 id=placement><span class=secno>1.2. </span> Module interactions</h3> 1.315 1.316 <p> This module extends the definition of the ‘<code 1.317 @@ -693,7 +772,7 @@ 1.318 height=277 src="images/flex-direction-terms.svg" width=665> <figcaption> 1.319 An illustration of the various directions and sizing terms as applied to a 1.320 ‘<a href="#flex-flow-row"><code class=css>row</code></a>’ flex 1.321 - container. </figcaption></figure> 1.322 + container. </figcaption> </figure> 1.323 1.324 <dl id=main> 1.325 <dt class=axis>main axis 1.326 @@ -771,8 +850,8 @@ 1.327 <tr> 1.328 <th><a href="#values">New value</a>: 1.329 1.330 - <td><dfn id=display-flex>flex</dfn> | <dfn 1.331 - id=display-inline-flex>inline-flex</dfn> 1.332 + <td><dfn id=flex-value>flex</dfn> | <dfn 1.333 + id=inline-flex-value>inline-flex</dfn> 1.334 </table> 1.335 1.336 <dl> 1.337 @@ -987,33 +1066,33 @@ 1.338 1.339 <div id=visibility-collapse-example> 1.340 <!-- No, don't look at this source code, look at the other source code. --> 1.341 - <article id=main> Interesting Stuff to Read </article> <nav> 1.342 + <article> Interesting Stuff to Read </article> <nav> 1.343 <ul> 1.344 <li id=nav-about><a href="#nav-about">About</a> 1.345 <ul> 1.346 - <li><a href="…">History</a> 1.347 - 1.348 - <li><a href="…">Mission</a> 1.349 - 1.350 - <li><a href="…">People</a> 1.351 + <li><a href="#">History</a> 1.352 + 1.353 + <li><a href="#">Mission</a> 1.354 + 1.355 + <li><a href="#">People</a> 1.356 </ul> 1.357 1.358 <li id=nav-projects><a href="#nav-projects">Projects</a> 1.359 <ul> 1.360 - <li><a href="…">Art</a> 1.361 - 1.362 - <li><a href="…">Architecture</a> 1.363 - 1.364 - <li><a href="…">Music</a> 1.365 + <li><a href="#">Art</a> 1.366 + 1.367 + <li><a href="#">Architecture</a> 1.368 + 1.369 + <li><a href="#">Music</a> 1.370 </ul> 1.371 1.372 <li id=nav-interact><a href="#nav-interact">Interact</a> 1.373 <ul> 1.374 - <li><a href="…">Blog</a> 1.375 - 1.376 - <li><a href="…">Forums</a> 1.377 - 1.378 - <li><a href="…">Events</a> 1.379 + <li><a href="#">Blog</a> 1.380 + 1.381 + <li><a href="#">Forums</a> 1.382 + 1.383 + <li><a href="#">Events</a> 1.384 </ul> 1.385 </ul> 1.386 </nav></div> 1.387 @@ -2220,42 +2299,6 @@ 1.388 </nav></pre> 1.389 </div> 1.390 1.391 - <head> 1.392 - <style scoped> 1.393 - #auto-bar { 1.394 - overflow: hidden; 1.395 - padding: .25em 1em; 1.396 - background: #ddd; 1.397 - list-style: none; 1.398 - margin: 0; 1.399 - border-radius: .3em; 1.400 - } 1.401 - #auto-bar > li { 1.402 - float: left; s 1.403 - color: black; 1.404 - margin: 0; 1.405 - } 1.406 - #auto-bar > li:first-child:after, 1.407 - #auto-bar > li:first-child + li:after { 1.408 - content: " | "; 1.409 - white-space: pre; 1.410 - } 1.411 - #auto-bar > li > a { 1.412 - display: inline-block; 1.413 - padding: 0 .25em; 1.414 - border-radius: .3em; 1.415 - } 1.416 - #auto-bar > li > a:not(:hover):not(:focus) { 1.417 - text-decoration: none; 1.418 - } 1.419 - #auto-bar > li > a:hover { 1.420 - color: #ddd; 1.421 - background: #444; 1.422 - } 1.423 - #auto-bar > #login { float: right; } 1.424 - </style> 1.425 - 1.426 - <body> 1.427 <div class=example> 1.428 <p> The figure below illustrates the difference in cross-axis alignment in 1.429 overflow situations between using ‘<a href="#align-self-auto"><code 1.430 @@ -2293,29 +2336,6 @@ 1.431 better. </figcaption> </figure> 1.432 </div> 1.433 1.434 - <head> 1.435 - <style scoped> 1.436 - .cross-auto-figure > div { 1.437 - margin: 0 auto; 1.438 - width: 70px; 1.439 - background: #888; 1.440 - padding: 0 .5em; 1.441 - border-radius: 1em; 1.442 - border: 1px solid transparent; 1.443 - } 1.444 - .cross-auto-figure > div > div { 1.445 - border-spacing: 0; 1.446 - display: table; 1.447 - background: #ddd; 1.448 - color: black; 1.449 - text-align: center; 1.450 - margin: .5em auto; 1.451 - padding: .5em; 1.452 - border-radius: .5em; 1.453 - } 1.454 - </style> 1.455 - 1.456 - <body> 1.457 <h3 id=justify-content-property><span class=secno>8.2. </span> Axis 1.458 Alignment: the ‘<a href="#justify-content"><code 1.459 class=property>justify-content</code></a>’ property</h3> 1.460 @@ -3137,7 +3157,7 @@ 1.461 1.462 <p> Skip this step in the second layout round. 1.463 1.464 - <li id=algo-cross-item> <strong>Determine the used cross size of each flex 1.465 + <li id=algo-stretch> <strong>Determine the used cross size of each flex 1.466 item.</strong> If a flex item has ‘<code class=css>align-self: 1.467 stretch</code>’, its cross size property is ‘<a 1.468 href="#align-self-auto"><code class=css>auto</code></a>’, and neither 1.469 @@ -4129,8 +4149,8 @@ 1.470 <li>definite size, <a href="#definite-size" 1.471 title="definite size"><strong>9.</strong></a> 1.472 1.473 - <li>flex, <a href="#display-flex" title=flex><strong>3.</strong></a>, <a 1.474 - href="#flex" title=flex><strong>7.1.</strong></a> 1.475 + <li>flex, <a href="#flex" title=flex><strong>7.1.</strong></a>, <a 1.476 + href="#flex-value" title=flex><strong>3.</strong></a> 1.477 1.478 <li>‘<a href="#flex"><code class=css>flex</code></a>’, <a 1.479 href="#display-flex" title="''flex''"><strong>3.</strong></a> 1.480 @@ -4215,7 +4235,7 @@ 1.481 class=css>inline-flex</code></a>’, <a href="#display-inline-flex" 1.482 title="''inline-flex''"><strong>3.</strong></a> 1.483 1.484 - <li>inline-flex, <a href="#display-inline-flex" 1.485 + <li>inline-flex, <a href="#inline-flex-value" 1.486 title=inline-flex><strong>3.</strong></a> 1.487 1.488 <li>justify-content, <a href="#justify-content"
2.1 --- a/css3-flexbox/Overview.src.html Wed Jul 18 12:22:45 2012 -0400 2.2 +++ b/css3-flexbox/Overview.src.html Wed Jul 18 16:26:12 2012 -0400 2.3 @@ -32,17 +32,68 @@ 2.4 margin-bottom: 0; 2.5 } 2.6 2.7 + /* Overview catalog example */ 2.8 + #overview-example { 2.9 + display:table; 2.10 + margin: 0 auto 1em; 2.11 + border-spacing: .5em 0; 2.12 + min-width: 672px; 2.13 + } 2.14 + #overview-example > .col { 2.15 + display: table-column; 2.16 + background: hsl(60,100%,90%); 2.17 + } 2.18 + #overview-example > .desc { 2.19 + display: table-cell; 2.20 + vertical-align: top; 2.21 + width: 300px; 2.22 + padding: 1em 1em 0; 2.23 + text-align: left; 2.24 + border: thick solid hsl(60,80%,50%); 2.25 + border-radius: 1em 1em 0 0; 2.26 + border-bottom: none; 2.27 + } 2.28 + #overview-example > .desc > img { 2.29 + margin: 0 auto; 2.30 + display: block; 2.31 + } 2.32 + #overview-example > .desc > h1 { 2.33 + background: transparent; 2.34 + } 2.35 + #overview-example > .buttons { 2.36 + display: table-row; 2.37 + } 2.38 + #overview-example > .buttons > div { 2.39 + display: table-cell; 2.40 + border: thick solid hsl(60,80%,50%); 2.41 + border-radius: 0 0 1em 1em; 2.42 + border-top: none; 2.43 + text-align: center; 2.44 + } 2.45 + #overview-example button { 2.46 + background-color: hsl(120,100%,40%); 2.47 + border: medium inset hsl(120,70%,40%); 2.48 + border-radius: 1em; 2.49 + padding: .5em; 2.50 + font-weight: bold; 2.51 + color: white; 2.52 + font-size: 1.6em; 2.53 + cursor: pointer; 2.54 + width: 90%; 2.55 + margin: 1em auto; 2.56 + } 2.57 + 2.58 /* Visibility: Collapse example */ 2.59 #visibility-collapse-example { 2.60 display: table; 2.61 width: 100%; 2.62 box-shadow: 3px 3px 10px #333; 2.63 } 2.64 - #visibility-collapse-example > #main, 2.65 + #visibility-collapse-example > article, 2.66 #visibility-collapse-example > nav { 2.67 display: table-cell; 2.68 } 2.69 - #main { 2.70 + #visibility-collapse-example > article { 2.71 width: 100%; 2.72 background: white; 2.73 } 2.74 @@ -87,6 +138,58 @@ 2.75 overflow: hidden; 2.76 } 2.77 2.78 + #auto-bar { 2.79 + overflow: hidden; 2.80 + padding: .25em 1em; 2.81 + background: #ddd; 2.82 + list-style: none; 2.83 + margin: 0; 2.84 + border-radius: .3em; 2.85 + } 2.86 + #auto-bar > li { 2.87 + float: left; s 2.88 + color: black; 2.89 + margin: 0; 2.90 + } 2.91 + #auto-bar > li:first-child:after, 2.92 + #auto-bar > li:first-child + li:after { 2.93 + content: " | "; 2.94 + white-space: pre; 2.95 + } 2.96 + #auto-bar > li > a { 2.97 + display: inline-block; 2.98 + padding: 0 .25em; 2.99 + border-radius: .3em; 2.100 + } 2.101 + #auto-bar > li > a:not(:hover):not(:focus) { 2.102 + text-decoration: none; 2.103 + } 2.104 + #auto-bar > li > a:hover { 2.105 + color: #ddd; 2.106 + background: #444; 2.107 + } 2.108 + #auto-bar > #login { float: right; } 2.109 + 2.110 + 2.111 + .cross-auto-figure > div { 2.112 + margin: 0 auto; 2.113 + width: 70px; 2.114 + background: #888; 2.115 + padding: 0 .5em; 2.116 + border-radius: 1em; 2.117 + border: 1px solid transparent; 2.118 + } 2.119 + .cross-auto-figure > div > div { 2.120 + border-spacing: 0; 2.121 + display: table; 2.122 + background: #ddd; 2.123 + color: black; 2.124 + text-align: center; 2.125 + margin: .5em auto; 2.126 + padding: .5em; 2.127 + border-radius: .5em; 2.128 + } 2.129 + 2.130 .axis { color: hsl( 0,80%,40%); } 2.131 .side { color: hsl(240,80%,50%); } 2.132 .size { color: hsl(120,80%,30%); } 2.133 @@ -202,7 +305,7 @@ 2.134 can be laid out in any <a href="#flex-direction-property">flow direction</a> 2.135 (leftwards, rightwards, downwards, or even upwards!) 2.136 <li> 2.137 - can have their order <a href="#flex-flow-row-reverse">reversed</a> or 2.138 + can have their visual order <a href="#flex-flow-row-reverse">reversed</a> or 2.139 <a href="#order-property">rearranged</a> at the style layer 2.140 (i.e., display order can be independent of source order) 2.141 <li> 2.142 @@ -236,6 +339,7 @@ 2.143 <li> 2.144 Within each entry, content is ordered logically with the title first, 2.145 followed by the description and the photo. 2.146 + This provides a sensible ordering for speech rendering and in non-CSS browsers. 2.147 For a more compelling visual presentation, however, 2.148 'order' is used to pull the image up from later in the content to the top, 2.149 and 'align-self' to center it horizontally. 2.150 @@ -263,7 +367,7 @@ 2.151 align-self: center; 2.152 } 2.153 .sale-item > button { 2.154 - margin: auto 1em 0; 2.155 + margin: auto 5% 0; 2.156 } 2.157 </style></pre></div> 2.158 <div style="display:table-cell;"><pre> 2.159 @@ -280,7 +384,7 @@ 2.160 <li>Mouse 2.161 </ul> 2.162 <img src="images/computer.jpg" 2.163 - alt='[A white computer with matching peripherals.]'> 2.164 + alt='You get: a white computer with matching peripherals.'> 2.165 <button>BUY NOW</button> 2.166 </section> 2.167 2.168 @@ -292,86 +396,47 @@ 2.169 <ul> 2.170 <li>Paper and ink not included. 2.171 </ul> 2.172 - <img src="images/printer.jpg" alt=''> 2.173 + <img src="images/printer.jpg" alt='You get: beautiful ASCII art.'> 2.174 <button>BUY NOW</button> 2.175 </section> 2.176 </section></pre></div> 2.177 </div> 2.178 <figure> 2.179 - <div style="display:table; margin: 0 auto 1em; border-spacing: .5em; min-width: 672px;"> 2.180 - <section class='computer-example'> 2.181 - <img src="images/computer.jpg" alt='[A white computer with matching keyboard and monitor.]'> 2.182 - 2.183 + <div id="overview-example"> 2.184 + <div class="col"></div> 2.185 + <div class="col"></div> 2.186 + <div class="desc"> 2.187 + <img src="images/computer.jpg" alt='You get: a white computer with matching keyboard and monitor.'> 2.188 <h1 style="font-size: 1.4em;">Computer Starter Kit</h1> 2.189 - 2.190 <p> 2.191 This is the best computer money can buy, 2.192 if you don't have much money. 2.193 - 2.194 <ul> 2.195 <li>Computer 2.196 <li>Monitor 2.197 <li>Keyboard 2.198 <li>Mouse 2.199 </ul> 2.200 - 2.201 - <button>BUY NOW</button> 2.202 - </section> 2.203 - <section class='computer-example'> 2.204 - <img src="images/printer.png" alt=''> 2.205 - 2.206 + </div> 2.207 + <div class="desc"> 2.208 + <img src="images/printer.png" alt='You get: beautiful ASCII art.'> 2.209 <h1 style="font-size: 1.4em;">Printer</h1> 2.210 - 2.211 <p> 2.212 Only capable of printing 2.213 ASCII art. 2.214 - 2.215 <ul> 2.216 <li>Paper and ink not included. 2.217 </ul> 2.218 - 2.219 - <button>BUY NOW</button> 2.220 - </section> 2.221 + </div> 2.222 + <div class="buttons"> 2.223 + <div><button>BUY NOW</button></div> 2.224 + <div><button>BUY NOW</button></div> 2.225 + </div> 2.226 </div> 2.227 <figcaption> 2.228 An example rendering of the code above. 2.229 </figcaption> 2.230 </figure> 2.231 - <style scoped> 2.232 - .computer-example { 2.233 - display: table-cell; 2.234 - vertical-align: top; 2.235 - width: 300px; 2.236 - padding: 1em 1em 100px; 2.237 - position: relative; 2.238 - background: hsl(60,100%,90%); 2.239 - border: thick solid hsl(60,80%,50%); 2.240 - border-radius: 1em; 2.241 - text-align: left; 2.242 - } 2.243 - .computer-example > img { 2.244 - margin: 0 auto; 2.245 - display: block; 2.246 - } 2.247 - .computer-example > h1 { 2.248 - background: transparent; 2.249 - text-decoration: underline; 2.250 - } 2.251 - .computer-example > button { 2.252 - background-color: hsl(120,100%,40%); 2.253 - border: medium inset hsl(120,70%,40%); 2.254 - border-radius: 1em; 2.255 - padding: .5em; 2.256 - font-weight: bold; 2.257 - color: white; 2.258 - font-size: 1.6em; 2.259 - cursor: pointer; 2.260 - position: absolute; 2.261 - left: 1em; 2.262 - right: 1em; 2.263 - bottom: 1em; 2.264 - } 2.265 - </style> 2.266 </div> 2.267 2.268 <h3 id="placement"> 2.269 @@ -418,6 +483,7 @@ 2.270 <img src='images/flex-direction-terms.svg' width=665 height=277 alt> 2.271 <figcaption> 2.272 An illustration of the various directions and sizing terms as applied to a ''row'' flex container. 2.273 + </figcaption> 2.274 </figure> 2.275 2.276 <dl id="main"> 2.277 @@ -478,7 +544,7 @@ 2.278 <td>display 2.279 <tr> 2.280 <th><a href="#values">New value</a>: 2.281 - <td><dfn id='display-flex'>flex</dfn> | <dfn id='display-inline-flex'>inline-flex</dfn> 2.282 + <td><dfn id='flex-value'>flex</dfn> | <dfn id='inline-flex-value'>inline-flex</dfn> 2.283 </table> 2.284 2.285 <dl> 2.286 @@ -679,28 +745,28 @@ 2.287 <figcaption>Sample rendering for example code below</figcaption> 2.288 <div id="visibility-collapse-example"> 2.289 <!-- No, don't look at this source code, look at the other source code. --> 2.290 - <article id="main"> 2.291 + <article> 2.292 Interesting Stuff to Read 2.293 </article> 2.294 <nav> 2.295 <ul> 2.296 <li id="nav-about"><a href="#nav-about">About</a> 2.297 <ul> 2.298 - <li><a href="…">History</a> 2.299 - <li><a href="…">Mission</a> 2.300 - <li><a href="…">People</a> 2.301 + <li><a href="#">History</a> 2.302 + <li><a href="#">Mission</a> 2.303 + <li><a href="#">People</a> 2.304 </ul> 2.305 <li id="nav-projects"><a href="#nav-projects">Projects</a> 2.306 <ul> 2.307 - <li><a href="…">Art</a> 2.308 - <li><a href="…">Architecture</a> 2.309 - <li><a href="…">Music</a> 2.310 + <li><a href="#">Art</a> 2.311 + <li><a href="#">Architecture</a> 2.312 + <li><a href="#">Music</a> 2.313 </ul> 2.314 <li id="nav-interact"><a href="#nav-interact">Interact</a> 2.315 <ul> 2.316 - <li><a href="…">Blog</a> 2.317 - <li><a href="…">Forums</a> 2.318 - <li><a href="…">Events</a> 2.319 + <li><a href="#">Blog</a> 2.320 + <li><a href="#">Forums</a> 2.321 + <li><a href="#">Events</a> 2.322 </ul> 2.323 </ul> 2.324 </nav> 2.325 @@ -1129,7 +1195,7 @@ 2.326 This is so non-visual media and non-CSS UAs, 2.327 which typically present content linearly, 2.328 can be catered to with a logical source order, 2.329 - while 'order' is used to rearrange the visual order.</span> 2.330 + while 'order' is used to rearrange the visual order. 2.331 2.332 <div class='example'> 2.333 <p> 2.334 @@ -1668,40 +1734,6 @@ 2.335 <li id='login'><a href=/login>Login</a> 2.336 </ul> 2.337 </nav></pre> 2.338 - 2.339 - <style scoped> 2.340 - #auto-bar { 2.341 - overflow: hidden; 2.342 - padding: .25em 1em; 2.343 - background: #ddd; 2.344 - list-style: none; 2.345 - margin: 0; 2.346 - border-radius: .3em; 2.347 - } 2.348 - #auto-bar > li { 2.349 - float: left; s 2.350 - color: black; 2.351 - margin: 0; 2.352 - } 2.353 - #auto-bar > li:first-child:after, 2.354 - #auto-bar > li:first-child + li:after { 2.355 - content: " | "; 2.356 - white-space: pre; 2.357 - } 2.358 - #auto-bar > li > a { 2.359 - display: inline-block; 2.360 - padding: 0 .25em; 2.361 - border-radius: .3em; 2.362 - } 2.363 - #auto-bar > li > a:not(:hover):not(:focus) { 2.364 - text-decoration: none; 2.365 - } 2.366 - #auto-bar > li > a:hover { 2.367 - color: #ddd; 2.368 - background: #444; 2.369 - } 2.370 - #auto-bar > #login { float: right; } 2.371 - </style> 2.372 </div> 2.373 2.374 <div class='example'> 2.375 @@ -1737,26 +1769,6 @@ 2.376 the true centering behavior might be better. 2.377 </figcaption> 2.378 </figure> 2.379 - <style scoped> 2.380 - .cross-auto-figure > div { 2.381 - margin: 0 auto; 2.382 - width: 70px; 2.383 - background: #888; 2.384 - padding: 0 .5em; 2.385 - border-radius: 1em; 2.386 - border: 1px solid transparent; 2.387 - } 2.388 - .cross-auto-figure > div > div { 2.389 - border-spacing: 0; 2.390 - display: table; 2.391 - background: #ddd; 2.392 - color: black; 2.393 - text-align: center; 2.394 - margin: .5em auto; 2.395 - padding: .5em; 2.396 - border-radius: .5em; 2.397 - } 2.398 - </style> 2.399 </div> 2.400 2.401 <h3 id='justify-content-property'> 2.402 @@ -2452,7 +2464,7 @@ 2.403 <p> 2.404 Skip this step in the second layout round. 2.405 2.406 - <li id='algo-cross-item'> 2.407 + <li id='algo-stretch'> 2.408 <strong>Determine the used cross size of each flex item.</strong> 2.409 If a flex item has ''align-self: stretch'', 2.410 its cross size property is ''auto'',
