From cb77a5e7d834fd035c6c4c965c22a4bbd33aefef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stig-=C3=98rjan=20Smelror?= <smelror@gmail.com>
Date: Sat, 28 Feb 2026 10:19:03 +0100
Subject: [PATCH] feat(blog): add table styles to layout and enhance token
 savings post

Add global CSS rules for markdown tables in BlogPost.astro including
borders, padding, and row hover states. Update the token savings
breakdown table to use an improved format with visual impact scales.
---
 src/content/blog/measuring-token-savings.md | 14 +++++-----
 src/layouts/BlogPost.astro                  | 30 +++++++++++++++++++++
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/content/blog/measuring-token-savings.md b/src/content/blog/measuring-token-savings.md
index 164f4e2..a6c4630 100644
--- a/src/content/blog/measuring-token-savings.md
+++ b/src/content/blog/measuring-token-savings.md
@@ -38,13 +38,13 @@ Input tokens dropped from **15.08M to 10.41M**, which is a reduction of **4,676,
 
 To provide full transparency, here is the breakdown across all 5 runs:
 
-| Run | Naive Input | Compressed Input | Savings |
-| --- | ----------- | ---------------- | ------- |
-| 1   | 3.59M       | 2.16M            | 40%     |
-| 2   | 3.22M       | 1.66M            | 48%     |
-| 3   | 2.15M       | 2.23M            | -3%     |
-| 4   | 2.95M       | 1.66M            | 44%     |
-| 5   | 3.15M       | 2.68M            | 15%     |
+| Run | 🟢 Naive Input | 🔵 Compressed Input | Savings | Impact Scale |
+| :-- | :------------- | :----------------- | :------ | :----------- |
+| **1** | 3.59M        | 2.16M              | **40%** | `████████░░` |
+| **2** | 3.22M        | 1.66M              | **48%** | `█████████░` |
+| **3** | 2.15M        | 2.23M              | **-3%** | `⚠️ lean run` |
+| **4** | 2.95M        | 1.66M              | **44%** | `█████████░` |
+| **5** | 3.15M        | 2.68M              | **15%** | `███░░░░░░░` |
 
 On average across all runs, this resulted in **≈ 31% lower total token cost across the full test set**. 
 
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 9656c5d..3a45f13 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -195,4 +195,34 @@ const { post } = Astro.props;
     color: var(--color-text-secondary);
     font-style: italic;
   }
+
+  .post-content :global(table) {
+    width: 100%;
+    border-collapse: collapse;
+    margin: var(--space-xl) 0;
+    font-size: 0.95rem;
+    font-family: var(--font-mono);
+  }
+
+  .post-content :global(th) {
+    text-align: left;
+    padding: var(--space-sm) var(--space-md);
+    border-bottom: 2px solid var(--color-border);
+    color: var(--color-text);
+    font-weight: 600;
+  }
+
+  .post-content :global(td) {
+    padding: var(--space-sm) var(--space-md);
+    border-bottom: 1px solid var(--color-border);
+    color: var(--color-text-secondary);
+  }
+
+  .post-content :global(tr:last-child td) {
+    border-bottom: none;
+  }
+
+  .post-content :global(tr:hover td) {
+    background: var(--color-bg-elevated);
+  }
 </style>
\ No newline at end of file