From: Nick Bowler <nbowler@draconx.ca>
Date: Fri, 19 Feb 2021 05:23:23 +0000 (-0500)
Subject: Improve styling of command examples.
X-Git-Url: https://git.draconx.ca/gitweb/homepage.git/commitdiff_plain/052c3ef4a6a579d2188a5d048cea92cc9f4fc14d

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 dc306d7..5240779 100644
--- 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; }
+blockquote {
+    @media (max-width: 28em) { margin: 1em 0.5em; }
+    margin: 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: "% "; }
+    &>span { white-space: nowrap; }
+
+    blockquote & {
+        display: block;
+        text-align: left;
+        padding-left: 3em;
+        text-indent: -3em;
+    }
 }
 
 .permalink {
diff --git a/layouts/default.xsl b/layouts/default.xsl
index 5a6c3ee..22f67d6 100644
--- a/layouts/default.xsl
+++ b/layouts/default.xsl
@@ -194,6 +194,38 @@
   </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>