Finish plaintext post

3 files changed, 129 insertions, 136 deletions

diff --git a/_posts/2023-07-29-plaintext-is-beautiful.md b/_posts/2023-07-29-plaintext-is-beautiful.md
new file mode 100644
index 0000000..06b7c14
--- /dev/null
+++ b/_posts/2023-07-29-plaintext-is-beautiful.md
@@ -0,0 +1,78 @@
+---
+layout: post
+title: Plaintext is Beautiful
+date: 2023-07-18T09:27:00Z
+tags: [webdev, text editor, development, gopher]
+---
+
+Alternative title: Why does this website look so different?
+
+You might notice that the site looks a lot different than it did before.<br> If
+you're new, this is how it looked:
+
+![A view of how the website previously looked](https://cdn.discordapp.com/attachments/838048982873538572/1134865644014280856/image.png)
+
+For a lot of people, this may have been a lot more of a pleasing design than the
+current one. Shit, I still think that design has its merits, but it did have to
+change. I will explain why this was the case, and also why I went for this
+current design (which I hope isn't too bad!).
+
+### Performance issues
+
+So, Chromium-based browsers offer a feature in their dev panel called
+[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/). In effect,
+this is a tool that enables a developer to assess the quality of their website
+based on some important metrics (a11y, performance) and some not so important
+ones (like the dreaded SEO). I don't like using Google-related tools very much,
+but out of curiosity I did decide to check how my site was doing.
+
+Accessibility and (_shudder_) SEO were great, but to my surprise, the
+performance score was a disastrous 54 out of 100. To make matters worse,
+Lighthouse had calculated that my home page took on average **7 seconds** to
+load! This is really bad, especially since it was literally just a couple of pictures
+and some text, so I checked what its recommendations were and followed them. I
+managed to get the score up to around 70 or 80, but still the website felt
+really sluggish. It was at this point that I came to the realisation that my efforts to optimise
+the site in its current form were pointless, as the whole design was very
+bloated (with lots of images everywhere).
+
+Thankfully, I had come across some new communities at the time which helped
+provide inspiration for a new design!
+
+### Smolnet, gopher and tildes
+
+If you've read my previous posts, you'll know that I am a member of SDF, a
+public access Unix system. If you haven't, [do it now](/2023/07/11/enter-the-fediverse)!!!
+
+Anyway, I discovered since then that SDF is not alone in this space of public Unix systems,
+and in fact there is an entire federation of these systems (known as "tildes") called the
+[tildeverse](https://tildeverse.org). All of these provide simple web hosting as well as
+IRC, Usenet and some other useful things. Members of the tilde run services such as a
+PBX telephone network, a zine and a Mastodon instance. It seemed that most of these tildes 
+provided a wider range of free services than SDF (which
+requires you to fork out a verification fee in order to do anything - which is totally
+fair, but not something I want to pay when I can get it free elsewhere). As a result, I picked
+a tilde ([tilde.institute](https://tilde.institute) - because it sounds fancy to be a part of an
+institute) and started to get set up with the various services provided.
+
+It was at this point that I discovered the [Gopher protocol](https://en.wikipedia.org/wiki/Gopher_(protocol)),
+because it was a service provided by the institute. Basically, before the current HTTP(S) and WWW protocols
+existed, Gopher was a simple protocol that existed for sharing plaintext documents over TCP networks.
+Instead of HTML, Gopher has a `gophermap` format to define special pages with links, but most files are served
+as simple `.txt` files. The protocol predated (and was largely replaced by) the WWW, possibly because
+opportunities to monetise Gopher were much fewer and further between than the main Web, but it has seen
+a resurgence in the 21st century among nerds and anti-capitalists alike, which when combined with users
+of the newer Gemini and Spartan protocols make the Smolnet, an independent, minimal Web.
+As someone who is both, this appealed to me greatly, and I quickly downloaded 
+[a browser capable of using the protocol](https://gmi.skyjake.fi/lagrange/) and started browsing. I 
+explored the gopherholes of fellow SDF members, fellow tilde members, and just random people via the 
+Floodgap directory and search. 
+
+I set up my own gopher hole via the institute and copied over some content
+from my regular website (save the blog which was a bit too image-heavy for the protocol). It was as I was
+copying these things over that I realised - why don't I apply these principles to my main website? I was
+having performance issues on my website, and gopherholes were loading way faster on my device that HTTP
+websites ever did, so why can't I make *my* website work like that? I quickly went over to GitHub, tossed out 
+my CSS file and gave the website this terminal-esque look. I hope you enjoy the new layout!
+
+That doesn't mean I've abandoned the smolnet - check my gopherhole out at <br> `gopher://tilde.institute/~mounderfod`!
diff --git a/_posts/_drafts/2023-07-29-plaintext-is-beautiful.md b/_posts/_drafts/2023-07-29-plaintext-is-beautiful.md
deleted file mode 100644
index c85a045..0000000
--- a/_posts/_drafts/2023-07-29-plaintext-is-beautiful.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-layout: post
-title: Plaintext is Beautiful
-date: 2023-07-18T09:27:00Z
-tags: [webdev, text editor, development, gopher]
----
-
-Alternative title: Why does this website look so different?
-
-You might notice that the site looks a lot different than it did before.<br> If
-you're new, this is how it looked:
-
-![A view of how the website previously looked](https://cdn.discordapp.com/attachments/838048982873538572/1134865644014280856/image.png)
-
-For a lot of people, this may have been a lot more of a pleasing design than the
-current one. Shit, I still think that design has its merits, but it did have to
-change. I will explain why this was the case, and also why I went for this
-current design (which I hope isn't too bad!).
-
-### Performance issues
-
-So, Chromium-based browsers offer a feature in their dev panel called
-[Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/). In effect,
-this is a tool that enables a developer to assess the quality of their website
-based on some important metrics (a11y, performance) and some not so important
-ones (like the dreaded SEO). I don't like using Google-related tools very much,
-but out of curiosity I did decide to check how my site was doing.
-
-Accessibility and (_shudder_) SEO were great, but to my surprise, the
-performance score was a disastrous 54 out of 100. To make matters worse,
-Lighthouse had calculated that my home page took on average **7 seconds** to
-load!
-
-This is really bad, especially since it was literally just a couple of pictures
-and some text, so I checked what its recommendations were and followed them. I
-managed to get the score up to around 70 or 80, but still the website felt
-really sluggish.
-
-It was at this point that I came to the realisation that my efforts to optimise
-the site in its current form were pointless, as the whole design was very
-bloated (with lots of images everywhere).
-
-Thankfully, I had come across some new communities at the time which helped
-provide inspiration for a new design!
-
-### Smolnet, gopher and tildes
-
-If you've read my previous posts, you'll know that I am a member of SDF, a
-public access Unix system. If you haven't, [do it now](/2023/07/11/enter-the-fediverse)!!!
-
-<!-- TODO: finish this article !-->
\ No newline at end of file
diff --git a/blog.html b/blog.html
index a2c477a..e064529 100644
--- a/blog.html
+++ b/blog.html
@@ -4,92 +4,58 @@ title: Blog
 permalink: /blog/
 ---
 
-<a href="/"><p>⟸ Back to homepage</p></a>
+<a href="/">
+  <p>⟸ Back to homepage</p>
+</a>
 <h1>Blog</h1>
+<a href="/feed.xml">
+  <p>Click here for RSS feed</p>
+</a>
 <script type="text/javascript" src="../mentions.js"></script>
 
-{% for post in site.posts %}
-<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
-<p>
-  <svg
-    alt="date published"
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    fill="gray"
-    class="bi bi-calendar-fill"
-    viewBox="0 0 16 16"
-  >
-    <path
-      d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z"
-    />
-  </svg>
-  <em style="color: gray; padding-right: 1em"
-    >{{post.date | date: "%-d %B %Y"}}</em
-  >
-  <svg
-    alt="reading time"
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    fill="gray"
-    class="bi bi-stopwatch-fill"
-    viewBox="0 0 16 16"
-  >
-    <path
-      d="M6.5 0a.5.5 0 0 0 0 1H7v1.07A7.001 7.001 0 0 0 8 16a7 7 0 0 0 5.29-11.584.531.531 0 0 0 .013-.012l.354-.354.353.354a.5.5 0 1 0 .707-.707l-1.414-1.415a.5.5 0 1 0-.707.707l.354.354-.354.354a.717.717 0 0 0-.012.012A6.973 6.973 0 0 0 9 2.071V1h.5a.5.5 0 0 0 0-1h-3zm2 5.6V9a.5.5 0 0 1-.5.5H4.5a.5.5 0 0 1 0-1h3V5.6a.5.5 0 1 1 1 0z"
-    />
-  </svg>
-  {% assign time = post.content | number_of_words: "auto" | divided_by: 238 %}
-  {% if time == 0 %}
-  <em style="color: gray; padding-right: 1em">Less than a minute</em>
-  {% elsif time == 1 %}
-  <em style="color: gray; padding-right: 1em">{{time}} minute</em>
-  {% else %}
-  <em style="color: gray; padding-right: 1em">{{time}} minutes</em>
-  {% endif %}
-  <svg
-    alt="interactions"
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    fill="gray"
-    class="bi bi-chat-right-text-fill"
-    viewBox="0 0 16 16"
-  >
-    <path
-      d="M16 2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h9.586a1 1 0 0 1 .707.293l2.853 2.853a.5.5 0 0 0 .854-.353V2zM3.5 3h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1zm0 2.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1zm0 2.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1z"
-    />
-  </svg>
-  <a
-    style="text-decoration: none"
-    href="https://webmention.io/api/mentions.html?token=LBBk4aar_MPltm9VG8bQTQ"
-    ><em style="color: gray" id="interactions"
-      ><span
-        data-webmention-count
-        data-url="https://www.mounderfod.online{{post.url | relative_url}}"
-      ></span> </em
-  ></a>
-</p>
-<p>{{ post.excerpt | truncatewords: 50 }}</p>
-<p>
-  <svg
-    alt="tags"
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    fill="gray"
-    class="bi bi-tag-fill"
-    viewBox="0 0 16 16"
-  >
-    <path
-      d="M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"
-    />
-  </svg>
-  <em style="color: gray">{{post.tags | join: ", "}}</em>
-</p>
-{% endfor %}
+<div class="posts">
 
-<a href="/feed.xml" style="text-align: center"
-  ><p>Click here for RSS feed</p></a
->
+  {% for post in site.posts %}
+  <div style="column-span: 1; break-inside: avoid;">
+    <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
+    <p>
+      <svg alt="date published" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray"
+        class="bi bi-calendar-fill" viewBox="0 0 16 16">
+        <path
+          d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5z" />
+      </svg>
+      <em style="color: gray; padding-right: 1em">{{post.date | date: "%-d %B %Y"}}</em>
+      <svg alt="reading time" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray"
+        class="bi bi-stopwatch-fill" viewBox="0 0 16 16">
+        <path
+          d="M6.5 0a.5.5 0 0 0 0 1H7v1.07A7.001 7.001 0 0 0 8 16a7 7 0 0 0 5.29-11.584.531.531 0 0 0 .013-.012l.354-.354.353.354a.5.5 0 1 0 .707-.707l-1.414-1.415a.5.5 0 1 0-.707.707l.354.354-.354.354a.717.717 0 0 0-.012.012A6.973 6.973 0 0 0 9 2.071V1h.5a.5.5 0 0 0 0-1h-3zm2 5.6V9a.5.5 0 0 1-.5.5H4.5a.5.5 0 0 1 0-1h3V5.6a.5.5 0 1 1 1 0z" />
+      </svg>
+      {% assign time = post.content | number_of_words: "auto" | divided_by: 238 %}
+      {% if time == 0 %}
+      <em style="color: gray; padding-right: 1em">Less than a minute</em>
+      {% elsif time == 1 %}
+      <em style="color: gray; padding-right: 1em">{{time}} minute</em>
+      {% else %}
+      <em style="color: gray; padding-right: 1em">{{time}} minutes</em>
+      {% endif %}
+      <svg alt="interactions" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray"
+        class="bi bi-chat-right-text-fill" viewBox="0 0 16 16">
+        <path
+          d="M16 2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h9.586a1 1 0 0 1 .707.293l2.853 2.853a.5.5 0 0 0 .854-.353V2zM3.5 3h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1zm0 2.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1 0-1zm0 2.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1z" />
+      </svg>
+      <a style="text-decoration: none" href="https://webmention.io/api/mentions.html?token=LBBk4aar_MPltm9VG8bQTQ"><em
+          style="color: gray" id="interactions"><span data-webmention-count
+            data-url="https://www.mounderfod.online{{post.url | relative_url}}"></span> </em></a>
+    </p>
+    <p>{{ post.excerpt | truncatewords: 50 }}</p>
+    <p>
+      <svg alt="tags" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gray" class="bi bi-tag-fill"
+        viewBox="0 0 16 16">
+        <path
+          d="M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zm4 3.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
+      </svg>
+      <em style="color: gray">{{post.tags | join: ", "}}</em>
+    </p>
+  </div>
+  {% endfor %}
+</div>
\ No newline at end of file