Start working on new design w/ Tailwind

Gemfile

@@ -10,3 +10,5 @@ gem "phlexite", "~> 0.1.3"
 gem "front_matter_parser", "~> 1.0"
 
 gem 'phlex-markdown', git: 'https://github.com/phlex-ruby/phlex-markdown'
+
+gem "tailwindcss-phlexite", "~> 0.1.0"

Gemfile.lock

@@ -13,16 +13,25 @@ GEM
     markly (0.12.1)
     phlex (1.11.0)
     phlexite (0.1.3)
+    tailwindcss-phlexite (0.1.0)
+      tailwindcss-ruby (~> 4.1)
+    tailwindcss-ruby (4.1.8)
+    tailwindcss-ruby (4.1.8-aarch64-linux-gnu)
+    tailwindcss-ruby (4.1.8-arm64-darwin)
+    tailwindcss-ruby (4.1.8-x86_64-linux-gnu)
 
 PLATFORMS
+  aarch64-linux
   arm64-darwin-23
   ruby
+  x86_64-linux
 
 DEPENDENCIES
   front_matter_parser (~> 1.0)
   phlex (~> 1.11)
   phlex-markdown!
   phlexite (~> 0.1.3)
+  tailwindcss-phlexite (~> 0.1.0)
 
 BUNDLED WITH
-   2.5.18
+   2.6.9

build.rb

@@ -1,6 +1,7 @@
 require "phlex"
 require "phlex/markdown"
 require "phlexite"
+require "tailwindcss/phlexite"
 require "front_matter_parser"
 
 require_relative "util/post_loader"
@@ -20,6 +21,8 @@ Phlexite::Site.new { |s|
 
   s.mount "assets", on: "/"
 
+ # Tailwindcss::Phlexite.build s, 'input.css', 'tailwind.css'
+
   s.page "index.html", Pages::Home.new
   s.page "blog/index.html", Pages::Blog.new
   s.page "about/index.html", Pages::About.new

input.css

@@ -0,0 +1,7 @@
+@import "tailwindcss";
+@layer base;
+@layer components;
+@layer utilities;
+@layer theme;
+
+@source "./pages";

pages/layout.rb

@@ -46,9 +46,9 @@ module Pages
             meta(name: name, content: content)
           }
         }
-        body {
-          header {
-            nav {
+        body(class: 'm-0 p-0') {
+          header(class: 'sticky top-0 bg-white/50 backdrop-blur-md border-gray-500 border-b flex p-3 justify-center') {
+            nav(class: 'flex gap-4') {
               pages.each { |key, page|
                 a(href: page[:url], class: key == @page ? "active" : "") { page[:title].downcase }
               }