Improve styling of command examples.

These example commands are kind of like quotations so wrap the
paragraphs in blockquote tags.  This gives better results in most
browsers when styles are not used.

Then improve the styling overall to be more responsive: the results
are bad when linebreaks are placed in the middle of program options
or filenames, so try to prevent that by only allowing line breaks
where there are spaces.

Then, indent all but the first line to try and visually convey that
this is a continuation of the previous line.

diff --git a/content/style.scss b/content/style.scss
index dc306d72efcc51c0dae8e87f87b229f6b382b64f..524077925c5f788c62a9b0972764b65cfc2c3b64 100644 (file)
--- a/content/style.scss
+++ b/content/style.scss
@@ -68,6 +68,10 @@ p, table, div, ul, ol, dl, hr {
 }
 
 p, table, body>div, h5 { margin: 1em 0; }
 }
 
 p, table, body>div, h5 { margin: 1em 0; }

+blockquote {
+    @media (max-width: 28em) { margin: 1em 0.5em; }
+    margin: 1em;
+}

 
 li { margin: 0 0 0 2em; }
 dd { margin: 0 0 0 1em; }
 
 li { margin: 0 0 0 2em; }
 dd { margin: 0 0 0 1em; }


@@ -83,6 +87,14 @@ kbd {
     font-family: monospace;
     font-size: 0.95em;
     &:before { content: "% "; }
     font-family: monospace;
     font-size: 0.95em;
     &:before { content: "% "; }

+    &>span { white-space: nowrap; }
+
+    blockquote & {
+        display: block;
+        text-align: left;
+        padding-left: 3em;
+        text-indent: -3em;
+    }

 }
 
 .permalink {
 }
 
 .permalink {

diff --git a/layouts/default.xsl b/layouts/default.xsl
index 5a6c3eec06785191225ba8cfb0d93809e4ee42ad..22f67d6351e713d8dbf2b1774e783cbe167e82c8 100644 (file)
--- a/layouts/default.xsl
+++ b/layouts/default.xsl
@@ -194,6 +194,38 @@
   </code></pre>
 </xsl:template>
 
   </code></pre>
 </xsl:template>
 

+<!-- For paragraphs containing only kbd elements, wrap in blockquote. -->
+<xsl:template match='xhtml:p[*[last()=count(../xhtml:kbd)]]'>
+  <blockquote>
+    <xsl:copy>
+      <xsl:apply-templates select='node()|@*' />
+    </xsl:copy>
+  </blockquote>
+</xsl:template>
+
+<!--
+  Wrap each word of text in kbd elements in spans, so they can be styled
+  to avoid linebreaks in the middle of option names and other bad places.
+-->
+<xsl:template name='spanify-text' match='xhtml:kbd/text()'>
+  <xsl:param name='text' select='normalize-space(.)' />
+  <xsl:variable name='firstword' select='substring-before($text, " ")' />
+  <xsl:choose>
+    <xsl:when test='$firstword'>
+      <span><xsl:value-of select='$firstword' /></span>
+      <xsl:text> </xsl:text>
+    </xsl:when>
+    <xsl:when test='$text'>
+      <span><xsl:value-of select='$text' /></span>
+    </xsl:when>
+  </xsl:choose>
+  <xsl:if test='$firstword'>
+    <xsl:call-template name='spanify-text'>
+      <xsl:with-param name='text' select='substring-after($text, " ")' />
+    </xsl:call-template>
+  </xsl:if>
+</xsl:template>
+

 <xsl:template match='copyright'>
   <p>
     <xsl:text>Copyright © </xsl:text>
 <xsl:template match='copyright'>
   <p>
     <xsl:text>Copyright © </xsl:text>