update from sparkleup

diary/2020-04-22.html

@@ -75,13 +75,24 @@ garden in winter<span class="p">&lt;/</span><span class="nt">div</span><span cla
 
 <span class="nv">Here</span> <span class="o">!</span>{<span class="nv">just</span> <span class="nv">a</span> <span class="nv">comment</span>} <span class="nv">is</span> <span class="nv">a</span> <span class="nv">line</span> <span class="nv">with</span> <span class="nv">a</span> <span class="nv">comment</span>
 
-<span class="nv">You</span> <span class="nv">can</span> <span class="nv">also</span> <mark class="selected"><span class="nv">add</span> <span class="nv">comments</span> <span class="nv">to</span> <span class="nv">some</span> <span class="nv">text</span></mark><span class="ss">(</span><span class="nv">Like</span> <span class="nv">this</span><span class="ss">)</span>
+<span class="nv">You</span> <span class="nv">can</span> <span class="nv">also</span> ?{<span class="nv">add</span> <span class="nv">comments</span> <span class="nv">to</span> <span class="nv">some</span> <span class="nv">text</span>}<span class="ss">(</span><span class="nv">Like</span> <span class="nv">this</span><span class="ss">)</span>
 
-<span class="nv">All</span> <span class="o">-</span>{<span class="nv">new</span>}<span class="ss">(</span><span class="nv">Redundant</span> <span class="ss">(</span><span class="nv">Makyo</span><span class="ss">))</span> <span class="nv">edit</span> <span class="nv">marks</span> <span class="nv">can</span> <span class="nv">have</span> <span class="nv">comments</span> <span class="nv">with</span> <span class="nv">attributions</span> <span class="nv">and</span> <span class="nv">dates</span> <span class="o">+</span>{<span class="nv">like</span> <span class="nv">this</span>}<span class="ss">(</span><span class="nv">See</span>? <span class="ss">(</span><span class="nv">Makyo</span> <span class="mi">2020</span><span class="o">-</span><span class="mi">04</span><span class="o">-</span><span class="mi">22</span><span class="ss">))</span> <span class="ss">(</span><span class="nv">though</span> <span class="nv">it</span><span class="s1">&#39;</span><span class="s">s ignored with comments <q class="comment">like this</q>)</span>
+<span class="nv">All</span> <span class="o">-</span>{<span class="nv">new</span>}<span class="ss">(</span><span class="nv">Redundant</span> <span class="ss">(</span><span class="nv">Makyo</span><span class="ss">))</span> <span class="nv">edit</span> <span class="nv">marks</span> <span class="nv">can</span> <span class="nv">have</span> <span class="nv">comments</span> <span class="nv">with</span> <span class="nv">attributions</span> <span class="nv">and</span> <span class="nv">dates</span> <span class="o">+</span>{<span class="nv">like</span> <span class="nv">this</span>}<span class="ss">(</span><span class="nv">See</span>? <span class="ss">(</span><span class="nv">Makyo</span> <span class="mi">2020</span><span class="o">-</span><span class="mi">04</span><span class="o">-</span><span class="mi">22</span><span class="ss">))</span> <span class="ss">(</span><span class="nv">though</span> <span class="nv">it</span><span class="s1">&#39;</span><span class="s">s ignored with comments !{like this}(won</span><span class="s1">&#39;</span><span class="nv">t</span> <span class="k">show</span><span class="ss">))</span>
+
+<span class="nv">Bottom</span> <span class="nv">text</span>
 </code></pre></div>
 
 
-<p>I get:</p>
+<p>I get</p>
+<blockquote>
+<p>This is a <ins class="addition">new</ins> addition</p>
+<p>This <del class="deletion">this</del> word is removed</p>
+<p>I say, <span class="substitution"><del>out with the old</del><ins><em>in</em> with the new</ins></span></p>
+<p>Here <q class="comment">just a comment</q> is a line with a comment</p>
+<p>You can also <mark class="selected">add comments to some text<q class="comment">Like <em>this</em><q class="comment">And comment within comments</q></q></mark></p>
+<p>All <del class="deletion">new<q class="comment">Redundant<span class="attribution">Makyo</span></q></del> edit marks can have comments with attributions and dates <ins class="addition">like this<q class="comment">See?<span class="attribution">Makyo</span><span class="date">2020-04-22</span></q></ins> (though it's ignored with comments <q class="comment">like this</q>)</p>
+<p>Bottom text</p>
+</blockquote>
 <p>Which will let me mark potential changes I'm not sure about and leave notes to myself in the things I write, something I used to do with HTML comments.</p>
 <p>So I hope that gives an idea of the types of things that I've been working on that, while not exactly writing in and of themselves, are things that can be used within the context of writing.</p>
 <p>Thanks for peeking in!</p>

style.css

@@ -13,7 +13,7 @@ ul {margin-left: 2em; padding-left: 0.5em;}
 dt {font-weight: bold;}
 img {border: none;}
 pre {border-left: 1px solid #ccc; margin-left: 2em; padding-left: 0.5em;}
-blockquote {padding: 0.4em; background-color: #f6f5eb;}
+/*blockquote {padding: 0.4em; background-color: #f6f5eb;}*/ /* Maddy no like */
 th, td {border: 1px solid #ccc; padding: 0.3em;}
 th {background-color: #f0f0f0;}
 hr {border: none; border-top: 1px solid #ccc; width: 100%;}
@@ -112,6 +112,12 @@ pre {
     overflow-x: scroll;
 }
 
+blockquote {
+    border-left: 5px solid #ddd;
+    padding-left: 1rem;
+    margin-left: 0;
+}
+
 /* Vimwiki extension*/
 .has-nested .toggle:before {
     content: '▼';
@@ -185,6 +191,10 @@ q .attribution, q .date {
     clear: both;
 }
 
+q::before, q::after {
+    content: "";
+}
+
 p {
     clear: both;
 }