Clean up posts and the styles throughout the webpage

author: Matt Kosarek <matt.kosarek@canonical.com> 2026-02-18 16:50:30 -0500
committer: Matt Kosarek <matt.kosarek@canonical.com> 2026-02-18 16:50:30 -0500
commit: 2ef049102f6824a6ab6ae99ee87c115f7608707e (patch)
tree: d8ca1b0a356d57c5b9cfaf57820e3e48f83f8a82
parent: b4e8ae9731eca175cd4e6e75a20da87ff86eb91f (diff)
14 files changed, 193 insertions, 281 deletions
diff --git a/_posts/sitemap.org b/_posts/sitemap.org
index 202c055..df1b240 100644
--- a/_posts/sitemap.org
+++ b/_posts/sitemap.org
@@ -1,6 +1,6 @@
-#+TITLE: Matthew's Blog Posts
+#+TITLE: 
 
-#+DATE: 2025-12-29 at 13:03
+#+DATE: 2026-02-18 at 16:40
 
 #+HTML_LINK_HOME: /
 
diff --git a/index.css b/index.css
index c07ffa8..4800826 100644
--- a/index.css
+++ b/index.css
@@ -1,6 +1,5 @@
 body {
-  width: 60vw;
-  height: 100vh;
+  width: 50vw;
   font-family: "Noto Sans", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
   font-size: 14px;
   background-color: transparent;
@@ -229,7 +228,7 @@ only screen and (max-width:1440px) {
     }
 
     body {
-        width: 90vw !important;
+        width: 70vw !important;
     }
 }
 
diff --git a/index.html b/index.html
index 23af4bc..d632f3b 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,10 @@
     <meta charset="utf-8">
     <link rel="stylesheet" href="/index.css">
     <title>Matthew Kosarek</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href='https://fonts.googleapis.com/css?family=Noto Sans' rel='stylesheet'>
+    <link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Dancing+Script:wght@400..700&display=swap" rel="stylesheet">
     <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
     <meta name="description" content="The personal website of Matthew kosarek">
   </head>
diff --git a/posts/dec_29_2025.html b/posts/dec_29_2025.html
index 9e4ee07..60fb4b1 100644
--- a/posts/dec_29_2025.html
+++ b/posts/dec_29_2025.html
@@ -11,32 +11,35 @@
 <link rel="stylesheet" href="/index.css" />
 <link rel="stylesheet" href="/posts/post.css" />
 <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
-<script src='/posts/post.js'></script>
 </head>
 <body>
-<div id="org-div-home-and-up">
- <a accesskey="h" href="/posts/sitemap.html"> UP </a>
- <a accesskey="H" href="/"> HOME </a>
-</div><div id="preamble" class="status">
+<header>
+  <nav>
+    <ul>
+      <li><a href='/'>&#127969; Home</a></li>
+      <li><a href='/resume.html'>&#128216; CV</a></li>
+      <li><a href='/posts/sitemap.html'>&#128221; Posts</a></li>
+    </ul>
+  </nav>
+</header><div id="preamble" class="status">
 
   <div class="org-article-title">
     <h1>Update December 29, 2025</h1>
-    <span>Last modified: 2025-12-29 Mon 10:27</span>
-    <span><a href="/posts/feed.xml">RSS Feed</a></span>
+    <a href="/posts/feed.xml">RSS Feed</a>
   </div>
 </div>
 <div id="content" class="content">
-<div id="outline-container-orgbac5ed0" class="outline-2">
-<h2 id="orgbac5ed0">What have I been up to?</h2>
-<div class="outline-text-2" id="text-orgbac5ed0">
+<div id="outline-container-orgd60e6cd" class="outline-2">
+<h2 id="orgd60e6cd">What have I been up to?</h2>
+<div class="outline-text-2" id="text-orgd60e6cd">
 <p>
 2025 has been one busy year for me! I feel as though I've been working on a dozen things at once and have spent much of my working (and personal) days productively. Miracle finally feels like it's getting somewhere fast, the Flutter multi-window work is landing at a solid pace, and Mir is feeling like a truly solid option for Wayland compositor development. I will refrain from speaking too much on the Flutter and Mir work in this post, as those are best left in the hands of Canonical.
 </p>
 </div>
 </div>
-<div id="outline-container-orgb1a98f7" class="outline-2">
-<h2 id="orgb1a98f7">Miracle Update</h2>
-<div class="outline-text-2" id="text-orgb1a98f7">
+<div id="outline-container-org4fd4b42" class="outline-2">
+<h2 id="org4fd4b42">Miracle Update</h2>
+<div class="outline-text-2" id="text-org4fd4b42">
 <p>
 Miracle has come a long way this past year. I now feel entirely confident using it as my daily driver, minus a few hiccups that I encounter in-between releases. A lot of great things are cooking for 2026 too, 
 </p>
