refactor: reduce CSS with UnoCSS in some partials

2 files changed, 15 insertions, 72 deletions

diff --git a/layouts/_partials/posts/banner.html b/layouts/_partials/posts/banner.html
index 7ab4c826..218a4c05 100644
--- a/layouts/_partials/posts/banner.html
+++ b/layouts/_partials/posts/banner.html
@@ -1,17 +1,7 @@
 {{ with .Params.banner }}
-<div class="post-banner">
-    <img
-        class="lazy" loading="lazy"
-        data-pagefind-meta="image[src]"
-        src="{{ . }}"
-    >
-</div>
-<style>
-.post-banner img {
-    width: 100%;
-    height: auto;
-    display: block;
-    border-radius: 0.5rem
-}
-</style>
+<img
+    class="lazy w-full h-auto block rounded-lg" loading="lazy"
+    data-pagefind-meta="image[src]"
+    src="{{ . }}"
+>
 {{ end }}
diff --git a/layouts/_partials/stats/word-count-chart.html b/layouts/_partials/stats/word-count-chart.html
index 10513922..ad7347db 100644
--- a/layouts/_partials/stats/word-count-chart.html
+++ b/layouts/_partials/stats/word-count-chart.html
@@ -1,54 +1,3 @@
-<style>
-.chart-container {
-  display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
-  height: 300px;
-  gap: 0.5rem;
-  padding: 0 1rem;
-  font-size: 0.75rem;
-  width: 100%;
-  overflow-x: auto;
-  box-sizing: border-box;
-}
-
-.chart-item {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-.bar {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-  width: 1rem;
-  gap: 0.25rem;
-  height: 200px; /* fixed height for value + bar */
-  position: relative;
-}
-
-.bar-number {
-  font-size: 0.65rem;
-  writing-mode: vertical-rl;
-}
-
-.bar-value {
-  width: 100%;
-  background-color: #333;
-  flex-shrink: 0;
-  transition: height 0.3s;
-}
-
-.bar-label {
-  height: 3rem;
-  writing-mode: vertical-rl;
-  text-align: center;
-  flex-shrink: 0;
-}
-</style>
-
 {{/* Group word counts per month */}}
 {{ $monthly := dict }}
 {{ range .Site.RegularPages }}
@@ -75,19 +24,23 @@
   {{ if gt $val $max }}{{ $max = $val }}{{ end }}
 {{ end }}
 
-<div class="chart-container">
+<div class="flex items-end justify-end h-[300px] gap-2 px-4
+    text-size-xs w-full overflow-x-auto box-border">
   {{ range $month := $months }}
     {{ $val := index $monthly $month }}
     {{ $height := mul (div (float $val) (float $max)) 100 }}
     {{ $opacity := add 0.5 (div $height 200) }}
-    <div class="chart-item">
-        <div class="bar">
-          <div class="bar-number">{{ $val }}</div>
-          <div class="bar-value invert-if-dark"
+    <div class="flex flex-col justify-center">
+        <div class="flex flex-col items-center justify-end
+            w-4 gap-1 h-[200px] relative">
+          <div class="text-size-[0.65rem]"
+              style="writing-mode: vertical-rl;">{{ $val }}</div>
+          <div class="w-full bg-gray-900 flex-shrink-0 transition invert-if-dark"
                style="height: {{ printf "%.1f" $height }}%;
                       background-color: rgba(20,20,20,{{ printf "%.2f" $opacity }});"></div>
         </div>
-        <div class="bar-label">{{ $month }}</div>
+        <div class="h-12 text-center flex-shrink"
+            style="writing-mode: vertical-rl;">{{ $month }}</div>
     </div>
   {{ end }}
 </div>