~uglyduck/uglyduck.srht.site: Slowly running through past articles to ensure proper layout and styling

28 files changed, 116 insertions(+), 119 deletions(-)

M _posts/2018-02-12-stay-hungry.md
M _posts/2018-08-07-setting-up-free-ssl.md
M _posts/2019-04-05-indenting-text-with-css.md
M _posts/2019-04-15-still-using-jquery.md
M _posts/2019-05-03-first-letter.md
M _posts/2019-05-09-cut-your-forms-in-half.md
M _posts/2019-05-15-improving-receipt-ux.md
M _posts/2019-06-08-html-like-1999.md
M _posts/2021-02-25-launching-thriftyname.md
M _posts/2021-03-11-introducing-pageroast.md
M _posts/2021-03-22-89-posts-one-file.md
M _posts/2021-04-13-macos-icon-css.md
M _site/89-posts-one-file/index.html
M _site/articles/index.html
M _site/cut-your-forms-in-half/index.html
M _site/feed.xml
M _site/first-letter/index.html
M _site/html-like-1999/index.html
M _site/improving-receipt-ux/index.html
M _site/indenting-text-with-css/index.html
M _site/introducing-pageroast/index.html
M _site/launching-thriftyname/index.html
M _site/macos-icon-css/index.html
A _site/public/images/e54ac9b2850f786471d7790bec3844a6.webp
M _site/setting-up-free-ssl/index.html
M _site/stay-hungry/index.html
M _site/still-using-jquery/index.html
A public/images/e54ac9b2850f786471d7790bec3844a6.webp

M _posts/2018-02-12-stay-hungry.md => _posts/2018-02-12-stay-hungry.md +2 -1

@@ 1,8 1,9 @@
 ---
-title: Stay hungry
+title: Stay Hungry
 date: 2018-02-12 00:00:00 Z
 permalink: "/stay-hungry/"
 layout: post
+column: single
 description: Staying passionate can help fuel your ambition
 summary: As designers and developers, we need to keep pursuing what interests us about
   our industry. Staying passionate can help fuel your ambition.

M _posts/2018-08-07-setting-up-free-ssl.md => _posts/2018-08-07-setting-up-free-ssl.md +2 -1

@@ 1,8 1,9 @@
 ---
-title: Setting up a free SSL
+title: Setting Up a Free SSL
 date: 2018-08-07 00:00:00 Z
 permalink: "/setting-up-free-ssl/"
 layout: post
+column: single
 description: Tutorial on how to easily setup a free SSL certificate
 summary: All websites should be using SSL and there is no excuse not to have it setup.
   Let me show you how to easily add a free SSL certificate to any project.

M _posts/2019-04-05-indenting-text-with-css.md => _posts/2019-04-05-indenting-text-with-css.md +2 -2

@@ 18,8 18,8 @@ In today's *TypeTip* we're going to play around with the `text-indent` property,
 Browser support is actually pretty great for such a regularly over-looked CSS property. All major desktop and mobile browsers support it:
 
 <figure>
-    {% cloudinary /public/images/text-indent-compatibility.webp alt="Text indent browser compatibility" %}
-    <span class="marginnote">Full support across all browsers.</span>
+    <img src="/public/images/text-indent-compatibility.webp" alt="Text indent browser compatibility">
+    <figcaption>Full support across all browsers.</figcaption>
 </figure>
 
 Now that doesn't mean you should just slap this property on all your type elements and call it a day - there are specific use cases for `text-indent` and some basic rules to follow:

M _posts/2019-04-15-still-using-jquery.md => _posts/2019-04-15-still-using-jquery.md +1 -0

@@ 3,6 3,7 @@ title: Yes, I Still Use jQuery
 date: 2019-04-15 00:00:00 Z
 permalink: "/still-using-jquery/"
 layout: post
+column: single
 description: Explaining why I still use jQuery and how it's still usable in any tech
   stack
 summary: It isn't the "latest and greatest" library out there. Some even claim that

M _posts/2019-05-03-first-letter.md => _posts/2019-05-03-first-letter.md +1 -0

@@ 3,6 3,7 @@ title: First Letter Pseudo Element
 date: 2019-05-03 00:00:00 Z
 permalink: "/first-letter/"
 layout: post
+column: single
 description: Set specific styling for the first letter of a text element with CSS
 summary: Set specific styling for the first letter of a text element with this handy
   and fully supported CSS pseudo element.

M _posts/2019-05-09-cut-your-forms-in-half.md => _posts/2019-05-09-cut-your-forms-in-half.md +1 -1

@@ 23,7 23,7 @@ Web forms tend to get a bad rep, mainly because so many horrible design choices 
 
 Let's use a real-world form off the [Great West Life Insurance](https://www.greatwestlife.com) website as an example (left is original, right is updated):
 
-{% cloudinary /public/images/cut-forms.webp alt="Great West Life form update" %}
+<img src="/public/images/cut-forms.webp" alt="Great West Life form update">
 
 ### Breaking things down

M _posts/2019-05-15-improving-receipt-ux.md => _posts/2019-05-15-improving-receipt-ux.md +1 -1

@@ 35,7 35,7 @@ Fortunately, I think with some minor tweaks we can keep the underlying principle
 
 Let's take a look at my redesign concept:
 
