From 98b4d511f9022513da492760b83dc2cc6a419d5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=B4me?= <jerome@yayel.com>
Date: Sat, 16 Jan 2010 10:26:39 +0100
Subject: [PATCH] html5 figure and legend handling

---
 blueprint/screen.css          | 5 +++--
 blueprint/src/typography.css  | 9 ++++++---
 tests/parts/sample-html5.html | 4 ++--
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/blueprint/screen.css b/blueprint/screen.css
index f542e305..e910ce6a 100644
--- a/blueprint/screen.css
+++ b/blueprint/screen.css
@@ -34,8 +34,9 @@ h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
 h6 {font-size:1em;font-weight:bold;}
 h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
 p {margin:0 0 1.5em;}
-p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
-p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
+figure.left, p img.left {float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
+figure.right, p img.right {float:right;margin:1.5em 0 1.5em 1.5em;}
+figure legend, figure .legend {background:#eee;font-size:.9em;}
 a:focus, a:hover {color:#000;}
 a {color:#009;text-decoration:underline;}
 blockquote {margin:1.5em;color:#666;font-style:italic;}
diff --git a/blueprint/src/typography.css b/blueprint/src/typography.css
index 6cc099c6..f5256fd2 100644
--- a/blueprint/src/typography.css
+++ b/blueprint/src/typography.css
@@ -37,9 +37,12 @@ h4 img, h5 img, h6 img {
 /* Text elements
 -------------------------------------------------------------- */
 
-p           { margin: 0 0 1.5em; }
-p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
-p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }
+p                         { margin: 0 0 1.5em; }
+figure.left, p img.left   { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
+figure.right, p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }
+
+/* http://html5doctor.com/legend-not-such-a-legend-anymore/ */
+figure legend, figure .legend { background: #eee; font-size: .9em;}
 
 a:focus, 
 a:hover     { color: #000; }
diff --git a/tests/parts/sample-html5.html b/tests/parts/sample-html5.html
index ce7dc05a..13c88a70 100755
--- a/tests/parts/sample-html5.html
+++ b/tests/parts/sample-html5.html
@@ -38,10 +38,10 @@ <h6>This box is aligned with the sidebar</h6>
       <hr class="space">
       <section class="span-15 prepend-1 colborder">
         <article>
-          <figure class="top left pull-1">
+          <figure class="top left pull-1" style="width: 270px;">
             <img src="test.jpg" alt="test">
+            <p class="legend">Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.</p>            
           </figure>
-          <p class="legend">Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam convallis, est eu lobortis mattis, lectus tellus tempus felis, a ultricies erat ipsum at metus.</p>
           <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a href="#">Morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras accumsan vestibulum ante. Vestibulum sed tortor. Praesent <span class="caps">SMALL CAPS</span> tempus fringilla elit. Ut elit diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl purus fringilla odio, quis commodo est orci vitae justo. Aliquam placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna non tristique posuere, erat odio eleifend nisl, non convallis est tortor blandit ligula. Nulla id augue.</p>
           <p>Nullam mattis, odio ut tempus facilisis, metus nisl facilisis metus, auctor consectetuer felis ligula nec mauris. Vestibulum odio erat, fermentum at, commodo vitae, ultrices et, urna. Mauris vulputate, mi pulvinar sagittis condimentum, sem nulla aliquam velit, sed imperdiet mi purus eu magna. Nulla varius metus ut eros. Aenean aliquet magna eget orci. Class aptent taciti sociosqu ad litora.</p>
           <p>Vivamus euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse vel nibh ut turpis dictum sagittis. Aliquam vel velit a elit auctor sollicitudin. Nam vel dui vel neque lacinia pretium. Quisque nunc erat, venenatis id, volutpat ut, scelerisque sed, diam. Mauris ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec mattis. Morbi dignissim sollicitudin libero. Nulla lorem.</p>