filter buttons now show whether they are selected

src/lib/lists/blog-gallery.svelte

@@ -31,7 +31,7 @@
     .entry-container {
         display: grid;
         /* gap: 8px; */
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr;
     }
 
     .entry {

src/routes/blog/+page.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
     import Banner2 from "$lib/banner2.svelte";
     import Content from "$lib/viewport/content.svelte";
-    import { BlogPostTag, posts, type BlogPostDetails, type BlogPostLink } from "./posts";
+    import { BlogPostTag, posts, type BlogPostLink } from "./posts";
     import BlogGallery from "$lib/lists/blog-gallery.svelte";
 
     let filter = $state(BlogPostTag.NULL);
-    let filteredPosts = filterPosts();
 
     function setFilter(tag: BlogPostTag) {
         filter = tag;
@@ -36,9 +35,11 @@
     <!-- TODO descriptions on filter click -->
     <div class="tag-filter-container">
         {#each Object.values(BlogPostTag) as tag}
-            <button class="post-tag tag-filter" onclick={() => {
+            {#if tag == filter}
-                setFilter(tag)
+                <button class="post-tag tag-filter tag-filter-selected" onclick={() => { setFilter(tag) }}>{tag}</button>
-            }}>{tag}</button>
+            {:else}
+                <button class="post-tag tag-filter" onclick={() => { setFilter(tag) }}>{tag}</button>
+            {/if}
         {/each}
     </div>
 
@@ -59,9 +60,14 @@
         padding: 8px;
         border-radius: 12px;
         cursor: pointer;
+        transition: background-color var(--duration-animation) var(--anim-curve);
+    }
+
+    .tag-filter-selected {
+        background-color: var(--color-highlight-alt);
     }
 
     .tag-filter:hover {
-        background-color: aqua;
+        background-color: var(--color-highlight-alt);
     }
 </style>

src/routes/blog/posts.ts

@@ -24,7 +24,7 @@ export interface BlogPostLink {
 }
 
 export enum BlogPostTag {
-	NULL = "X", // placeholder when a 'no tag' is needed. if in doubt, do not use this
+	NULL = "all", // placeholder when a 'no tag' is needed. if in doubt, do not use this
 	ART = "art-stuff", // ramblings to do with art
 	DRAWING = "drawing", // self-explanatory
 	META = "natconf-meta", // about the website itself