[css-regions] improve linked box images

Author: astearns

css-regions/Overview.html

@@ -56,7 +56,7 @@
 </p>
   <h1 class="p-name no-ref" id=title>CSS Regions Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
-    <span class=dt-updated><span class=value-title title=20140325>25 March 2014</span></span></span></h2>
+    <span class=dt-updated><span class=value-title title=20140328>28 March 2014</span></span></span></h2>
   <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-regions/>http://dev.w3.org/csswg/css-regions/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-regions/>http://www.w3.org/TR/css-regions/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-regions/>http://dev.w3.org/csswg/css-regions/</a>
     <dt>Feedback:</dt>
         <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-regions%5D%20feedback">www-style@w3.org</a>
@@ -288,15 +288,18 @@ <h2 class="heading settled heading" data-level=1 id=introduction><span class=sec
 		</figure>
 
 		<p style=clear:left;>In the images above, 
-			the red outline indicates the size of the viewport.
+			the gray area represents  
+			the content below the screen edge 
+			in the initial view.
 
-		<p>This example links just two boxes together, 
+<p>		This example links just two boxes together, 
 		but more boxes could be added to the <a class=css data-link-type=maybe href=#region-chain0 title="region chain">region chain</a> 
 		to regularly interleave other content with the article.
 	</div>
 
 	<div class=example>
-		Custom overflow handling can be accomplished by linking a separate overflow box. In this example, the overflow box is nestled inside a menu in the markup, and only displays if the menu is toggled.
+
+<p>		Custom overflow handling can be accomplished by linking a separate overflow box. In this example, the overflow box is nestled inside a menu in the markup, and only displays if the menu is toggled.
 
 		<pre><code class=html>
   &lt;nav&gt; ...some links... &lt;/nav&gt;
@@ -2187,6 +2190,7 @@ <h3 class="heading settled heading" data-level=11.1 id=changes_from_Feb_18_2014>
 		<li>Added three simpler examples to the introduction</li>
 		<li>Moved complex example to the <a href=http://wiki.csswg.org/spec/css3-regions/complex-layout-example>CSSWG wiki</a></li>
 	</ul>
+
 <h3 class="heading settled heading" data-level=11.2 id=changes_from_May_28_2013><span class=secno>11.2 </span><span class=content>
 Changes from <a href=http://www.w3.org/TR/2013/WD-css3-regions-20130528/>May 28<sup>th</sup> 2013</a> version</span><a class=self-link href=#changes_from_May_28_2013></a></h3>
 

css-regions/Overview.src.html

@@ -125,14 +125,17 @@ <h2 id="introduction">
 		</figure>
 
 		<p style="clear:left;">In the images above, 
-			the red outline indicates the size of the viewport.
+			the gray area represents  
+			the content below the screen edge 
+			in the initial view.
 
-		<p>This example links just two boxes together, 
+		This example links just two boxes together, 
 		but more boxes could be added to the ''region chain'' 
 		to regularly interleave other content with the article.
 	</div>
 
 	<div class="example">
+
 		Custom overflow handling can be accomplished by linking a separate overflow box. In this example, the overflow box is nestled inside a menu in the markup, and only displays if the menu is toggled.
 
 		<pre><code class="html">
@@ -2119,7 +2122,7 @@ <h3 id="changes_from_Feb_18_2014">
 		<li>Added three simpler examples to the introduction</li>
 		<li>Moved complex example to the <a href="http://wiki.csswg.org/spec/css3-regions/complex-layout-example">CSSWG wiki</a></li>
 	</ul>
-	
+
 <h3 id="changes_from_May_28_2013">
 Changes from <a href="http://www.w3.org/TR/2013/WD-css3-regions-20130528/">May 28<sup>th</sup> 2013</a> version</h3>
 

css-regions/examples/linked-boxes.html

@@ -9,6 +9,7 @@
   		-border: thin black solid;
   		padding: 10px;
   		position: relative;
+  		font-family: sans-serif;
   	}
 		aside {
 			border: thin black solid;
@@ -22,13 +23,15 @@
 			font-size: 10px;
 			-webkit-flow-into: article-flow;
 		}
-		.screen {
+		.off-screen {
 			position: absolute;
-			left: 3px;
-			top: 3px;
-			width: calc(190px - 8px);
-			height: 250px;
-			border: thin dashed red;
+			top: 250px;
+			left: 0px;
+			width: 190px;
+			height: 175px;
+			background-color: lightgray;
+			opacity: .5;
+			z-index: 1;
 		}
 		.region {
 			-webkit-flow-from: article-flow;
@@ -39,11 +42,11 @@
   </style>
 </head>
 <body lang="en">
-	<div class="screen"></div>
+	<div class="off-screen"></div>
   <article>
   	<h1>Article</h1>
   	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, cupiditate rerum et commodi ea repellat placeat exercitationem perferendis assumenda voluptatibus. Aliquam, consectetur sed fuga praesentium velit. Necessitatibus, nostrum doloremque eius.</p>
-  	<p>Tur? Henis eictur aut veliqui audaessenia placeresci dolum num aut utam, volor sum re inctatiat pero volut evel in res vel eos ea velectempos et a sum voloribus elit, optas rerro blabore am volorese poria parit aut ute conse et quo venimint accum vollupta veligna tquati conse evendi nem eos et, eat lant.
+  	<p>Tur? Henis eictur aut veliqui audaes senia placeresci dolum num aut utam, volor sum re inctatiat pero volut evel in res vel eos ea velectempos et a sum voloribus elit, optas rerro blabore am volorese poria parit aut ute conse et quo venimint accum vollupta veligna tquati conse evendi nem eos et, eat lant.
 		<p>Necta sequam quas voloreperum cust rem quas simus. Eveliquam repre que ipsum sincte con eumetur?
 		<p>Estet aut eicipsa parum, sus, suntece rionesecta commolo rionem destruptat hari omniendam quaspe voloreh endeliquos cum nonse pos vellati di dolupta tempedis eata nimperempos es dicient volor acienieni quisqua spernat.
   </article>