[yelp-xsl/wip/html5] html.xsl: Update some element styles for new HTML5 goodness

[Shaun McCance <shaunm src gnome org>]

commit b28bc251ba9d0f223673dacec2b5fa993fc73693
Author: Shaun McCance <shaunm redhat com>
Date:   Tue Nov 3 19:59:46 2015 -0500

    html.xsl: Update some element styles for new HTML5 goodness

 xslt/common/html.xsl |   51 +++++++++++++++++++++++++++++++++++--------------
 1 files changed, 36 insertions(+), 15 deletions(-)
---
diff --git a/xslt/common/html.xsl b/xslt/common/html.xsl
index 2bc6d1b..d5601a4 100644
--- a/xslt/common/html.xsl
+++ b/xslt/common/html.xsl
@@ -773,7 +773,7 @@ div.page > header {
 div.page > footer {
   flex: 0 1 auto;
 }
-div.body {
+article {
   min-height: 20em;
   background-color: </xsl:text><xsl:value-of select="$color.background"/><xsl:text>;
   padding: 10px;
@@ -1128,6 +1128,7 @@ div.example {
 }
 div.example > div.inner > div.region > div.desc { font-style: italic; }
 div.figure {
+  display: inline-block;
   margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 1.72em;
   padding: 4px;
   color: </xsl:text>
@@ -1137,6 +1138,11 @@ div.figure {
   background-color: </xsl:text>
     <xsl:value-of select="$color.gray_background"/><xsl:text>;
 }
+ media (max-width: 960px) {
+  div.figure {
+    margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 0;
+  }
+}
 div.figure > div.inner > a.zoom {
   float: </xsl:text><xsl:value-of select="$right"/><xsl:text>;
 }
@@ -1516,27 +1522,27 @@ div.yelp-data { display: none; }
   margin-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 2em;
 }
 @media only screen and (max-width: 480px) {
-  div.body > div.region > div.contents > div.example,
-  div.body > div.region > div.contents > div.steps,
-  div.body > div.region > div.contents > div.note,
-  div.body > div.region > section > div.inner > div.region > div.contents > div.example,
-  div.body > div.region > section > div.inner > div.region > div.contents > div.steps,
-  div.body > div.region > section > div.inner > div.region > div.contents > div.note {
+  article > div.region > div.contents > div.example,
+  article > div.region > section > div.inner > div.region > div.contents > div.example {
     margin-left: -10px;
     margin-right: -10px;
   }
-  div.steps > div.inner > div.title {
-    margin-left: 10px;
-    margin-right: 10px;
+  div.example {
+    padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 6px;
+    padding-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 10px;
   }
-  div.body > div.region > div.contents > div.note,
-  div.body > div.region > section > div.inner > div.region > div.contents > div.note {
+  article > div.region > div.contents > div.note,
+  article > div.region > section > div.inner > div.region > div.contents > div.note {
+    margin-left: -10px;
+    margin-right: -10px;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  article > div.region > div.contents > div.note,
+  article > div.region > section > div.inner > div.region > div.contents > div.note {
     border-left: none;
     border-right: none;
   }
-  ol.steps, ul.steps {
-    box-shadow: none;
-  }
   div.note-sidebar {
     float: none;
     max-width: none;
@@ -1550,6 +1556,21 @@ div.yelp-data { display: none; }
     margin-left: 10px;
     margin-right: 10px;
   }
+  article > div.region > div.contents > div.steps,
+  article > div.region > section > div.inner > div.region > div.contents > div.steps {
+    margin-left: -10px;
+    margin-right: -10px;
+  }
+  div.steps > div.inner > div.title {
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+  ol.steps, ul.steps {
+    box-shadow: none;
+    padding: 0;
+    padding-</xsl:text><xsl:value-of select="$left"/><xsl:text>: 6px;
+    padding-</xsl:text><xsl:value-of select="$right"/><xsl:text>: 10px;
+  }
 }
 </xsl:text>
 </xsl:template>