@@ -105,9 +108,9 @@ v0.9.0 of Miracle will probably be a long time in the making. My estimate is tha
 </p>
 </div>
 </div>
-<div id="outline-container-org5047f79" class="outline-2">
-<h2 id="org5047f79">Conclusion</h2>
-<div class="outline-text-2" id="text-org5047f79">
+<div id="outline-container-org3d3a5b0" class="outline-2">
+<h2 id="org3d3a5b0">Conclusion</h2>
+<div class="outline-text-2" id="text-org3d3a5b0">
 <p>
 2025 has been a whirlwind of a year, and I'm sure that 2026 won't slow down at all for me. A lot of the long term projects that I've been working on are finally coming together, and I feel as though I am on the cusp of making software that I'm truly proud of. On top of that, I am engaged! What a time to be alive :) I hope you all have a lovely New Year with your friends, family, cats, dogs, and everything else.
 </p>
diff --git a/posts/feed.xml b/posts/feed.xml
index affbb37..b0a5397 100644
--- a/posts/feed.xml
+++ b/posts/feed.xml
@@ -5,7 +5,7 @@
     <link>https://matthewkosarek.xyz/</link>
     <description>The RSS feed for Matthew Kosarek's Blog</description>
     <language>en-us</language>
-    <lastBuildDate>Mon, 29 December 2025 13:03:00 -0400</lastBuildDate>
+    <lastBuildDate>Wed, 18 February 2026 16:40:00 -0400</lastBuildDate>
 
     <item>
       <title>Update December 29, 2025</title>
diff --git a/posts/hello.html b/posts/hello.html
index 992e0c7..c8044d9 100644
--- a/posts/hello.html
+++ b/posts/hello.html
@@ -11,24 +11,27 @@
 <link rel="stylesheet" href="/index.css" />
 <link rel="stylesheet" href="/posts/post.css" />
 <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
-<script src='/posts/post.js'></script>
 </head>
 <body>
-<div id="org-div-home-and-up">
- <a accesskey="h" href="/posts/sitemap.html"> UP </a>
- <a accesskey="H" href="/"> HOME </a>
-</div><div id="preamble" class="status">
+<header>
+  <nav>
+    <ul>
+      <li><a href='/'>&#127969; Home</a></li>
+      <li><a href='/resume.html'>&#128216; CV</a></li>
+      <li><a href='/posts/sitemap.html'>&#128221; Posts</a></li>
+    </ul>
+  </nav>
+</header><div id="preamble" class="status">
 
   <div class="org-article-title">
     <h1>Hello, Org</h1>
-    <span>Last modified: 2023-06-20 Tue 11:45</span>
-    <span><a href="/posts/feed.xml">RSS Feed</a></span>
+    <a href="/posts/feed.xml">RSS Feed</a>
   </div>
 </div>
 <div id="content" class="content">
-<div id="outline-container-orgd5cccc4" class="outline-2">
-<h2 id="orgd5cccc4">TLDR</h2>
-<div class="outline-text-2" id="text-orgd5cccc4">
+<div id="outline-container-org2b1e1ee" class="outline-2">
+<h2 id="org2b1e1ee">TLDR</h2>
+<div class="outline-text-2" id="text-org2b1e1ee">
 <ul class="org-ul">
 <li>Create a new folder</li>
 <li>Put <a href="https://raw.githubusercontent.com/mattkae/matthewkosarek-xyz/master/index.css">index.css</a>, <a href="https://raw.githubusercontent.com/mattkae/matthewkosarek-xyz/master/publish.el">publish.el</a>, and <a href="https://github.com/mattkae/matthewkosarek-xyz/blob/master/publish.sh">publish.sh</a> in the folder</li>
@@ -42,9 +45,9 @@
 </ul>
 </div>
 </div>
-<div id="outline-container-org61c4348" class="outline-2">
-<h2 id="org61c4348">Introduction</h2>
-<div class="outline-text-2" id="text-org61c4348">
+<div id="outline-container-org6971d65" class="outline-2">
+<h2 id="org6971d65">Introduction</h2>
+<div class="outline-text-2" id="text-org6971d65">
 <p>
 I've recently fallen in love with <code>org-mode</code>, specifically when I use it with <a href="https://www.orgroam.com/">org-roam</a>. I find the whole workflow of creating, tagging, and - later on - searching for information on my computer to be very elegant. On top of that, now that I have the time, I want to begin writing blog posts to better work out my thoughts. With both of these things in mind, I am again turning to the universal tool for human prospering: <code>org-mode</code>. This time, I want to see how it can help me turn a simple org file into a blog post on my website. My requirements are:
 </p>
@@ -67,9 +70,9 @@ And that's pretty much it for now. Without further ado, let's jump into getting
 </p>
 </div>
 </div>
