[css-line-grid] fix intro images

Author: astearns

css-line-grid/Overview.html

@@ -76,7 +76,7 @@
 </p>
   <h1 class="p-name no-ref" id=title>CSS Line Grid Module Level 1</h1>
   <h2 class="no-num no-toc no-ref heading settled" id=subtitle><span class=content>Editor’s Draft,
-    <span class=dt-updated><span class=value-title title=20140904>4 September 2014</span></span></span></h2>
+    <span class=dt-updated><span class=value-title title=20140907>7 September 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-line-grid/>http://dev.w3.org/csswg/css-line-grid/</a>
@@ -87,9 +87,9 @@ <h2 class="no-num no-toc no-ref heading settled" id=subtitle><span class=content
             with subject line
             “<kbd>[css-line-grid] <var>… message topic …</var></kbd>”(<a href=http://lists.w3.org/Archives/Public/www-style/ rel=discussion>archives</a>)
 	<dt>Editors:
-	<dd><dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact>Elika Etemad</a> (<span class="p-org org">Invited Expert</span>)
-	<dd><dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:kojiishi@gluesoft.co.jp>Koji Ishii</a> (<span class="p-org org">Invited Expert</span>)
-	<dd><dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:stearns@adobe.com>Alan Stearns</a> (<span class="p-org org">Adobe Systems, Inc.</span>)
+	<dd><div class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact>Elika Etemad</a> (<span class="p-org org">Invited Expert</span>)</div>
+	<dd><div class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:kojiishi@gluesoft.co.jp>Koji Ishii</a> (<span class="p-org org">Invited Expert</span>)</div>
+	<dd><div class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:stearns@adobe.com>Alan Stearns</a> (<span class="p-org org">Adobe Systems, Inc.</span>)</div>
 </dl>
 </div>
   <div data-fill-with=warning></div>
@@ -197,7 +197,7 @@ <h3 class="heading settled" data-level=1.1 id=context><span class=secno>1.1 </sp
 		<li>East Asian layouts require vertical rhythm
 			more often than other scripts do,
 			even in single column, non-paged media documents,
-			as defined in <a data-biblio-type=informative data-link-type=biblio href=#biblio-jlreq title=biblio-JLREQ>[JLREQ]</a>.</li>
+			as defined in <a data-biblio-type=informative data-link-type=biblio href=#jlreq title=biblio-JLREQ>[JLREQ]</a>.</li>
 	</ul>
 
 <p>There are several types of objects in a document
@@ -206,13 +206,13 @@ <h3 class="heading settled" data-level=1.1 id=context><span class=secno>1.1 </sp
 	pictures, and tables.</p>
 
 	<div class=figure>
-		<img alt="Vertical rhythm kept through pictures and different size of text in a multi-column document" height=246 src=line-grid-multicol.png width=480>
+		<img alt="Vertical rhythm kept through pictures and different size of text in a multi-column document" src=images/line-grid-multicol.png width=480>
 		<p class=caption>Vertical rhythm kept through pictures and different size of text in a multi-column document.</p>
 	</div>
 
 	<div class=example>
 		<div class=sidefigure>
-			<img alt="Large text wraps within line grids" height=244 src=line-grid-wrap.png width=276>
+			<img alt="Large text wraps within line grids" src=images/line-grid-wrap.png width=276>
 			<p class=caption>Large text wraps within line grids.</p>
 		</div>
 
@@ -286,7 +286,7 @@ <h3 class="heading settled" data-level=1.2 id=placement><span class=secno>1.2 </
 Module Interactions</span><a class=self-link href=#placement></a></h3>
 
 <p>This module extends the line box model
-	defined in <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a> sections 9.4.2 and 10.8.</p>
+	defined in <a data-biblio-type=normative data-link-type=biblio href=#css21 title=biblio-CSS21>[CSS21]</a> sections 9.4.2 and 10.8.</p>
 
 <h3 class="heading settled" data-level=1.3 id=values><span class=secno>1.3 </span><span class=content>
 Values</span><a class=self-link href=#values></a></h3>
@@ -295,12 +295,12 @@ <h3 class="heading settled" data-level=1.3 id=values><span class=secno>1.3 </spa
 	<a href=http://www.w3.org/TR/CSS21/about.html#property-defs>
 		CSS property definition conventions
 	</a> 
-	from <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a>. 
+	from <a data-biblio-type=normative data-link-type=biblio href=#css21 title=biblio-CSS21>[CSS21]</a>. 
 	Value types not defined in this specification 
-	are defined in CSS Level 2 Revision 1 <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a>. 
+	are defined in CSS Level 2 Revision 1 <a data-biblio-type=normative data-link-type=biblio href=#css21 title=biblio-CSS21>[CSS21]</a>. 
 	Other CSS modules may expand 
 	the definitions of these value types: 
-	for example <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3color title=biblio-CSS3COLOR>[CSS3COLOR]</a>, 
+	for example <a data-biblio-type=informative data-link-type=biblio href=#css3color title=biblio-CSS3COLOR>[CSS3COLOR]</a>, 
 	when combined with this module, 
 	expands the definition 
 	of the &lt;color&gt; value type 
@@ -391,7 +391,7 @@ <h3 class="heading settled" data-level=3.1 id=line-snap><span class=secno>3.1 </
 	(The unshifted position is the position that 
 	would be determined by normal line stacking rules, 
 	with consideration of any new controls 
-	defined by other modules such as <a data-biblio-type=informative data-link-type=biblio href=#biblio-css3line title=biblio-CSS3LINE>[CSS3LINE]</a>.) 
+	defined by other modules such as <a data-biblio-type=informative data-link-type=biblio href=#css3line title=biblio-CSS3LINE>[CSS3LINE]</a>.) 
 	Shifting line boxes in this way affects layout – 
 	it is not merely a display translation. 
 	If a line box is shifted downward, 
@@ -645,7 +645,7 @@ <h3 class="heading settled" data-level=3.2 id=box-snap><span class=secno>3.2 </s
 	the effective margin is increased at that edge.
 	If, however, the box is an empty block that could be 
 	<a href=http://www.w3.org/TR/CSS21/box.html>collapsed through</a>, 
-	then this property has no effect. <a data-biblio-type=normative data-link-type=biblio href=#biblio-css21 title=biblio-CSS21>[CSS21]</a></p>
+	then this property has no effect. <a data-biblio-type=normative data-link-type=biblio href=#css21 title=biblio-CSS21>[CSS21]</a></p>
 
 
 <p>When applied to table row group and table row boxes,
@@ -695,7 +695,7 @@ <h3 class="no-ref heading settled" id=conventions><span class=content>
     letters in this specification.
 
     <p>All of the text of this specification is normative except sections
-    explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#biblio-rfc2119 title=biblio-RFC2119>[RFC2119]</a></p>
+    explicitly marked as non-normative, examples, and notes. <a data-biblio-type=normative data-link-type=biblio href=#rfc2119 title=biblio-RFC2119>[RFC2119]</a></p>
 
     <p>Examples in this specification are introduced with the words "for example"
     or are set apart from the normative text with <code>class="example"</code>,

css-line-grid/Overview.src.html

@@ -78,17 +78,17 @@ <h3 id='context'>
 	pictures, and tables.
 
 	<div class="figure">
-		<img src="line-grid-multicol.png"
-			width="480" height="246"
+		<img src="images/line-grid-multicol.png"
+			width="480"
 			alt="Vertical rhythm kept through pictures and different size of text in a multi-column document"
 			/>
 		<p class="caption">Vertical rhythm kept through pictures and different size of text in a multi-column document.</p>
 	</div>
 
 	<div class="example">
 		<div class="sidefigure">
-			<img src="line-grid-wrap.png"
-				width="276" height="244"
+			<img src="images/line-grid-wrap.png"
+				width="276"
 				alt="Large text wraps within line grids"
 				/>
 			<p class="caption">Large text wraps within line grids.</p>

css-line-grid/examples/line-grid-intro.html

@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+<title>Baseline Grid intro examples</title>
+<style>
+    * { margin: 0px;}
+    .container {
+        margin: 15px;
+        overflow: hidden;
+        background: repeating-linear-gradient(to bottom, white 0px, white 29px, black 30px);
+        background-size: 30px 30px; /* fixes too-light lines for some reason */ 
+    }
+
+    .single {
+        padding-top: 40px;
+        width: 275px;
+        height: 250px;
+    }
+
+    .multi {
+        padding-top: 40px;
+        width: 550px;
+        height: 225px;
+        -moz-columns: 2;
+        -moz-column-gap: 40px;
+        columns: 2;
+    }
+
+    h2 {
+        font-family: sans-serif;
+        font-size: 30px;
+        margin-top: 14px;
+        margin-bottom: 15px;
+    }
+
+    p {
+        font-size: 20px;
+        line-height: 30px;
+        text-align: justify;
+    }
+    .box {
+        width 250px;
+        height: 60px;
+        background-color: rgba(57, 139, 183, 1);
+        border: 4px solid rgba(67, 91, 141, 1);
+        border-radius: 2px;
+        margin: 8px;
+        margin-bottom: 14px;
+    }
+    .single-line {
+        margin-top: 15px;
+    }
+
+</style>
+</head>
+<body>
+
+<div class="container single">
+    <p>lazy dog. A quick brown fox jumps over the lazy dog.</p>
+    <h2>Wrapping Large Text</h2>
+    <p>A quick brown fox jumps over the lazy dog. A quick brown fox</p> 
+</div>
+
+<div class="container multi">
+    <p>A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.</p>
+    <div class="box"></div>
+    <p>A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.</p>
+    <h2 class="single-line">Heading</h2>
+    <p>A quick brown fox jumps over the lazy dog. A quick brown fox jumps over the lazy dog.</p> 
+</div>
+
+</body>
+</html>