Test out kramdown

41 files changed, 876 insertions, 895 deletions

diff --git a/.build.yml b/.build.yml
index ff70f23..47692e9 100644
--- a/.build.yml
+++ b/.build.yml
@@ -1,8 +1,9 @@
 image: alpine/latest
 oauth: pages.sr.ht/PAGES:RW
 packages:
-- rsync 
-- markdown
+- ruby-full
+- ruby-dev
+- rsync
 - coreutils
 - go
 - hut
@@ -11,6 +12,8 @@ site: bt.srht.site
 sources:
 - https://git.sr.ht/~bt/btxx.org
 tasks:
+- install-kramdown: |
+    sudo gem install kramdown
 - build: |
     cd btxx.org
     make build
diff --git a/.gitignore b/.gitignore
index 567609b..90094fc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 build/
+.ruby-version
diff --git a/barf b/barf
index 9cdcb8d..08e90f5 100755
--- a/barf
+++ b/barf
@@ -15,7 +15,7 @@ elif [ "$os_name" = "Darwin" ]; then
 fi
 
 set -eu
-MARKDOWN=markdown
+MARKDOWN=kramdown
 IFS='	'
 
 # Create tab separated file with filename, title, creation date, last update
diff --git a/pages/projects.md b/pages/projects.md
index be6d948..3accb87 100644
--- a/pages/projects.md
+++ b/pages/projects.md
@@ -6,14 +6,14 @@
 * [Vanilla CSS](https://vanillacss.com): A minimal baseline stylesheet for any web project
 * [Web Audit](https://audit.bt.ht): Detailed checklist audit for developing websites
 * [Normform](https://normform.netlify.app): Minimal CSS form plugin (6KB)
-* [23 Tales](https://23tales.netlify.app): Online collection of works by Beatrix Potter
+* [The 23 Tales Project](https://23tales.netlify.app): Online collection of works by Beatrix Potter
 * [Shinobi](https://shinobi.bt.ht): Text-based, RSS focused blogging "system"
 * [pblog](https://pblog.bt.ht): Pandoc static blog generator
 * [Light Speed](https://ls.bt.ht): Jekyll theme with a perfect Lighthouse score
 
 ## Clubs
-* [1MB Club](https://1mb.club): A collection of web pages weighing less than 1 megabyte
-* [1kB Club](https://1kb.club): A collection of web pages weighing less than 1 kilobyte
+* [The 1MB Club](https://1mb.club): A collection of web pages weighing less than 1 megabyte
+* [The 1kB Club](https://1kb.club): A collection of web pages weighing less than 1 kilobyte
 * [XHTML Club](https://xhtml.club) A collection of HTML-focused websites
 
 ## Installers / Setups
diff --git a/pages/wiki.md b/pages/wiki.md
index 3e684b6..a5b637b 100644
--- a/pages/wiki.md
+++ b/pages/wiki.md
@@ -12,7 +12,7 @@ My personal, lightweight desktop installer for OpenBSD based on the suckless phi
 
 ## vimrc
 
-```
+~~~sh
 " Don't try to be vi compatible
 set nocompatible
 
@@ -113,23 +113,23 @@ let g:solarized_termtrans=1
 " put https://raw.github.com/altercation/vim-colors-solarized/master/colors/solarized.vim
 " in ~/.vim/colors/ and uncomment:
 " colorscheme solarized
-```
+~~~
 
 ## .zshrc extras / aliases
 
-```
+~~~sh
 export EDITOR="/bin/vim"
 
 alias suck="sudo rm -rf config.h ; sudo make install"
 alias fixmonitor="xrandr --auto --output eDP1 --mode 1366x768 --below DP2-2"
 alias vscode="alias vscode="ENABLE_WASM=1 chrome --enable-wasm --disable-unveil""
-```
+~~~
 
 ## mimeapps.list
 
 Place this file under  `/usr/share/applications/mimeapps.list`
 
-```
+~~~sh
 [Default Applications]
 x-scheme-handler/http=org.qutebrowser.qutebrowser.desktop
 x-scheme-handler/https=org.qutebrowser.qutebrowser.desktop
@@ -145,7 +145,7 @@ application/x-extension-xht=org.qutebrowser.qutebrowser.desktop
 image/jpeg=feh
 image/png=feh
 image/webp=feh
-```
+~~~
 
 ## qutebrowser
 
@@ -155,7 +155,7 @@ All of these scripts should be added under `~/.local/share/qutebrowser/greasemon
 
 #### Auto Skip YouTube Ads
 
-```
+~~~js
 // ==UserScript==
 // @name         Auto Skip YouTube Ads 
 // @version      1.0.0
@@ -174,53 +174,53 @@ setInterval(() => {
         document.querySelector('video').playbackRate = 10;
     }
 }, 50)
-```
+~~~
 
 ## `ffmpeg` to MP4
 
-```
+~~~sh
 ffmpeg -i input_filename.avi -c:v copy -c:a copy -y output_filename.mp4
-```
+~~~
 
 ## Mount USB HDD via CLI
 
-```
+~~~sh
 mkdir /media/usb-drive
 mount /dev/sdX /media/usb-drive/
-```
+~~~
 
 ## Run Mullvad on Alpine Linux (Wireguard)
 
-```
+~~~sh
 # Install wireguard
 apk add wireguard-tools
-```
+~~~
 
 Login into Mullvad and download the proper wireguard configuration files(s). After downloaded, place in the proper directory:
 
-```
+~~~sh
 doas cp <MULLVAD_FILENAME>.conf /etc/wireguard/"
-```
+~~~
 
 Then setup an aliases for easier up/down states:
 
-```
+~~~sh
 alias vpnup="doas wg-quick up /etc/wireguard/<MULLVAD_FILENAME>.conf"
 alias vpndown="doas wg-quick down /etc/wireguard/<MULLVAD_FILENAME>.conf"
-```
+~~~
 
 ## Alpine Linux `mini_racer` Tweaks
 
 Gem lockfile:
 
-```
+~~~sh
 PLATFORMS
   ruby
   x86_64-linux-musl
 
 mini_racer (0.6.3)
  <remove child dependency>
-```
+~~~
 
 then run: `bundle update mini_racer`
 
@@ -228,65 +228,65 @@ then run: `bundle update mini_racer`
 
 Installing `ghost`
 
-```
+~~~sh
 docker pull ghost
-```
+~~~
 
-```
+~~~sh
 docker run -d \
     --name ghost-name \
     -e NODE_ENV=development \
     -p 2368:2368 \
     -v $HOME/path/to/ghost/blog:/var/lib/ghost/content \
     ghost:alpine
-```
+~~~
 
 ## MongoDB 3.4 on Ubuntu 23.10
 
-```
+~~~sh
 wget http://launchpadlibrarian.net/668089858/libssl1.0.0_1.0.2n-1ubuntu5.13_amd64.deb
 sudo apt install ./libssl1.0.0_1.0.2n-1ubuntu5.13_amd64.deb
 sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10
 
 echo "deb http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.4.list
-```
+~~~
 
 Now edit `/etc/apt/sources.list.d/mongodb-org-3.4.list`:
 
-```
+~~~sh
 deb [trusted=yes] http://repo.mongodb.org/apt/ubuntu precise/mongodb-org/3.4...
-```
+~~~
 
 Then finish things up:
 
-```
+~~~sh
 sudo apt-get update --allow-unauthenticated
 sudo apt-get install -y mongodb-org
 
 sudo mkdir -p /data/db
 sudo chmod -R 777 /data/db
-```
+~~~
 
 ## Redis 6.0.7 on Ubuntu 23.10
 
-```
+~~~sh
 sudo apt-get install build-essential tcl
 cd /tmp
 curl -O http://download.redis.io/releases/redis-6.0.7.tar.gz
 tar xzvf redis-6.0.7.tar.gz
 cd redis-6.0.7
-```
+~~~
 
 Install redis:
 
-```
+~~~sh
 make
 make test
 sudo make install
 
 sudo mkdir /etc/redis
 sudo cp /tmp/redis-6.0.7redis.conf /etc/redis
-```
+~~~
 
 Edit `/etc/redis/redis.conf` with the following changes:
 
@@ -295,7 +295,7 @@ Edit `/etc/redis/redis.conf` with the following changes:
 
 Create systemd unit file for redis: `/etc/systemd/system/redis.service`:
 
-```
+~~~sh
 [Unit]
 Description=Redis In-Memory Data Store
 After=network.target
@@ -309,40 +309,40 @@ Restart=always
 
 [Install]
 WantedBy=multi-user.target
-```
+~~~
 
 Final steps:
 
-```
+~~~sh
 sudo adduser --system --group --no-create-home redis
 sudo mkdir /var/lib/redis
 sudo chown redis:redis /var/lib/redis
 sudo chmod 770 /var/lib/redis
-```
+~~~
 
 ## Ruby 2.7.2 with rbenv on Ubuntu 23.10
 
 Edit the `/etc/apt/sources.list` file:
 
-```
+~~~sh
 deb [trusted=yes] http://security.ubuntu.com/ubuntu bionic-security main
-```
+~~~
 
 Then run `sudo apt-get update`. After completion, install `libssl1.0-dev`:
 
-```
+~~~sh
 sudo apt-get install libssl1.0-dev
-```
+~~~
 
 ## Fix screen tearing
 
-```
+~~~sh
 sudo micro /etc/X11/xorg.conf.d/20-intel.conf
-```
+~~~
 
 Add the following contents to `20-intel.conf`:
 
-```
+~~~sh
 Section "OutputClass"
     Identifier  "Intel Graphics"
     MatchDriver "i915"
@@ -350,29 +350,30 @@ Section "OutputClass"
     Option      "DRI"       "3"
     Option      "TearFree"  "1"
 EndSection
-```
+~~~
 
 ## Enabling "tap to click"
 
-```
+~~~sh
 sudo micro /etc/X11/xorg.conf.d/30-touchpad.conf
-```
+~~~
 
 Add the following contents to `30-touchpad.conf`:
 
-
-    Section "InputClass"
-        Identifier "touchpad"
-        Driver "libinput"
-        MatchIsTouchpad "on"
-        Option "Tapping" "on"
-        Option "TappingButtonMap" "lmr"
-    EndSection
+~~~sh
+Section "InputClass"
+    Identifier "touchpad"
+    Driver "libinput"
+    MatchIsTouchpad "on"
+    Option "Tapping" "on"
+    Option "TappingButtonMap" "lmr"
+EndSection
+~~~
 
 ## Woocommerce
 
 **Reset all product menu_order to `0`**
 
-```
+~~~sql
 UPDATE wp_posts SET menu_order = 0 WHERE post_type = 'product';
-```
+~~~
diff --git a/posts/1kb.md b/posts/1kb.md
index ff1f1b3..ee6d29a 100644
--- a/posts/1kb.md
+++ b/posts/1kb.md
@@ -2,7 +2,7 @@
 
 2022-08-02
 
-I recently launched (another) website club called the [1kB Club](https://1kb.club). Unlike the [1MB Club](https://1mb.club), it isn't as accessible for most modern websites to become official members. Building a website that actually serves useful content while squeezing its page size under 1,024 bytes is no easy feat.
+I recently launched (another) website club called [the 1kB Club](https://1kb.club). Unlike [the 1MB Club](https://1mb.club), it isn't as accessible for most modern websites to become official members. Building a website that actually serves useful content while squeezing its page size under 1,024 bytes is no easy feat.
 
 But it is possible. And I did it myself!
 
diff --git a/posts/alpine.md b/posts/alpine.md
index 2f03444..a1c860b 100644
--- a/posts/alpine.md
+++ b/posts/alpine.md
@@ -137,12 +137,9 @@ This was an odd edge case. For the most part, the default system cursors worked
 
 Not to worry though - there is an easy fix!
 
-1. Install [capitaine cursors](https://github.com/keeferrourke/capitaine-cursors):
-    apk add capitaine-cursors
-2. Make a new directory:
-    mkdir -p ~/.icons/capitaine-cursors
-3. Copy the files over: 
-    sudo cp -r /usr/share/icons/capitaine-cursors-dark ~/.icons/capitaine-cursors
+1. Install [capitaine cursors](https://github.com/keeferrourke/capitaine-cursors): `apk add capitaine-cursors`
+2. Make a new directory: `mkdir -p ~/.icons/capitaine-cursors`
+3. Copy the files over: `sudo cp -r /usr/share/icons/capitaine-cursors-dark ~/.icons/capitaine-cursors`
 4. The make your cursor changes using `gnome-tweaks`
 5. Profit!
 
@@ -152,6 +149,4 @@ Overall I'm decently satisfied with my "installer". I've included *just enough*
 
 Alpine Linux can be more than just a "server distro". My daily driver proves it!
 
-## Refs
-
-1. This is now included in my official installer script, but I originally had to install this manually.
+[^1]: This is now included in my official installer script, but I originally had to install this manually.
diff --git a/posts/animated-card-tiles.md b/posts/animated-card-tiles.md
index 4cbc8b7..318583a 100644
--- a/posts/animated-card-tiles.md
+++ b/posts/animated-card-tiles.md
@@ -38,28 +38,32 @@ That's all that is needed - for now. We will be returning to this code shortly t
 
 First we set the main housing container to use `flex` so we save ourselves the headache of aligning all the cards in a nice row:
 
-    .card-tiles-container {
-        display: flex;
-        font-size: 14px;
-        margin: 20px 0;
-    }
+~~~css
+.card-tiles-container {
+  display: flex;
+  font-size: 14px;
+  margin: 20px 0;
+}
+~~~
 
 Next we create the default styling for our tile cards and set the `transform` property to scale the card on `:hover`:
 
-    /* Default card tile styles */
-    .card-tile {
-        border: 1px solid;
-        border-radius: 10px;
-        cursor: pointer;
-        height: 150px;
-        margin: 0 10px;
-        overflow: hidden;
-        position: relative;
-        width: 33.33%;
-    }
-    .card-tile:hover {
-        transform: scale(1.1);
-    }
+~~~css
+/* Default card tile styles */
+.card-tile {
+  border: 1px solid;
+  border-radius: 10px;
+  cursor: pointer;
+  height: 150px;
+  margin: 0 10px;
+  overflow: hidden;
+  position: relative;
+  width: 33.33%;
+}
+.card-tile:hover {
+  transform: scale(1.1);
+}
+~~~
 
 ### Where are my cards?!
 
@@ -69,118 +73,132 @@ Our next step is to hide the default inner `text-content` and only show it on ho
 
 When the user hovers over a main card tile, we change the `text-content` values of both the opacity and z-index to 1.
 
-    /* Card tile text content */
-    .card-tile .text-content {
-        background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
-        bottom: 10px;
-        border: 1px solid rgba(0,0,0,0.4);
-        border-radius: 5px;
-        box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 
-                    0 2px 4px rgba(0,0,0,0.5);
-        height: 65px;
-        left: 10px;
-        opacity: 0;
-        padding: 10px;
-        position: absolute;
-        width: calc(100% - 20px);
-        z-index: -1;
-    }
-    .card-tile:hover .text-content {
-        opacity: 1;
-        z-index: 1;
-    }
+~~~css
+/* Card tile text content */
+.card-tile .text-content {
+  background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
+  bottom: 10px;
+  border: 1px solid rgba(0,0,0,0.4);
+  border-radius: 5px;
+  box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 
+              0 2px 4px rgba(0,0,0,0.5);
+  height: 65px;
+  left: 10px;
+  opacity: 0;
+  padding: 10px;
+  position: absolute;
+  width: calc(100% - 20px);
+  z-index: -1;
+}
+.card-tile:hover .text-content {
+  opacity: 1;
+  z-index: 1;
+}
+~~~
 
 Finally we add some minor styling for the inner header and paragraph tags:
 
-    .card-tile .text-content h4,
-    .card-tile .text-content p {
-        color: #fff;
-        margin: 0;
-        text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
-    }
+~~~css
+.card-tile .text-content h4,
+.card-tile .text-content p {
+  color: #fff;
+  margin: 0;
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
+}
+~~~
 
 ### Don't forget mobile
 
 We want out UI to stack the cards if users are viewing them on smaller devices:
 
-    @media(max-width: 600px) {
-        .card-tiles-container {
-            flex-direction: column;
-        }
-        .card-tile {
-            margin: 0 0 10px 0;
-            width: 100%;
-        }
-    }
+~~~css
+@media(max-width: 600px) {
+  .card-tiles-container {
+    flex-direction: column;
+  }
+  .card-tile {
+    margin: 0 0 10px 0;
+    width: 100%;
+  }
+}
+~~~
 
 ## Customizing each card
 
 Remember how I mentioned that we would be adding more classes to the original HTML? Now is the time. We will be including a simple class on each card tile to provide it's own custom coloring:
 
-    <div class="card-tiles-container">
-        <!-- `Blue` class -->
-        <div class="card-tile blue">
-            <div class="text-content">
-                <h4>Card Title</h4>
-                <p>Inner card content text</p>
-            </div>
-        </div>
-        <!-- `Orange` class -->
-        <div class="card-tile orange">
-            <div class="text-content">
-                <h4>Card Title</h4>
-                <p>Inner card content text</p>
-            </div>
-        </div>
-        <!-- `Green` class -->
-        <div class="card-tile green">
-            <div class="text-content">
-                <h4>Card Title</h4>
-                <p>Inner card content text</p>
-            </div>
-        </div>
+~~~html
+<div class="card-tiles-container">
+  <!-- `Blue` class -->
+  <div class="card-tile blue">
+    <div class="text-content">
+      <h4>Card Title</h4>
+      <p>Inner card content text</p>
+    </div>
+    </div>
+    <!-- `Orange` class -->
+    <div class="card-tile orange">
+    <div class="text-content">
+      <h4>Card Title</h4>
+      <p>Inner card content text</p>
+    </div>
+    </div>
+    <!-- `Green` class -->
+    <div class="card-tile green">
+    <div class="text-content">
+      <h4>Card Title</h4>
+      <p>Inner card content text</p>
     </div>
+  </div>
+</div>
+~~~
 
 And these color classes correlate to some new CSS styling:
 
-    /* Blue Card */
-    .card-tile.blue {
-        background-color: #0093E9;
-        background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
-        border-color: #0093E9;
-        box-shadow: 0 4px 12px rgba(128,208,199,0.7), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    .card-tile.blue:hover {
-        box-shadow: 0 8px 18px rgba(128,208,199,0.4), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-
-    /* Orange Card */
-    .card-tile.orange {
-        background-color: #FAD961;
-        background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
-        border-color: #F76B1C;
-        box-shadow: 0 4px 12px rgba(247,107,28,0.7), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    .card-tile.orange:hover {
-        box-shadow: 0 8px 18px rgba(247,107,28,0.4), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-
-    /* Green Card */
-    .card-tile.green {
-        background-color: #096e40;
-        background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%);
-        border-color: #096e40;
-        box-shadow: 0 4px 12px rgba(9,110,64,0.7), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    .card-tile.green:hover {
-        box-shadow: 0 8px 18px rgba(9,110,64,0.4), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
+~~~css
+/* Blue Card */
+.card-tile.blue {
+  background-color: #0093E9;
+  background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
+  border-color: #0093E9;
+  box-shadow: 0 4px 12px rgba(128,208,199,0.7), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+.card-tile.blue:hover {
+  box-shadow: 0 8px 18px rgba(128,208,199,0.4), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+~~~
+
+~~~css
+/* Orange Card */
+.card-tile.orange {
+  background-color: #FAD961;
+  background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
+  border-color: #F76B1C;
+  box-shadow: 0 4px 12px rgba(247,107,28,0.7), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+.card-tile.orange:hover {
+  box-shadow: 0 8px 18px rgba(247,107,28,0.4), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+~~~
+
+~~~css
+/* Green Card */
+.card-tile.green {
+  background-color: #096e40;
+  background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%);
+  border-color: #096e40;
+  box-shadow: 0 4px 12px rgba(9,110,64,0.7), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+.card-tile.green:hover {
+  box-shadow: 0 8px 18px rgba(9,110,64,0.4), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+~~~
 
 ### Adding transitions
 
@@ -188,11 +206,13 @@ We can now see the actual cards visually and have the ability to interact with t
 
 Lucky we can target all elements we wish to animate with the `transition` property, like so:
 
-    /* Shared transitions */
-    .card-tile,
-    .card-tile .text-content {
-        transition: .3s ease all;
-    }
+~~~css
+/* Shared transitions */
+.card-tile,
+.card-tile .text-content {
+    transition: .3s ease all;
+}
+~~~
 
 Done and done.
 
@@ -202,122 +222,126 @@ To make things easier for reference, I have included all the `html` and `css` be
 
 ### HTML
 
-    <div class="card-tiles-container">
-        <div class="card-tile blue">
-            <div class="text-content">
-                <h4>Card Title</h4>
-                <p>Inner card content text</p>
-            </div>
-        </div>
-        <div class="card-tile orange">
-            <div class="text-content">
-                <h4>Card Title</h4>
-                <p>Inner card content text</p>
-            </div>
-        </div>
-        <div class="card-tile green">
-            <div class="text-content">
-                <h4>Card Title</h4>
-                <p>Inner card content text</p>
-            </div>
-        </div>
+~~~html
+<div class="card-tiles-container">
+  <div class="card-tile blue">
+    <div class="text-content">
+      <h4>Card Title</h4>
+      <p>Inner card content text</p>
+    </div>
+    </div>
+    <div class="card-tile orange">
+    <div class="text-content">
+      <h4>Card Title</h4>
+      <p>Inner card content text</p>
+    </div>
+    </div>
+    <div class="card-tile green">
+    <div class="text-content">
+      <h4>Card Title</h4>
+      <p>Inner card content text</p>
     </div>
+  </div>
+</div>
+~~~
 
 ### CSS
 
-    .card-tiles-container {
-        display: flex;
-        font-size: 14px;
-        margin: 20px 0;
-    }
-    /* Shared transitions */
-    .card-tile,
-    .card-tile .text-content {
-        transition: .3s ease all;
-    }
-    /* Default card tile styles */
-    .card-tile {
-        border: 1px solid;
-        border-radius: 10px;
-        cursor: pointer;
-        height: 150px;
-        margin: 0 10px;
-        overflow: hidden;
-        position: relative;
-        width: 33.33%;
-    }
-    /* Blue Card */
-    .card-tile.blue {
-        background-color: #0093E9;
-        background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
-        border-color: #0093E9;
-        box-shadow: 0 4px 12px rgba(128,208,199,0.7),
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    .card-tile.blue:hover {
-        box-shadow: 0 8px 18px rgba(128,208,199,0.4), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    /* Orange Card */
-    .card-tile.orange {
-        background-color: #FAD961;
-        background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
-        border-color: #F76B1C;
-        box-shadow: 0 4px 12px rgba(247,107,28,0.7), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    .card-tile.orange:hover {
-        box-shadow: 0 8px 18px rgba(247,107,28,0.4), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    /* Green Card */
-    .card-tile.green {
-        background-color: #096e40;
-        background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%);
-        border-color: #096e40;
-        box-shadow: 0 4px 12px rgba(9,110,64,0.7), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    .card-tile.green:hover {
-        box-shadow: 0 8px 18px rgba(9,110,64,0.4), 
-                    inset 0 2px 1px rgba(255,255,255,0.6);
-    }
-    /* Card tile text content */
-    .card-tile .text-content {
-        background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
-        bottom: 10px;
-        border: 1px solid rgba(0,0,0,0.4);
-        border-radius: 5px;
-        box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 
-                    0 2px 4px rgba(0,0,0,0.5);
-        height: 65px;
-        left: 10px;
-        opacity: 0;
-        padding: 10px;
-        position: absolute;
-        width: calc(100% - 20px);
-        z-index: -1;
-    }
-    .card-tile .text-content h4,
-    .card-tile .text-content p {
-        color: #fff;
-        margin: 0;
-        text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
-    }
-    /* All animations on hover */
-    .card-tile:hover {
-        transform: scale(1.1);
-    }
-    .card-tile:hover .text-content {
-        opacity: 1;
-        z-index: 1;
-    }
-    @media(max-width: 600px) {
-        .card-tiles-container {
-            flex-direction: column;
-        }
-        .card-tile {
-            margin: 0 0 10px 0;
-            width: 100%;
-        }
-    }
+~~~css
+.card-tiles-container {
+  display: flex;
+  font-size: 14px;
+  margin: 20px 0;
+}
+/* Shared transitions */
+.card-tile,
+.card-tile .text-content {
+  transition: .3s ease all;
+}
+/* Default card tile styles */
+.card-tile {
+  border: 1px solid;
+  border-radius: 10px;
+  cursor: pointer;
+  height: 150px;
+  margin: 0 10px;
+  overflow: hidden;
+  position: relative;
+  width: 33.33%;
+}
+/* Blue Card */
+.card-tile.blue {
+  background-color: #0093E9;
+  background-image: linear-gradient(0deg, #0093E9 0%, #80D0C7 100%);
+  border-color: #0093E9;
+  box-shadow: 0 4px 12px rgba(128,208,199,0.7),
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+.card-tile.blue:hover {
+  box-shadow: 0 8px 18px rgba(128,208,199,0.4), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+/* Orange Card */
+.card-tile.orange {
+  background-color: #FAD961;
+  background-image: linear-gradient(180deg, #FAD961 0%, #F76B1C 100%);
+  border-color: #F76B1C;
+  box-shadow: 0 4px 12px rgba(247,107,28,0.7), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+.card-tile.orange:hover {
+  box-shadow: 0 8px 18px rgba(247,107,28,0.4), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+/* Green Card */
+.card-tile.green {
+  background-color: #096e40;
+  background-image: linear-gradient(0deg, #096e40 0%, #2AF598 100%);
+  border-color: #096e40;
+  box-shadow: 0 4px 12px rgba(9,110,64,0.7), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+.card-tile.green:hover {
+  box-shadow: 0 8px 18px rgba(9,110,64,0.4), 
+              inset 0 2px 1px rgba(255,255,255,0.6);
+}
+/* Card tile text content */
+.card-tile .text-content {
+  background: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
+  bottom: 10px;
+  border: 1px solid rgba(0,0,0,0.4);
+  border-radius: 5px;
+  box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 
+              0 2px 4px rgba(0,0,0,0.5);
+  height: 65px;
+  left: 10px;
+  opacity: 0;
+  padding: 10px;
+  position: absolute;
+  width: calc(100% - 20px);
+  z-index: -1;
+}
+.card-tile .text-content h4,
+.card-tile .text-content p {
+  color: #fff;
+  margin: 0;
+  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
+}
+/* All animations on hover */
+.card-tile:hover {
+  transform: scale(1.1);
+}
+.card-tile:hover .text-content {
+  opacity: 1;
+  z-index: 1;
+}
+@media(max-width: 600px) {
+  .card-tiles-container {
+      flex-direction: column;
+  }
+  .card-tile {
+      margin: 0 0 10px 0;
+      width: 100%;
+  }
+}
+~~~
diff --git a/posts/avoid.md b/posts/avoid.md
index 51c3a04..4fa5ad9 100644
--- a/posts/avoid.md
+++ b/posts/avoid.md
@@ -2,7 +2,7 @@
 
 2022-09-08
 
-Everyday a new designer begins their journey into the world of [*insert design industry here*] and it is magical! Having a fresh pair of eyes untainted from the current trends of the time can help improve design as a whole. Newbies can even teach new things to older, grumpier luddites (like yours truly). But over the years I've noticed a concerning trend among junior designers; **they rely too heavily on Dribbble**.
+Everyday a new designer begins their journey into the world of *insert design industry here* and it is magical! Having a fresh pair of eyes untainted from the current trends of the time can help improve design as a whole. Newbies can even teach new things to older, grumpier luddites (like yours truly). But over the years I've noticed a concerning trend among junior designers; **they rely too heavily on Dribbble**.
 
 Relying on Dribbble for minor inspiration is one thing. Referencing "shots" as justification for real-world design work? Not so much. I believe Dribbble shouldn't be used for either of these use cases, but I can at least give a pass at browsing for basic inspiration (colors, padding, layout).
 
diff --git a/posts/base64-all-the-things.md b/posts/base64-all-the-things.md
index 40641f7..c061aef 100644
--- a/posts/base64-all-the-things.md
+++ b/posts/base64-all-the-things.md
@@ -4,25 +4,25 @@
 
 *An extremely overlooked process for displaying fonts*, images, documents, spreadsheets, etc. on the web is the use of **base64 encoding**. Although it may not be the most efficient (or easy) way to display and include these elements it can be a lifesaver in certain situations.
 
-<h2>What is base64 encoding?</h2>
-<p>It might be common knowledge, but I think breaking down exactly what base64 encoding is could be very helpful to beginner web developers:</p>
-<blockquote>
-  <p>Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation.</p>
-  <cite>- Wikipedia</cite>
-</blockquote>
-<p>In simpler terms: it is a encoded format that can change an element like this:</p>
+## What is base64 encoding?
 
+It might be common knowledge, but I think breaking down exactly what base64 encoding is could be very helpful to beginner web developers:
 
-    <img src="/path/to/image.webp" alt="Cool image">
+> Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation.
 
+In simpler terms: it is a encoded format that can change an element like this:
 
-Into this:
-
+```html
+<img src="/path/to/image.webp" alt="Cool image">
+```
 
-    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkAAAASwCAYAA...PnyMAAAAASUVORK5CYII=" alt="Cool image">
+Into this:
 
+```html
+<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABkAAAASwCAYAA...PnyMAAAAASUVORK5CYII=" alt="Cool image">
+```
 
-<h2>See it in action</h2>
+## See it in action
 
 <figure>
 <img src="https://cdn.dribbble.com/users/29329/screenshots/9072216/media/0137ce6b6a5fa89d729ac9e4d488f002.png" alt="Just an image">
@@ -35,29 +35,26 @@ Into this:
 </figure>
 
 
-<h2>Should I use base64?</h2>
+## Should I use base64?
+
+That completely depends on the situation. For most regular day-to-day web development - probably not. While base64 is useful, it is slightly less per-formant than directly using a source file (though, one could argue that making the extra browser request is less per-formant as well).
 
-<p>That completely depends on the situation. For most regular day-to-day web development - <b>probably not</b>. While base64 is useful, it is slightly less per-formant than directly using a source file (though, one could argue that making the extra browser request is less per-formant as well).</p>
-<p>But that doesn't mean there aren't a few edge cases.</p>
+But that doesn't mean there aren't a few edge cases.
 
-<ul>
-  <li>The speed of rendering the encoding out-performs the extra HTTP request</li>
-  <li>You only have access to a single set of specific HTML files (no access to current font, CSS or image directories)</li>
-  <li>Security issues that limit your ability to use external sources altogether</li>
-</ul>
+* The speed of rendering the encoding out-performs the extra HTTP request
+* You only have access to a single set of specific HTML files (no access to current font, CSS or image directories)
+* Security issues that limit your ability to use external sources altogether
 
-<h2>How do I encode my files?</h2>
+## How do I encode my files?
 
-<p>There are a ton of freely available encoders out in the wild web, but my personal go-to is <a href="https://www.base64converter.com/">base64converter.com</a>. Simply upload your file and convert.</p>
+There are a ton of freely available encoders out in the wild web, but my personal go-to is <a href="https://www.base64converter.com/">base64converter.com</a>. Simply upload your file and convert.
 
-<h2>Limitations</h2>
+## Limitations
 
-<ul>
-  <li>Images converted to base64 will be 20-25% larger in size (making for poorer performance on mobile for image-heavy websites)</li>
-  <li>Lacking any consistent use of CDN caching</li>
-  <li>Larger encodings can make for messy project files (unless run at build time of course)</li>
-</ul>
+* Images converted to base64 will be 20-25% larger in size (making for poorer performance on mobile for image-heavy websites)
+* Lacking any consistent use of CDN caching
+* Larger encodings can make for messy project files (unless run at build time of course)
 
-<p>Though these limitations can be deal-breakers in certain situations, I find it extremely helpful for developers to keep base64 encoding in their back pockets for a rainy day.</p>
+Though these limitations can be deal-breakers in certain situations, I find it extremely helpful for developers to keep base64 encoding in their back pockets for a rainy day.
 
 
diff --git a/posts/browser-history-sucks.md b/posts/browser-history-sucks.md
index 24c3715..832226e 100644
--- a/posts/browser-history-sucks.md
+++ b/posts/browser-history-sucks.md
@@ -15,7 +15,7 @@ Modern browsers give the general public too much credit when it comes to memory
 
 - "That article had *something* to do with CSS..."
 - "I remember seeing a beautifully designed site a month ago but have no clue what the URL was..."
-- "My browser crashed and I can't recall that [example website] I had pinned in my tab for weeks..."
+- "My browser crashed and I can't recall that *example website* I had pinned in my tab for weeks..."
 
 For reference, let's take a look at the current Chrome (73) history view:
 
diff --git a/posts/cheap-portable-pi.md b/posts/cheap-portable-pi.md
index d8d4aeb..d571e0d 100644
--- a/posts/cheap-portable-pi.md
+++ b/posts/cheap-portable-pi.md
@@ -45,7 +45,7 @@ I live in Canada, so some of the options are based on available hardware near my
 > **Note**: I've decided to use a wireless, USB dongle-based keyboard. You can opt to use a bluetooth-based keyboard, but I just find them more trouble than they are worth (keeping a charge, losing connections, interference from other devices)
 
 - SBC: [Raspberry Pi Zero WH](https://amzn.to/3jCVXHG)
-- Storage / OS: [64GB Micro SD Card](https://amzn.to/2GHm01R) (Always have an SD backup!)
+- Storage / OS: [Micro SD Card 64GB](https://amzn.to/2GHm01R) (Always have an SD backup!)
 - Battery HAT: [Li-ion Battery HAT](https://amzn.to/3jGq8xp)
 - Battery: *This depends on your location. I was able to order [online through Walmart](https://www.walmart.ca/en/ip/Brand-New-4-Pcs-2500mAh-TR14500-3-7V-Rechargeable-Li-ion-Battery-for-Flashlight-Torch/PRD3Z73LMZZ3VK9), but if you live in the USA there are plenty of battery-specific vendors available. Find whatever works best for your needs!*
 - Display: [KeDei 3.5-inch TFT Display](https://www.buyapi.ca/product/3-5-inch-raspberry-pi-tft-display/)
diff --git a/posts/css-js-mistake.md b/posts/css-js-mistake.md
index c071998..3f4f709 100644
--- a/posts/css-js-mistake.md
+++ b/posts/css-js-mistake.md
@@ -42,8 +42,6 @@ Of course, to our[^2] eyes, this design might look ugly or seem as though the si
 
 Now, back to designing UIs for the web...
 
-## Refs
-
-1. Selected site based on my own personal preference
-2. Referring to current users of the web
+[^1]: Selected site based on my own personal preference
+[^2]: Referring to current users of the web
 
diff --git a/posts/default-html-style-updates.md b/posts/default-html-style-updates.md
index 578628f..a8dad93 100644
--- a/posts/default-html-style-updates.md
+++ b/posts/default-html-style-updates.md
@@ -86,8 +86,6 @@ There isn't much else to say, really. I think these tiny tweaks would greatly im
     }
 
 
-## Refs
-
-1. `18px` seems to be the perfect sweet spot between "almost too large, yet not small enough to strain my eyes"
-2. At the time of this article's publish date
+[^1]: `18px` seems to be the perfect sweet spot between "almost too large, yet not small enough to strain my eyes"
+[^2]: At the time of this article's publish date
 
diff --git a/posts/duckduckno.md b/posts/duckduckno.md
index e626ba1..b8f4c5b 100644
--- a/posts/duckduckno.md
+++ b/posts/duckduckno.md
@@ -37,9 +37,6 @@ I appreciate the effort from the DuckDuckGo team. I'm certain this project will
 
 As it stands now, this feels like something that should be an extension[^2], not a standalone browser.
 
-
-## Refs
-
-1. [https://sensible.com/dont-make-me-think/](https://sensible.com/dont-make-me-think/)
-2. Technically this already exists as a Safari extension [here](https://apps.apple.com/us/app/duckduckgo-privacy-essentials/id1482920575?mt=12)
+[^1]: [https://sensible.com/dont-make-me-think/](https://sensible.com/dont-make-me-think/)
+[^2]: Technically this already exists as a Safari extension [here](https://apps.apple.com/us/app/duckduckgo-privacy-essentials/id1482920575?mt=12)
 
diff --git a/posts/easy-custom-radio-inputs.md b/posts/easy-custom-radio-inputs.md
index abc6dbb..a31a21f 100644
--- a/posts/easy-custom-radio-inputs.md
+++ b/posts/easy-custom-radio-inputs.md
@@ -12,33 +12,35 @@ This is what we will be designing:
 
 [Live CodePen Example](https://codepen.io/bradleytaunt/pen/oNjwMyX)
 
-- - -
+---
 
 ## The bones of our radio inputs (HTML)
 
+~~~html
+<input class="radio-btn" name="radio-collection" id="radio-1" type="radio">
+<label class="radio-label" for="radio-1"><span>I am very satisfied</span></label>
 
-    <input class="radio-btn" name="radio-collection" id="radio-1" type="radio">
-    <label class="radio-label" for="radio-1"><span>I am very satisfied</span></label>
-    
-    <input class="radio-btn" name="radio-collection" id="radio-2" type="radio">
-    <label class="radio-label" for="radio-2"><span>I am satisfied</span></label>
-    
-    <input class="radio-btn" name="radio-collection" id="radio-3" type="radio">
-    <label class="radio-label" for="radio-3"><span>I am indifferent</span></label>
-    
-    <input class="radio-btn" name="radio-collection" id="radio-4" type="radio">
-    <label class="radio-label" for="radio-4"><span>I am unsatisfied</span></label>
-    
-    <input class="radio-btn" name="radio-collection" id="radio-5" type="radio">
-    <label class="radio-label" for="radio-5"><span>I am very unsatisfied</span></label>
+<input class="radio-btn" name="radio-collection" id="radio-2" type="radio">
+<label class="radio-label" for="radio-2"><span>I am satisfied</span></label>
+
+<input class="radio-btn" name="radio-collection" id="radio-3" type="radio">
+<label class="radio-label" for="radio-3"><span>I am indifferent</span></label>
+
+<input class="radio-btn" name="radio-collection" id="radio-4" type="radio">
+<label class="radio-label" for="radio-4"><span>I am unsatisfied</span></label>
+
+<input class="radio-btn" name="radio-collection" id="radio-5" type="radio">
+<label class="radio-label" for="radio-5"><span>I am very unsatisfied</span></label>
+~~~
 
 
 I know it looks like a lot is going on here, but it's pretty straightforward so let's unpackage line by line:
 
 ### Radio inputs
 
-
-    <input class="radio-btn" name="radio-collection" id="radio-1" type="radio">
+~~~html
+<input class="radio-btn" name="radio-collection" id="radio-1" type="radio">
+~~~
 
 
 This is the default `radio` input. We give it:
@@ -65,57 +67,57 @@ This is looking pretty terrible - but that's nothing some good ol' CSS can't fix
 
 First we give some basic styling to our `label` and `input` classes (along with hover states). The `radio` element is actually hidden from view, but by using the `visibility` attribute we still keep it accessible for screen-readers.
 
-
-    .radio-label {
-        background: white;
-        border: 1px solid #eee;
-        border-radius: 5px;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-        cursor: pointer;
-        display: inline-block;
-        font-weight: 600;
-        margin: 0 auto 10px;
-        /* This 65px padding makes room for the custom input */
-        padding: 20px 20px 20px 65px;
-        position: relative;
-        transition: .3s ease all;
-        width: 100%;
-    }
-    .radio-label:hover {
-        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
-    }
-    .radio-btn {
-        position: absolute;
-        visibility: hidden;
-    }
-
+~~~css
+.radio-label {
+  background: white;
+  border: 1px solid #eee;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 600;
+  margin: 0 auto 10px;
+  /* This 65px padding makes room for the custom input */
+  padding: 20px 20px 20px 65px;
+  position: relative;
+  transition: .3s ease all;
+  width: 100%;
+}
+.radio-label:hover {
+  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+}
+.radio-btn {
+  position: absolute;
+  visibility: hidden;
+}
+~~~
 
 Remember that `span` element inside the label? We set it's `user-select` property to `none` so we avoid any possible issue with the user selecting the text on-click:
 
-
-    .radio-label span {
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        user-select: none;
-    }
-
+~~~css
+.radio-label span {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+~~~
 
 Next we include the default empty selection element (to mimic the original radio input) via a pseudo element:
 
-
-    .radio-label:before {
-        background: #eee;
-        border-radius: 50%;
-        content:'';
-        height: 30px;
-        left: 20px;
-        position: absolute;
-        /* Half the height of it's parent minus half of it's own height */
-        top: calc(50% - 15px);
-        transition: .3s ease background-color;
-        width: 30px;
-    }
-
+~~~css
+.radio-label:before {
+  background: #eee;
+  border-radius: 50%;
+  content:'';
+  height: 30px;
+  left: 20px;
+  position: absolute;
+  /* Half the height of it's parent minus half of it's own height */
+  top: calc(50% - 15px);
+  transition: .3s ease background-color;
+  width: 30px;
+}
+~~~
 
 ## A Few Final Steps
 
@@ -123,76 +125,76 @@ The final step is adding the custom styling for when an `input` item is selected
 
 You will notice the use of a `base64` element for the custom checkmark - feel free to subsitute this for an actual image or none at all (this is just my personal design preference).
 
-
-    .radio-btn:checked + .radio-label {
-        background: #ECF5FF;
-        border-color: #4A90E2;
-    }
-    .radio-btn:checked + .radio-label:before {
-        background-color: #4A90E2;
-        background-image:  url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+');
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: 15px;
-    }
-
+~~~css
+.radio-btn:checked + .radio-label {
+  background: #ECF5FF;
+  border-color: #4A90E2;
+}
+.radio-btn:checked + .radio-label:before {
+  background-color: #4A90E2;
+  background-image:  url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 15px;
+}
+~~~
 
 **And that's it.**
 
 For easier reference the entire CSS file can be found below:
 
-
-    .radio-label {
-        background: white;
-        border: 1px solid #eee;
-        border-radius: 5px;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
-        cursor: pointer;
-        display: inline-block;
-        font-weight: 600;
-        margin: 0 auto 10px;
-        padding: 20px 20px 20px 65px;
-        position: relative;
-        transition: .3s ease all;
-        width: 100%;
-    }
-    .radio-label:hover {
-        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
-    }
-    .radio-label:before {
-        background: #eee;
-        border-radius: 50%;
-        content:'';
-        height: 30px;
-        left: 20px;
-        position: absolute;
-        top: calc(50% - 15px);
-        transition: .3s ease background-color;
-        width: 30px;
-    }
-    .radio-label span {
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        user-select: none;
-    }
-    .radio-btn {
-        position: absolute;
-        visibility: hidden;
-    }
-    .radio-btn:checked + .radio-label {
-        background: #ECF5FF;
-        border-color: #4A90E2;
-    }
-    .radio-btn:checked + .radio-label:before {
-        background-color: #4A90E2;
-        background-image:  url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+');
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: 15px;
-    }
-
-
-- - -
+~~~css
+.radio-label {
+  background: white;
+  border: 1px solid #eee;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+  cursor: pointer;
+  display: inline-block;
+  font-weight: 600;
+  margin: 0 auto 10px;
+  padding: 20px 20px 20px 65px;
+  position: relative;
+  transition: .3s ease all;
+  width: 100%;
+}
+.radio-label:hover {
+  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+}
+.radio-label:before {
+  background: #eee;
+  border-radius: 50%;
+  content:'';
+  height: 30px;
+  left: 20px;
+  position: absolute;
+  top: calc(50% - 15px);
+  transition: .3s ease background-color;
+  width: 30px;
+}
+.radio-label span {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+.radio-btn {
+  position: absolute;
+  visibility: hidden;
+}
+.radio-btn:checked + .radio-label {
+  background: #ECF5FF;
+  border-color: #4A90E2;
+}
+.radio-btn:checked + .radio-label:before {
+  background-color: #4A90E2;
+  background-image:  url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNiIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIyLjAyOTY4IC00MC4wOTAzIDI2IDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48IS0tR2VuZXJhdGVkIGJ5IElKU1ZHIChodHRwczovL2dpdGh1Yi5jb20vaWNvbmphci9JSlNWRyktLT48cGF0aCBkPSJNMjcuOTc0MywtMzYuMTI3MmMwLDAuNDQ2NDI4IC0wLjE1NjI1LDAuODI1ODkzIC0wLjQ2ODc1LDEuMTM4MzlsLTEyLjEyMDUsMTIuMTIwNWwtMi4yNzY3OSwyLjI3Njc5Yy0wLjMxMjUsMC4zMTI1IC0wLjY5MTk2NCwwLjQ2ODc1IC0xLjEzODM5LDAuNDY4NzVjLTAuNDQ2NDI4LDAgLTAuODI1ODkzLC0wLjE1NjI1IC0xLjEzODM5LC0wLjQ2ODc1bC0yLjI3Njc5LC0yLjI3Njc5bC02LjA2MDI3LC02LjA2MDI3Yy0wLjMxMjUsLTAuMzEyNSAtMC40Njg3NSwtMC42OTE5NjUgLTAuNDY4NzUsLTEuMTM4MzljMCwtMC40NDY0MjkgMC4xNTYyNSwtMC44MjU4OTMgMC40Njg3NSwtMS4xMzgzOWwyLjI3Njc5LC0yLjI3Njc5YzAuMzEyNSwtMC4zMTI1IDAuNjkxOTY1LC0wLjQ2ODc1IDEuMTM4MzksLTAuNDY4NzVjMC40NDY0MjksMCAwLjgyNTg5MywwLjE1NjI1IDEuMTM4MzksMC40Njg3NWw0LjkyMTg4LDQuOTM4NjJsMTAuOTgyMSwtMTAuOTk4OWMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI4LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsMi4yNzY3OCwyLjI3Njc5YzAuMzEyNSwwLjMxMjUgMC40Njg3NSwwLjY5MTk2NCAwLjQ2ODc1LDEuMTM4MzlaIiB0cmFuc2Zvcm09InNjYWxlKDEuMDAxOTgpIiBmaWxsPSIjZmZmIj48L3BhdGg+PC9zdmc+');
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 15px;
+}
+~~~
+
+---
 
 ## But wait - we can get even fancier!
 
@@ -200,25 +202,25 @@ Since this demo is based off a survey-type questionaire, wouldn't it be interest
 
 We can do so by adding `positive`, `neutral` and `negative` class names to the radio inputs with their own respective properties:
 
-
-    .radio-btn.positive:checked + .radio-label {
-        background: #EAFFF6;
-        border-color: #32B67A;
-    }
-    .radio-btn.positive:checked + .radio-label:before {
-        background-color: #32B67A;
-    }
-    .radio-btn.neutral:checked + .radio-label:before {
-        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAtMTUgMzAgOC41NzE0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PCEtLUdlbmVyYXRlZCBieSBJSlNWRyAoaHR0cHM6Ly9naXRodWIuY29tL2ljb25qYXIvSUpTVkcpLS0+PHBhdGggZD0iTTMwLC0xMi4zMjE0djMuMjE0MjljMCwwLjczNjYwNyAtMC4yNjIyNzcsMS4zNjcxOSAtMC43ODY4MywxLjg5MTc0Yy0wLjUyNDU1NCwwLjUyNDU1NCAtMS4xNTUxMywwLjc4NjgzMSAtMS44OTE3NCwwLjc4NjgzMWgtMjQuNjQyOWMtMC43MzY2MDcsMCAtMS4zNjcxOSwtMC4yNjIyNzcgLTEuODkxNzQsLTAuNzg2ODMxYy0wLjUyNDU1MywtMC41MjQ1NTMgLTAuNzg2ODMsLTEuMTU1MTMgLTAuNzg2ODMsLTEuODkxNzR2LTMuMjE0MjljMCwtMC43MzY2MDcgMC4yNjIyNzcsLTEuMzY3MTkgMC43ODY4MywtMS44OTE3NGMwLjUyNDU1NCwtMC41MjQ1NTMgMS4xNTUxMywtMC43ODY4MyAxLjg5MTc0LC0wLjc4NjgzaDI0LjY0MjljMC43MzY2MDcsMCAxLjM2NzE5LDAuMjYyMjc3IDEuODkxNzQsMC43ODY4M2MwLjUyNDU1MywwLjUyNDU1NCAwLjc4NjgzLDEuMTU1MTMgMC43ODY4MywxLjg5MTc0WiIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg==');
-    }
-    .radio-btn.negative:checked + .radio-label {
-        background: #FFF2F2;
-        border-color: #E75153;
-    }
-    .radio-btn.negative:checked + .radio-label:before {
-        background-color: #E75153;
-        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIxLjg1MTg1IC0zOS42OTcgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjwhLS1HZW5lcmF0ZWQgYnkgSUpTVkcgKGh0dHBzOi8vZ2l0aHViLmNvbS9pY29uamFyL0lKU1ZHKS0tPjxwYXRoIGQ9Ik0yMS43Mjk5LC0yMy40NzFjMCwwLjQ0NjQyOCAtMC4xNTYyNSwwLjgyNTg5MyAtMC40Njg3NSwxLjEzODM5bC0yLjI3Njc5LDIuMjc2NzljLTAuMzEyNSwwLjMxMjUgLTAuNjkxOTY0LDAuNDY4NzUgLTEuMTM4MzksMC40Njg3NWMtMC40NDY0MjgsMCAtMC44MjU4OTMsLTAuMTU2MjUgLTEuMTM4MzksLTAuNDY4NzVsLTQuOTIxODcsLTQuOTIxODhsLTQuOTIxODgsNC45MjE4OGMtMC4zMTI1LDAuMzEyNSAtMC42OTE5NjQsMC40Njg3NSAtMS4xMzgzOSwwLjQ2ODc1Yy0wLjQ0NjQyOCwwIC0wLjgyNTg5MiwtMC4xNTYyNSAtMS4xMzgzOSwtMC40Njg3NWwtMi4yNzY3OSwtMi4yNzY3OWMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY1IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI5IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsNC45MjE4OCwtNC45MjE4OGwtNC45MjE4OCwtNC45MjE4OGMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY0IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI4IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsMi4yNzY3OSwtMi4yNzY3OGMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI5LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsNC45MjE4OCw0LjkyMTg4bDQuOTIxODcsLTQuOTIxODhjMC4zMTI1LC0wLjMxMjUgMC42OTE5NjUsLTAuNDY4NzUgMS4xMzgzOSwtMC40Njg3NWMwLjQ0NjQyOSwwIDAuODI1ODkzLDAuMTU2MjUgMS4xMzgzOSwwLjQ2ODc1bDIuMjc2NzksMi4yNzY3OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjUgMC40Njg3NSwxLjEzODM5YzAsMC40NDY0MjkgLTAuMTU2MjUsMC44MjU4OTMgLTAuNDY4NzUsMS4xMzgzOWwtNC45MjE4OCw0LjkyMTg4bDQuOTIxODgsNC45MjE4OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjQgMC40Njg3NSwxLjEzODM5WiIgdHJhbnNmb3JtPSJzY2FsZSgxLjAwNTYxKSIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg==');
-    }
-
+~~~css
+.radio-btn.positive:checked + .radio-label {
+  background: #EAFFF6;
+  border-color: #32B67A;
+}
+.radio-btn.positive:checked + .radio-label:before {
+  background-color: #32B67A;
+}
+.radio-btn.neutral:checked + .radio-label:before {
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAtMTUgMzAgOC41NzE0MyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PCEtLUdlbmVyYXRlZCBieSBJSlNWRyAoaHR0cHM6Ly9naXRodWIuY29tL2ljb25qYXIvSUpTVkcpLS0+PHBhdGggZD0iTTMwLC0xMi4zMjE0djMuMjE0MjljMCwwLjczNjYwNyAtMC4yNjIyNzcsMS4zNjcxOSAtMC43ODY4MywxLjg5MTc0Yy0wLjUyNDU1NCwwLjUyNDU1NCAtMS4xNTUxMywwLjc4NjgzMSAtMS44OTE3NCwwLjc4NjgzMWgtMjQuNjQyOWMtMC43MzY2MDcsMCAtMS4zNjcxOSwtMC4yNjIyNzcgLTEuODkxNzQsLTAuNzg2ODMxYy0wLjUyNDU1MywtMC41MjQ1NTMgLTAuNzg2ODMsLTEuMTU1MTMgLTAuNzg2ODMsLTEuODkxNzR2LTMuMjE0MjljMCwtMC43MzY2MDcgMC4yNjIyNzcsLTEuMzY3MTkgMC43ODY4MywtMS44OTE3NGMwLjUyNDU1NCwtMC41MjQ1NTMgMS4xNTUxMywtMC43ODY4MyAxLjg5MTc0LC0wLjc4NjgzaDI0LjY0MjljMC43MzY2MDcsMCAxLjM2NzE5LDAuMjYyMjc3IDEuODkxNzQsMC43ODY4M2MwLjUyNDU1MywwLjUyNDU1NCAwLjc4NjgzLDEuMTU1MTMgMC43ODY4MywxLjg5MTc0WiIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg==');
+}
+.radio-btn.negative:checked + .radio-label {
+  background: #FFF2F2;
+  border-color: #E75153;
+}
+.radio-btn.negative:checked + .radio-label:before {
+  background-color: #E75153;
+  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIxLjg1MTg1IC0zOS42OTcgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjwhLS1HZW5lcmF0ZWQgYnkgSUpTVkcgKGh0dHBzOi8vZ2l0aHViLmNvbS9pY29uamFyL0lKU1ZHKS0tPjxwYXRoIGQ9Ik0yMS43Mjk5LC0yMy40NzFjMCwwLjQ0NjQyOCAtMC4xNTYyNSwwLjgyNTg5MyAtMC40Njg3NSwxLjEzODM5bC0yLjI3Njc5LDIuMjc2NzljLTAuMzEyNSwwLjMxMjUgLTAuNjkxOTY0LDAuNDY4NzUgLTEuMTM4MzksMC40Njg3NWMtMC40NDY0MjgsMCAtMC44MjU4OTMsLTAuMTU2MjUgLTEuMTM4MzksLTAuNDY4NzVsLTQuOTIxODcsLTQuOTIxODhsLTQuOTIxODgsNC45MjE4OGMtMC4zMTI1LDAuMzEyNSAtMC42OTE5NjQsMC40Njg3NSAtMS4xMzgzOSwwLjQ2ODc1Yy0wLjQ0NjQyOCwwIC0wLjgyNTg5MiwtMC4xNTYyNSAtMS4xMzgzOSwtMC40Njg3NWwtMi4yNzY3OSwtMi4yNzY3OWMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY1IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI5IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsNC45MjE4OCwtNC45MjE4OGwtNC45MjE4OCwtNC45MjE4OGMtMC4zMTI1LC0wLjMxMjUgLTAuNDY4NzUsLTAuNjkxOTY0IC0wLjQ2ODc1LC0xLjEzODM5YzAsLTAuNDQ2NDI4IDAuMTU2MjUsLTAuODI1ODkzIDAuNDY4NzUsLTEuMTM4MzlsMi4yNzY3OSwtMi4yNzY3OGMwLjMxMjUsLTAuMzEyNSAwLjY5MTk2NCwtMC40Njg3NSAxLjEzODM5LC0wLjQ2ODc1YzAuNDQ2NDI5LDAgMC44MjU4OTMsMC4xNTYyNSAxLjEzODM5LDAuNDY4NzVsNC45MjE4OCw0LjkyMTg4bDQuOTIxODcsLTQuOTIxODhjMC4zMTI1LC0wLjMxMjUgMC42OTE5NjUsLTAuNDY4NzUgMS4xMzgzOSwtMC40Njg3NWMwLjQ0NjQyOSwwIDAuODI1ODkzLDAuMTU2MjUgMS4xMzgzOSwwLjQ2ODc1bDIuMjc2NzksMi4yNzY3OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjUgMC40Njg3NSwxLjEzODM5YzAsMC40NDY0MjkgLTAuMTU2MjUsMC44MjU4OTMgLTAuNDY4NzUsMS4xMzgzOWwtNC45MjE4OCw0LjkyMTg4bDQuOTIxODgsNC45MjE4OGMwLjMxMjUsMC4zMTI1IDAuNDY4NzUsMC42OTE5NjQgMC40Njg3NSwxLjEzODM5WiIgdHJhbnNmb3JtPSJzY2FsZSgxLjAwNTYxKSIgZmlsbD0iI2ZmZiI+PC9wYXRoPjwvc3ZnPg==');
+}
+~~~
 
 I hope this shows new designers that simple custom radio inputs aren't so hard to implement after-all and can actually be pretty fun to design.
diff --git a/posts/eero.md b/posts/eero.md
index ba4f2f3..9e830fa 100644
--- a/posts/eero.md
+++ b/posts/eero.md
@@ -132,7 +132,5 @@ None of this stuff if groundbreaking, but my hope is that even one person across
 
 Best of luck blocking those pesky ads and trackers!
 
-## Refs
-
-1. You don't *have* to use your Eero gateway for this step (credit: [/u/RollMeAway83](https://old.reddit.com/user/RollMeAway83))
-2. Thanks to [u/YankeesIT](https://old.reddit.com/user/YankeesIT) for pointing out that this is required not *optional*
+[^1]: You don't *have* to use your Eero gateway for this step (credit: [/u/RollMeAway83](https://old.reddit.com/user/RollMeAway83))
+[^2]: Thanks to [u/YankeesIT](https://old.reddit.com/user/YankeesIT) for pointing out that this is required not *optional*
diff --git a/posts/flexbox-bar-graphs.md b/posts/flexbox-bar-graphs.md
index 5862d86..f7b071f 100644
--- a/posts/flexbox-bar-graphs.md
+++ b/posts/flexbox-bar-graphs.md
@@ -29,40 +29,41 @@ The main "secret" of this project is that our graphs are constructed out of HTML
 
 All bases are covered!
 
-
-    <!-- Using a basic table with our custom data-id -->
-    <table data-id="flexbox-bar-graph">
-        <caption>Web Performance Results</caption>
-        <thead>
-            <tr>
-                <th>Test Performed</th>
-                <th>Before</th>
-                <th>After</th>
-                <th>Difference</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <th>Initial Load Time</th>
-                <td>
-                    <!--
-                        WTF are these CSS variables?
-                        See the CSS section below
-                    -->
-                    <span style="--data-set:4.7/5;"></span>
-                    <p>4.7</p>
-                </td>
-                <td>
-                    <span style="--data-set:2.7/5;"></span>
-                    <p>2.7</p>
-                </td>
-                <td>
-                    <span style="--data-set:2/5;"></span>
-                    <p>2</p>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+~~~html
+<!-- Using a basic table with our custom data-id -->
+<table data-id="flexbox-bar-graph">
+    <caption>Web Performance Results</caption>
+    <thead>
+        <tr>
+            <th>Test Performed</th>
+            <th>Before</th>
+            <th>After</th>
+            <th>Difference</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <th>Initial Load Time</th>
+            <td>
+                <!--
+                    WTF are these CSS variables?
+                    See the CSS section below
+                -->
+                <span style="--data-set:4.7/5;"></span>
+                <p>4.7</p>
+            </td>
+            <td>
+                <span style="--data-set:2.7/5;"></span>
+                <p>2.7</p>
+            </td>
+            <td>
+                <span style="--data-set:2/5;"></span>
+                <p>2</p>
+            </td>
+        </tr>
+    </tbody>
+</table>
+~~~
 
 
 Nothing crazy is happening here - just your standard HTML table structure. The one main thing to notice is the `--data-set` CSS variable placed inline on each data point. This will be important for our CSS to configure the individual bar graphs properly.
@@ -80,42 +81,44 @@ Here we target just our table elements with the `data-id` of `flexbox-bar-graph`
 
 The base `:root` element holds all of our bar graph colors. Change these as you see fit!
 
-
-    /* Bar Graph color variables */
-    :root {
-        --bar-color-1: #357EC7;
-        --bar-color-2: #E42217;
-        --bar-color-3: #4CC417;
-        --bar-color-4: #7D0541;
-        --bar-color-5: #FFD801;
-    }
-
-    [data-id="flexbox-bar-graph"] {
-        border-collapse: collapse;
-        margin: 4rem 0 6rem;
-        width: 100%;
-    }
-    [data-id="flexbox-bar-graph"] caption {
-        text-align: left;
-    }
-    [data-id="flexbox-bar-graph"] thead th {
-        text-align: right;
-    }
-    [data-id="flexbox-bar-graph"] thead th:nth-child(1),
-    [data-id="flexbox-bar-graph"] tbody th {
-        text-align: left;
-    }
-    [data-id="flexbox-bar-graph"] tbody th {
-        font-weight: normal;
-        font-style: italic;
-    }
-    [data-id="flexbox-bar-graph"] tbody td {
-        text-align: right;
-    }
-    [data-id="flexbox-bar-graph"] tbody td p {
-        margin: 0;
-    }
-
+~~~css
+/* Bar Graph color variables */
+:root {
+    --bar-color-1: #357EC7;
+    --bar-color-2: #E42217;
+    --bar-color-3: #4CC417;
+    --bar-color-4: #7D0541;
+    --bar-color-5: #FFD801;
+}
+~~~
+
+~~~css
+[data-id="flexbox-bar-graph"] {
+    border-collapse: collapse;
+    margin: 4rem 0 6rem;
+    width: 100%;
+}
+[data-id="flexbox-bar-graph"] caption {
+    text-align: left;
+}
+[data-id="flexbox-bar-graph"] thead th {
+    text-align: right;
+}
+[data-id="flexbox-bar-graph"] thead th:nth-child(1),
+[data-id="flexbox-bar-graph"] tbody th {
+    text-align: left;
+}
+[data-id="flexbox-bar-graph"] tbody th {
+    font-weight: normal;
+    font-style: italic;
+}
+[data-id="flexbox-bar-graph"] tbody td {
+    text-align: right;
+}
+[data-id="flexbox-bar-graph"] tbody td p {
+    margin: 0;
+}
+~~~
 
 ### Desktop
 
@@ -124,130 +127,130 @@ Now we set your "visual" bar graphs to show at a set width (in this example it i
 - The `thead tr th:nth-child(x):before` elements create the square "legends" beside each individual data point heading
 - The `tbody tr td:nth-of-type(x) span` elements are the bars themselves
 
-
-    @media(min-width: 1000px) {
-        [data-id="flexbox-bar-graph"] {
-            background: transparent;
-            display: block;
-            min-height: 400px;
-            padding: 0;
-            position: relative;
-            width: 100%;
-        }
-    
-        [data-id="flexbox-bar-graph"] caption {
-            display: block;
-            font-size: 2rem;
-            text-align: center;
-            width: 100%;
-        }
-    
-        [data-id="flexbox-bar-graph"] thead {
-            display: block;
-            margin: 2rem 0 3rem;
-            width: 100%;
-        }
-        [data-id="flexbox-bar-graph"] thead tr {
-            border-bottom: 1px solid lightgrey;
-            display: flex;
-            justify-content: center;
-            padding-bottom: 1rem;
-        }
-    
-        [data-id="flexbox-bar-graph"] thead tr th {
-            display: inline-block;
-            margin: 0;
-            padding: 0;
-            position: relative;
-            text-align: right;
-        }
-        [data-id="flexbox-bar-graph"] thead tr th:before {
-            content:'';
-            display: inline-block;
-            height: 10px;
-            margin: 0 0.5rem 0 2rem;
-            position: relative;
-            width: 10px;
-        }
-        [data-id="flexbox-bar-graph"] thead tr th:nth-child(1),
-        [data-id="flexbox-bar-graph"] thead tr th:nth-child(1):before {
-            display: none;
-        }
-        [data-id="flexbox-bar-graph"] thead tr th:nth-child(2):before {
-            background: var(--bar-color-1);
-        }
-        [data-id="flexbox-bar-graph"] thead tr th:nth-child(3):before {
-            background: var(--bar-color-2);
-        }
-        [data-id="flexbox-bar-graph"] thead tr th:nth-child(4):before {
-            background: var(--bar-color-3);
-        }
-        [data-id="flexbox-bar-graph"] thead tr th:nth-child(5):before {
-            background: var(--bar-color-4);
-        }
-        [data-id="flexbox-bar-graph"] thead tr th:nth-child(6):before {
-            background: var(--bar-color-5);
-        }
-    
-        [data-id="flexbox-bar-graph"] tbody {
-            display: flex;
-            justify-content: space-between;
-            min-height: 300px;
-            width: 100%;
-        }
-    
-        [data-id="flexbox-bar-graph"] tbody tr {
-            display: flex;
-            flex-direction: column-reverse;
-            flex-wrap: wrap;
-            justify-content: flex-end;
-            padding: 0 50px;
-            position: relative;
-            width: 100%;
-        }
-        [data-id="flexbox-bar-graph"] tbody tr th {
-            font-size: 90%;
-            position: absolute;
-            text-align: center;
-            top: 100%;
-            width: calc(100% - 100px);
-        }
-        [data-id="flexbox-bar-graph"] tbody tr td {
-            align-items: center;
-            display: flex;
-            flex-direction: column;
-            height: 95%;
-            justify-content: flex-end;
-        }
-    
-        [data-id="flexbox-bar-graph"] tbody tr td span {
-            display: block;
-            height: calc(var(--data-set) * 100%);
-            width: 20px;
-        }
-        [data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(1) span {
-            background: var(--bar-color-1);
-        }
-        [data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(2) span {
-            background: var(--bar-color-2);
-        }
-        [data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(3) span {
-            background: var(--bar-color-3);
-        }
-        [data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(4) span {
-            background: var(--bar-color-4);
-        }
-        [data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(5) span {
-            background: var(--bar-color-5);
-        }
-    
-        [data-id="flexbox-bar-graph"] tbody tr td p {
-            font-size: 90%;
-            margin: 0;
-            text-align: center;
-        }
-    }
-
+~~~css
+@media(min-width: 1000px) {
+  [data-id="flexbox-bar-graph"] {
+    background: transparent;
+    display: block;
+    min-height: 400px;
+    padding: 0;
+    position: relative;
+    width: 100%;
+  }
+
+  [data-id="flexbox-bar-graph"] caption {
+    display: block;
+    font-size: 2rem;
+    text-align: center;
+    width: 100%;
+  }
+
+  [data-id="flexbox-bar-graph"] thead {
+    display: block;
+    margin: 2rem 0 3rem;
+    width: 100%;
+  }
+  [data-id="flexbox-bar-graph"] thead tr {
+    border-bottom: 1px solid lightgrey;
+    display: flex;
+    justify-content: center;
+    padding-bottom: 1rem;
+  }
+
+  [data-id="flexbox-bar-graph"] thead tr th {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    text-align: right;
+  }
+  [data-id="flexbox-bar-graph"] thead tr th:before {
+    content:'';
+    display: inline-block;
+    height: 10px;
+    margin: 0 0.5rem 0 2rem;
+    position: relative;
+    width: 10px;
+  }
+  [data-id="flexbox-bar-graph"] thead tr th:nth-child(1),
+  [data-id="flexbox-bar-graph"] thead tr th:nth-child(1):before {
+    display: none;
+  }
+  [data-id="flexbox-bar-graph"] thead tr th:nth-child(2):before {
+    background: var(--bar-color-1);
+  }
+  [data-id="flexbox-bar-graph"] thead tr th:nth-child(3):before {
+    background: var(--bar-color-2);
+  }
+  [data-id="flexbox-bar-graph"] thead tr th:nth-child(4):before {
+    background: var(--bar-color-3);
+  }
+  [data-id="flexbox-bar-graph"] thead tr th:nth-child(5):before {
+    background: var(--bar-color-4);
+  }
+  [data-id="flexbox-bar-graph"] thead tr th:nth-child(6):before {
+    background: var(--bar-color-5);
+  }
+
+  [data-id="flexbox-bar-graph"] tbody {
+    display: flex;
+    justify-content: space-between;
+    min-height: 300px;
+    width: 100%;
+  }
+
+  [data-id="flexbox-bar-graph"] tbody tr {
+    display: flex;
+    flex-direction: column-reverse;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    padding: 0 50px;
+    position: relative;
+    width: 100%;
+  }
+  [data-id="flexbox-bar-graph"] tbody tr th {
+    font-size: 90%;
+    position: absolute;
+    text-align: center;
+    top: 100%;
+    width: calc(100% - 100px);
+  }
+  [data-id="flexbox-bar-graph"] tbody tr td {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 95%;
+    justify-content: flex-end;
+  }
+
+  [data-id="flexbox-bar-graph"] tbody tr td span {
+    display: block;
+    height: calc(var(--data-set) * 100%);
+    width: 20px;
+  }
+  [data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(1) span {
+    background: var(--bar-color-1);
+  }
+  [data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(2) span {
+    background: var(--bar-color-2);
+  }
+  [data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(3) span {
+    background: var(--bar-color-3);
+  }
+  [data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(4) span {
+    background: var(--bar-color-4);
+  }
+  [data-id="flexbox-bar-graph"] tbody tr td:nth-of-type(5) span {
+    background: var(--bar-color-5);
+  }
+
+  [data-id="flexbox-bar-graph"] tbody tr td p {
+    font-size: 90%;
+    margin: 0;
+    text-align: center;
+  }
+}
+~~~
 
 ## Bonus Styling
 
@@ -260,39 +263,40 @@ In the <a target="_blank" href="https://github.com/bradleytaunt/flexbox-bar-grap
 
 The change in CSS is actually quite simple to pull this off - you just need to include the `data-layout` attribute on the table itself.
 
-
-    [data-layout="horizontal"] tbody {
-        min-height: auto;
-    }
-    
-    [data-layout="horizontal"] tbody tr {
-        flex-direction: column;
-        padding: 0 40px;
-    }
-    [data-layout="horizontal"] tbody tr th {
-        width: calc(100% - 80px);
-    }
-    
-    [data-layout="horizontal"] tbody tr th {
-        text-align: left;
-        top: calc(100% + 20px);
-    }
-    
-    [data-layout="horizontal"] tbody tr td {
-        flex-direction: row;
-        height: auto;
-        justify-content: start;
-        margin: 10px 0;
-    }
-    
-    [data-layout="horizontal"] tbody tr td span {
-        height: 20px;
-        width: calc(var(--data-set) * 100%);
-    }
-    
-    [data-layout="horizontal"] tbody tr td p {
-        margin-left: 10px;
-    }
+~~~css
+[data-layout="horizontal"] tbody {
+    min-height: auto;
+}
+
+[data-layout="horizontal"] tbody tr {
+    flex-direction: column;
+    padding: 0 40px;
+}
+[data-layout="horizontal"] tbody tr th {
+    width: calc(100% - 80px);
+}
+
+[data-layout="horizontal"] tbody tr th {
+    text-align: left;
+    top: calc(100% + 20px);
+}
+
+[data-layout="horizontal"] tbody tr td {
+    flex-direction: row;
+    height: auto;
+    justify-content: start;
+    margin: 10px 0;
+}
+
+[data-layout="horizontal"] tbody tr td span {
+    height: 20px;
+    width: calc(var(--data-set) * 100%);
+}
+
+[data-layout="horizontal"] tbody tr td p {
+    margin-left: 10px;
+}
+~~~
 
 
 ## That's All Folks!
diff --git a/posts/html5-validator-badge.md b/posts/html5-validator-badge.md
index a0da5e2..546d20a 100644
--- a/posts/html5-validator-badge.md
+++ b/posts/html5-validator-badge.md
@@ -31,13 +31,11 @@ Guiding first-timers towards HTML validators let's them rethink their structure
 
 ## Open source HTML5 badge
 
-Since the W3C doesn't officially produce any badges for HTML5 validation <sup><a href="#1">1</a></sup>, I've gone ahead and open sourced `SVG` and `PNG` versions of a badge based off the current W3C designs. You can check out the Github repo: [HTML5 Valid Badge](https://github.com/bradleytaunt/html5-valid-badge)
+Since the W3C doesn't officially produce any badges for HTML5 validation[^1], I've gone ahead and open sourced `SVG` and `PNG` versions of a badge based off the current W3C designs. You can check out the Github repo: [HTML5 Valid Badge](https://github.com/bradleytaunt/html5-valid-badge)
 
 If you decide to use these badges, be sure to link these images to your valid passing URL ([html5.validator.nu](https://html5.validator.nu)). You can see an example of the link in the footer of this website.
 
 Please feel free to reach out and share your websites / projects that pass as valid HTML and include an HTML valid badge. I'd love to check them out!
 
-## Refs
-
-<sup id="1">1</sup> [Interview with Mike Smith](http://html5doctor.com/html5-check-it-before-you-wreck-it-with-miketm-smith/): "There won't be any proper Valid HTML5 icon forthcoming, so if you'd like to use one in your content, you'll probably need to create one on your own."
+[^1]: [Interview with Mike Smith](http://html5doctor.com/html5-check-it-before-you-wreck-it-with-miketm-smith/): "There won't be any proper Valid HTML5 icon forthcoming, so if you'd like to use one in your content, you'll probably need to create one on your own."
 
diff --git a/posts/linux-love.md b/posts/linux-love.md
index 8929af7..b950372 100644
--- a/posts/linux-love.md
+++ b/posts/linux-love.md
@@ -48,8 +48,6 @@ I might have attacked the overall Linux desktop experience in favor of macOS a l
 
 I just don't *love* it.
 
-## Refs
-
-1. People swear by CUPS working well on Linux, but this has caused issues for me in the past as well. Unsure why macOS handles it fine...
-2. Depending on the desired distro, resources required, etc.
-3. A couple that come to mind are Zorin OS and elementary OS
\ No newline at end of file
+[^1]: People swear by CUPS working well on Linux, but this has caused issues for me in the past as well. Unsure why macOS handles it fine...
+[^2]: Depending on the desired distro, resources required, etc.
+[^3]: A couple that come to mind are Zorin OS and elementary OS
diff --git a/posts/linux-mint-macbook-air.md b/posts/linux-mint-macbook-air.md
index ab187c1..c7345db 100644
--- a/posts/linux-mint-macbook-air.md
+++ b/posts/linux-mint-macbook-air.md
@@ -27,7 +27,7 @@ We are looking pretty good!
 
 For this setup we will be using the latest, stable version (at this time of writing) of Linux Mint 20 "Ulyana" - Xfce which is 20. You can download the necessary files here: 
 
-- [Linux Mint 20 "Ulyana" - Xfce](https://www.linuxmint.com/edition.php?id=283) [1.8GB]
+- [Linux Mint 20 "Ulyana" - Xfce](https://www.linuxmint.com/edition.php?id=283) 1.8GB
 
 ## Step 2: Flash Linux Mint to USB Stick
 
diff --git a/posts/loop.md b/posts/loop.md
index f0a5759..e12d94b 100644
--- a/posts/loop.md
+++ b/posts/loop.md
@@ -55,7 +55,4 @@ That's it! Now if I plan to add any new collections down the line, I just need t
 
 Enjoy looping through your Jekyll collections!
 
-
-## Refs
-
-1. Just the sections were statically rendered. All the recipes were pulled in dynamically - I'm not that insane!
+[^1]: Just the sections were statically rendered. All the recipes were pulled in dynamically - I'm not that insane!
diff --git a/posts/minor-website-changes.md b/posts/minor-website-changes.md
index 3100192..cb3d7d0 100644
--- a/posts/minor-website-changes.md
+++ b/posts/minor-website-changes.md
@@ -48,10 +48,7 @@ I still have ownership of the old domain for almost another full year. I feel li
 
 I don't have much else to report besides having made minor tweaks to this website design (yet again) and I have also finally added a picture of [workstation on the "Things I Use" page](/uses). That's it.
 
-
-## Refs
-
-1. not *hate* - just discontent
-2. pronounced tee-darb
-3. Namecheap support were very helpful - this was more of a limitation of what their redirects can do
+[^1]: not *hate* - just discontent
+[^2]: pronounced tee-darb
+[^3]: Namecheap support were very helpful - this was more of a limitation of what their redirects can do
 
diff --git a/posts/netlify-urls.md b/posts/netlify-urls.md
index 5ccf903..21d6253 100644
--- a/posts/netlify-urls.md
+++ b/posts/netlify-urls.md
@@ -29,6 +29,4 @@ That's it! Now Netlify will dynamically forward all your pre-existing URLs from
 
 Hopefully this helps others trying to dynamically redirect their domains without the headache.
 
-## Refs
-
-1. I normally set this up through Github / git hosting
+[^1]: I normally set this up through Github / git hosting
diff --git a/posts/obvious-js-injection-fallback.md b/posts/obvious-js-injection-fallback.md
index 5143f7f..78d7df9 100644
--- a/posts/obvious-js-injection-fallback.md
+++ b/posts/obvious-js-injection-fallback.md
@@ -12,20 +12,20 @@ Let's pretend that we have a total tally that pulls in the number of current use
 
 Here we create an empty `h2` tag that will update with the current number of users via js:
 
-
-    <main>
-        <h2 class="total-tally"></h2>
-    </main>
-
+```html
+<main>
+    <h2 class="total-tally"></h2>
+</main>
+```
 
 ### Javascript
 
 You'll have to use your imagination here and assume that the `totalTally` variable pulls in the numbers dynamically via API:
 
-
-    var totalTally = "273,677" /* This would pull something dynamically in prod */
-    document.getElementsByClassName("total-tally")[0].innerHTML=totalTally;
-
+~~~js
+var totalTally = "273,677" /* This would pull something dynamically in prod */
+document.getElementsByClassName("total-tally")[0].innerHTML=totalTally;
+~~~
 
 ## The Problem
 
@@ -37,11 +37,11 @@ The easiest way to avoid these types of empty tags - add static content. I know
 
 ### HTML (updated)
 
-
-    <main>
-        <h2 class="total-tally">200,000+</h2>
-    </main>
-
+~~~html
+<main>
+    <h2 class="total-tally">200,000+</h2>
+</main>
+~~~
 
 You might be reading this and saying to yourself, "Wow! Thanks Captain Obvious!" and that's a fair reaction. This is an *obvious* demo on purpose. If even one single reader learns to avoid leaving empty HTML tags that are solely dependent on Javascript injection, then I'd say this demo was a huge success.
 
diff --git a/posts/openring.md b/posts/openring.md
index 8c1c6c6..f91138c 100644
--- a/posts/openring.md
+++ b/posts/openring.md
@@ -127,6 +127,4 @@ I won't go into great detail about build script for SourceHut Pages, but feel fr
 
 Happy sharing!
 
-## Refs
-
-1. Well, as dynamic as a static website can be!
\ No newline at end of file
+[^1]: Well, as dynamic as a static website can be!
\ No newline at end of file
diff --git a/posts/performance-focused-wordpress-theme.md b/posts/performance-focused-wordpress-theme.md
index a973166..9f98929 100644
--- a/posts/performance-focused-wordpress-theme.md
+++ b/posts/performance-focused-wordpress-theme.md
@@ -56,8 +56,6 @@ Up to this point we haven’t spent a single penny. Unfortunately, web hosting i
 I know – I can hear your collective voices shouting out:
 
 > Isn't web hosting a little expensive just for my simple hobby blog/site?
->
-> -- <cite>Some of you</cite>
 
 I host this test blog for just **$3.88/month** and the service is actually good. Unreal, right? That’s the price of a medium coffee, so I’m pretty sure it won’t break the bank.
 
diff --git a/posts/phpetite.md b/posts/phpetite.md
index 9eafa29..e94a8c5 100644
--- a/posts/phpetite.md
+++ b/posts/phpetite.md
@@ -24,7 +24,7 @@ Before we get into more details on how everything is built, let's take a quick l
 
 [See all the Pingdom details for yourself](https://tools.pingdom.com/#5e169d6a82000000)
 
-Now the `Page Size` will certainly change as more blog posts are added over time, but if the total webpage size is roughly 230 KB with 89 blog posts, I figure that gives me the ability to add another 200 or so posts before I cross the [1MB threshold](https://1mb.club)
+Now the `Page Size` will certainly change as more blog posts are added over time, but if the total webpage size is roughly 230 KB with 89 blog posts, I figure that gives me the ability to add another 200 or so posts before I cross [the 1MB threshold](https://1mb.club)
 
 I'll deal with how to load in the content more efficiently when that times comes...
 
diff --git a/posts/plain-text-emails.md b/posts/plain-text-emails.md
index 0d4cb36..f7f57bc 100644
--- a/posts/plain-text-emails.md
+++ b/posts/plain-text-emails.md
@@ -24,7 +24,7 @@ Now, I'm not going to sit here and pretend to be some expert on the history of e
 
 I understand that the data being used is currently 16 years old - but not many extensive research studies have been performed (specifically for email-type preference in general)
 
-In 2002<sup>[<a href="#1">1</a>]</sup>, [a small-set survey was run by ClickZ](https://www.clickz.com/real-world-email-client-usage-the-hard-data/47429/) was created to gauge the details of personal email data. The main data we will focus on is the user preference between HTML or plain text formats:
+In 2002[^1], [a small-set survey was run by ClickZ](https://www.clickz.com/real-world-email-client-usage-the-hard-data/47429/) was created to gauge the details of personal email data. The main data we will focus on is the user preference between HTML or plain text formats:
 
 **Do you prefer receiving HTML or text email?**
 
@@ -46,7 +46,7 @@ Since the *No Preference* respondents don't care whether emails they receive are
 - Text only requires less design work for your development team
   - Don't forget about testing all the various email clients too
 
-Add to this that [53% of emails are opened on mobile](https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33) - so any "fancy" marketing email designs need to look great on mobile screens and also take into account slower connections. What looks better and loads faster than simple plain text? 😛
+Add to this [that 53% of emails are opened on mobile](https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33) - so any "fancy" marketing email designs need to look great on mobile screens and also take into account slower connections. What looks better and loads faster than simple plain text? 😛
 
 ## But what about marketing!?
 
@@ -60,12 +60,10 @@ Plain text can certainly have a reputation for looking lazy or cheap, but I feel
 
 > Life is really simple, but we insist on making it complicated.
 >
-> <cite>- Confucius</cite>
+> **Confucius**
 
 That being said, at the end of the day, companies will justify their own reasons to use HTML email templates over plain text. You can't convince everyone. My own personal experience with email template design, along with analyzing some of the data, leaves me to believe that most businesses should default to plain text. At the very least, you should try to convince your team to perform some simple A/B testing with your next email campaign.
 
 The results might just surprise you.
 
-## Refs
-
-1. This is the "latest" detailed survey I could find on email design preference
+[^1]: This is the "latest" detailed survey I could find on email design preference
diff --git a/posts/poor-mans-full-bleed.md b/posts/poor-mans-full-bleed.md
index 0d88025..5bd18fe 100644
--- a/posts/poor-mans-full-bleed.md
+++ b/posts/poor-mans-full-bleed.md
@@ -6,8 +6,6 @@ I recently came across the very well written and interesting article, [Full-Blee
 
 While the approach in the article works perfectly fine, I thought to myself, "Is there not a simpler, more backwards compatible way to do this?". Indeed there is.
 
-**Don't care about the tutorial?** [Skip down to the live demo](#live-demo)
-
 ## Make the Web Backwards Compatible
 
 I try my best when creating specific element designs or layouts to have everything render consistently across almost *all* browsers. This tends to include the obvious front-runners: Chrome, Firefox, Safari - but I also try my best not to ignore the oldies: IE11, Edge and older versions of Opera. I believe if most web designers even loosely followed this concept we wouldn't be stringing together barely implemented CSS properties and hacking together polyfills for all the unsupported browsers. Just my two cents.
@@ -18,57 +16,57 @@ What does this have to do with full-bleed exactly? Well, the CSS we will be usin
 
 Let's create a single-column blog layout for this example. We will include a heading, some paragraphs, an image, and a blockquote to keep it simple:
 
-
-    <main>
-        <article>
-            <h1>Main Heading</h1>
-            <p>Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.</p>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat ab earum commodi, consequuntur totam adipisci doloremque asperiores quae at quia non temporibus ipsam voluptate voluptatem ipsa nostrum suscipit aliquid!</p>
-            <img src='https://images.unsplash.com/photo-1569083692634-f8db90c093ef?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt="Some Image">
-            <p>Ex excepteur Lorem reprehenderit dolore in consequat voluptate commodo ipsum consequat ea et. Nisi tempor proident anim tempor. Laboris est sunt cillum deserunt culpa proident cillum laborum voluptate. Est exercitation Lorem reprehenderit eu ipsum nisi et.</p>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p>
-            <blockquote>
-                <p>To be, or not to be, that is the question:<br>Whether 'tis nobler in the mind to suffer<br>The slings and arrows of outrageous fortune,<br>Or to take Arms against a Sea of troubles,<br>And by opposing end them: to die, to sleep;</p>
-                <cite>- Some guy</cite>
-            </blockquote>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p>
-            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p>
-        </article>
-    </main>
-
+~~~html
+<main>
+  <article>
+    <h1>Main Heading</h1>
+    <p>Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat ab earum commodi, consequuntur totam adipisci doloremque asperiores quae at quia non temporibus ipsam voluptate voluptatem ipsa nostrum suscipit aliquid!</p>
+    <img src='https://images.unsplash.com/photo-1569083692634-f8db90c093ef?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt="Some Image">
+    <p>Ex excepteur Lorem reprehenderit dolore in consequat voluptate commodo ipsum consequat ea et. Nisi tempor proident anim tempor. Laboris est sunt cillum deserunt culpa proident cillum laborum voluptate. Est exercitation Lorem reprehenderit eu ipsum nisi et.</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p>
+    <blockquote>
+      <p>To be, or not to be, that is the question:<br>Whether 'tis nobler in the mind to suffer<br>The slings and arrows of outrageous fortune,<br>Or to take Arms against a Sea of troubles,<br>And by opposing end them: to die, to sleep;</p>
+      <cite>- Some guy</cite>
+    </blockquote>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p>
+  </article>
+</main>
+~~~
 
 This works well as it is, but we will need to "section" off our different areas of content based on whether we want them `full-bleed` or not. We do this with - you guessed it - the `section` element. In this demo we want the image and blockquote to become `full-bleed` when rendered, so we'll add the `full-bleed` class to those sections for now (more on that later):
 
-
-    <main>
-        <article>
-            <section>
-                <h1>Main Heading</h1>
-                <p>Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.</p>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat ab earum commodi, consequuntur totam adipisci doloremque asperiores quae at quia non temporibus ipsam voluptate voluptatem ipsa nostrum suscipit aliquid!</p>
-            </section>
-            <section class="full-bleed">
-                <img src='https://images.unsplash.com/photo-1569083692634-f8db90c093ef?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt="Some Image">
-            </section>
-            <section>
-                <p>Ex excepteur Lorem reprehenderit dolore in consequat voluptate commodo ipsum consequat ea et. Nisi tempor proident anim tempor. Laboris est sunt cillum deserunt culpa proident cillum laborum voluptate. Est exercitation Lorem reprehenderit eu ipsum nisi et.</p>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p>
-            </section>
-            <section class="full-bleed">
-                <blockquote>
-                    <p>To be, or not to be, that is the question:<br>Whether 'tis nobler in the mind to suffer<br>The slings and arrows of outrageous fortune,<br>Or to take Arms against a Sea of troubles,<br>And by opposing end them: to die, to sleep;</p>
-                    <cite>- Some guy</cite>
-                </blockquote>
-            </section>
-            <section>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p>
-                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p>
-            </section>
-        </article>
-    </main>
-
+~~~html
+<main>
+  <article>
+    <section>
+      <h1>Main Heading</h1>
+      <p>Et non consequat eiusmod minim fugiat. Magna duis veniam ex reprehenderit occaecat sit. Nisi ut ex aliquip magna enim.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum repellat ab earum commodi, consequuntur totam adipisci doloremque asperiores quae at quia non temporibus ipsam voluptate voluptatem ipsa nostrum suscipit aliquid!</p>
+    </section>
+    <section class="full-bleed">
+      <img src='https://images.unsplash.com/photo-1569083692634-f8db90c093ef?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt="Some Image">
+    </section>
+    <section>
+      <p>Ex excepteur Lorem reprehenderit dolore in consequat voluptate commodo ipsum consequat ea et. Nisi tempor proident anim tempor. Laboris est sunt cillum deserunt culpa proident cillum laborum voluptate. Est exercitation Lorem reprehenderit eu ipsum nisi et.</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p>
+    </section>
+    <section class="full-bleed">
+      <blockquote>
+          <p>To be, or not to be, that is the question:<br>Whether 'tis nobler in the mind to suffer<br>The slings and arrows of outrageous fortune,<br>Or to take Arms against a Sea of troubles,<br>And by opposing end them: to die, to sleep;</p>
+          <cite>- Some guy</cite>
+      </blockquote>
+    </section>
+    <section>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta perspiciatis vel ex officiis, nisi optio nihil aspernatur exercitationem sed nobis architecto maxime eaque omnis eos, repellendus necessitatibus provident explicabo?</p>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid placeat ipsum totam, facere animi tenetur explicabo at veniam, culpa vitae debitis hic modi velit cum perferendis minima quos sit quisquam.</p>
+    </section>
+  </article>
+</main>
+~~~
 
 That's it for the HTML!
 
@@ -76,20 +74,20 @@ That's it for the HTML!
 
 Now take a deep breath and get ready for some hard CSS work:
 
-
-    article {
-        width: 100%;
-    }
-    
-    article section {
-        margin: 0 auto;
-        max-width: 480px; /* This can be whatever you want */
-        width: 100%;
-    }
-    article section.full-bleed {
-        max-width: 100%;
-    }
-
+~~~css
+article {
+    width: 100%;
+}
+
+article section {
+    margin: 0 auto;
+    max-width: 480px; /* This can be whatever you want */
+    width: 100%;
+}
+article section.full-bleed {
+    max-width: 100%;
+}
+~~~
 
 That's it. *Really*. Now any element (blockquotes, specific headers, navigations, footers, etc) that you want to layout as "full-bleed", just wrap it in a `section` tag and sick the `full-bleed` class on it. Done and done.
 
@@ -99,16 +97,16 @@ Obviously you'll want to add more styling to clean-up and make your full-bleed l
 
 You could also further customize your options by including a class like `half-bleed`, which maybe only expands slightly outside the main section `max-width`:
 
-
-    article section.half-bleed {
-        max-width: 960px;
-    }
-
+~~~css
+article section.half-bleed {
+    max-width: 960px;
+}
+~~~
 
 ### Sidenote
 
 For those concerned about accessibility: The [section element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) is a flow content element, so it can contain almost all HTML elements.
 
-<h2 id="live-demo">Live Demo</h2>
+## Live Demo
 
 [Live CodePen Example](https://codepen.io/bradleytaunt/pen/mdEdjzz)
diff --git a/posts/poormans-comment-system.md b/posts/poormans-comment-system.md
index 30e6c50..55d5882 100644
--- a/posts/poormans-comment-system.md
+++ b/posts/poormans-comment-system.md
@@ -31,7 +31,7 @@ I absolutely love the [solar.lowtechmagazine.com](https://solar.lowtechmagazine.
 
 E-mail. It's just **plain e-mail**.
 
-I've setup a basic `comment-prompt.html` in my `_includes` folder that contains a `mailto` action button[^1]:
+I've setup a basic `comment-prompt.html` in my `_includes` folder that contains a `mailto` action button:
 
 
     <a href="mailto:myemail.com?subject=RE: { { page.title | uri_escape } }">
diff --git a/posts/rss-hacks.md b/posts/rss-hacks.md
index 0946f5c..a5d354d 100644
--- a/posts/rss-hacks.md
+++ b/posts/rss-hacks.md
@@ -57,10 +57,8 @@ If you're interested in more updates and details about the shinobi project itsel
 
 [https://shinobi.bt.ht/feed.xml](https://shinobi.bt.ht/feed.xml)
 
-## Refs
-
-1. https://shinobi.website/
-2. https://shinobi.website/posts/patch-1.txt
-3. http://len.falken.directory/
-4. https://validator.w3.org/feed/docs/error/InvalidRFC2822Date.html
-5. https://git.sr.ht/~tdarb/shinobi-script/tree/patch-2
+[^1]: https://shinobi.website/
+[^2]: https://shinobi.website/posts/patch-1.txt
+[^3]: http://len.falken.directory/
+[^4]: https://validator.w3.org/feed/docs/error/InvalidRFC2822Date.html
+[^5]: https://git.sr.ht/~tdarb/shinobi-script/tree/patch-2
diff --git a/posts/safari-default-dark-mode.md b/posts/safari-default-dark-mode.md
index 14f48c0..f36db82 100644
--- a/posts/safari-default-dark-mode.md
+++ b/posts/safari-default-dark-mode.md
@@ -57,7 +57,5 @@ My hope if that even one Safari design or development team member stumbles acros
 
 Thanks for reading and happy dark mode to you all!
 
-## Refs
-
-1. Special thanks to [Seirdy](https://seirdy.one/) for suggesting the use of :link and :active support. I recommend you check out his take on [dark mode / theme support](https://seirdy.one/2020/11/23/website-best-practices.html#dark-themes).
-2. This has an open ticket through [Webkit Bugzilla](https://bugs.webkit.org/show_bug.cgi?id=209851)
+[^1]: Special thanks to [Seirdy](https://seirdy.one/) for suggesting the use of :link and :active support. I recommend you check out his take on [dark mode / theme support](https://seirdy.one/2020/11/23/website-best-practices.html#dark-themes).
+[^2]: This has an open ticket through [Webkit Bugzilla](https://bugs.webkit.org/show_bug.cgi?id=209851)
diff --git a/posts/schools.md b/posts/schools.md
index f2ed666..0ea46f9 100644
--- a/posts/schools.md
+++ b/posts/schools.md
@@ -68,9 +68,7 @@ Coding IDE (optional) ===> vim
 
 You could easily expand upon these options, but for most elementary school task these are more than enough.
 
-## Refs
-
-1. Not _all_ IT workers in the school system fall into this category. But most of the underlining structure prevents them from changing much.
-2. At least in my country of Canada. I can't speak for others.
-3. `groff` would be my personal suggestion instead, since it helps introduce children into the structure of basic file formatting and "programming". I'll go into greater details about this in another post.
-4. As mentioned in the beginning of the post, I'd even suggest forks of Firefox -> LibreWolf or Pale Moon (if possible)
+[^1]: Not _all_ IT workers in the school system fall into this category. But most of the underlining structure prevents them from changing much.
+[^2]: At least in my country of Canada. I can't speak for others.
+[^3]: `groff` would be my personal suggestion instead, since it helps introduce children into the structure of basic file formatting and "programming". I'll go into greater details about this in another post.
+[^4]: As mentioned in the beginning of the post, I'd even suggest forks of Firefox -> LibreWolf or Pale Moon (if possible)
diff --git a/posts/shinobi-website.md b/posts/shinobi-website.md
index dc7c3e3..d95bb91 100644
--- a/posts/shinobi-website.md
+++ b/posts/shinobi-website.md
@@ -63,8 +63,6 @@ Some may like the concept of reading my new articles in their RSS reader, others
 
 Thanks for taking the time to read my jumbled thoughts.
 
-## Refs
-
-1. Users can _of course_ still visit the individual article `.txt` files in their browser, if they so wish.
-2. https://tdarb.org/blog/my-static-blog-publishing-setup.html
-3. https://tdarb.org/blog/poormans-comment-system.html
+[^1]: Users can _of course_ still visit the individual article `.txt` files in their browser, if they so wish.
+[^2]: https://tdarb.org/blog/my-static-blog-publishing-setup.html
+[^3]: https://tdarb.org/blog/poormans-comment-system.html
diff --git a/posts/slow.md b/posts/slow.md
index 761f25d..6e442d1 100644
--- a/posts/slow.md
+++ b/posts/slow.md
@@ -56,8 +56,6 @@ It's completely fine to enjoy your own setup and device preferences - I'm not tr
 
 Thanks for reading.
 
-## Refs
-
-1. It helps that I have pretty much zero active accounts across most "popular" social media platforms.
-2. Some of you readers might not have ever experienced the wonders of T9...
-3. I understand that even smart phones can be classified as "computers". I am using this term in the classical sense.
+[^1]: It helps that I have pretty much zero active accounts across most "popular" social media platforms.
+[^2]: Some of you readers might not have ever experienced the wonders of T9...
+[^3]: I understand that even smart phones can be classified as "computers". I am using this term in the classical sense.
diff --git a/posts/srht2.md b/posts/srht2.md
index ea4a5d6..b894970 100644
--- a/posts/srht2.md
+++ b/posts/srht2.md
@@ -7,14 +7,14 @@ It has taken a little bit longer than I anticipated, but I have finally started
 ## Ported Projects
 
 - [Vanilla CSS](https://vanillacss.com)
-- [1mb.club](https://1mb.club)
+- [The 1MB Club](https://1mb.club)
 - [pblog](https://pblog.bt.ht)
 - [shinobi](https://shinobi.bt.ht)
 - [Web Audit](https://audit.bt.ht)
 
 ## Still WIP
 
-- [1kb.club](https://1kb.club)
+- [The 1KB Club](https://1kb.club)
 - [phpetite.org](https://phpetite.org)
 
 *Some others are being worked on but have less "popularity"*
@@ -45,7 +45,5 @@ Will I be deleting my GitHub profile outright? Maybe. I'm not sure. For now the
 
 For those interested, my sourcehut public profile is: [https://sr.ht/~bt/](https://sr.ht/~bt/). Maybe I'll see you on the other side ;)
 
-## Refs
-
-1. I keep an up-to-date document of all the open source software/communities I pay for on [my "Uses" page](/uses) for reference.
-2. Put your pitchforks and torches away - I'm aware that a web-facing UI exists on sourcehut as well!
+[^1]: I keep an up-to-date document of all the open source software/communities I pay for on [my "Uses" page](/uses) for reference.
+[^2]: Put your pitchforks and torches away - I'm aware that a web-facing UI exists on sourcehut as well!
diff --git a/posts/still-using-jquery.md b/posts/still-using-jquery.md
index 0c26229..c89993e 100644
--- a/posts/still-using-jquery.md
+++ b/posts/still-using-jquery.md
@@ -2,11 +2,11 @@
 
 2019-04-15
 
-I have seen a handful of condescending comments from front-end developers since the newest build of jQuery ([3.4.0](http://blog.jquery.com/2019/04/10/jquery-3-4-0-released/)) 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 *useful* library comes off as entitled or elitist.
+I have seen a handful of condescending comments from front-end developers since the newest build of ([jQuery 3.4.0](http://blog.jquery.com/2019/04/10/jquery-3-4-0-released/)) 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 *useful* library comes off as entitled or elitist.
 
 - "Why would you use jQuery nowadays?" 
 - "People are still developing this library?"
-- "Why use jQuery when you can use [insert latest trendy web tech here]".
+- "Why use jQuery when you can use *insert latest trendy web tech here*".
 
 **I still use jQuery**. Well, I may not use the library for all projects since every project is different - but I certainly don't avoid using it solely because "its jQuery". I've always believed in using the best tools for the job.
 
diff --git a/posts/suckless.md b/posts/suckless.md
index 34ced38..ad62aef 100644
--- a/posts/suckless.md
+++ b/posts/suckless.md
@@ -65,7 +65,5 @@ Everything *should* work out of the box, but in case it doesn't please [open a t
 
 We'll see how things go. So far I'm enjoying my time with a much simpler desktop and the "forced" push towards getting better with C is an added bonus. I still love Alpine, but Void is slowly winning me over...
 
-## Refs
-
-1. I find this to be the best way to learn new things. Reading technical books are helpful, but concepts never stick with me unless I am forced to implement them.
-2. This is a joke. Alpine is certainly not for everyone. There are many more "fully featured" distros available and everyone should use what they enjoy! Try not to take my blog posts so seriously...
\ No newline at end of file
+[^1]: I find this to be the best way to learn new things. Reading technical books are helpful, but concepts never stick with me unless I am forced to implement them.
+[^2]: This is a joke. Alpine is certainly not for everyone. There are many more "fully featured" distros available and everyone should use what they enjoy! Try not to take my blog posts so seriously...
\ No newline at end of file
diff --git a/posts/text-align-justify.md b/posts/text-align-justify.md
index e5ca05e..51cdb03 100644
--- a/posts/text-align-justify.md
+++ b/posts/text-align-justify.md
@@ -8,10 +8,7 @@ The text-align property is fairly well known in the world of CSS, even among tho
 
 The MDN web docs define the `justify` value for `text-align` as such:
 
-<blockquote>
-    <p>The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.</p>
-    <cite><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align">MDN web docs</a></cite>
-</blockquote>
+> The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
 
 ### See it in action
 
diff --git a/posts/they-wont-wait.md b/posts/they-wont-wait.md
index 3129915..2291d69 100644
--- a/posts/they-wont-wait.md
+++ b/posts/they-wont-wait.md
@@ -10,7 +10,7 @@ Users are tired of being bombarded with tracking scripts, having to download mas
 
 > It's in my nature, I always liked **speed**.
 >
-> <cite>- Guy Lafleur<cite>
+> **Guy Lafleur**
 
 ## We can do better