-{% cloudinary /public/images/receipt-update.webp alt="Receipt Update" %}
+<img src="/public/images/receipt-update.webp" alt="Receipt Update">
 
 With this layout we are able to keep all the key concepts that [Susie Lu](https://twitter.com/datatoviz?lang=en) initially introduced with her receipt design while preserving more space.

M _posts/2019-06-08-html-like-1999.md => _posts/2019-06-08-html-like-1999.md +12 -12

@@ 20,24 20,24 @@ To be clear, I'm not advocating for creating projects that *look* like they belo
 
 Let's do a very simple breakdown of some of the more common HTML no-nos:
 
-<ul style="list-style:none;padding: 0;">
-<li>❌ Using <code>span</code> or <code>div</code> elements for navigations or list components</li>
-<li>❌ Implementing custom <code>div</code> layouts for forms while removing items like <code>select</code> or <code>radio</code></li>
-<li>❌ Creating tables built out of custom <code>div</code> elements</li>
-<li>❌ Over-nesting elements or making overly complex depth to simple components</li>
-<li>❌ Content being heavily reliant on JavaScript "injection"</li>
+<ul>
+<li>Using <code>span</code> or <code>div</code> elements for navigations or list components</li>
+<li>Implementing custom <code>div</code> layouts for forms while removing items like <code>select</code> or <code>radio</code></li>
+<li>Creating tables built out of custom <code>div</code> elements</li>
+<li>Over-nesting elements or making overly complex depth to simple components</li>
+<li>Content being heavily reliant on JavaScript "injection"</li>
 </ul>
 
 ## Good HTML practices
 
 So what should you do in place of these bad HTML implementations?
 
-<ul style="list-style:none;padding: 0;">
-<li>✅ Use proper <code>nav</code>, <code>ul</code> and <code>ol</code> for navigations or list components</li>
-<li>✅ Style form elements directly <a href="https://www.filamentgroup.com/lab/select-css.html">this is already supported in browsers</a></li>
-<li>✅ Build tables using <code>table</code> element structure (mind-blowing, I know!)</li>
-<li>✅ Keep element hierarchy as slim and top level as possible</li>
-<li>✅ Avoid injecting <i>any</i> content via JavaScript (I understand this is difficult for certain apps, but try to minimize this as much as possible)</li>
+<ul>
+<li>Use proper <code>nav</code>, <code>ul</code> and <code>ol</code> for navigations or list components</li>
+<li>Style form elements directly <a href="https://www.filamentgroup.com/lab/select-css.html">this is already supported in browsers</a></li>
+<li>Build tables using <code>table</code> element structure (mind-blowing, I know!)</li>
+<li>Keep element hierarchy as slim and top level as possible</li>
+<li>Avoid injecting <i>any</i> content via JavaScript (I understand this is difficult for certain apps, but try to minimize this as much as possible)</li>
 </ul>
 
 ## My basic "structure" test

M _posts/2021-02-25-launching-thriftyname.md => _posts/2021-02-25-launching-thriftyname.md +1 -0

@@ 1,6 1,7 @@
 ---
 title: "ThriftyName: $5 Brand Names"
 layout: post
+column: single
 summary: "I have officially launched an amusing side project that creates brand names for $5 a pop"
 ---

M _posts/2021-03-11-introducing-pageroast.md => _posts/2021-03-11-introducing-pageroast.md +1 -0

@@ 1,6 1,7 @@
 ---
 title: "Introducing PageRoast"
 layout: post
+column: single
 summary: "Receive a detailed report analyzing your landing page with actionable items to improve your conversion rate."
 ---

M _posts/2021-03-22-89-posts-one-file.md => _posts/2021-03-22-89-posts-one-file.md +2 -2

@@ 47,9 47,9 @@ Here is an image example of an old Dribbble shot I created years ago:
 
 <figure>
     <div class="img-parent">
-    <img loading="lazy" src="/placeholder-image.webp" onclick="this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons">
+    <img loading="lazy" src="/placeholder-image.webp" onclick="this.src='/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons">
     </div>
-    <figcaption><b>Click the placeholder to load in the real image</b><br>Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption>
+    <figcaption><b>Click the placeholder to load in the real image</b><br>Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption>
 </figure>
 
 I have noticed that Safari / Firefox on iOS renders the imagery as broken image links - I plan to look into this further to avoid that confusion. For now it works well on desktop Chromium and Firefox.

M _posts/2021-04-13-macos-icon-css.md => _posts/2021-04-13-macos-icon-css.md +13 -12

@@ 13,15 13,15 @@ Don't care about reading through the tutorial? No problem! You can [jump right d
 Let's take a look at the original Dribbble shot:
 
 <figure>
-    <img src="/placeholder-image.webp" onclick="this.src='https://cdn.dribbble.com/users/4965/screenshots/14333170/media/e54ac9b2850f786471d7790bec3844a6.webp'" alt="Big Sur Icon">
-    <figcaption><b>Click the placeholder to load in the real image</b><br>The original Dribbble shot (<a href="https://cdn.dribbble.com/users/4965/screenshots/14333170/media/e54ac9b2850f786471d7790bec3844a6.webp">direct link to image</a>)</figcaption>
+    <img src="/public/images/e54ac9b2850f786471d7790bec3844a6.webp" alt="Big Sur Icon">
+    <figcaption>The original Dribbble shot (<a href="/public/images/e54ac9b2850f786471d7790bec3844a6.webp">direct link to image</a>)</figcaption>
 </figure>
 
 And now let's see what we will be creating with only HTML &amp; CSS:
 
 <figure>
-    <img src="/placeholder-image.webp" onclick="this.src='/public/images/big-sur-css.webp'" alt="Big Sur Icon">
-    <figcaption><b>Click the placeholder to load in the real image</b><br>What we are going to create with pure HTML &amp; CSS (<a href="/public/images/big-sur-css.webp">direct link to image</a>)</figcaption>
+    <img src="/public/images/big-sur-css.webp" alt="Big Sur Icon">
+    <figcaption>What we are going to create with pure HTML &amp; CSS (<a href="/public/images/big-sur-css.webp">direct link to image</a>)</figcaption>
 </figure>
 
 Like I said - far from perfect but still a fun experiment!


@@ 117,7 117,9 @@ See that `--row-distance` variable? That will come into play a bit later. For no
 }
 ```
 
-So far so good. The next part *looks* like a lot, but I assure you it's fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total):
+## Targeting the Inner Rows
+
+So far so good. The next part *looks* like a lot, but I assure you it's fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total). First we start with the parent `row` styling:
 
 ```
 .blue-square .row {


@@ 128,6 130,11 @@ So far so good. The next part *looks* like a lot, but I assure you it's fairly s
     position: absolute;
     width: 100%;
 }
