From b29b35e1668730568b30b7b32ac52a84c941b579 Mon Sep 17 00:00:00 2001
From: Aleks Rutins <keeper@farthergate.com>
Date: Mon, 9 Jun 2025 17:01:51 -0400
Subject: [PATCH] Start working on new design w/ Tailwind

---
 Gemfile         |  2 ++
 Gemfile.lock    | 11 ++++++++++-
 build.rb        |  3 +++
 input.css       |  7 +++++++
 pages/layout.rb | 10 +++++-----
 5 files changed, 27 insertions(+), 6 deletions(-)
 create mode 100644 input.css

diff --git a/Gemfile b/Gemfile
index e98428b..2a26c7d 100644
--- a/Gemfile
+++ b/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"
diff --git a/Gemfile.lock b/Gemfile.lock
index 63e5706..bc81a02 100644
--- a/Gemfile.lock
+++ b/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
diff --git a/build.rb b/build.rb
index 8bd25e6..85c6821 100644
--- a/build.rb
+++ b/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
diff --git a/input.css b/input.css
new file mode 100644
index 0000000..d3af4de
--- /dev/null
+++ b/input.css
@@ -0,0 +1,7 @@
+@import "tailwindcss";
+@layer base;
+@layer components;
+@layer utilities;
+@layer theme;
+
+@source "./pages";
diff --git a/pages/layout.rb b/pages/layout.rb
index ca26806..d4ac023 100644
--- a/pages/layout.rb
+++ b/pages/layout.rb
@@ -41,14 +41,14 @@ module Pages
           link(rel: "stylesheet", href: "/site.css")
 
           script(defer: true, 'data-domain' => "farthergate.com", src: "https://plausible.farthergate.com/js/script.js")
-          
-          @meta.each { |name, content| 
+
+          @meta.each { |name, content|
             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 }
               }