diff --git a/README.md b/README.md
index e725171..7076989 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@ The main repo is https://git.exozy.me/daudix/duckquill, but since only exozy.me
 - [Cassidy James](https://cassidyjames.com) for the [Mastodon-powered Comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
 - [Mehdi Merah](https://mehdi.cc) for the [CSS Scanlines](https://codepen.io/meduzen/pen/zxbwRV)
 - [Bootstrap team](https://getbootstrap.com/docs/5.3/about/team/) for the [Bootstrap Icons](https://icons.getbootstrap.com)
+- [Adobe Fonts](https://github.com/adobe-fonts) for the [Source Code Pro](https://github.com/adobe-fonts/source-code-pro) font
 - [Rasmus](https://rsms.me) for the [Inter](https://rsms.me/inter/) font
-- [JetBrains](https://www.jetbrains.com) for the [JetBrains Mono](https://www.jetbrains.com/lp/mono/) font
 - dwb, ejm and jgs for the ASCII art
 - Everyone who supported me and said good stuff <3
diff --git a/content/_index.md b/content/_index.md
index b39a142..96240b7 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -17,11 +17,11 @@ jgs~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~
 
 Edit a bit of metadata and tweak some of the included graphics and have a blog up in minutes!
 
-- Pretty, yet lightweight. No JavaScript are used.
+- Pretty, yet lightweight. No JavaScript is used.
 - For a very pleasant look, the colors are tinted with the primary color.
 - Proper favicon for modern browsers and Apple device icons.
 - Mastodon, Lemmy and other social media meta cards for easy sharing. Try [Share Preview](https://apps.gnome.org/SharePreview/) to test.
-- Local copy of the amazing [Inter](https://rsms.me/inter/) and [JetBrains Mono](https://www.jetbrains.com/lp/mono/) fonts, plus [Bootstrap Icons](https://icons.getbootstrap.com). No slowdowns pulling from external hosting.
+- Local copy of the amazing [Inter](https://rsms.me/inter/) and [Source Code Pro](https://adobe-fonts.github.io/source-code-pro/) fonts, plus [Bootstrap Icons](https://icons.getbootstrap.com). No slowdowns pulling from external hosting.
 - Mobile friendly, with proper dark variant.
 - [Mastodon-powered comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon). Comment using any ActivityPub service by replying to Mastodon post.
 
@@ -85,7 +85,7 @@ First, change the primary color in `config.toml`:
 
 ```toml
 [extra]
-primary_color = "#HEX_COLOR_CODE"
+primary_color = "COLOR_CODE"
 ```
 
 Then, add `custom.css` to additional stylesheets.
@@ -102,17 +102,20 @@ Then, paste the following code inside `sass/custom.scss` (inside your site, not
 ```scss
 @use "sass:color";
 
-$primary-color: #HEX_COLOR_CODE;
+$primary-color: COLOR_CODE;
 $primary-color-alpha: color.scale($primary-color, $alpha: -80%);
 
-$bg-color-l: color.mix($primary-color, rgb(250, 250, 250), 10%);
-$bg-color-d: color.mix($primary-color, rgb(11, 11, 11), 5%);
+$bg-color-l: color.scale($primary-color, $lightness: 80%);
+$bg-color-d: color.scale($primary-color, $lightness: -90%, $saturation: -50%);
 
 $crt-bg: radial-gradient(
   color.scale($primary-color, $lightness: -80%),
   color.scale($primary-color, $lightness: -90%)
 );
 
+$nav-bg-l: color.scale($bg-color-l, $alpha: -20%, $lightness: 50%);
+$nav-bg-d: color.scale($bg-color-d, $alpha: -20%, $lightness: 5%, $saturation: -50%);
+
 $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   0 2px 6px 2px color.scale($primary-color, $alpha: -95%),
   0 4px 24px 4px color.scale($primary-color, $alpha: -90%);
@@ -120,6 +123,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
 :root {
   --bg-color: #{$bg-color-l};
   --crt-bg: #{$crt-bg};
+  --nav-bg: #{$nav-bg-l};
   --primary-color-alpha: #{$primary-color-alpha};
   --primary-color: #{$primary-color};
   --glow: #{$glow};
@@ -128,6 +132,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
 @media (prefers-color-scheme: dark) {
   :root {
     --bg-color: #{$bg-color-d};
+    --nav-bg: #{$nav-bg-d};
   }
 }
 ```
@@ -156,7 +161,7 @@ The main repo is [git.exozy.me/daudix/duckquill](https://git.exozy.me/daudix/duc
 - [Cassidy James](https://cassidyjames.com) for the [Mastodon-powered Comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
 - [Mehdi Merah](https://mehdi.cc) for the [CSS Scanlines](https://codepen.io/meduzen/pen/zxbwRV)
 - [Bootstrap team](https://getbootstrap.com/docs/5.3/about/team/) for the [Bootstrap Icons](https://icons.getbootstrap.com)
+- [Adobe Fonts](https://github.com/adobe-fonts) for the [Source Code Pro](https://adobe-fonts.github.io/source-code-pro/) font
 - [Rasmus](https://rsms.me) for the [Inter](https://rsms.me/inter/) font
-- [JetBrains](https://www.jetbrains.com) for the [JetBrains Mono](https://www.jetbrains.com/lp/mono/) font
 - dwb, ejm and jgs for the ASCII art
 - Everyone who supported me and said good stuff <3
diff --git a/content/blog/ipsum/index.md b/content/blog/ipsum/index.md
new file mode 100644
index 0000000..38940c8
--- /dev/null
+++ b/content/blog/ipsum/index.md
@@ -0,0 +1,15 @@
++++
+title = "Ipsum"
+description = "Lorem ipsum dolor sit amet."
+date = 1970-01-02
+[taxonomies]
+tags = ["Lorem", "Ipsum"]
+[extra]
+toc = false
++++
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea.
+
+Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est.
+
+Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea.
\ No newline at end of file
diff --git a/content/blog/lorem/index.md b/content/blog/lorem/index.md
new file mode 100644
index 0000000..fbd8b94
--- /dev/null
+++ b/content/blog/lorem/index.md
@@ -0,0 +1,15 @@
++++
+title = "Lorem"
+description = "Lorem ipsum dolor sit amet."
+date = 1970-01-01
+[taxonomies]
+tags = ["Lorem", "Ipsum"]
+[extra]
+toc = false
++++
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea.
+
+Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est.
+
+Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea.
\ No newline at end of file
diff --git a/sass/_comments.scss b/sass/_comments.scss
index 94adafd..dfc6d9a 100644
--- a/sass/_comments.scss
+++ b/sass/_comments.scss
@@ -62,6 +62,7 @@ section#comments {
         font-size: 0.8rem;
         font-weight: normal;
         padding: 0.25rem 0.75rem;
+        transition: var(--transition);
 
         &:hover {
           opacity: 0.8;
diff --git a/sass/_fonts.scss b/sass/_fonts.scss
index eb28383..38b74fe 100644
--- a/sass/_fonts.scss
+++ b/sass/_fonts.scss
@@ -1,23 +1,34 @@
 @font-face {
-  font-family: "Inter";
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: oblique italic 0deg 10deg;
-  src: url("./fonts/inter.woff2?v=4.0") format("woff2");
-}
-
-@font-face {
-  font-family: "JetBrains Mono";
-  font-weight: 100 900;
-  font-display: swap;
+  font-family: "Inter Variable";
   font-style: normal;
-  src: url("./fonts/jetbrains-mono.woff2?v=2.304") format("woff2");
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/inter-variable.woff2?v=4.0") format("woff2"),
+    url("./fonts/inter-variable.ttf?v=4.0") format("truetype");
+}
+@font-face {
+  font-family: "Inter Variable";
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url("./fonts/inter-variable-italic.woff2?v=4.0") format("woff2"),
+    url("./fonts/inter-variable-italic.ttf?v=4.0") format("truetype");
 }
 
 @font-face {
-  font-family: "JetBrains Mono";
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: italic;
-  src: url("./fonts/jetbrains-mono-italic.woff2?v=2.304") format("woff2");
+  font-family: "Source Code VF";
+  font-style: normal;
+  font-weight: 200 900;
+  font-stretch: normal;
+  src: url("./fonts/source-code-vf-upright.woff2?v=1.026R") format("woff2"),
+    url("./fonts/source-code-vf-upright.ttf?v=1.026R") format("truetype");
+}
+
+@font-face {
+  font-family: "Source Code VF";
+  font-style: italic;
+  font-weight: 200 900;
+  font-stretch: normal;
+  src: url("./fonts/source-code-vf-italic.woff2?v=1.026R") format("woff2"),
+    url("./fonts/source-code-vf-italic.ttf?v=1.026R") format("truetype");
 }
diff --git a/sass/_main.scss b/sass/_main.scss
index 54d0e47..be5f736 100644
--- a/sass/_main.scss
+++ b/sass/_main.scss
@@ -9,6 +9,7 @@ html {
   scroll-behavior: smooth;
   scrollbar-color: var(--primary-color) transparent;
   accent-color: var(--primary-color);
+  overflow-wrap: break-word;
 }
 
 // smaller font size on mobile
@@ -25,7 +26,7 @@ body {
 }
 
 body {
-  font-family: "Inter", sans-serif;
+  font-family: "Inter Variable", sans-serif;
   font-weight: 400;
   line-height: 1.6;
   color: var(--fg-color);
@@ -58,7 +59,7 @@ body {
 
 // LAYOUT
 .container {
-  width: 80%;
+  width: 80vw;
   margin-left: auto;
   margin-right: auto;
   max-width: var(--content-width);
@@ -66,7 +67,7 @@ body {
 
 @media only screen and (max-device-width: 480px) {
   .container {
-    width: 90%;
+    width: 90vw;
   }
 }
 
@@ -99,7 +100,7 @@ h6 {
 h1 {
   letter-spacing: -0.08rem;
   font-weight: 900;
-  font-size: 2.4rem;
+  font-size: 3rem;
 
   a {
     font-weight: 900;
@@ -112,17 +113,35 @@ h1 {
 }
 
 h2 {
-  font-size: 1.4rem;
+  font-size: 2.4rem;
+  letter-spacing: -0.04rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+h4 {
+  font-size: 1.25rem;
+}
+
+h5 {
+  font-size: 1rem;
+}
+
+h6 {
+  font-size: 0.75rem;
 }
 
 a {
-  font-weight: 600;
-  text-decoration: none;
   color: var(--primary-color);
   cursor: pointer;
+  font-weight: 600;
+  text-decoration: none;
+  text-decoration: underline;
 
   &:hover {
-    text-decoration: underline;
+    text-decoration: underline wavy;
   }
 }
 
@@ -153,18 +172,16 @@ dl {
 }
 
 hr {
-  background-color: var(--primary-color);
-  height: 0.3rem;
-  margin: 3rem auto 4rem;
+  border: 0.125rem solid var(--fg05);
+  margin: 3rem auto;
   width: 40%;
-  border: 0;
 }
 
 blockquote {
   padding: 0 1rem;
   margin-left: 0;
   color: var(--fg50);
-  border-left: 0.3rem solid var(--primary-color);
+  border-left: 0.25rem solid var(--primary-color);
 
   > :first-child {
     margin-top: 0;
@@ -185,34 +202,19 @@ abbr {
   text-decoration: underline dotted;
 }
 
-kbd {
-  display: inline-block;
-  line-height: normal;
-  font-family: "JetBrains Mono", monospace;
-  padding: 2px 6px;
-  border-radius: var(--rounded-corner-small);
-  background-color: var(--fg05);
-  box-shadow: inset 0 -2px 0 var(--fg09), 0 -1px 0 var(--fg09);
-  cursor: pointer;
-
-  // small nice thingy, keys can be pressed!
-  &:active {
-    background-color: var(--fg09);
-    box-shadow: inset 0 1px 0 var(--fg09);
-    transform: translateY(2px);
-  }
+// CODE
+pre,
+code {
+  font-family: "Source Code VF", monospace;
 }
 
-// CODE
-code {
-  font-family: "JetBrains Mono", monospace;
+code:not(pre code) {
   padding: 2px 6px;
   border-radius: var(--rounded-corner-small);
   background-color: var(--fg05);
   color: var(--red-fg);
 }
 
-// apply monospace font to everything inside the <pre>
 pre {
   line-height: normal; // unset line height
   padding: 1rem;
@@ -222,17 +224,6 @@ pre {
   box-shadow: var(--shadow);
   overflow: auto;
 
-  & * {
-    font-family: "JetBrains Mono", monospace;
-  }
-
-  code {
-    background-color: unset;
-    border-radius: unset;
-    color: unset;
-    padding: unset;
-  }
-
   table td {
     padding: 0;
     border: none;
@@ -263,6 +254,23 @@ pre {
   }
 }
 
+kbd {
+  display: inline-block;
+  line-height: normal;
+  padding: 2px 6px;
+  border-radius: var(--rounded-corner-small);
+  background-color: var(--fg05);
+  box-shadow: inset 0 -2px 0 var(--fg09), 0 -1px 0 var(--fg09);
+  cursor: pointer;
+
+  // small nice thingy, keys can be pressed!
+  &:active {
+    background-color: var(--fg09);
+    box-shadow: inset 0 1px 0 var(--fg09);
+    transform: translateY(2px);
+  }
+}
+
 mark {
   padding: 2px 6px;
   border-radius: var(--rounded-corner-small);
@@ -293,13 +301,8 @@ details {
 // TABLES
 table {
   display: block;
+  overflow-x: auto;
   border-collapse: collapse;
-  border-spacing: 0;
-  max-width: 100vw;
-  overflow: auto;
-  word-break: normal;
-  word-break: keep-all; // for Firefox to horizontally scroll wider tables.
-  -webkit-overflow-scrolling: touch;
 
   th {
     font-weight: bold;
@@ -360,12 +363,12 @@ img {
 // NAVBAR
 .nav {
   overflow: auto;
-  width: 80%;
+  width: 80vw;
   max-width: var(--content-width);
   margin: 1rem auto;
-  box-shadow: var(--shadow);
+  box-shadow: 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
   border-radius: var(--rounded-corner-big);
-  background-color: var(--fg05);
+  background-color: var(--nav-bg);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   position: sticky;
@@ -400,8 +403,7 @@ img {
     transition: var(--transition);
     text-decoration: none;
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--fg05);
       color: var(--primary-color);
     }
@@ -409,13 +411,15 @@ img {
 
   @media only screen and (max-device-width: 480px) {
     & {
-      width: 90%;
+      width: 90vw;
       position: static;
     }
   }
 
   @media (min-width: 600px) {
     & {
+      border-radius: 9999px;
+
       &-container {
         text-align: left;
       }
@@ -425,6 +429,10 @@ img {
         position: absolute;
         right: 0;
       }
+
+      a {
+        border-radius: 9999px;
+      }
     }
   }
 }
@@ -460,12 +468,19 @@ img {
 }
 
 .inline-button {
+  background-color: var(--fg05);
+  border-radius: var(--rounded-corner);
+  color: var(--fg-color);
   display: inline-block;
   font-size: 0.9rem;
   padding: 0.4rem 1rem;
-  border-radius: var(--rounded-corner);
-  background-color: var(--fg05);
-  color: var(--fg-color);
+  text-decoration: none;
+  transition: var(--transition);
+}
+
+.inline-button:hover {
+  background-color: var(--fg09);
+  text-decoration: none;
 }
 
 // CRT
@@ -509,20 +524,22 @@ img {
 // STATEMENTS
 .statement-container {
   margin: 1rem 0 1rem;
-  padding: 1rem 1rem;
+  padding: 1rem 1rem 0.5rem 1rem;
   border-radius: var(--rounded-corner);
   box-shadow: var(--shadow);
 
-  h2 {
-    margin: 0 0 1rem;
-  }
-
-  p {
+  * {
     margin: 0;
   }
 
-  ul {
-    margin: 0;
+  p,
+  ul,
+  ol {
+    margin: 0.5rem 0 0.5rem;
+  }
+
+  .big {
+    font-size: 150%;
   }
 
   &.archive {
@@ -548,3 +565,18 @@ img {
   height: min(90px, 12.367vw);
   border: none;
 }
+
+.pill {
+  background-color: var(--fg05);
+  border-radius: 9999px;
+  color: var(--fg-color);
+  padding: 0.25rem 0.75rem;
+  text-decoration: none;
+  transition: var(--transition);
+
+  &:hover {
+    background-color: var(--fg09);
+    color: var(--primary-color);
+    text-decoration: none;
+  }
+}
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 7671bbb..1186bcc 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -3,14 +3,17 @@
 $primary-color: #ff7800;
 $primary-color-alpha: color.scale($primary-color, $alpha: -80%);
 
-$bg-color-l: color.mix($primary-color, rgb(250, 250, 250), 10%);
-$bg-color-d: color.mix($primary-color, rgb(11, 11, 11), 5%);
+$bg-color-l: color.scale($primary-color, $lightness: 80%);
+$bg-color-d: color.scale($primary-color, $lightness: -90%, $saturation: -50%);
 
 $crt-bg: radial-gradient(
   color.scale($primary-color, $lightness: -80%),
   color.scale($primary-color, $lightness: -90%)
 );
 
+$nav-bg-l: color.scale($bg-color-l, $alpha: -20%, $lightness: 50%);
+$nav-bg-d: color.scale($bg-color-d, $alpha: -20%, $lightness: 5%, $saturation: -50%);
+
 $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   0 2px 6px 2px color.scale($primary-color, $alpha: -95%),
   0 4px 24px 4px color.scale($primary-color, $alpha: -90%);
@@ -20,7 +23,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   --bg-color: #{$bg-color-l};
   --content-width: 720px;
   --crt-bg: #{$crt-bg};
-  --fg-color: var(--dark4);
+  --fg-color: rgba(0, 0, 0, 0.8);
   --primary-color-alpha: #{$primary-color-alpha};
   --primary-color: #{$primary-color};
   --rounded-corner-big: 1.2rem;
@@ -31,6 +34,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
   --fg05: rgba(0, 0, 0, 0.05);
   --fg09: rgba(0, 0, 0, 0.09);
   --fg50: rgba(0, 0, 0, 0.5);
+  --nav-bg: #{$nav-bg-l};
 
   --orange-bg: rgba(255, 120, 0, 0.1);
   --orange-fg: rgb(255, 120, 0);
@@ -50,6 +54,7 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
     drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
   --glow: #{$glow};
 
+  --transition-bezier: 350ms cubic-bezier(0.17, 0.89, 0.32, 1.28);
   --transition-long: 800ms;
   --transition-longer: 400ms;
   --transition: 200ms;
@@ -61,12 +66,13 @@ $glow: 0 0 0 1px color.scale($primary-color, $alpha: -95%),
 
     // GENERAL SETUP
     --bg-color: #{$bg-color-d};
-    --fg-color: var(--light2);
+    --fg-color: rgb(255, 255, 255);
 
     // CUSTOM COLOR PALETTE
     --fg05: rgba(255, 255, 255, 0.05);
     --fg09: rgba(255, 255, 255, 0.09);
     --fg50: rgba(255, 255, 255, 0.5);
+    --nav-bg: #{$nav-bg-d};
 
     --orange-bg: rgba(255, 190, 111, 0.1);
     --orange-fg: rgb(255, 190, 111);
diff --git a/static/fonts/inter-variable-italic.ttf b/static/fonts/inter-variable-italic.ttf
new file mode 100644
index 0000000..ed674e7
Binary files /dev/null and b/static/fonts/inter-variable-italic.ttf differ
diff --git a/static/fonts/inter-variable-italic.woff2 b/static/fonts/inter-variable-italic.woff2
new file mode 100644
index 0000000..f22ec25
Binary files /dev/null and b/static/fonts/inter-variable-italic.woff2 differ
diff --git a/static/fonts/inter-variable.ttf b/static/fonts/inter-variable.ttf
new file mode 100644
index 0000000..2d4b470
Binary files /dev/null and b/static/fonts/inter-variable.ttf differ
diff --git a/static/fonts/inter-variable.woff2 b/static/fonts/inter-variable.woff2
new file mode 100644
index 0000000..22a12b0
Binary files /dev/null and b/static/fonts/inter-variable.woff2 differ
diff --git a/static/fonts/inter.woff2 b/static/fonts/inter.woff2
deleted file mode 100644
index 317f314..0000000
Binary files a/static/fonts/inter.woff2 and /dev/null differ
diff --git a/static/fonts/jetbrains-mono-italic.woff2 b/static/fonts/jetbrains-mono-italic.woff2
deleted file mode 100644
index e2a9d2c..0000000
Binary files a/static/fonts/jetbrains-mono-italic.woff2 and /dev/null differ
diff --git a/static/fonts/jetbrains-mono.woff2 b/static/fonts/jetbrains-mono.woff2
deleted file mode 100644
index 41967ae..0000000
Binary files a/static/fonts/jetbrains-mono.woff2 and /dev/null differ
diff --git a/static/fonts/source-code-vf-italic.ttf b/static/fonts/source-code-vf-italic.ttf
new file mode 100644
index 0000000..f6ae4ba
Binary files /dev/null and b/static/fonts/source-code-vf-italic.ttf differ
diff --git a/static/fonts/source-code-vf-italic.woff2 b/static/fonts/source-code-vf-italic.woff2
new file mode 100644
index 0000000..54566fe
Binary files /dev/null and b/static/fonts/source-code-vf-italic.woff2 differ
diff --git a/static/fonts/source-code-vf-upright.ttf b/static/fonts/source-code-vf-upright.ttf
new file mode 100644
index 0000000..fa23355
Binary files /dev/null and b/static/fonts/source-code-vf-upright.ttf differ
diff --git a/static/fonts/source-code-vf-upright.woff2 b/static/fonts/source-code-vf-upright.woff2
new file mode 100644
index 0000000..fa87db3
Binary files /dev/null and b/static/fonts/source-code-vf-upright.woff2 differ
diff --git a/templates/404.html b/templates/404.html
index f35fba3..63f095b 100644
--- a/templates/404.html
+++ b/templates/404.html
@@ -2,7 +2,7 @@
 
 {% block content %}
 <picture>
-  <source srcset="{{ get_url(path='404.png') }}" class="full pixels transparent no-hover" media="(prefers-reduced-motion: reduce)"></source> 
+  <source srcset="{{ get_url(path='404.png') }}" media="(prefers-reduced-motion: reduce)"></source> 
   <img srcset="{{ get_url(path='404.gif') }}" class="full pixels transparent no-hover">
 </picture>
 
diff --git a/templates/blog.html b/templates/blog.html
index b054ae2..0fe1206 100644
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -13,7 +13,7 @@
       {%- for name, taxon in page.taxonomies %}
         •
         {%- for item in taxon %}
-          <a href="{{ get_taxonomy_url(kind=name, name=item) }}">
+          <a class="pill" href="{{ get_taxonomy_url(kind=name, name=item) }}">
             <i class="bi bi-tag-fill"></i>
             {{ item }}
           </a>&nbsp;
@@ -25,21 +25,21 @@
 
 {% if page.extra.archive %}
   <div class="statement-container archive">
-    <h2>⚠ Archived</h2>
+    <strong class="big">⚠ Archived</strong>
     {{ page.extra.archive | markdown | safe }}
   </div>
 {% endif %}
 
 {% if page.extra.trigger %}
   <div class="statement-container trigger">
-    <h2>⚠ Trigger Warning</h2>
+    <strong class="big">⚠ Trigger Warning</strong>
     {{ page.extra.trigger | markdown | safe }}
   </div>
 {% endif %}
 
 {% if page.extra.disclaimer %}
   <div class="statement-container disclaimer">
-    <h2>⚠ Disclaimer(s)</h2>
+    <strong class="big">⚠ Disclaimer(s)</strong>
     {{ page.extra.disclaimer | markdown | safe }}
   </div>
 {% endif %}
diff --git a/templates/blog_list.html b/templates/blog_list.html
index c764bbe..35b6553 100644
--- a/templates/blog_list.html
+++ b/templates/blog_list.html
@@ -13,9 +13,9 @@
 
 {% for page in section.pages %}
 <article>
-  <h2>
+  <h3>
     <a class="link-page" href="{{ page.permalink | safe }}">{{ page.title }}</a>
-  </h2>
+  </h3>
   {%- if page.description %}
     <p>{{ page.description }}</p>
   {%- endif %}
@@ -28,7 +28,7 @@
         {%- for name, taxon in page.taxonomies %}
         •
           {%-for item in taxon %}
-          <a href="{{ get_taxonomy_url(kind=name, name=item) }}">
+          <a class="pill" href="{{ get_taxonomy_url(kind=name, name=item) }}">
             <i class="bi bi-tag-fill"></i>
             {{ item }}
           </a>&nbsp;
@@ -38,5 +38,6 @@
     </small>
   {%- endif %}
 </article>
+<hr>
 {% endfor %}
 {% endblock content %}
diff --git a/templates/taxonomy_list.html b/templates/taxonomy_list.html
index 0f63075..aad349c 100644
--- a/templates/taxonomy_list.html
+++ b/templates/taxonomy_list.html
@@ -8,7 +8,7 @@
   <br />
   {% for tag in terms %}
   <small>
-    <a href="{{ get_taxonomy_url(kind='tags', name=tag.name) }}">
+    <a class="pill" href="{{ get_taxonomy_url(kind='tags', name=tag.name) }}">
       <i class="bi bi-tag-fill"></i>
       {{ tag.name }}
     </a>
diff --git a/templates/taxonomy_single.html b/templates/taxonomy_single.html
index 35002ff..6a2799d 100644
--- a/templates/taxonomy_single.html
+++ b/templates/taxonomy_single.html
@@ -9,11 +9,11 @@
 </small>
 <article>
   {% for page in term.pages %}
-  <h2>
+  <h3>
     <a class="link-page" href="{{ page.permalink | safe }}">
       {{ page.title }}
     </a>
-  </h2>
+  </h3>
   <small>
     <time datetime='{{ page.date | date(format='%+') }}' pubdate>
       {{- page.date | date(format=config.extra.date_format) -}}
@@ -22,7 +22,7 @@
       {%- for name, taxon in page.taxonomies %}
         •
         {%- for item in taxon %}
-          <a href="{{ get_taxonomy_url(kind=name, name=item) }}">
+          <a class="pill" href="{{ get_taxonomy_url(kind=name, name=item) }}">
             <i class="bi bi-tag-fill"></i>
             {{ item }}
           </a>&nbsp;