-<div id="outline-container-org8795819" class="outline-2">
-<h2 id="org8795819">Basic HTML File</h2>
-<div class="outline-text-2" id="text-org8795819">
+<div id="outline-container-org535b5ee" class="outline-2">
+<h2 id="org535b5ee">Basic HTML File</h2>
+<div class="outline-text-2" id="text-org535b5ee">
 <p>
 As a pilot, we are going to use this org file that I am currently writing (<code>hello.org</code>) as our guinea pig. The goal is to have this org file be our very first blog post.
 </p>
@@ -109,9 +112,9 @@ We then do a <code>chmod +x publish.sh</code> to make it an executable and run i
 </p>
 </div>
 </div>
-<div id="outline-container-org2f52ef7" class="outline-2">
-<h2 id="org2f52ef7">Disabling features that we don't want</h2>
-<div class="outline-text-2" id="text-org2f52ef7">
+<div id="outline-container-org1a375b8" class="outline-2">
+<h2 id="org1a375b8">Disabling features that we don't want</h2>
+<div class="outline-text-2" id="text-org1a375b8">
 <p>
 The next thing will be to remove some of the generated items that I didn't ask for, namely the table of contents, author, section numbers, creation time stamp, and the validation link.
 </p>
@@ -140,9 +143,9 @@ The next thing will be to remove some of the generated items that I didn't ask f
 </div>
 </div>
 </div>
-<div id="outline-container-org809ec6b" class="outline-2">
-<h2 id="org809ec6b">Styling &amp; Code Highlighting</h2>
-<div class="outline-text-2" id="text-org809ec6b">
+<div id="outline-container-orga60e1a1" class="outline-2">
+<h2 id="orga60e1a1">Styling &amp; Code Highlighting</h2>
+<div class="outline-text-2" id="text-orga60e1a1">
 <p>
 Next thing on our list is custom styling. This can be achieved by first installing the <code>htmlize</code> package from <code>melpa</code> / <code>elpa</code>.  The EmacsWiki describes this as "a package for exporting the contents of an Emacs buffer to HTML while respecting display properties such as colors, fonts, underlining, invisibility, etc" (<a href="https://www.emacswiki.org/emacs/Htmlize">reference</a>). If used "out-of-the-box", the buffer will be exported to HTML with all of the styles inlined (e.g. if you underline something in your org file, you will generate a <code>&lt;span style="text-decoration: underline"&gt;...&lt;/span&gt;</code>).  However, we are more interested in styling everything by ourselves: we don't want <code>htmlize</code> making assumptions about what underlining means to us! Luckily, <code>htmlize</code> gives us the option to export with class names instead of inline styles so that we can specify each style for ourselves.
 </p>
@@ -312,9 +315,9 @@ If we run the publish again, we can see that we have full styling on our code sn
 </p>
 </div>
 </div>
-<div id="outline-container-org40ba39e" class="outline-2">
-<h2 id="org40ba39e">Images</h2>
-<div class="outline-text-2" id="text-org40ba39e">
+<div id="outline-container-org534b88d" class="outline-2">
+<h2 id="org534b88d">Images</h2>
+<div class="outline-text-2" id="text-org534b88d">
 <p>
 Our first two criteria have been met! Next on the list is solving images. As an example, let's use this <a href="file:///_posts/assets/squirrel.jpg">squirrel image</a> that I found online with an open source license. The ideal situation would be:
 </p>
@@ -359,16 +362,16 @@ So what's the fix here? Well, we have two options, but I am going to go with the
 That's all there is to it! There are simpler ways as well, but that should do it:
 </p>
 
-<div id="org11fc996" class="figure">
+<div id="orgbd990b6" class="figure">
 <p><img src="/_posts/assets/squirrel.jpg" alt="squirrel.jpg" width="300" />
 </p>
 <p><span class="figure-number">Figure 1: </span>A Cute Squirrel</p>
 </div>
 </div>
 </div>
-<div id="outline-container-orgbf45d8f" class="outline-2">
-<h2 id="orgbf45d8f">Creation Date</h2>
-<div class="outline-text-2" id="text-orgbf45d8f">
+<div id="outline-container-org27f5dc6" class="outline-2">
+<h2 id="org27f5dc6">Creation Date</h2>
+<div class="outline-text-2" id="text-org27f5dc6">
 <p>
 Let's add the creation date below the title next. To start, we will modify the publish command to remove the title (<code>:with-title nil</code>) and, in its place, show a preamble bit of HTML that contains a formatted <code>div</code> with the title and the "last modified" span.z
 </p>
@@ -427,9 +430,9 @@ Note that the downside of this is that the created date will change whenever you
 </p>
 </div>
 </div>
