update from sparkleup

diary/2020-04-22.html

@@ -48,7 +48,7 @@ garden in winter<span class="p">&lt;/</span><span class="nt">div</span><span cla
 </code></pre></div>
 
 
-<p>which, with the following style</p>
+<p>which, with the following style (really only the highlighted line needed)</p>
 <div class="codehilite"><pre><span></span><code><span class="p">.</span><span class="nc">verse</span> <span class="p">{</span>
 <span class="hll">    <span class="k">white-space</span><span class="p">:</span> <span class="kc">pre-wrap</span><span class="p">;</span>
 </span>    <span class="k">border-left</span><span class="p">:</span> <span class="mi">5</span><span class="kt">px</span> <span class="kc">solid</span> <span class="mh">#ddd</span><span class="p">;</span>
@@ -137,6 +137,7 @@ garden in winter</div>
 <span class="p">}</span>
 
 <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span> <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span> <span class="p">{</span>
+    <span class="c">/* Do not float or size nested comments. */</span>
     <span class="k">float</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
     <span class="k">width</span><span class="p">:</span> <span class="kc">auto</span><span class="p">;</span>
 <span class="p">}</span>
@@ -149,12 +150,14 @@ garden in winter</div>
 <span class="p">}</span>
 
 <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span><span class="p">::</span><span class="nd">before</span><span class="o">,</span> <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span><span class="p">::</span><span class="nd">after</span> <span class="p">{</span>
+    <span class="c">/* Use pseudo-elements for clearfix. */</span>
     <span class="k">content</span><span class="p">:</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
     <span class="k">display</span><span class="p">:</span> <span class="kc">block</span><span class="p">;</span>
     <span class="k">clear</span><span class="p">:</span> <span class="kc">both</span><span class="p">;</span>
 <span class="p">}</span>
 
 <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span><span class="p">::</span><span class="nd">before</span> <span class="p">{</span>
+    <span class="c">/* Add an arrow pointing back to the line. */</span>
     <span class="k">width</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
     <span class="k">height</span><span class="p">:</span> <span class="mf">-0.5</span><span class="kt">rem</span><span class="p">;</span>
     <span class="k">float</span><span class="p">:</span> <span class="kc">left</span><span class="p">;</span>
@@ -166,10 +169,12 @@ garden in winter</div>
 <span class="p">}</span>
 
 <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span> <span class="nt">q</span><span class="p">.</span><span class="nc">comment</span><span class="p">::</span><span class="nd">before</span> <span class="p">{</span>
+    <span class="c">/* don&#39;t add arrow on nested comments. */</span>
     <span class="k">border</span><span class="p">:</span> <span class="kc">none</span><span class="p">;</span>
 <span class="p">}</span>
 
 <span class="nt">p</span> <span class="o">+</span> <span class="nt">p</span> <span class="p">{</span>
+    <span class="c">/* Clearfix on repeated paragraphs (repeated needed to allow TOC float). */</span>
     <span class="k">clear</span><span class="p">:</span> <span class="kc">both</span><span class="p">;</span>
 <span class="p">}</span>
 </code></pre></div>

style.css

@@ -84,12 +84,12 @@ code {
 }
 */ /* Maddy's starting from scratch */
 
