From d4d49326713347a5ca1d278df6f4308fbdbed400 Mon Sep 17 00:00:00 2001
From: Mat Marquis <mat@matmarquis.com>
Date: Wed, 23 Apr 2014 14:32:12 -0400
Subject: [PATCH] Simplified `sizes` example.

---
 examples/demo-01.html | 8 +++-----
 index.html            | 4 ++--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/examples/demo-01.html b/examples/demo-01.html
index 5db2da4d..9a8c494f 100644
--- a/examples/demo-01.html
+++ b/examples/demo-01.html
@@ -20,16 +20,14 @@
 
 
 		<h3>An img with "srcset" and sizes" attributes:</h3>
-<pre><code>&lt;img sizes=&quot;(max-width: 30em) 100%, (max-width: 50em) 75%, 50%&quot;
+<pre><code>&lt;img sizes=&quot;100%, (min-width: 40em) 80%&quot;
 srcset=&quot;../examples/images/pic-small.png 400w, ../examples/images/pic-medium.png 800w, ../examples/images/pic-large.png 1200w&quot; alt=&quot;Obama with soldiers&quot;&gt;
 </code></pre>
 
 		<p>Here's how that renders in the browser. Feel free to resize to see it change.</p>
 
-		<img sizes="(max-width: 30em) 100%, (max-width: 50em) 75%, 50%"
-				srcset="../examples/images/pic-small.png 400w, ../examples/images/pic-medium.png 800w, ../examples/images/pic-large.png 1200w" alt="Obama with soldiers">
-
-
+		<img sizes="100%, (min-width: 40em) 80%"
+				srcset="examples/images/pic-small.png 400w, examples/images/pic-medium.png 800w, examples/images/pic-large.png 1200w" alt="Obama with soldiers">
 
 	</body>
 </html>
diff --git a/index.html b/index.html
index 44c4a138..856c67aa 100644
--- a/index.html
+++ b/index.html
@@ -82,13 +82,13 @@ <h3 id="img-sizes">Using <code>img</code> with <code>srcset</code> &amp; <code>s
 		<p>The <code>sizes</code> syntax is used to define the size of the image across a number of breakpoints. <code>srcset</code> then defines an array of images and their inherent sizes. It's beyond the scope of this guide to get into much detail about how to use the new <code>srcset</code> &amp; <code>sizes</code> attributes, so we'd recommend reading the following post by Eric Portis: <a href="http://ericportis.com/posts/2014/srcset-sizes/">Srcset and Sizes</a>. Read that first, then check out the demos below!</p>
 
 		<h3>An img with "srcset" and sizes" attributes:</h3>
-<pre><code>&lt;img sizes=&quot;(max-width: 30em) 100%, (max-width: 50em) 75%, 50%&quot;
+<pre><code>&lt;sizes="100%, (min-width: 40em) 80%&quot;
 srcset=&quot;examples/images/pic-small.png 400w, examples/images/pic-medium.png 800w, examples/images/pic-large.png 1200w&quot; alt=&quot;Obama with soldiers&quot;&gt;
 </code></pre>
 
 		<p>Here's how that renders in the browser. Feel free to resize to see it change.</p>
 
-		<img sizes="(max-width: 30em) 100%, (max-width: 50em) 75%, 50%"
+		<img sizes="100%, (min-width: 40em) 80%"
 				srcset="examples/images/pic-small.png 400w, examples/images/pic-medium.png 800w, examples/images/pic-large.png 1200w" alt="Obama with soldiers">
 
 		<p><a href="examples/demo-01.html">View standalone demo</a></p>