Fixing first-child issues

3 files changed, 146 insertions, 125 deletions

diff --git a/xslt/mallard/html/mal2html-block.xsl b/xslt/mallard/html/mal2html-block.xsl
index 34166ec..a6af0cd 100644
--- a/xslt/mallard/html/mal2html-block.xsl
+++ b/xslt/mallard/html/mal2html-block.xsl
@@ -156,12 +156,13 @@ div.title {
 <xsl:template mode="mal2html.block.mode" match="mal:code">
   <xsl:variable name="first" select="node()[1]/self::text()"/>
   <xsl:variable name="last" select="node()[last()]/self::text()"/>
-  <pre class="code">
-    <xsl:if test="not(preceding-sibling::*)">
-      <xsl:attribute name="class">
-        <xsl:text>first-child</xsl:text>
-      </xsl:attribute>
-    </xsl:if>
+  <pre>
+    <xsl:attribute name="class">
+      <xsl:text>code</xsl:text>
+      <xsl:if test="not(preceding-sibling::*)">
+        <xsl:text> first-child</xsl:text>
+      </xsl:if>
+    </xsl:attribute>
     <xsl:if test="$first">
       <xsl:call-template name="util.strip_newlines">
         <xsl:with-param name="string" select="$first"/>
@@ -183,12 +184,13 @@ div.title {
 
 <!-- = comment = -->
 <xsl:template mode="mal2html.block.mode" match="mal:comment">
-  <div class="comment">
-    <xsl:if test="not(preceding-sibling::*)">
-      <xsl:attribute name="class">
-        <xsl:text>first-child</xsl:text>
-      </xsl:attribute>
-    </xsl:if>
+  <div>
+    <xsl:attribute name="class">
+      <xsl:text>comment</xsl:text>
+      <xsl:if test="not(preceding-sibling::*)">
+        <xsl:text> first-child</xsl:text>
+      </xsl:if>
+    </xsl:attribute>
     <xsl:apply-templates mode="mal2html.block.mode"/>
   </div>
 </xsl:template>
@@ -221,12 +223,13 @@ div.title {
 
 <!-- = figure = -->
 <xsl:template mode="mal2html.block.mode" match="mal:figure">
-  <div class="figure">
-    <xsl:if test="not(preceding-sibling::*)">
-      <xsl:attribute name="class">
-        <xsl:text>first-child</xsl:text>
-      </xsl:attribute>
-    </xsl:if>
+  <div>
+    <xsl:attribute name="class">
+      <xsl:text>figure</xsl:text>
+      <xsl:if test="not(preceding-sibling::*)">
+        <xsl:text> first-child</xsl:text>
+      </xsl:if>
+    </xsl:attribute>
     <xsl:apply-templates mode="mal2html.block.mode" select="mal:title"/>
     <div class="figure-contents">
       <xsl:apply-templates mode="mal2html.block.mode"
@@ -248,12 +251,13 @@ div.title {
 
 <!-- = p = -->
 <xsl:template mode="mal2html.block.mode" match="mal:p">
-  <p class="p">
-    <xsl:if test="not(preceding-sibling::*)">
-      <xsl:attribute name="class">
-        <xsl:text>first-child</xsl:text>
-      </xsl:attribute>
-    </xsl:if>
+  <p>
+    <xsl:attribute name="class">
+      <xsl:text>p</xsl:text>
+      <xsl:if test="not(preceding-sibling::*)">
+        <xsl:text> first-child</xsl:text>
+      </xsl:if>
+    </xsl:attribute>
     <xsl:apply-templates mode="mal2html.inline.mode"/>
   </p>
 </xsl:template>
@@ -261,11 +265,12 @@ div.title {
 <!-- = synopsis = -->
 <xsl:template mode="mal2html.block.mode" match="mal:synopsis">
   <div class="synopsis">
-    <xsl:if test="not(preceding-sibling::*)">
-      <xsl:attribute name="class">
-        <xsl:text>first-child</xsl:text>
-      </xsl:attribute>
-    </xsl:if>
+    <xsl:attribute name="class">
+      <xsl:text>synopsis</xsl:text>
+      <xsl:if test="not(preceding-sibling::*)">
+        <xsl:text> first-child</xsl:text>
+      </xsl:if>
+    </xsl:attribute>
     <xsl:apply-templates mode="mal2html.block.mode"/>
   </div>
 </xsl:template>
diff --git a/xslt/mallard/html/mal2html-css.xsl b/xslt/mallard/html/mal2html-css.xsl
index 633002a..0867506 100644
--- a/xslt/mallard/html/mal2html-css.xsl
+++ b/xslt/mallard/html/mal2html-css.xsl
@@ -98,46 +98,25 @@ body {
   padding: 12px;
   min-height: 100%;
 }
-<!-- FIXME: only in editor mode & better colors -->
-body.status-stub { background-color:  </xsl:text>
-  <xsl:call-template name="theme.get_color">
-    <xsl:with-param name="id" select="'red-background'"/>
-  </xsl:call-template>
-  <xsl:text>; }
-body.status-draft { background-color:  </xsl:text>
-  <xsl:call-template name="theme.get_color">
-    <xsl:with-param name="id" select="'red-background'"/>
-  </xsl:call-template>
-  <xsl:text>; }
-body.status-incomplete { background-color:  </xsl:text>
-  <xsl:call-template name="theme.get_color">
-    <xsl:with-param name="id" select="'red-background'"/>
-  </xsl:call-template>
-  <xsl:text>; }
-body.status-review { background-color:  </xsl:text>
-  <xsl:call-template name="theme.get_color">
-    <xsl:with-param name="id" select="'yellow-background'"/>
-  </xsl:call-template>
-  <xsl:text>; }
-div.version {
-  margin: 0 0 1em 0;
-  padding: 0.5em 1em 0.5em 1em;
-  max-width: 48em;
-  -moz-border-radius: 6px;
-  border: solid 1px </xsl:text>
+div, pre, p, li { margin: 1em 0 0 0; padding: 0; }
+.first-child { margin-top: 0; }
+a {
+  text-decoration: none;
+  color: </xsl:text>
   <xsl:call-template name="theme.get_color">
-    <xsl:with-param name="id" select="'gray-border'"/>
+    <xsl:with-param name="id" select="'link'"/>
   </xsl:call-template>
   <xsl:text>;
-  background-color: </xsl:text>
+}
+a:visited {
+  color: </xsl:text>
   <xsl:call-template name="theme.get_color">
-    <xsl:with-param name="id" select="'yellow-background'"/>
+    <xsl:with-param name="id" select="'link-visited'"/>
   </xsl:call-template>
   <xsl:text>;
 }
-div.version p.version {
-  margin-top: 0.2em;
-}
+a:hover { text-decoration: underline; }
+
 div.body {
   margin: 0;
   padding: 1em;
@@ -208,116 +187,147 @@ div.pagelink div.title {
   font-size: 1em;
   color: inherit;
 }
-div.pagelink div.title span.status {
-  font-size: 0.83em;
-  font-weight: normal;
-  padding-left: 0.2em;
-  padding-right: 0.2em;
-  color: </xsl:text>
+div.pagelink {
+  margin: 0;
+  padding: 0.5em;
+  -moz-border-radius: 6px;
+  border: solid 1px </xsl:text>
   <xsl:call-template name="theme.get_color">
-    <xsl:with-param name="id" select="'text-light'"/>
+    <xsl:with-param name="id" select="'background'"/>
   </xsl:call-template>
   <xsl:text>;
-  border: solid 1px </xsl:text>
+}
+div.pagelink:hover {
+  border-color: </xsl:text>
   <xsl:call-template name="theme.get_color">
-    <xsl:with-param name="id" select="'red-border'"/>
+    <xsl:with-param name="id" select="'blue-border'"/>
+  </xsl:call-template>
+  <xsl:text>;
+  background-color: </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'blue-background'"/>
   </xsl:call-template>
   <xsl:text>;
 }
-div.pagelink div.title span.status-stub { background-color: </xsl:text>
+div.pagelinksep {
+  margin: 0.5em;
+  list-style-type: none;
+  max-width: 24em;
+  border-bottom: solid 1px </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'gray-border'"/>
+  </xsl:call-template>
+  <xsl:text>;
+}
+
+</xsl:text>
+<xsl:call-template name="mal2html.css.editor"/>
+<xsl:call-template name="mal2html.css.custom"/>
+</xsl:template>
+<!--
+2.4
+2
+1.72
+1.44
+1.2
+1
+0.83
+0.69
+0.5
+-->
+
+
+<!--**==========================================================================
+mal2html.css.editor
+Outputs CSS for editor mode
+
+FIXME
+-->
+<xsl:template name="mal2html.css.editor">
+<xsl:text>
+body.status-stub { background-color:  </xsl:text>
   <xsl:call-template name="theme.get_color">
     <xsl:with-param name="id" select="'red-background'"/>
   </xsl:call-template>
   <xsl:text>; }
-div.pagelink div.title span.status-draft { background-color: </xsl:text>
+body.status-draft { background-color:  </xsl:text>
   <xsl:call-template name="theme.get_color">
     <xsl:with-param name="id" select="'red-background'"/>
   </xsl:call-template>
   <xsl:text>; }
-div.pagelink div.title span.status-incomplete { background-color: </xsl:text>
+body.status-incomplete { background-color:  </xsl:text>
   <xsl:call-template name="theme.get_color">
     <xsl:with-param name="id" select="'red-background'"/>
   </xsl:call-template>
   <xsl:text>; }
-div.pagelink div.title span.status-review { background-color: </xsl:text>
+body.status-review { background-color:  </xsl:text>
   <xsl:call-template name="theme.get_color">
     <xsl:with-param name="id" select="'yellow-background'"/>
   </xsl:call-template>
   <xsl:text>; }
-div.pagelink div.desc {
-  margin-top: 0.2em;
-  color: </xsl:text>
+div.version {
+  margin: 0 0 1em 0;
+  padding: 0.5em 1em 0.5em 1em;
+  max-width: 48em;
+  -moz-border-radius: 6px;
+  border: solid 1px </xsl:text>
   <xsl:call-template name="theme.get_color">
-    <xsl:with-param name="id" select="'text-light'"/>
+    <xsl:with-param name="id" select="'gray-border'"/>
   </xsl:call-template>
   <xsl:text>;
-}
-div.pagelink {
-  margin: 0;
-  padding: 0.5em;
-  -moz-border-radius: 6px;
-  border: solid 1px </xsl:text>
+  background-color: </xsl:text>
   <xsl:call-template name="theme.get_color">
-    <xsl:with-param name="id" select="'background'"/>
+    <xsl:with-param name="id" select="'yellow-background'"/>
   </xsl:call-template>
   <xsl:text>;
 }
-div.pagelink:hover {
-  border-color: </xsl:text>
+div.version p.version { margin-top: 0.2em; }
+div.pagelink div.title span.status {
+  font-size: 0.83em;
+  font-weight: normal;
+  padding-left: 0.2em;
+  padding-right: 0.2em;
+  color: </xsl:text>
   <xsl:call-template name="theme.get_color">
-    <xsl:with-param name="id" select="'blue-border'"/>
+    <xsl:with-param name="id" select="'text-light'"/>
   </xsl:call-template>
   <xsl:text>;
-  background-color: </xsl:text>
+  border: solid 1px </xsl:text>
   <xsl:call-template name="theme.get_color">
-    <xsl:with-param name="id" select="'blue-background'"/>
+    <xsl:with-param name="id" select="'red-border'"/>
   </xsl:call-template>
   <xsl:text>;
 }
-
-div.pagelinksep {
-  margin: 0.5em;
-  list-style-type: none;
-  max-width: 24em;
-  border-bottom: solid 1px </xsl:text>
+div.pagelink div.title span.status-stub { background-color: </xsl:text>
   <xsl:call-template name="theme.get_color">
-    <xsl:with-param name="id" select="'gray-border'"/>
+    <xsl:with-param name="id" select="'red-background'"/>
   </xsl:call-template>
-  <xsl:text>;
-}
-
-div, pre, p, li { margin: 1em 0 0 0; padding: 0; }
-.first-child { margin-top: 0; }
-a {
-  text-decoration: none;
-  color: </xsl:text>
+  <xsl:text>; }
+div.pagelink div.title span.status-draft { background-color: </xsl:text>
   <xsl:call-template name="theme.get_color">
-    <xsl:with-param name="id" select="'link'"/>
+    <xsl:with-param name="id" select="'red-background'"/>
   </xsl:call-template>
-  <xsl:text>;
-}
-a:visited {
+  <xsl:text>; }
+div.pagelink div.title span.status-incomplete { background-color: </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'red-background'"/>
+  </xsl:call-template>
+  <xsl:text>; }
+div.pagelink div.title span.status-review { background-color: </xsl:text>
+  <xsl:call-template name="theme.get_color">
+    <xsl:with-param name="id" select="'yellow-background'"/>
+  </xsl:call-template>
+  <xsl:text>; }
+div.pagelink div.desc {
+  margin-top: 0.2em;
   color: </xsl:text>
   <xsl:call-template name="theme.get_color">
-    <xsl:with-param name="id" select="'link-visited'"/>
+    <xsl:with-param name="id" select="'text-light'"/>
   </xsl:call-template>
   <xsl:text>;
 }
-a:hover { text-decoration: underline; }
 </xsl:text>
-<xsl:call-template name="mal2html.css.custom"/>
 </xsl:template>
-<!--
-2.4
-2
-1.72
-1.44
-1.2
-1
-0.83
-0.69
-0.5
--->
 
 
 <!--**==========================================================================
diff --git a/xslt/mallard/html/mal2html-table.xsl b/xslt/mallard/html/mal2html-table.xsl
index 3598f6e..497c3a1 100644
--- a/xslt/mallard/html/mal2html-table.xsl
+++ b/xslt/mallard/html/mal2html-table.xsl
@@ -184,7 +184,13 @@ td {
       </xsl:otherwise>
     </xsl:choose>
   </xsl:variable>
-  <div class="table">
+  <div>
+    <xsl:attribute name="class">
+      <xsl:text>table</xsl:text>
+      <xsl:if test="not(preceding-sibling::*)">
+        <xsl:text> first-child</xsl:text>
+      </xsl:if>
+    </xsl:attribute>
     <table class="table">
       <xsl:if test="$style != ''">
         <xsl:attribute name="style">