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

---
 .../index.html                                     | 24 ++--------------------
 1 file changed, 2 insertions(+), 22 deletions(-)

(limited to 'build/mini-interactive-keyboard-with-pure-css')
diff --git a/build/mini-interactive-keyboard-with-pure-css/index.html b/build/mini-interactive-keyboard-with-pure-css/index.html
index d52d775..28c19c2 100644
--- a/build/mini-interactive-keyboard-with-pure-css/index.html
+++ b/build/mini-interactive-keyboard-with-pure-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>Mini Interactive Keyboard with Pure 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,35 +17,22 @@
 
 <main>
 <h1 id="mini-interactive-keyboard-with-pure-css">Mini Interactive Keyboard with Pure CSS</h1>
-
 <p>2020-05-13</p>
-
 <p>Lately, I&#8217;ve become obsessed with trying to see what I can create using only HTML and CSS (besides websites of course). Since playing with the concept of <a href="https://uglyduck.ca/fake-3d-elements-with-css/">faking 3D elements</a>, I wanted to circle back around to an older CodePen I created: a mini, interactive undo keyboard.</p>
-
 <h2 id="see-it-in-action">See it in action</h2>
-
 <p>Below you can view a live demo of the mini keyboard itself. This demo is nothing special, but takes design inspiration from Apple&#8217;s magic keyboards (if that wasn&#8217;t already obvious).</p>
-
 <p><img src="/public/images/undo-keyboard.png" alt="Undo keyboard with two buttons to click" /></p>
-
 <p><a href="https://codepen.io/bradleytaunt/pen/PadQMP">Live CodePen Example</a></p>
-
 <p>So now that we have seen what we plan to build, let&#8217;s break down the process of creating this stupid, fun project!</p>
-
 <h2 id="the-html">The HTML</h2>
-
 <p>The core skeleton of this project is very simple, since the keyboard consists of only 2 interactive buttons on top of a basic base element: </p>
-
 <ul>
 <li><p>Keyboard base</p></li>
 <li><p>Command button</p></li>
 <li><p>&#8216;Z&#8217; letter button</p></li>
 </ul>
-
 <h2 id="the-css">The CSS</h2>
-
 <p>Here is where all the magic happens. Let&#8217;s break these elements into their own sections, starting with the <strong>base styling</strong>:</p>
-
 <pre><code>&#47;* Custom typeface *&#47;
 @import url("https:&#47;&#47;fonts.googleapis.com&#47;css?family=Muli");
 
@@ -54,9 +42,7 @@ background: #d2dcff;
 margin: 80px 0 40px;
 }
 </code></pre>
-
 <p>We then tackle the basic <strong>keyboard base</strong> element:</p>
-
 <pre><code>.base {
 background: linear-gradient(180deg, #eee 0%, #d8d8d8 100%);
 border-radius: 20px;
@@ -80,9 +66,7 @@ width: 85%;
 z-index: -1;
 }
 </code></pre>
-
 <p>Next, we target all shared styles between the <strong>2 keyboard buttons</strong> to avoid repeating ourselves later on:</p>
-
 <pre><code>.command, .z {
     -webkit-appearance: none;
     background: linear-gradient(180deg, #fff 0%, #f2f2f2 100%);
@@ -109,9 +93,7 @@ z-index: -1;
     margin: 25px 0 0 20px;
 }
 </code></pre>
-
 <p>All that remains is to add the custom styling for each independent button:</p>
-
 <pre><code>&#47;* Custom Command styling *&#47;
 .command svg {
     height: 60px;
@@ -139,9 +121,7 @@ z-index: -1;
     font-size: 150px;
 }
 </code></pre>
-
 <h2 id="taking-it-further">Taking it further</h2>
-
 <p>You could easily improve upon this concept by rendering an entire interactive keyboard, if you so desired. But this is maybe something I would tackle at a later date when I have a little more free time 😉 For now, a simple mini undo keyboard is fun enough to play with.</p>
 <footer role="contentinfo">
     <h2>Menu Navigation</h2>
-- 
cgit v1.2.3-54-g00ecf

