10 files changed, 23 insertions(+), 3 deletions(-)

M _includes/footer.html
M _includes/head.html
A _includes/promo.html
M _layouts/post.html
M _posts/2021-06-07-css-slope-graphs.md
M _posts/2021-08-13-pi-400-internal-ssd.md
M _posts/2021-10-15-batch-webp-conversion.md
M _posts/2021-12-06-jekyll-sourcehut.md
M _posts/2021-12-17-use-text-not-icons.md
M _posts/2022-01-06-future-os-google.md

@@ 5,7 5,7 @@
     <a href="https://fediring.net/previous?host=tdarb.org">←</a>&nbsp;<a href="https://fediring.net/">Fediring</a>&nbsp;<a href="https://fediring.net/next?host=tdarb.org">→</a></p>
     <hr>
     <small>
-        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/uglyduck/">Liberapay</a>. Hosted through <a href="https://srht.site">Sourcehut Pages</a>. View the <a href="https://git.sr.ht/~uglyduck/uglyduck.srht.site">website source code</a> Maintained with &hearts; for the web. Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
+        Keep this website ad-free by supporting via <a href="https://en.liberapay.com/tdarb">Liberapay</a>. Hosted through <a href="https://srht.site">Sourcehut Pages</a>. View the <a href="https://git.sr.ht/~uglyduck/uglyduck.srht.site">website source code</a> Maintained with &hearts; for the web. Honorary member of <a href="https://1mb.club">1MB Club</a> &amp; <a href="https://xhtml.club">XHTML Club</a>
     </small>
     <br><br>
     <small>This webpage <i>should</i> be <a href="https://validator.w3.org/nu/?doc={{ site.url}}{{ page.url}}">valid XHTML</a></small><br>

@@ 12,5 12,5 @@
   <meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
   <link rel="shortcut icon" href="{{ site.baseurl }}/favicon.png">
   <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ site.baseurl }}/feed.xml">
-  <style>body{font:18px/1.45 'Palatino','Georgia',serif;margin:auto;max-width:75ch;padding:10px;}a,a:visited{color:darkblue;}a:hover,a:focus{color:crimson;}img{max-width:100%;}pre{overflow:auto}figure{border:1px solid;max-width:800px;padding:10px;text-align:center;}code{font-size:16px;}</style>
+  <style>*{box-sizing:border-box;}body{font:18px/1.45 'Palatino','Georgia',serif;margin:auto;max-width:75ch;padding:10px;}a,a:visited{color:darkblue;}a:hover,a:focus{color:crimson;}img{max-width:100%;}pre{overflow:auto}figure{border:1px solid;max-width:800px;padding:10px;text-align:center;}code{font-size:16px;}.single .promo{border:double;display:block;margin:2rem 0;padding:15px;position:relative;width:100%;}table{width:100%;}</style>
 </head>

@@ 0,0 1,8 @@
+<div class="promo">
+    <span><strong>Enjoying the content? Consider supporting my work!</strong>&nbsp; My goal is to keep this blog advertisement and tracker free - forever. So, if you're feeling generous, please consider <a href="https://en.liberapay.com/tdarb">donating</a> or using one of the following referral links I <i>personally</i> recommend below:</span>
+    <ul>
+        <li><a href="https://usefathom.com/ref/DKHJVX">Fathom</a> - Privacy-focused analytics without compromise</li>
+        <li><a href="https://divjoy.com/?via=bradley">Divjoy</a> - Create the perfect codebase for your next project</li>
+    </ul>
+    <span>Now back to the article...</span>
+</div><
\ No newline at end of file

@@ 9,7 9,7 @@
       <header>
         <h1>{{ page.title }}</h1>
       </header>
-      <article class="{% if page.column == 'single' %}single{% endif %}">
+      <article class="single">
         <p><em>Posted on <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time></em></p>
         <hr>
         {{ content }}

@@ 65,6 65,8 @@ For this concept we will actually be building this graph out of `tables` - crazy
 
 As you can see, nothing too fancy is happpening here. Pay close attention to the `data-set` and `data-name` variables though - those will be important for the CSS portion of this design, mainly the rendering of the line elements.
 
+{% include promo.html %}
+
 ## The CSS
 
 To avoid overwhelming your brain all-at-once, let's break the CSS down into bite-sized chunks, starting with the base styling:

@@ 49,6 49,8 @@ Next you will need to carefully remove the Pi board itself from the red part of 
 
 **Important to note:** this will remove one of the screw slots needed to secure the heatsink into the board. Not a big deal if you ask me...
 
+{% include promo.html %}
+
 <figure>
     <img src="/public/images/pi-plastic-back.webp" alt="Plastic dremled back">
     <figcaption>Here you can see my terrible sanding job on the far left plastic snap-lock (<a href="/public/images/pi-plastic-back.webp">direct link to image</a>)</figcaption>

@@ 53,6 53,8 @@ And when right-clicking an image file in the Finder window, it should now give y
 
 ![Right click to convert to webp](/public/images/automator-2.webp)
 
+{% include promo.html %}
+
 ## Making edits to your script
 
 If you ever have the need to edit this script (for example, changing the default `85` quality parameter), you will need to navigate to your `~/Library/Services` folder and open your custom webp Quick Action in the Automator application. 

@@ 34,6 34,8 @@ Keeping that in mind, let's get into setting up our static site!
 4. Connect this repo locally (as you would via any other git host)
 5. In this new local directory, place all your Jekyll files as you would with any other static hosting provider
 
+{% include promo.html %}
+
 ## The sourcehut build file
 
 In order to have your Jekyll site build and push the correct files live, you will need to use sourcehut's build system. This will run every time you push out a new change to your repo (new blog post, page content changes, styling updates).

@@ 34,6 34,8 @@ Hogwash. Make it a button that simply says `Save File`. I'm not kidding. Oh, it 
 
 Take the time to do even a small thought / wireframe experiment: redo the layout and flow of your application without using a single piece of iconography. If you can't achieve this with even limited success, something is wrong with the overall design.
 
+{% include promo.html %}
+
 ## The hamburger menu is the 7th circle of Hell
 
 In most use cases, the inclusion of a hamburger menu is indicative of an overly complex application. Too many cooks and all that jazz. Enterprise applications don't get a pass here either, as they tend to be the worst culprits of pouring out everything on to the user in some form of software vomit. Apparently sweeping all this interaction under the hamburger "rug" makes for a cleaner design. I assure you - it really doesn't.

@@ 59,6 59,8 @@ If you happen to be a user who uses GitLab or BitBucket to store your project fi
 
 Some may not like this programming setup but for me it works great. If running code remotely isn't your jam, you could always take a look at running [VSCodium](https://vscodium.com/) locally via Linux.
 
+{% include promo.html %}
+
 ## Design
 
 There is quite a bit of flexibility yet again in this category. Personally, I tend to use Figma almost exclusively as my main design tool. The best thing about Figma? It runs directly in the browser. A perfect fit for Chromebooks[^3].