-/* Pygments: friendly */
+/* Pygments: friendly minus bold */
 .codehilite .hll { background-color: #ffffcc }
 .codehilite  { background: #f0f0f0; }
 .codehilite .c { color: #60a0b0; font-style: italic } /* Comment */
 .codehilite .err { border: 1px solid #FF0000 } /* Error */
-.codehilite .k { color: #007020; font-weight: bold } /* Keyword */
+.codehilite .k { color: #007020; } /* Keyword */
 .codehilite .o { color: #666666 } /* Operator */
 .codehilite .ch { color: #60a0b0; font-style: italic } /* Comment.Hashbang */
 .codehilite .cm { color: #60a0b0; font-style: italic } /* Comment.Multiline */
@@ -100,34 +100,34 @@ code {
 .codehilite .gd { color: #A00000 } /* Generic.Deleted */
 .codehilite .ge { font-style: italic } /* Generic.Emph */
 .codehilite .gr { color: #FF0000 } /* Generic.Error */
-.codehilite .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+.codehilite .gh { color: #000080; } /* Generic.Heading */
 .codehilite .gi { color: #00A000 } /* Generic.Inserted */
 .codehilite .go { color: #888888 } /* Generic.Output */
-.codehilite .gp { color: #c65d09; font-weight: bold } /* Generic.Prompt */
-.codehilite .gs { font-weight: bold } /* Generic.Strong */
-.codehilite .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+.codehilite .gp { color: #c65d09; } /* Generic.Prompt */
+.codehilite .gs { } /* Generic.Strong */
+.codehilite .gu { color: #800080; } /* Generic.Subheading */
 .codehilite .gt { color: #0044DD } /* Generic.Traceback */
-.codehilite .kc { color: #007020; font-weight: bold } /* Keyword.Constant */
-.codehilite .kd { color: #007020; font-weight: bold } /* Keyword.Declaration */
-.codehilite .kn { color: #007020; font-weight: bold } /* Keyword.Namespace */
+.codehilite .kc { color: #007020; } /* Keyword.Constant */
+.codehilite .kd { color: #007020; } /* Keyword.Declaration */
+.codehilite .kn { color: #007020; } /* Keyword.Namespace */
 .codehilite .kp { color: #007020 } /* Keyword.Pseudo */
-.codehilite .kr { color: #007020; font-weight: bold } /* Keyword.Reserved */
+.codehilite .kr { color: #007020; } /* Keyword.Reserved */
 .codehilite .kt { color: #902000 } /* Keyword.Type */
 .codehilite .m { color: #40a070 } /* Literal.Number */
 .codehilite .s { color: #4070a0 } /* Literal.String */
 .codehilite .na { color: #4070a0 } /* Name.Attribute */
 .codehilite .nb { color: #007020 } /* Name.Builtin */
-.codehilite .nc { color: #0e84b5; font-weight: bold } /* Name.Class */
+.codehilite .nc { color: #0e84b5; } /* Name.Class */
 .codehilite .no { color: #60add5 } /* Name.Constant */
-.codehilite .nd { color: #555555; font-weight: bold } /* Name.Decorator */
-.codehilite .ni { color: #d55537; font-weight: bold } /* Name.Entity */
+.codehilite .nd { color: #555555; } /* Name.Decorator */
+.codehilite .ni { color: #d55537; } /* Name.Entity */
 .codehilite .ne { color: #007020 } /* Name.Exception */
 .codehilite .nf { color: #06287e } /* Name.Function */
-.codehilite .nl { color: #002070; font-weight: bold } /* Name.Label */
-.codehilite .nn { color: #0e84b5; font-weight: bold } /* Name.Namespace */
-.codehilite .nt { color: #062873; font-weight: bold } /* Name.Tag */
+.codehilite .nl { color: #002070; } /* Name.Label */
+.codehilite .nn { color: #0e84b5; } /* Name.Namespace */
+.codehilite .nt { color: #062873; } /* Name.Tag */
 .codehilite .nv { color: #bb60d5 } /* Name.Variable */
-.codehilite .ow { color: #007020; font-weight: bold } /* Operator.Word */
+.codehilite .ow { color: #007020; } /* Operator.Word */
 .codehilite .w { color: #bbbbbb } /* Text.Whitespace */
 .codehilite .mb { color: #40a070 } /* Literal.Number.Bin */
 .codehilite .mf { color: #40a070 } /* Literal.Number.Float */
@@ -140,7 +140,7 @@ code {
 .codehilite .dl { color: #4070a0 } /* Literal.String.Delimiter */
 .codehilite .sd { color: #4070a0; font-style: italic } /* Literal.String.Doc */
 .codehilite .s2 { color: #4070a0 } /* Literal.String.Double */
-.codehilite .se { color: #4070a0; font-weight: bold } /* Literal.String.Escape */
+.codehilite .se { color: #4070a0; } /* Literal.String.Escape */
 .codehilite .sh { color: #4070a0 } /* Literal.String.Heredoc */
 .codehilite .si { color: #70a0d0; font-style: italic } /* Literal.String.Interpol */
 .codehilite .sx { color: #c65d09 } /* Literal.String.Other */
@@ -267,6 +267,7 @@ q.comment {
 }
 
 q.comment q.comment {
+    /* Do not float or size nested comments. */
     float: none;
     width: auto;
 }
@@ -279,12 +280,14 @@ q.comment .attribution, q.comment .date {
 }
 
 q.comment::before, q.comment::after {
+    /* Use pseudo-elements for clearfix. */
     content: "";
     display: block;
     clear: both;
 }
 
 q.comment::before {
+    /* Add an arrow pointing back to the line. */
     width: 0;
     height: -0.5rem;
     float: left;
@@ -296,9 +299,11 @@ q.comment::before {
 }
 
 q.comment q.comment::before {
+    /* don't add arrow on nested comments. */
     border: none;
 }
 
 p + p {
+    /* Clearfix on repeated paragraphs (repeated needed to allow TOC float). */
     clear: both;
 }