From 16d28628aca9b2d356de31c319f5e7bc0f5b2b02 Mon Sep 17 00:00:00 2001
From: Bradley Taunt <bt@btxx.org>
Date: Sat, 8 Jun 2024 13:43:37 -0400
Subject: Remove incorrectly generated files, fix up markdown articles

---
 build/dynamic-checkboxes/index.html | 41 ++-----------------------------------
 1 file changed, 2 insertions(+), 39 deletions(-)

(limited to 'build/dynamic-checkboxes/index.html')
diff --git a/build/dynamic-checkboxes/index.html b/build/dynamic-checkboxes/index.html
index e23448b..218d783 100644
--- a/build/dynamic-checkboxes/index.html
+++ b/build/dynamic-checkboxes/index.html
@@ -3,11 +3,12 @@
 <head>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta name="color-scheme" content="dark light">
 	<link rel="icon" href="data:,">
 	<title>Dynamic Checkboxes</title>
 	<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
 	<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
-<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
+<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
 </head>
 
 <nav>
@@ -16,25 +17,15 @@
 
 <main>
 <h1 id="dynamic-checkboxes">Dynamic Checkboxes</h1>
-
 <p>2019-07-30</p>
-
 <p>Checkboxes are used quite frequently on forms across the web. Whether you&#8217;re selecting a pricing plan during a site&#8217;s sign-up process or just simply selecting to opt-out from a newsletter, you have most likely interacted with some form of checkbox element.</p>
-
 <p>What if we could make everyday checkboxes more beautiful <em>and</em> more intuitive? <em>It&#8217;s easier than you think</em>. We only need a small amount of CSS and JavaScript to make considerable improvements to your average checkbox UX.</p>
-
 <p>Let&#8217;s get into it.</p>
-
 <h2 id="what-we-are-building">What we are building</h2>
-
 <p>Take a look and play around with the CodePen below to get an idea of what we are going to build. The premise is a simple add-on pricing form which calculates the additional monthly total to the user in real-time.</p>
-
 <p><a href="https://codepen.io/bradleytaunt/pen/rXWEpy/">Live CodePen Example</a></p>
-
 <h2 id="the-structure-html">The Structure (HTML)</h2>
-
 <p>As always, we will start by breaking down the &#8220;bones&#8221; of the HTML structure for this checkbox form. Let&#8217;s take a look at the HTML in it&#8217;s entirety (don&#8217;t worry, it is a lot more simple than it seems at first glance):</p>
-
 <pre><code>&#60;h2&#62;Add-ons&#60;&#47;h2&#62;
 
 &#60;input class="checkbox-btn" name="checkbox-collection" id="checkbox-1" type="checkbox" value="49"&#62;
@@ -74,9 +65,7 @@
     &#60;&#47;div&#62;
 &#60;&#47;div&#62;
 </code></pre>
-
 <h3 id="the-checkbox-inputs-labels">The checkbox inputs &#38; labels</h3>
-
 <pre><code>&#60;!-- #1 --&#62;
 &#60;input class="checkbox-btn" name="checkbox-collection" id="checkbox-1" type="checkbox" value="49"&#62;
 
@@ -94,19 +83,15 @@
 
 &#60;&#47;label&#62;
 </code></pre>
-
 <ol>
 <li><p>This input will be hidden via <code>position:absolute</code> by default. All checkbox inputs need to share the same <code>name</code> value and all checkboxes require their our custom <code>id</code> that will link with the corresponding <code>for</code> value on the label.</p></li>
 <li><p>This label needs it&#8217;s <code>for</code> value to correspond with it&#8217;s partnered checkbox.</p>
-
 <ul>
 <li>i) The first span holds the title and description information of the add-on</li>
 <li>ii) The last span holds the cost associated with the current add-on</li>
 </ul></li>
 </ol>
-
 <h3 id="the-total-cost-container-output">The total cost container output</h3>
-
 <pre><code>&#60;!-- #1 --&#62;
 &#60;div class="total-cost"&#62;
 
@@ -131,11 +116,9 @@
 
 &#60;&#47;div&#62;
 </code></pre>
-
 <ol>
 <li><p>A simple <code>div</code> with a class we can easily target later</p></li>
 <li><p>A <code>div</code> parent container is needed to house all the total <code>spans</code> together (more on this when we get into the CSS)</p>
-
 <ul>
 <li>i) The first <code>span</code> holds the static currency symbol</li>
 <li>ii) The second <code>span</code> is where our updated cost will be injected</li>
@@ -143,13 +126,9 @@
 <li>iv) The final <code>span</code> simply holds the static monthly duration content</li>
 </ul></li>
 </ol>
-
 <p>All that&#8217;s all we need for the HTML!</p>
-
 <h2 id="the-visuals-css">The Visuals (CSS)</h2>
-
 <p>Again, lets take a look at the entire file before we break it down step-by-step:</p>
-
 <pre><code>.checkbox-label {
     align-items: center;
     background-color: none;
@@ -252,9 +231,7 @@
     }
 }
 </code></pre>
-
 <h3 id="the-checkbox-label">The checkbox label</h3>
-
 <pre><code>&#47;*
 This is the main element for each checkbox "container".
 Inside it houses the title, description and price.
@@ -285,11 +262,8 @@ Inside it houses the title, description and price.
     box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 }
 </code></pre>
-
 <h3 id="the-custom-checkbox-input">The custom checkbox input</h3>
-
 <p>We need to hide the browser&#8217;s default checkbox input and replace it with our own using pseudo selectors.</p>
-
 <pre><code>&#47;* Hide browser default input *&#47;
 .checkbox-btn {
     position: absolute;
@@ -334,11 +308,8 @@ update the inline SVG to use a checkmark symbol
     border-color: mediumpurple;
 }
 </code></pre>
-
 <h3 id="the-total-cost-container">The total cost container</h3>
-
 <p>We only need some very basic flexbox styling for our bottom &#8220;total&#8221; container:</p>
-
 <pre><code>.total-cost {
     align-items: baseline;
     border-top: 1px solid lightgrey;
@@ -368,11 +339,8 @@ function part of this post to understand why
     display: none;
 }
 </code></pre>
-
 <h3 id="last-but-not-least---mobile">Last but not least - mobile</h3>
-
 <p>Now we just ensure that on smaller devices our checkbox labels render nicely:</p>
-
 <pre><code>@media(max-width:480px) {
     &#47;*
     Avoids the inner label content from squishing together
@@ -388,13 +356,9 @@ function part of this post to understand why
     }
 }
 </code></pre>
-
 <p>That&#8217;s it for the styling!</p>
-
 <h2 id="the-function-js">The Function (JS)</h2>
-
 <p>As you can see below, we only need a very minor amount of JavaScript to accomplish our total cost &#8220;injection&#8221;.</p>
-
 <pre><code>window.onload=function(){
 
 &#47;&#47; Place the default browser checkbox inputs into a variable
@@ -424,7 +388,6 @@ for (var i=0; i &#60; inputs.length; i++) {
 }
 }
 </code></pre>
-
 <p>That&#8217;s it! Feel free to play with the demo some more at the top of the post, or check out the <a href="https://codepen.io/bradleytaunt/pen/rXWEpy">CodePen source directly</a>.</p>
 <footer role="contentinfo">
     <h2>Menu Navigation</h2>
-- 
cgit v1.2.3-54-g00ecf

