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/aui/index.html | 28 ++--------------------------
 1 file changed, 2 insertions(+), 26 deletions(-)

(limited to 'build/aui')
diff --git a/build/aui/index.html b/build/aui/index.html
index 94dfeb7..c897c3c 100644
--- a/build/aui/index.html
+++ b/build/aui/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>Aqua UI CSS Buttons</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,23 @@
 
 <main>
 <h1 id="aqua-ui-css-buttons">Aqua UI CSS Buttons</h1>
-
 <p>2016-06-28</p>
-
 <p>Though it may feel like nostalgia, the old OS design for Mac was arguably better than the current iteration (as of this writing - High Sierra). I recently designed a quick Dribbble shot showcasing how the older operating system used to have so much more character and depth.</p>
-
 <p>Since I&#8217;ve been wanting to dip my toes into more tutorial-based articles (maybe I&#8217;ll even do some screencasts in the future), I decided to start out simple. Let&#8217;s walk through how to implement these &#8216;aqua&#8217; UI buttons with pure CSS.</p>
-
 <h3 id="starting-with-a-basic-foundation">Starting with a basic foundation</h3>
-
 <p>Since this project consists of only two buttons elements, the HTML or skeleton of this project is very straightforward:</p>
-
 <pre><code>&#60;button class="cancel"&#62;Cancel&#60;&#47;button&#62;
 &#60;button class="confirm"&#62;Confirm&#60;&#47;button&#62;
 </code></pre>
-
 <h3 id="styling-the-buttons">Styling the buttons</h3>
-
 <p>The first step is to remove the browser&#8217;s default button styling by using the <code>appearance</code> property. This will help avoid having to fight against the browser and minimize our CSS code.</p>
-
 <pre><code>button {
     -webkit-appearance: none;
     -moz-appearance: none;
 }
 </code></pre>
-
 <p>Next, we apply a fairly simple set of CSS that will be shared across both the confirm and cancel buttons:</p>
-
 <p>(Pay attention to the <code>transition</code> property as we will be returning to that shortly)</p>
-
 <pre><code>button {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -60,9 +49,7 @@
     transition: all ease .3s;
 }
 </code></pre>
-
 <p>Then we separate the specific confirm and cancel button styles into their own class selectors:</p>
-
 <pre><code>button.confirm {
     background: #4A90E2;
     border-color: #3672B6;
@@ -75,13 +62,9 @@ button.cancel {
     color: #6F6F6F;
 }
 </code></pre>
-
 <h3 id="playing-with-pseudo-elements">Playing with pseudo elements</h3>
-
 <p>Now that the button is styled and structured with basic formatting, it&#8217;s time to add that classic &#8216;shine&#8217; seen in the original Dribbble shot.</p>
-
 <p>The cleanest way to do this is by using the <code>:before</code> pseudo element paired with a linear-gradient background.</p>
-
 <pre><code>button:before {
     background: linear-gradient(rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
     border-radius: 125px;
@@ -94,23 +77,16 @@ button.cancel {
     width: 92%;
 }
 </code></pre>
-
 <h3 id="adding-interaction">Adding interaction</h3>
-
 <p>The final step is adding the user hover interaction: (Remember that <code>transition</code> property?)</p>
-
 <pre><code>button:hover {
     box-shadow: inset 0 13px 25px rgba(255,255,255,0.8), 0 3px 5px rgba(0,0,0,0.2), 0 10px 13px rgba(0,0,0,0.2);
     transform: scale(1.02);
 }
 </code></pre>
-
 <p>That&#8217;s it!</p>
-
 <h3 id="see-it-live-on-codepen">See it live on CodePen</h3>
-
 <p>You can view this project on CodePen here.</p>
-
 <p>Feel free to fork it or implement your own!</p>
 <footer role="contentinfo">
     <h2>Menu Navigation</h2>
-- 
cgit v1.2.3-54-g00ecf

