style: add styling for 404 page and finalise text sizing

content/blog/elixir_combinators.md → content/blog/combinatory_logic.md

@@ -7,7 +7,7 @@ rabbit holes one can fall down is that of combinatory logic, and the use of the
 Calculus for powerful function manipulation.
 """
 [taxonomies]
-tags = ["combinators", "fp", "λ"]
+tags = ["combinators", "fp"]
 +++
 
 ## Combinatory Logic & The SK(I) Combinator Calculus

content/software/_index.md

@@ -1,7 +1,7 @@
 +++
 title = "Software"
 description = """
-Software projects that I have created, maintained and/or contributed to.
+Software projects that I have created and/or maintained.
 """
 sort_by = "title"
 template = "software/index.html"

content/software/dn.md

@@ -6,7 +6,7 @@ utility for cross-platform terminal use.
 """
 date  = 2024-11-24
 [taxonomies]
-tags =  ["test"]
+tags =  ["rust"]
 +++
 
 `dn` is a PKMS CLI tool.

content/software/litr.md

@@ -6,7 +6,7 @@ and ease of integration with plain text markup.
 """
 date  = 2024-12-10
 [taxonomies]
-tags =  ["test"]
+tags =  ["rust"]
 +++
 
 `litr` is a literate programming CLI tool.

static/styles/global.css

@@ -20,16 +20,29 @@
 
 :root {
   --font-code: "CommitMono";
-  /* These font sizes are not acceptable on mobile. */
-  --text-sm: clamp(0.75rem, 2vw, 1rem);
-  --text-md: clamp(1rem, 2.5vw, 1.25rem);
-  --text-lg: clamp(1.5rem, 3vw, 2rem);
-  --text-xl: clamp(2.5rem, 4vw, 3.5rem);
 
   font-family: Inter, sans-serif;
   font-feature-settings: "liga" 1, "calt" 1; /* fix for Chrome */
 }
 
+@media (min-width: 320px) {
+  :root {
+    --text-sm: clamp(1rem, 2vw, 2rem);
+    --text-md: clamp(2rem, 3vw, 3rem);
+    --text-lg: clamp(3rem, 4vw, 4rem);
+    --text-xl: clamp(4rem, 5vw, 5rem);
+  }
+}
+
+@media (min-width: 768px) {
+  :root {
+    --text-sm: clamp(0.75rem, 2vw, 1rem);
+    --text-md: clamp(1rem, 2.5vw, 1.25rem);
+    --text-lg: clamp(1.5rem, 3vw, 2rem);
+    --text-xl: clamp(2.5rem, 4vw, 3.5rem);
+  }
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     -webkit-font-smoothing: antialiased;
@@ -52,7 +65,6 @@
 
 body {
   margin: auto;
-  font-family: var(--font-main);
   color: var(--ctp-text);
   background-color: var(--ctp-base);
   display: flex;
@@ -136,12 +148,14 @@ a {
   transition: all 0.2s ease;
 }
 
-a:hover .decorated-link, a:focus .decorated-link{
+a:hover .decorated-link,
+a:focus .decorated-link {
   color: var(--ctp-teal);
   text-decoration: none;
 }
 
-.decorated-link:hover, .decorated-link:focus {
+.decorated-link:hover,
+.decorated-link:focus {
   color: var(--ctp-red);
   text-decoration: none;
 }
@@ -150,7 +164,8 @@ a:hover .decorated-link, a:focus .decorated-link{
   color: var(--ctp-overlay-2);
 }
 
-.internal-link:hover, .internal-link:focus {
+.internal-link:hover,
+.internal-link:focus {
   color: var(--ctp-peach);
 }
 
@@ -184,7 +199,7 @@ hr {
 }
 
 .blog-card-title {
-  font-size: var(--text-lg);
+  font-size: var(--text-md);
   display: flex;
   flex-direction: row;
   margin-bottom: 0.125rem;
@@ -253,7 +268,8 @@ hr {
   transition: all 0.1s;
 }
 
-.tag-label:hover, .tag-label:focus {
+.tag-label:hover,
+.tag-label:focus {
   border-radius: 0.125rem;
   color: var(--ctp-peach);
   text-decoration: none;
@@ -311,7 +327,8 @@ hr {
   max-width: 60rem;
   padding-left: 2rem;
   padding-right: 2rem;
-  justify-self: center;
+  place-self: center;
+  margin: auto;
 }
 
 #content-list-title {
@@ -371,3 +388,9 @@ hr {
   place-items: center;
   place-content: center;
 }
+
+#notfound-message {
+  font-size: var(--text-lg);
+  text-align: center;
+  place-content: center;
+}

templates/404.html

@@ -1,12 +1,12 @@
-{% block content %}
-<div id="notfound">
-  <h1 id="notfound-error">404: Page not found</h1>
-  <hr class="title-underline" />
-  <p id="notfound-message">
-    Oops! We can't seem to find the page you are looking for.<a
-      href="{{ config.base_url | safe }}"
-      >TODO: Fix this place, man.</a
-    >
-  </p>
-</div>
+{% extends "base.html" %} {% block content %}
+<h1 id="content-list-title">Page Not Found</h1>
+<hr class="title-underline" />
+<p id="notfound-message">
+  It looks like the page you're trying to access does not exist.
+  <br />
+  <br />
+  <a class="decorated-link" href="{{ config.base_url | safe }}"
+    >Click here to go back to the home page</a
+  >.
+</p>
 {% endblock content %}

templates/index.html

@@ -30,10 +30,10 @@ <h1 id="content-list-title">About</h1>
   self-healing, scalable, concurrent systems with the BEAM.
 </p>
 <p>
-  Outside of programming, I am an avid music enthusiast and novice audiophile; I
-  enjoy reading and writing short-form literature and occasionally taking
-  pictures with my Fujifilm Instax Mini 40. I have also recently taken to
-  recreational logic and mathematics.
+  Outside of programming, I am an avid music enthusiast and audiophile; I enjoy
+  reading and writing short-form literature and occasionally taking pictures
+  with my Fujifilm Instax Mini 40. Recently, I have been fostering an interest
+  in recreational logic and mathematics.
 </p>
 <p>
   I can be reached via