-<div id="outline-container-org4838556" class="outline-2">
-<h2 id="org4838556">Generating the Directory</h2>
-<div class="outline-text-2" id="text-org4838556">
+<div id="outline-container-org77049f2" class="outline-2">
+<h2 id="org77049f2">Generating the Directory</h2>
+<div class="outline-text-2" id="text-org77049f2">
 <p>
 For every org file in my <code>_posts</code> folder, I would like to create a link to the generated HTML file at the <code>/posts.html</code> page of my website. You can think of this as the "directory" of all posts. My criteria is:
 </p>
@@ -489,9 +492,9 @@ If you open the <code>sitemap.html</code> file in your browser, you will see a b
 From here, you may customize it however you like.  The following are my customizations.
 </p>
 </div>
-<div id="outline-container-org033bdd5" class="outline-3">
-<h3 id="org033bdd5">Sitemap Title</h3>
-<div class="outline-text-3" id="text-org033bdd5">
+<div id="outline-container-org624c8ab" class="outline-3">
+<h3 id="org624c8ab">Sitemap Title</h3>
+<div class="outline-text-3" id="text-org624c8ab">
 <p>
 I changed the title to "Matthew's Blog Posts".
 </p>
@@ -513,9 +516,9 @@ I changed the title to "Matthew's Blog Posts".
 </div>
 </div>
 </div>
-<div id="outline-container-orgf3eb8a5" class="outline-3">
-<h3 id="orgf3eb8a5">Format blog entries in the list</h3>
-<div class="outline-text-3" id="text-orgf3eb8a5">
+<div id="outline-container-orge3da018" class="outline-3">
+<h3 id="orge3da018">Format blog entries in the list</h3>
+<div class="outline-text-3" id="text-orge3da018">
 <p>
 I like to include the creation date on the blog posts. To do this, we can use <code>org-publish-find-property</code> to find the date property of the org file. Afterward, we can format a string that  includes our formatted timestamp and the <code>org-publish-sitemap-default-entry</code>, which is just a link with the title of the post.
 </p>
@@ -536,9 +539,9 @@ I like to include the creation date on the blog posts. To do this, we can use <c
 </div>
 </div>
 </div>
-<div id="outline-container-org7dc2312" class="outline-2">
-<h2 id="org7dc2312">Tags &amp; Filtering</h2>
-<div class="outline-text-2" id="text-org7dc2312">
+<div id="outline-container-org25166ff" class="outline-2">
+<h2 id="org25166ff">Tags &amp; Filtering</h2>
+<div class="outline-text-2" id="text-org25166ff">
 <p>
 I use <a href="https://www.orgroam.com/">Org-roam</a> for all of my note-taking and, in the next blog post, I plan to demonstrate how I will hook up my Org-roam note-taking workflow to my blogging. In the meantime, just know that we can add tags to the top of our org files like this:
 </p>
@@ -758,9 +761,9 @@ Finally, let's append the following to <code>posts/posts.css</code> so that our
 </div>
 </div>
 </div>
-<div id="outline-container-org9f7bdd1" class="outline-2">
-<h2 id="org9f7bdd1">Conclusion</h2>
-<div class="outline-text-2" id="text-org9f7bdd1">
+<div id="outline-container-org2fdd91d" class="outline-2">
+<h2 id="org2fdd91d">Conclusion</h2>
+<div class="outline-text-2" id="text-org2fdd91d">
 <p>
 There are many more customizations that I plan to do on this system in the future, but I plan to leave this for now so that I can actually get to some blogging. I will proofread and fix my mistakes as time goes on, but this should be a good jumping off point for anyone interested in using org for their own blogging system.
 </p>
diff --git a/posts/jul_28_2025.html b/posts/jul_28_2025.html
index 304d202..5df5a8e 100644
--- a/posts/jul_28_2025.html
+++ b/posts/jul_28_2025.html
@@ -11,24 +11,27 @@
 <link rel="stylesheet" href="/index.css" />
 <link rel="stylesheet" href="/posts/post.css" />
 <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
-<script src='/posts/post.js'></script>
 </head>
 <body>
-<div id="org-div-home-and-up">
- <a accesskey="h" href="/posts/sitemap.html"> UP </a>
- <a accesskey="H" href="/"> HOME </a>
-</div><div id="preamble" class="status">
+<header>
+  <nav>
+    <ul>
+      <li><a href='/'>&#127969; Home</a></li>
+      <li><a href='/resume.html'>&#128216; CV</a></li>
+      <li><a href='/posts/sitemap.html'>&#128221; Posts</a></li>
+    </ul>
+  </nav>
+</header><div id="preamble" class="status">
 
   <div class="org-article-title">
     <h1>Update July 28, 2025</h1>
-    <span>Last modified: 2025-07-28 Mon 17:30</span>
-    <span><a href="/posts/feed.xml">RSS Feed</a></span>
+    <a href="/posts/feed.xml">RSS Feed</a>
   </div>
 </div>
 <div id="content" class="content">
