Closes #308 - Picture element examples are art-direct-y now.

Author: Wilto

examples/demo-02.html

@@ -25,8 +25,8 @@ <h2 class="hed-pattern">The <code>picture</code> element</h2>
 
 	<pre><code>&lt;picture&gt;
   &lt;source srcset=&quot;../examples/images/extralarge.jpg&quot; media=&quot;(min-width: 1000px)&quot;&gt;
-  &lt;source srcset=&quot;../examples/images/large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;
-  &lt;img srcset=&quot;../examples/images/medium.jpg&quot; alt=&quot;…&quot;&gt;
+  &lt;source srcset=&quot;../examples/images/art-large.jpg&quot; media=&quot;(min-width: 600px)&quot;&gt;
+  &lt;img srcset=&quot;../examples/images/art-medium.jpg&quot; alt=&quot;…&quot;&gt;
 &lt;/picture&gt;</code></pre>
 
 		<h3 class="subhed">Supporting Picture in Internet Explorer 9</h3>
@@ -35,19 +35,19 @@ <h3 class="subhed">Supporting Picture in Internet Explorer 9</h3>
 <pre><code>&lt;picture&gt;
   &lt;!--[if IE 9]&gt;&lt;video style=&quot;display: none;&quot;&gt;&lt;![endif]--&gt;
   &lt;source srcset=&quot;../examples/images/extralarge.jpg&quot; media=&quot;(min-width: 1000px)&quot;&gt;
-  &lt;source srcset=&quot;../examples/images/large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;
+  &lt;source srcset=&quot;../examples/images/art-large.jpg&quot; media=&quot;(min-width: 600px)&quot;&gt;
   &lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
-  &lt;img srcset=&quot;../examples/images/medium.jpg&quot; alt=&quot;…&quot;&gt;
+  &lt;img srcset=&quot;../examples/images/art-medium.jpg&quot; alt=&quot;…&quot;&gt;
 &lt;/picture&gt;</code></pre>
 
 		<p>Here's how that renders in the browser. Feel free to resize to see it change.</p>
 
 		<picture>
 			<!--[if IE 9]><video style="display: none;"><![endif]-->
 			<source srcset="../examples/images/extralarge.jpg" media="(min-width: 1000px)">
-			<source srcset="../examples/images/large.jpg" media="(min-width: 800px)">
+			<source srcset="../examples/images/art-large.jpg" media="(min-width: 600px)">
 			<!--[if IE 9]></video><![endif]-->
-			<img srcset="../examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
+			<img srcset="../examples/images/art-medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
 		</picture>
 
 	</main>

examples/images/art-large.jpg

@@ -149,17 +149,17 @@ <h3 class="hed-pattern" id="using-picture">Using the `picture` element</h3>
 
 	<pre><code>&lt;picture&gt;
   &lt;source srcset=&quot;examples/images/extralarge.jpg&quot; media=&quot;(min-width: 1000px)&quot;&gt;
-  &lt;source srcset=&quot;examples/images/large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;
-  &lt;img srcset=&quot;examples/images/medium.jpg&quot; alt=&quot;…&quot;&gt;
+  &lt;source srcset=&quot;examples/images/art-large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;
+  &lt;img srcset=&quot;examples/images/art-medium.jpg&quot; alt=&quot;…&quot;&gt;
 &lt;/picture&gt;</code></pre>
 
 			<p>Here's how that renders at your current viewport size:</p>
 
-			<picture>
-				<source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
-				<source srcset="examples/images/large.jpg" media="(min-width: 800px)">
-				<img srcset="examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
-			</picture>
+		<picture>
+			<source srcset="../examples/images/extralarge.jpg" media="(min-width: 1000px)">
+			<source srcset="../examples/images/art-large.jpg" media="(min-width: 600px)">
+			<img srcset="../examples/images/art-medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
+		</picture>
 			<a href="examples/demo-02.html" class="demo">Standalone <code>picture</code> demo</a>