+```
+
+Now we style each individual row item via the `nth-of-type` attribute:
+
+```
 .blue-square .row:nth-of-type(2) { margin-top: var(--row-distance); }
 .blue-square .row:nth-of-type(2) .item:nth-of-type(odd) {
     width: 85px;


@@ 262,10 269,4 @@ Thanks to Bogdan for letting me butcher the original Dribbble shot :D
 
 <h2 id="demo">Live Demo (CodePen)</h2>
 
-<p class="codepen" data-height="710" data-theme-id="dark" data-default-tab="result" data-user="bradleytaunt" data-slug-hash="bGgBRaV" style="height: 710px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="BG-D: Big Sur Mac App Icon">
-  <span>See the Pen <a href="https://codepen.io/bradleytaunt/pen/bGgBRaV">
-  BG-D: Big Sur Mac App Icon</a> by Bradley Taunt (<a href="https://codepen.io/bradleytaunt">@bradleytaunt</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
-<br>>
\ No newline at end of file
+Feel free to explore the [live CodePen demo here](https://codepen.io/bradleytaunt/pen/bGgBRaV").<
\ No newline at end of file

M _site/89-posts-one-file/index.html => _site/89-posts-one-file/index.html +2 -2

@@ 95,9 95,9 @@
 
 <figure>
     <div class="img-parent">
-    <img loading="lazy" src="/placeholder-image.webp" onclick="this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons" />
+    <img loading="lazy" src="/placeholder-image.webp" onclick="this.src='/public/images/aqua-ui-css-buttons.webp'" alt="Aqua UI buttons" />
     </div>
-    <figcaption><b>Click the placeholder to load in the real image</b><br />Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption>
+    <figcaption><b>Click the placeholder to load in the real image</b><br />Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. <a href="/public/images/aqua-ui-css-buttons.webp">View full size image</a>.</figcaption>
 </figure>
 
 <p>I have noticed that Safari / Firefox on iOS renders the imagery as broken image links - I plan to look into this further to avoid that confusion. For now it works well on desktop Chromium and Firefox.</p>

M _site/articles/index.html => _site/articles/index.html +2 -2

@@ 513,7 513,7 @@
 
   <tr>
     <td width="100px"><time datetime="2018-08-06T20:00:00-04:00">2018-08-06&nbsp;&nbsp;</time></td>
-    <td><a href="/setting-up-free-ssl/">Setting up a free SSL</a></td>
+    <td><a href="/setting-up-free-ssl/">Setting Up a Free SSL</a></td>
   </tr>
 
   <tr>


@@ 528,7 528,7 @@
 
   <tr>
     <td width="100px"><time datetime="2018-02-11T19:00:00-05:00">2018-02-11&nbsp;&nbsp;</time></td>
-    <td><a href="/stay-hungry/">Stay hungry</a></td>
+    <td><a href="/stay-hungry/">Stay Hungry</a></td>
   </tr>
 
   <tr>

M _site/cut-your-forms-in-half/index.html => _site/cut-your-forms-in-half/index.html +1 -1

@@ 63,7 63,7 @@
 
 <p>Let’s use a real-world form off the <a href="https://www.greatwestlife.com">Great West Life Insurance</a> website as an example (left is original, right is updated):</p>
 
-<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/cut-forms.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/cut-forms.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/cut-forms.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/cut-forms.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/cut-forms.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/cut-forms.webp 1200w" sizes="100vw" alt="Great West Life form update" width="1623" height="2881" crossorigin="anonymous" /></p>
+<p><img src="/public/images/cut-forms.webp" alt="Great West Life form update" /></p>
 
 <h3 id="breaking-things-down">Breaking things down</h3>

M _site/feed.xml => _site/feed.xml +34 -39

@@ 4,7 4,7 @@
  <title>Ugly Duck</title>
  <link href="http://localhost:4000/atom.xml" rel="self"/>
  <link href="http://localhost:4000/"/>
- <updated>2021-11-11T13:15:02-05:00</updated>
+ <updated>2021-11-12T09:18:54-05:00</updated>
  <id>http://localhost:4000</id>
  <author>
    <name>Bradley Taunt</name>


@@ 1302,15 1302,15 @@ button {
 &lt;p&gt;Let’s take a look at the original Dribbble shot:&lt;/p&gt;
 
 &lt;figure&gt;
-    &lt;img src=&quot;/placeholder-image.webp&quot; onclick=&quot;this.src='https://cdn.dribbble.com/users/4965/screenshots/14333170/media/e54ac9b2850f786471d7790bec3844a6.webp'&quot; alt=&quot;Big Sur Icon&quot; /&gt;
-    &lt;figcaption&gt;&lt;b&gt;Click the placeholder to load in the real image&lt;/b&gt;&lt;br /&gt;The original Dribbble shot (&lt;a href=&quot;https://cdn.dribbble.com/users/4965/screenshots/14333170/media/e54ac9b2850f786471d7790bec3844a6.webp&quot;&gt;direct link to image&lt;/a&gt;)&lt;/figcaption&gt;
+    &lt;img src=&quot;/public/images/e54ac9b2850f786471d7790bec3844a6.webp&quot; alt=&quot;Big Sur Icon&quot; /&gt;
+    &lt;figcaption&gt;The original Dribbble shot (&lt;a href=&quot;/public/images/e54ac9b2850f786471d7790bec3844a6.webp&quot;&gt;direct link to image&lt;/a&gt;)&lt;/figcaption&gt;
 &lt;/figure&gt;
 
 &lt;p&gt;And now let’s see what we will be creating with only HTML &amp;amp; CSS:&lt;/p&gt;
 
 &lt;figure&gt;
-    &lt;img src=&quot;/placeholder-image.webp&quot; onclick=&quot;this.src='/public/images/big-sur-css.webp'&quot; alt=&quot;Big Sur Icon&quot; /&gt;
-    &lt;figcaption&gt;&lt;b&gt;Click the placeholder to load in the real image&lt;/b&gt;&lt;br /&gt;What we are going to create with pure HTML &amp;amp; CSS (&lt;a href=&quot;/public/images/big-sur-css.webp&quot;&gt;direct link to image&lt;/a&gt;)&lt;/figcaption&gt;
+    &lt;img src=&quot;/public/images/big-sur-css.webp&quot; alt=&quot;Big Sur Icon&quot; /&gt;
+    &lt;figcaption&gt;What we are going to create with pure HTML &amp;amp; CSS (&lt;a href=&quot;/public/images/big-sur-css.webp&quot;&gt;direct link to image&lt;/a&gt;)&lt;/figcaption&gt;
 &lt;/figure&gt;
 
 &lt;p&gt;Like I said - far from perfect but still a fun experiment!&lt;/p&gt;


@@ 1405,7 1405,9 @@ button {
 }
 &lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
 
-&lt;p&gt;So far so good. The next part &lt;em&gt;looks&lt;/em&gt; like a lot, but I assure you it’s fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total):&lt;/p&gt;
+&lt;h2 id=&quot;targeting-the-inner-rows&quot;&gt;Targeting the Inner Rows&lt;/h2&gt;
+
+&lt;p&gt;So far so good. The next part &lt;em&gt;looks&lt;/em&gt; like a lot, but I assure you it’s fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total). First we start with the parent &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;row&lt;/code&gt; styling:&lt;/p&gt;
 
 &lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;.blue-square .row {
     display: flex;


@@ 1415,7 1417,11 @@ button {
     position: absolute;
     width: 100%;
 }
-.blue-square .row:nth-of-type(2) { margin-top: var(--row-distance); }
+&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;
+
+&lt;p&gt;Now we style each individual row item via the &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;nth-of-type&lt;/code&gt; attribute:&lt;/p&gt;
+
+&lt;div class=&quot;language-plaintext highlighter-rouge&quot;&gt;&lt;div class=&quot;highlight&quot;&gt;&lt;pre class=&quot;highlight&quot;&gt;&lt;code&gt;.blue-square .row:nth-of-type(2) { margin-top: var(--row-distance); }
 .blue-square .row:nth-of-type(2) .item:nth-of-type(odd) {
     width: 85px;
 }


@@ 1550,14 1556,7 @@ button {
 
 &lt;h2 id=&quot;demo&quot;&gt;Live Demo (CodePen)&lt;/h2&gt;
 
-&lt;p class=&quot;codepen&quot; data-height=&quot;710&quot; data-theme-id=&quot;dark&quot; data-default-tab=&quot;result&quot; data-user=&quot;bradleytaunt&quot; data-slug-hash=&quot;bGgBRaV&quot; style=&quot;height: 710px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; data-pen-title=&quot;BG-D: Big Sur Mac App Icon&quot;&gt;
-  &lt;span&gt;See the Pen &lt;a href=&quot;https://codepen.io/bradleytaunt/pen/bGgBRaV&quot;&gt;
-  BG-D: Big Sur Mac App Icon&lt;/a&gt; by Bradley Taunt (&lt;a href=&quot;https://codepen.io/bradleytaunt&quot;&gt;@bradleytaunt&lt;/a&gt;)
-  on &lt;a href=&quot;https://codepen.io&quot;&gt;CodePen&lt;/a&gt;.&lt;/span&gt;
-&lt;/p&gt;
-&lt;script async=&quot;&quot; src=&quot;https://cpwebassets.codepen.io/assets/embed/ei.js&quot;&gt;&lt;/script&gt;
-
-&lt;p&gt;&lt;br /&gt;&lt;/p&gt;
+&lt;p&gt;Feel free to explore the &lt;a href=&quot;https://codepen.io/bradleytaunt/pen/bGgBRaV&amp;quot;&quot;&gt;live CodePen demo here&lt;/a&gt;.&lt;/p&gt;
 </content>
  </entry>
  


@@ 1715,9 1714,9 @@ button {
 
 &lt;figure&gt;
     &lt;div class=&quot;img-parent&quot;&gt;
-    &lt;img loading=&quot;lazy&quot; src=&quot;/placeholder-image.webp&quot; onclick=&quot;this.src='https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp'&quot; alt=&quot;Aqua UI buttons&quot; /&gt;
+    &lt;img loading=&quot;lazy&quot; src=&quot;/placeholder-image.webp&quot; onclick=&quot;this.src='/public/images/aqua-ui-css-buttons.webp'&quot; alt=&quot;Aqua UI buttons&quot; /&gt;
     &lt;/div&gt;
-    &lt;figcaption&gt;&lt;b&gt;Click the placeholder to load in the real image&lt;/b&gt;&lt;br /&gt;Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. &lt;a href=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/q_auto:low/v1570124593/https://uglyduck.ca/public/images/aqua-ui-css-buttons.webp&quot;&gt;View full size image&lt;/a&gt;.&lt;/figcaption&gt;
+    &lt;figcaption&gt;&lt;b&gt;Click the placeholder to load in the real image&lt;/b&gt;&lt;br /&gt;Example Dribbble shot for testing. Feel free to click the default image in order to load the correct Dribbble source. &lt;a href=&quot;/public/images/aqua-ui-css-buttons.webp&quot;&gt;View full size image&lt;/a&gt;.&lt;/figcaption&gt;
 &lt;/figure&gt;
 
 &lt;p&gt;I have noticed that Safari / Firefox on iOS renders the imagery as broken image links - I plan to look into this further to avoid that confusion. For now it works well on desktop Chromium and Firefox.&lt;/p&gt;


@@ 6037,24 6036,24 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 &lt;p&gt;Let’s do a very simple breakdown of some of the more common HTML no-nos:&lt;/p&gt;
 
-&lt;ul style=&quot;list-style:none;padding: 0;&quot;&gt;
-&lt;li&gt;❌ Using &lt;code&gt;span&lt;/code&gt; or &lt;code&gt;div&lt;/code&gt; elements for navigations or list components&lt;/li&gt;
-&lt;li&gt;❌ Implementing custom &lt;code&gt;div&lt;/code&gt; layouts for forms while removing items like &lt;code&gt;select&lt;/code&gt; or &lt;code&gt;radio&lt;/code&gt;&lt;/li&gt;
-&lt;li&gt;❌ Creating tables built out of custom &lt;code&gt;div&lt;/code&gt; elements&lt;/li&gt;
-&lt;li&gt;❌ Over-nesting elements or making overly complex depth to simple components&lt;/li&gt;
-&lt;li&gt;❌ Content being heavily reliant on JavaScript &quot;injection&quot;&lt;/li&gt;
+&lt;ul&gt;
+&lt;li&gt;Using &lt;code&gt;span&lt;/code&gt; or &lt;code&gt;div&lt;/code&gt; elements for navigations or list components&lt;/li&gt;
+&lt;li&gt;Implementing custom &lt;code&gt;div&lt;/code&gt; layouts for forms while removing items like &lt;code&gt;select&lt;/code&gt; or &lt;code&gt;radio&lt;/code&gt;&lt;/li&gt;
+&lt;li&gt;Creating tables built out of custom &lt;code&gt;div&lt;/code&gt; elements&lt;/li&gt;
+&lt;li&gt;Over-nesting elements or making overly complex depth to simple components&lt;/li&gt;
+&lt;li&gt;Content being heavily reliant on JavaScript &quot;injection&quot;&lt;/li&gt;
 &lt;/ul&gt;
 
 &lt;h2 id=&quot;good-html-practices&quot;&gt;Good HTML practices&lt;/h2&gt;
 
 &lt;p&gt;So what should you do in place of these bad HTML implementations?&lt;/p&gt;
 
-&lt;ul style=&quot;list-style:none;padding: 0;&quot;&gt;
-&lt;li&gt;✅ Use proper &lt;code&gt;nav&lt;/code&gt;, &lt;code&gt;ul&lt;/code&gt; and &lt;code&gt;ol&lt;/code&gt; for navigations or list components&lt;/li&gt;
-&lt;li&gt;✅ Style form elements directly &lt;a href=&quot;https://www.filamentgroup.com/lab/select-css.html&quot;&gt;this is already supported in browsers&lt;/a&gt;&lt;/li&gt;
-&lt;li&gt;✅ Build tables using &lt;code&gt;table&lt;/code&gt; element structure (mind-blowing, I know!)&lt;/li&gt;
-&lt;li&gt;✅ Keep element hierarchy as slim and top level as possible&lt;/li&gt;
-&lt;li&gt;✅ Avoid injecting &lt;i&gt;any&lt;/i&gt; content via JavaScript (I understand this is difficult for certain apps, but try to minimize this as much as possible)&lt;/li&gt;
+&lt;ul&gt;
+&lt;li&gt;Use proper &lt;code&gt;nav&lt;/code&gt;, &lt;code&gt;ul&lt;/code&gt; and &lt;code&gt;ol&lt;/code&gt; for navigations or list components&lt;/li&gt;
+&lt;li&gt;Style form elements directly &lt;a href=&quot;https://www.filamentgroup.com/lab/select-css.html&quot;&gt;this is already supported in browsers&lt;/a&gt;&lt;/li&gt;
+&lt;li&gt;Build tables using &lt;code&gt;table&lt;/code&gt; element structure (mind-blowing, I know!)&lt;/li&gt;
+&lt;li&gt;Keep element hierarchy as slim and top level as possible&lt;/li&gt;
+&lt;li&gt;Avoid injecting &lt;i&gt;any&lt;/i&gt; content via JavaScript (I understand this is difficult for certain apps, but try to minimize this as much as possible)&lt;/li&gt;
 &lt;/ul&gt;
 
 &lt;h2 id=&quot;my-basic-structure-test&quot;&gt;My basic “structure” test&lt;/h2&gt;


@@ 6269,7 6268,7 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 &lt;p&gt;Let’s take a look at my redesign concept:&lt;/p&gt;
 
-&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/receipt-update.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/receipt-update.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/receipt-update.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/receipt-update.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/receipt-update.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/receipt-update.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Receipt Update&quot; width=&quot;1600&quot; height=&quot;1200&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;
+&lt;p&gt;&lt;img src=&quot;/public/images/receipt-update.webp&quot; alt=&quot;Receipt Update&quot; /&gt;&lt;/p&gt;
 
 &lt;p&gt;With this layout we are able to keep all the key concepts that &lt;a href=&quot;https://twitter.com/datatoviz?lang=en&quot;&gt;Susie Lu&lt;/a&gt; initially introduced with her receipt design while preserving more space.&lt;/p&gt;
 


@@ 6304,7 6303,7 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 
 &lt;p&gt;Let’s use a real-world form off the &lt;a href=&quot;https://www.greatwestlife.com&quot;&gt;Great West Life Insurance&lt;/a&gt; website as an example (left is original, right is updated):&lt;/p&gt;
 
-&lt;p&gt;&lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/cut-forms.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/cut-forms.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/cut-forms.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/cut-forms.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/cut-forms.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/cut-forms.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Great West Life form update&quot; width=&quot;1623&quot; height=&quot;2881&quot; crossorigin=&quot;anonymous&quot; /&gt;&lt;/p&gt;
+&lt;p&gt;&lt;img src=&quot;/public/images/cut-forms.webp&quot; alt=&quot;Great West Life form update&quot; /&gt;&lt;/p&gt;
 
 &lt;h3 id=&quot;breaking-things-down&quot;&gt;Breaking things down&lt;/h3&gt;
 


@@ 6656,12 6655,8 @@ var inputs = document.getElementsByClassName('checkbox-btn')
 &lt;p&gt;Browser support is actually pretty great for such a regularly over-looked CSS property. All major desktop and mobile browsers support it:&lt;/p&gt;
 
 &lt;figure&gt;
-    &lt;img src=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/text-indent-compatibility.webp&quot; srcset=&quot;https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/text-indent-compatibility.webp 320w,
-https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/text-indent-compatibility.webp 540w,
-https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/text-indent-compatibility.webp 760w,
-https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/text-indent-compatibility.webp 980w,
-https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/text-indent-compatibility.webp 1200w&quot; sizes=&quot;100vw&quot; alt=&quot;Text indent browser compatibility&quot; width=&quot;2084&quot; height=&quot;868&quot; crossorigin=&quot;anonymous&quot; /&gt;
-    &lt;span class=&quot;marginnote&quot;&gt;Full support across all browsers.&lt;/span&gt;
+    &lt;img src=&quot;/public/images/text-indent-compatibility.webp&quot; alt=&quot;Text indent browser compatibility&quot; /&gt;
+    &lt;figcaption&gt;Full support across all browsers.&lt;/figcaption&gt;
 &lt;/figure&gt;
 
 &lt;p&gt;Now that doesn’t mean you should just slap this property on all your type elements and call it a day - there are specific use cases for &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;text-indent&lt;/code&gt; and some basic rules to follow:&lt;/p&gt;


@@ 9321,7 9316,7 @@ of the parent - not very flexible */&lt;/span&gt;
  </entry>
  
  <entry>
-   <title>Setting up a free SSL</title>
+   <title>Setting Up a Free SSL</title>
    <link href="http://localhost:4000/setting-up-free-ssl/"/>
    <updated>2018-08-06T20:00:00-04:00</updated>
    <id>http://localhost:4000/setting-up-free-ssl</id>


@@ 9424,7 9419,7 @@ of the parent - not very flexible */&lt;/span&gt;
  </entry>
  
  <entry>
-   <title>Stay hungry</title>
+   <title>Stay Hungry</title>
    <link href="http://localhost:4000/stay-hungry/"/>
    <updated>2018-02-11T19:00:00-05:00</updated>
    <id>http://localhost:4000/stay-hungry</id>

M _site/first-letter/index.html => _site/first-letter/index.html +1 -1

@@ 46,7 46,7 @@
         <h1>First Letter Pseudo Element</h1>
       </header>
       <hr>
-      <article class="">
+      <article class="single">
         <p><em>Posted on <time datetime="2019-05-02T20:00:00-04:00">May 2, 2019</time></em></p>
         <hr>
         <p><em>In today’s TypeTip™ we will be taking a look at the often overlooked</em> <code class="language-plaintext highlighter-rouge">:first-letter</code> CSS pseudo element. Though you might only use this for specific article-format web pages, it’s still a nice-to-have in your web dev toolset.</p>

M _site/html-like-1999/index.html => _site/html-like-1999/index.html +12 -12

@@ 59,24 59,24 @@
 
 <p>Let’s do a very simple breakdown of some of the more common HTML no-nos:</p>
 
-<ul style="list-style:none;padding: 0;">
-<li>❌ Using <code>span</code> or <code>div</code> elements for navigations or list components</li>
-<li>❌ Implementing custom <code>div</code> layouts for forms while removing items like <code>select</code> or <code>radio</code></li>
-<li>❌ Creating tables built out of custom <code>div</code> elements</li>
-<li>❌ Over-nesting elements or making overly complex depth to simple components</li>
-<li>❌ Content being heavily reliant on JavaScript "injection"</li>
+<ul>
+<li>Using <code>span</code> or <code>div</code> elements for navigations or list components</li>
+<li>Implementing custom <code>div</code> layouts for forms while removing items like <code>select</code> or <code>radio</code></li>
+<li>Creating tables built out of custom <code>div</code> elements</li>
+<li>Over-nesting elements or making overly complex depth to simple components</li>
+<li>Content being heavily reliant on JavaScript "injection"</li>
 </ul>
 
 <h2 id="good-html-practices">Good HTML practices</h2>
 
 <p>So what should you do in place of these bad HTML implementations?</p>
 
-<ul style="list-style:none;padding: 0;">
-<li>✅ Use proper <code>nav</code>, <code>ul</code> and <code>ol</code> for navigations or list components</li>
-<li>✅ Style form elements directly <a href="https://www.filamentgroup.com/lab/select-css.html">this is already supported in browsers</a></li>
-<li>✅ Build tables using <code>table</code> element structure (mind-blowing, I know!)</li>
-<li>✅ Keep element hierarchy as slim and top level as possible</li>
-<li>✅ Avoid injecting <i>any</i> content via JavaScript (I understand this is difficult for certain apps, but try to minimize this as much as possible)</li>
+<ul>
+<li>Use proper <code>nav</code>, <code>ul</code> and <code>ol</code> for navigations or list components</li>
+<li>Style form elements directly <a href="https://www.filamentgroup.com/lab/select-css.html">this is already supported in browsers</a></li>
+<li>Build tables using <code>table</code> element structure (mind-blowing, I know!)</li>
+<li>Keep element hierarchy as slim and top level as possible</li>
+<li>Avoid injecting <i>any</i> content via JavaScript (I understand this is difficult for certain apps, but try to minimize this as much as possible)</li>
 </ul>
 
 <h2 id="my-basic-structure-test">My basic “structure” test</h2>

M _site/improving-receipt-ux/index.html => _site/improving-receipt-ux/index.html +1 -1

@@ 76,7 76,7 @@
 
 <p>Let’s take a look at my redesign concept:</p>
 
-<p><img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/receipt-update.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/receipt-update.webp 320w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/receipt-update.webp 540w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/receipt-update.webp 760w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/receipt-update.webp 980w, https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/receipt-update.webp 1200w" sizes="100vw" alt="Receipt Update" width="1600" height="1200" crossorigin="anonymous" /></p>
+<p><img src="/public/images/receipt-update.webp" alt="Receipt Update" /></p>
 
 <p>With this layout we are able to keep all the key concepts that <a href="https://twitter.com/datatoviz?lang=en">Susie Lu</a> initially introduced with her receipt design while preserving more space.</p>

M _site/indenting-text-with-css/index.html => _site/indenting-text-with-css/index.html +2 -6

@@ 58,12 58,8 @@
 <p>Browser support is actually pretty great for such a regularly over-looked CSS property. All major desktop and mobile browsers support it:</p>
 
 <figure>
-    <img src="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/text-indent-compatibility.webp" srcset="https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_320/http://localhost:4000/public/images/text-indent-compatibility.webp 320w,
-https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_540/http://localhost:4000/public/images/text-indent-compatibility.webp 540w,
-https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_760/http://localhost:4000/public/images/text-indent-compatibility.webp 760w,
-https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_980/http://localhost:4000/public/images/text-indent-compatibility.webp 980w,
-https://res.cloudinary.com/bradtaunt/image/fetch/c_limit,f_auto,q_auto,w_1200/http://localhost:4000/public/images/text-indent-compatibility.webp 1200w" sizes="100vw" alt="Text indent browser compatibility" width="2084" height="868" crossorigin="anonymous" />
-    <span class="marginnote">Full support across all browsers.</span>
+    <img src="/public/images/text-indent-compatibility.webp" alt="Text indent browser compatibility" />
+    <figcaption>Full support across all browsers.</figcaption>
 </figure>
 
 <p>Now that doesn’t mean you should just slap this property on all your type elements and call it a day - there are specific use cases for <code class="language-plaintext highlighter-rouge">text-indent</code> and some basic rules to follow:</p>

M _site/introducing-pageroast/index.html => _site/introducing-pageroast/index.html +1 -1

@@ 46,7 46,7 @@
         <h1>Introducing PageRoast</h1>
       </header>
       <hr>
-      <article class="">
+      <article class="single">
         <p><em>Posted on <time datetime="2021-03-11T00:00:00-05:00">March 11, 2021</time></em></p>
         <hr>
         <p><em>Following up with my concept of releasing small side projects weekly</em>, I have officially launched <a href="https://pageroast.com">PageRoast</a>. What is PageRoast I hear you ask?</p>

M _site/launching-thriftyname/index.html => _site/launching-thriftyname/index.html +1 -1

@@ 46,7 46,7 @@
         <h1>ThriftyName: $5 Brand Names</h1>
       </header>
       <hr>
-      <article class="">
+      <article class="single">
         <p><em>Posted on <time datetime="2021-02-25T00:00:00-05:00">February 25, 2021</time></em></p>
         <hr>
         <p><em>It’s been a while since I’ve written anything on this blog</em>, but for good reason - <strong>I’ve been working on a handful of side projects</strong>. I plan to drip-feed release these projects over time, but for today I’m announcing <a href="https://thrifty.name">ThriftyName</a>.</p>

M _site/macos-icon-css/index.html => _site/macos-icon-css/index.html +13 -14

@@ 58,15 58,15 @@
 <p>Let’s take a look at the original Dribbble shot:</p>
 
 <figure>
-    <img src="/placeholder-image.webp" onclick="this.src='https://cdn.dribbble.com/users/4965/screenshots/14333170/media/e54ac9b2850f786471d7790bec3844a6.webp'" alt="Big Sur Icon" />
-    <figcaption><b>Click the placeholder to load in the real image</b><br />The original Dribbble shot (<a href="https://cdn.dribbble.com/users/4965/screenshots/14333170/media/e54ac9b2850f786471d7790bec3844a6.webp">direct link to image</a>)</figcaption>
+    <img src="/public/images/e54ac9b2850f786471d7790bec3844a6.webp" alt="Big Sur Icon" />
+    <figcaption>The original Dribbble shot (<a href="/public/images/e54ac9b2850f786471d7790bec3844a6.webp">direct link to image</a>)</figcaption>
 </figure>
 
 <p>And now let’s see what we will be creating with only HTML &amp; CSS:</p>
 
 <figure>
-    <img src="/placeholder-image.webp" onclick="this.src='/public/images/big-sur-css.webp'" alt="Big Sur Icon" />
-    <figcaption><b>Click the placeholder to load in the real image</b><br />What we are going to create with pure HTML &amp; CSS (<a href="/public/images/big-sur-css.webp">direct link to image</a>)</figcaption>
+    <img src="/public/images/big-sur-css.webp" alt="Big Sur Icon" />
+    <figcaption>What we are going to create with pure HTML &amp; CSS (<a href="/public/images/big-sur-css.webp">direct link to image</a>)</figcaption>
 </figure>
 
 <p>Like I said - far from perfect but still a fun experiment!</p>


@@ 161,7 161,9 @@
 }
 </code></pre></div></div>
 
-<p>So far so good. The next part <em>looks</em> like a lot, but I assure you it’s fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total):</p>
+<h2 id="targeting-the-inner-rows">Targeting the Inner Rows</h2>
+
+<p>So far so good. The next part <em>looks</em> like a lot, but I assure you it’s fairly straightforward. We need to include each row inside the Blue Square like in the original Dribbble shot (7 total). First we start with the parent <code class="language-plaintext highlighter-rouge">row</code> styling:</p>
 
 <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.blue-square .row {
     display: flex;


@@ 171,7 173,11 @@
     position: absolute;
     width: 100%;
 }
-.blue-square .row:nth-of-type(2) { margin-top: var(--row-distance); }
+</code></pre></div></div>
+
+<p>Now we style each individual row item via the <code class="language-plaintext highlighter-rouge">nth-of-type</code> attribute:</p>
+
+<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>.blue-square .row:nth-of-type(2) { margin-top: var(--row-distance); }
 .blue-square .row:nth-of-type(2) .item:nth-of-type(odd) {
     width: 85px;
 }


@@ 306,14 312,7 @@
 
 <h2 id="demo">Live Demo (CodePen)</h2>
 
-<p class="codepen" data-height="710" data-theme-id="dark" data-default-tab="result" data-user="bradleytaunt" data-slug-hash="bGgBRaV" style="height: 710px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="BG-D: Big Sur Mac App Icon">
-  <span>See the Pen <a href="https://codepen.io/bradleytaunt/pen/bGgBRaV">
-  BG-D: Big Sur Mac App Icon</a> by Bradley Taunt (<a href="https://codepen.io/bradleytaunt">@bradleytaunt</a>)
-  on <a href="https://codepen.io">CodePen</a>.</span>
-</p>
-<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
-
-<p><br /></p>
+<p>Feel free to explore the <a href="https://codepen.io/bradleytaunt/pen/bGgBRaV&quot;">live CodePen demo here</a>.</p>
 
       </article>
       <br>

A _site/public/images/e54ac9b2850f786471d7790bec3844a6.webp => _site/public/images/e54ac9b2850f786471d7790bec3844a6.webp +0 -0

M _site/setting-up-free-ssl/index.html => _site/setting-up-free-ssl/index.html +3 -3

@@ 7,7 7,7 @@
 
   <title>
     
-      Setting up a free SSL &middot; Ugly Duck
+      Setting Up a Free SSL &middot; Ugly Duck
     
   </title>
   <meta name="description" content="Tutorial on how to easily setup a free SSL certificate">


@@ 43,10 43,10 @@
 
     <main id="main" role="main">
       <header>
-        <h1>Setting up a free SSL</h1>
+        <h1>Setting Up a Free SSL</h1>
       </header>
       <hr>
-      <article class="">
+      <article class="single">
         <p><em>Posted on <time datetime="2018-08-06T20:00:00-04:00">August 6, 2018</time></em></p>
         <hr>
         <p>I never had to worry about SSL certificates when I originally hosted my blog through Github Pages, but since switching over to Surge.sh I lost my ability to utilize <code class="language-plaintext highlighter-rouge">https</code> protocol.</p>

M _site/stay-hungry/index.html => _site/stay-hungry/index.html +3 -3

@@ 7,7 7,7 @@
 
   <title>
     
-      Stay hungry &middot; Ugly Duck
+      Stay Hungry &middot; Ugly Duck
     
   </title>
   <meta name="description" content="Staying passionate can help fuel your ambition">


@@ 43,10 43,10 @@
 
     <main id="main" role="main">
       <header>
-        <h1>Stay hungry</h1>
+        <h1>Stay Hungry</h1>
       </header>
       <hr>
-      <article class="">
+      <article class="single">
         <p><em>Posted on <time datetime="2018-02-11T19:00:00-05:00">February 11, 2018</time></em></p>
         <hr>
         <p>It can feel daunting in this developer / designer landscape to keep yourself up-to-date with the latest and greatest technologies available. Which new framework should I invest the most time into? Will it even be maintained a couple years down the road? Is it just a fad?</p>

M _site/still-using-jquery/index.html => _site/still-using-jquery/index.html +1 -1

@@ 46,7 46,7 @@
         <h1>Yes, I Still Use jQuery</h1>
       </header>
       <hr>
-      <article class="">
+      <article class="single">
         <p><em>Posted on <time datetime="2019-04-14T20:00:00-04:00">April 14, 2019</time></em></p>
         <hr>
         <p><em>I have seen a handful of condescending comments from front-end developers</em> since the newest build of jQuery (<a href="http://blog.jquery.com/2019/04/10/jquery-3-4-0-released/">3.4.0</a>) released a couple of days ago. While I understand not all developers share the same work-style or are using the same tech-stack, dismissive comments towards any <em>useful</em> library comes off as entitled or elitist.</p>

A public/images/e54ac9b2850f786471d7790bec3844a6.webp => public/images/e54ac9b2850f786471d7790bec3844a6.webp +0 -0