-<div id="outline-container-org063974c" class="outline-2">
-<h2 id="org063974c">What have I been up to?</h2>
-<div class="outline-text-2" id="text-org063974c">
+<div id="outline-container-orgd54f587" class="outline-2">
+<h2 id="orgd54f587">What have I been up to?</h2>
+<div class="outline-text-2" id="text-orgd54f587">
 <p>
 Whoops! I missed this month's update by a <i>long</i> shot, but I still want to get it out there before the end of the month.
 </p>
diff --git a/posts/june_08_2025.html b/posts/june_08_2025.html
index 4a69b4c..1252860 100644
--- a/posts/june_08_2025.html
+++ b/posts/june_08_2025.html
@@ -11,24 +11,27 @@
 <link rel="stylesheet" href="/index.css" />
 <link rel="stylesheet" href="/posts/post.css" />
 <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
-<script src='/posts/post.js'></script>
 </head>
 <body>
-<div id="org-div-home-and-up">
- <a accesskey="h" href="/posts/sitemap.html"> UP </a>
- <a accesskey="H" href="/"> HOME </a>
-</div><div id="preamble" class="status">
+<header>
+  <nav>
+    <ul>
+      <li><a href='/'>&#127969; Home</a></li>
+      <li><a href='/resume.html'>&#128216; CV</a></li>
+      <li><a href='/posts/sitemap.html'>&#128221; Posts</a></li>
+    </ul>
+  </nav>
+</header><div id="preamble" class="status">
 
   <div class="org-article-title">
     <h1>Update June 08, 2025</h1>
-    <span>Last modified: 2025-06-08 Sun 15:30</span>
-    <span><a href="/posts/feed.xml">RSS Feed</a></span>
+    <a href="/posts/feed.xml">RSS Feed</a>
   </div>
 </div>
 <div id="content" class="content">
-<div id="outline-container-org7328e60" class="outline-2">
-<h2 id="org7328e60">What have I been up to?</h2>
-<div class="outline-text-2" id="text-org7328e60">
+<div id="outline-container-org91862ab" class="outline-2">
+<h2 id="org91862ab">What have I been up to?</h2>
+<div class="outline-text-2" id="text-org91862ab">
 <p>
 Another month has gone by, so I guess it's time to see what I've been up to.
 </p>
diff --git a/posts/may_06_2025.html b/posts/may_06_2025.html
index 6e4665e..d992aca 100644
--- a/posts/may_06_2025.html
+++ b/posts/may_06_2025.html
@@ -11,24 +11,27 @@
 <link rel="stylesheet" href="/index.css" />
 <link rel="stylesheet" href="/posts/post.css" />
 <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
-<script src='/posts/post.js'></script>
 </head>
 <body>
-<div id="org-div-home-and-up">
- <a accesskey="h" href="/posts/sitemap.html"> UP </a>
- <a accesskey="H" href="/"> HOME </a>
-</div><div id="preamble" class="status">
+<header>
+  <nav>
+    <ul>
+      <li><a href='/'>&#127969; Home</a></li>
+      <li><a href='/resume.html'>&#128216; CV</a></li>
+      <li><a href='/posts/sitemap.html'>&#128221; Posts</a></li>
+    </ul>
+  </nav>
+</header><div id="preamble" class="status">
 
   <div class="org-article-title">
     <h1>Update May 06, 2025</h1>
-    <span>Last modified: 2025-05-06 Tue 17:00</span>
-    <span><a href="/posts/feed.xml">RSS Feed</a></span>
+    <a href="/posts/feed.xml">RSS Feed</a>
   </div>
 </div>
 <div id="content" class="content">
-<div id="outline-container-org77ab60c" class="outline-2">
-<h2 id="org77ab60c">What have I been up to?</h2>
-<div class="outline-text-2" id="text-org77ab60c">
+<div id="outline-container-org058b5f7" class="outline-2">
+<h2 id="org058b5f7">What have I been up to?</h2>
+<div class="outline-text-2" id="text-org058b5f7">
 <p>
 I've been meaning to do these little blog-post type updates for a while, and I figured now is as good a time as any. So let's start :)
 </p>
diff --git a/posts/post.css b/posts/post.css
index 1867311..cadc228 100644
--- a/posts/post.css
+++ b/posts/post.css
@@ -15,6 +15,18 @@ code {
     text-decoration: underline;
 }
 
