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/super-mario-blocks-css/index.html | 31 ++-----------------------------
 1 file changed, 2 insertions(+), 29 deletions(-)

(limited to 'build/super-mario-blocks-css/index.html')
diff --git a/build/super-mario-blocks-css/index.html b/build/super-mario-blocks-css/index.html
index 9215eac..406c8df 100644
--- a/build/super-mario-blocks-css/index.html
+++ b/build/super-mario-blocks-css/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>Super Mario Blocks in CSS</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,30 +17,20 @@
 
 <main>
 <h1 id="super-mario-blocks-in-css">Super Mario Blocks in CSS</h1>
-
 <p>2019-02-15</p>
-
 <p>Just because we can, let&#8217;s make a quick demo on how to build interactive elements based off the original Mario punch blocks.</p>
-
 <p>What our final product will look like:</p>
-
 <p><img src="/public/images/mario-block.png" alt="Mario blocks cretaed with CSS" /></p>
-
 <p><a href="https://codepen.io/bradleytaunt/pen/JjEPOVe">Live CodePen Example</a></p>
-
 <h2 id="the-html">The HTML</h2>
-
 <p>The set of Mario blocks doesn&#8217;t require a huge amount of effort for it&#8217;s <code>html</code> structure, we only need:</p>
-
 <ul>
 <li>Parent div for each block</li>
 <li>Checkbox input</li>
 <li>Checkbox label</li>
 <li>Inner label divs to represent the block &#8220;dots&#8221;</li>
 </ul>
-
 <p><strong>Sidenote</strong>: This is only how <em>I</em> chose to add the inner dots to the Mario blocks. There are many other ways to create these, so please feel free to implement them however you see fit.</p>
-
 <pre><code>&#60;!-- Main parent block --&#62;
 &#60;div class="mario-block"&#62;
 
@@ -57,9 +48,7 @@
 
 &#60;&#47;div&#62;
 </code></pre>
-
 <p>Now we just add as many default blocks we want, along with the interactive punch block (<code>.mario-block--question</code>):</p>
-
 <pre><code>&#60;div class="mario-block"&#62;
     &#60;input type="checkbox" id="1" disabled&#62;
     &#60;label for="1"&#62;
@@ -101,11 +90,8 @@
     &#60;&#47;label&#62;
 &#60;&#47;div&#62;
 </code></pre>
-
 <h2 id="the-css">The CSS</h2>
-
 <p>First we need to remove the default <code>checkbox</code> input styling and place all new styling on it&#8217;s corresponding <code>label</code>.</p>
-
 <pre><code>&#47;* Mario block parent div *&#47;
 .mario-block {
     display: inline-block;
@@ -122,9 +108,7 @@
     z-index: -1;
 }
 </code></pre>
-
 <p>Now to target the <code>label</code> elements found inside the block:</p>
-
 <pre><code>&#47;* Style checkbox label accordingly *&#47;
 .mario-block label {
     background: #F88D2E;
@@ -136,9 +120,7 @@
     width: 100%;
 }
 </code></pre>
-
 <p>Next we style our included <code>.dots</code> elements to be placed in the four corners of each block:</p>
-
 <pre><code>.mario-block .dot {
     background: #070000;
     height: 5px;
@@ -162,11 +144,8 @@
     right: 4px;
 }
 </code></pre>
-
 <h3 id="punch-able-block">Punch-able block</h3>
-
 <p>Now we need to include the &#8220;question mark&#8221; SVG and custom CSS for the interactive Mario block. You can download a copy of the custom <code>svg</code> question mark I created.</p>
-
 <pre><code>.mario-block--question label {
     cursor: pointer;
 }
@@ -183,11 +162,8 @@
     z-index: 1;
 }
 </code></pre>
-
 <h3 id="the-last-piece">The last piece</h3>
-
 <p>The last item we need to design is the <code>checked</code> state of the interactive question mark block. The extra inner dark dashes will be added as <code>pseudo</code> elements:</p>
-
 <pre><code>&#47;* Mario block in `checked` state *&#47;
 .mario-block input:checked + label {
     background: #885818;
@@ -226,11 +202,8 @@
     transform: rotate(-45deg);
 }
 </code></pre>
-
 <p>That&#8217;s it!</p>
-
 <h2 id="taking-it-further">Taking it further</h2>
-
 <p>As always, you can take this concept and flesh it out even further. I was trying to mimic the &#8220;pixel&#8221; style of the original Mario games, but you could make the lighting and depth more realistic with some extra subtle gradients or <code>filter</code> properties.</p>
 <footer role="contentinfo">
     <h2>Menu Navigation</h2>
-- 
cgit v1.2.3-54-g00ecf