+.org-article-title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.org-article-title h1 {
+    margin: 0;
+   font-family: "Dancing Script", cursive;
+}
+
+
 /* Taken from: https://emacs.stackexchange.com/questions/7629/the-syntax-highlight-and-indentation-of-source-code-block-in-exported-html-file */
 pre span.org-builtin                     {color:#006FE0;font-weight:bold;}
 pre span.org-string                      {color:#008000;}
@@ -26,7 +38,7 @@ pre span.org-preprocessor                {color:#808080;font-weight:bold;}
 pre span.org-constant                    {color:#D0372D;}
 pre span.org-comment-delimiter           {color:#8D8D84;}
 pre span.org-comment                     {color:#8D8D84;font-style:italic}
-1pre span.org-outshine-level-1           {color:#8D8D84;font-style:italic}
+pre span.org-outshine-level-1            {color:#8D8D84;font-style:italic}
 pre span.org-outshine-level-2            {color:#8D8D84;font-style:italic}
 pre span.org-outshine-level-3            {color:#8D8D84;font-style:italic}
 pre span.org-outshine-level-4            {color:#8D8D84;font-style:italic}
@@ -49,7 +61,7 @@ pre span.org-css-selector                {color:#0000FF;}
 pre span.org-css-property                {color:#00AA00;}
 
 #content {
-    padding-bottom: 50vh;
+    padding-bottom: 10vh;
 }
 
 .figure p {
diff --git a/posts/post.js b/posts/post.js
deleted file mode 100644
index 233739f..0000000
--- a/posts/post.js
+++ /dev/null
@@ -1,84 +0,0 @@
-
-function main() {
-
-  // Gather the used set of tags
-  const tagSet = new Set();
-  const postList = [];
-  const tagContainers = document.getElementsByClassName('sitemap_tag');
-  for (let index = 0; index < tagContainers.length; index++) {
-    const container = tagContainers[index];
-    const pContainer = container.children[0];
-    if (!pContainer) {
-      continue;
-    }
-
-    const tagText = pContainer.textContent.trim();
-    const tagList = tagText.split(',').map(tag => tag.trim());
-
-    // Replace the text content with styled tag badges
-    pContainer.innerHTML = '';
-    tagList.forEach(tag => {
-      if (tag) {
-        tagSet.add(tag);
-        const tagBadge = document.createElement('span');
-        tagBadge.className = 'post-tag';
-        tagBadge.textContent = tag;
-        pContainer.appendChild(tagBadge);
-      }
-    });
-
-    postList.push({
-      container: container.parentElement,
-      tagList: tagList,
-      enabled: tagList.length
-    });
-  }
-
-  // Create the tag container
-  const contentContainer = document.getElementById('content');
-  const tagContainer = document.createElement('div');
-  tagContainer.id = 'tag-filter-container';
-  contentContainer.before(tagContainer);
-
-  for (const tag of tagSet) {
-    const tagElement = document.createElement('div');
-    tagElement.className = "tag-filter-item";
-    const tagElementLabel = document.createElement('span');
-    tagElementLabel.innerHTML = tag;
-    tagElement.append(tagElementLabel);
-    tagContainer.append(tagElement);
-
-    // Whenever a tag is clicked, execute the filtering behavior
-    tagElement.onclick = function() {
-      if (tagElement.classList.contains('disabled')) {
-        tagElement.classList.remove('disabled');
-
-        // Filter
-        postList.forEach(post => {
-          if (post.tagList.includes(tag)) {
-            post.enabled++;
-
-            if (post.enabled) {
-              post.container.style.display = 'list-item';
-            }
-          }
-        });
-      }
-      else {
-        tagElement.classList.add('disabled');
-
-        // Filter
-        postList.forEach(post => {
-          if (post.tagList.includes(tag)) {
-            post.enabled--;
-            if (!post.enabled) {
-              post.container.style.display = 'none';
-            }
-          }
-        });
-      }
-    };
-  }
-}
-
-window.onload = main;
diff --git a/posts/sitemap.css b/posts/sitemap.css
index b2de932..0bd4125 100644
--- a/posts/sitemap.css
+++ b/posts/sitemap.css
@@ -1,65 +1,54 @@
-/* Sitemap-specific items */
-.sitemap_tag {
-    display: block;
-}
-
-.sitemap_tag p {
-    margin: 0;
+.sitemap_tags {
     display: flex;
-    align-items: center;
-    flex-wrap: wrap;
+    flex-direction: row;
     gap: 0.5rem;
-    font-size: 0.85rem;
-}
-
-.sitemap_tag p::before {
-    content: '🏷️';
-    font-size: 1rem;
+    align-items: center;
+    margin-left: auto;
 }
 
-/* Individual tag badges */
-.post-tag {
-    display: inline-block;
+.sitemap_tag {
     padding: 0.25rem 0.75rem;
     background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
     color: #1976d2;
-    border-radius: 12px;
-    font-size: 0.8rem;
+    border-radius: 4px;
+    font-size: 0.7rem;
     font-weight: 500;
     border: 1px solid #90caf9;
 }
 
+.sitemap_tag p {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+}
+
 .org-ul {
     list-style: none;
     padding: 0;
 }
 
 .org-ul > li {
-    background: #f9f9f9;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    padding: 1.5rem;
-    margin-bottom: 1rem;
-    transition: box-shadow 0.2s ease, transform 0.2s ease;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.25rem;
     position: relative;
-    padding-bottom: 2.5rem;
-}
-
-.org-ul > li:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    transform: translateY(-2px);
+    margin-bottom: 0.25rem;
 }
 
 .org-ul > li > p {
     margin: 0;
-    font-size: 1.1rem;
+    font-size: 0.5rem;
 }
 
 .org-ul > li > p > a {
     color: #0066cc;
     text-decoration: none;
     font-weight: 600;
-    font-size: 1.25rem;
+    font-size: 1rem;
 }
 
 .org-ul > li > p > a:hover {
@@ -73,14 +62,8 @@
 }
 
 .org-article-title {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    margin-bottom: 2rem;
-}
-
-.org-article-title > span:last-child {
-    font-size: 0.95rem;
+    width: 100%;
+    text-align: right;   
 }
 
 #tag-filter-container {
@@ -88,37 +71,28 @@
     flex-direction: row;
     flex-wrap: wrap;
     gap: 0.75rem;
-    margin-top: 1.5rem;
-    margin-bottom: 2rem;
 }
 
 .tag-filter-item {
     display: flex;
     flex-direction: row;
     align-items: center;
-    padding: 0.5rem 1rem;
-    border-radius: 4px;
+    padding: 0.35rem;
+    border-radius: 2px;
     justify-content: center;
-    column-gap: 0.75rem;
-    background: linear-gradient(135deg, #667eea 0%, darkviolet 100%);
+    font-style: italic;
+    background: linear-gradient(135deg, purple 0%, darkviolet 100%);
     color: white;
-    font-weight: 600;
-    font-size: 0.9rem;
+    font-size: 0.75rem;
     letter-spacing: 0.3px;
-    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
     transition: all 0.3s ease;
 }
 
 .tag-filter-item:hover {
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+    background: linear-gradient(135deg, gray 0%, darkviolet 100%);
     cursor: pointer;
 }
 
-.tag-filter-item button:before {
-    content: '\00d7';
-    line-height: 1;
-}
-
 .tag-filter-item.disabled {
     background: linear-gradient(135deg, #e0e0e0 0%, #c0c0c0 100%);
     color: #666;
@@ -132,30 +106,17 @@
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 }
 
-.tag-filter-item.disabled button {
-    background: rgba(0, 0, 0, 0.1);
-    color: #666;
-}
-
-.tag-filter-item.disabled button:before {
-    content: '+';
-    font-size: 1.1rem;
-}
-
 .post-date {
     position: absolute;
     bottom: 0.75rem;
     right: 1rem;
-    font-size: 0.85rem;
+    font-size: 0.75rem;
     color: #666;
     font-style: italic;
 }
 
 .sitemap_date {
-    position: absolute;
-    bottom: 0.75rem;
-    right: 1rem;
-    font-size: 0.85rem;
+    font-size: 0.8rem;
     color: #666;
     font-style: italic;
 }
diff --git a/posts/sitemap.html b/posts/sitemap.html
index 00ac911..458bacd 100644
--- a/posts/sitemap.html
+++ b/posts/sitemap.html
@@ -5,25 +5,28 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>Matthew's Blog Posts</title>
+<title>&lrm;</title>
 <meta name="generator" content="Org Mode" />
 
 <link rel="stylesheet" href="/index.css" />
 <link rel="stylesheet" href="/posts/post.css" />
 <link rel="shortcut icon" href="/favicon/favicon.ico" type="image/x-icon">
-<script src='/posts/post.js'></script>
 <link rel="stylesheet" href="/posts/sitemap.css" />
 </head>
 <body>
-<div id="org-div-home-and-up">
- <a accesskey="h" href="/"> UP </a>
- <a accesskey="H" href="/"> HOME </a>
-</div><div id="preamble" class="status">
+<header>
+  <nav>
+    <ul>
+      <li><a href='/'>&#127969; Home</a></li>
+      <li><a href='/resume.html'>&#128216; CV</a></li>
+      <li><a href='/posts/sitemap.html'>&#128221; Posts</a></li>
+    </ul>
+  </nav>
+</header><div id="preamble" class="status">
 
   <div class="org-article-title">
-    <h1>Matthew's Blog Posts</h1>
-    <span>Last modified: 2025-12-29 at 13:03</span>
-    <span><a href="/posts/feed.xml">RSS Feed</a></span>
+    <h1></h1>
+    <a href="/posts/feed.xml">RSS Feed</a>
   </div>
 </div>
 <div id="content" class="content">
@@ -31,13 +34,13 @@
 <li><p>
 <a href="dec_29_2025.html">Update December 29, 2025</a>
 </p>
-<div class="sitemap_date" id="orgd69e487">
+<div class="sitemap_date" id="orgd59923e">
 <p>
 December 29, 2025
 </p>
 
 </div>
-<div class="sitemap_tag" id="orgfc65be4">
+<div class="sitemap_tag" id="org380c91d">
 <p>
 update
 </p>
@@ -46,13 +49,13 @@ update
 <li><p>
 <a href="jul_28_2025.html">Update July 28, 2025</a>
 </p>
-<div class="sitemap_date" id="org4f11db1">
+<div class="sitemap_date" id="orgdc51ac5">
 <p>
 July 28, 2025
 </p>
 
 </div>
-<div class="sitemap_tag" id="org6e689d4">
+<div class="sitemap_tag" id="orga69a639">
 <p>
 update
 </p>
@@ -61,13 +64,13 @@ update
 <li><p>
 <a href="june_08_2025.html">Update June 08, 2025</a>
 </p>
-<div class="sitemap_date" id="org035bfd6">
+<div class="sitemap_date" id="orgf0d925e">
 <p>
 June 08, 2025
 </p>
 
 </div>
-<div class="sitemap_tag" id="org374d739">
+<div class="sitemap_tag" id="org8b3a774">
 <p>
 update
 </p>
@@ -76,13 +79,13 @@ update
 <li><p>
 <a href="may_06_2025.html">Update May 06, 2025</a>
 </p>
-<div class="sitemap_date" id="org5523abd">
+<div class="sitemap_date" id="orgdec61df">
 <p>
 May 06, 2025
 </p>
 
 </div>
-<div class="sitemap_tag" id="org2580b8e">
+<div class="sitemap_tag" id="orgbed6dea">
 <p>
 update
 </p>
@@ -91,13 +94,13 @@ update
 <li><p>
 <a href="hello.html">Hello, Org</a>
 </p>
-<div class="sitemap_date" id="orgb561eb9">
+<div class="sitemap_date" id="org9aab38b">
 <p>
 June 20, 2023
 </p>
 
 </div>
-<div class="sitemap_tag" id="org57d4497">
+<div class="sitemap_tag" id="org857fcd9">
 <p>
 technology,home
 </p>
diff --git a/publish.el b/publish.el
index 537d5e1..3502ac4 100644
--- a/publish.el
+++ b/publish.el
@@ -48,13 +48,12 @@
              :html-preamble-format '(("en" "
   <div class=\"org-article-title\">
     <h1>%t</h1>
-    <span>Last modified: %d</span>
-    <span><a href=\"/posts/feed.xml\">RSS Feed</a></span>
+    <a href=\"/posts/feed.xml\">RSS Feed</a>
   </div>
 "))
              :auto-sitemap t
              :sitemap-sort-files 'anti-chronologically
-             :sitemap-title "Matthew's Blog Posts"
+             :sitemap-title ""
              :sitemap-format-entry (lambda (entry style project) (get-org-file-title entry style project))
              :sitemap-function (lambda (title list) (my-sitemap-function title list))
              )))
@@ -77,16 +76,20 @@
 <link rel=\"stylesheet\" href=\"/index.css\" />
 <link rel=\"stylesheet\" href=\"/posts/post.css\" />
 <link rel=\"shortcut icon\" href=\"/favicon/favicon.ico\" type=\"image/x-icon\">
-<script src='/posts/post.js'></script>
 "
       org-html-inline-images t
       org-html-link-home "/"
       org-html-link-up "/posts/sitemap.html"
       org-html-html5-fancy t
-      org-html-home/up-format "<div id=\"org-div-home-and-up\">
- <a accesskey=\"h\" href=\"%s\"> UP </a>
- <a accesskey=\"H\" href=\"%s\"> HOME </a>
-</div>"
+      org-html-home/up-format "<header>
+  <nav>
+    <ul>
+      <li><a href='/'>&#127969; Home</a></li>
+      <li><a href='/resume.html'>&#128216; CV</a></li>
+      <li><a href='/posts/sitemap.html'>&#128221; Posts</a></li>
+    </ul>
+  </nav>
+</header>"
       )
 
 (defun update-rss-feed ()
author	Matt Kosarek <matt.kosarek@canonical.com>	2026-02-18 16:50:30 -0500
committer	Matt Kosarek <matt.kosarek@canonical.com>	2026-02-18 16:50:30 -0500
commit	2ef049102f6824a6ab6ae99ee87c115f7608707e (patch)
tree	d8ca1b0a356d57c5b9cfaf57820e3e48f83f8a82
parent	b4e8ae9731eca175cd4e6e75a20da87ff86eb91f (diff)