Redesign with Tailwind

pages/layout.rb

@@ -12,20 +12,17 @@ module Pages
       about: {
         title: "About",
         url: "/about"
-      },
-      garden: {
-        title: "Garden",
-        url: "https://garden.farthergate.com"
-      },
+      }
     }
 
-    def initialize(page, meta: {})
+    def initialize(page, banner: nil, meta: {})
       @page = page
       if @page.is_a? Symbol
         @page_info = pages[page]
       else
         @page_info = @page
       end
+      @banner = banner
       @meta = meta
     end
     def view_template
@@ -36,9 +33,7 @@ module Pages
           title { @page_info[:title] + " | Aleks Rūtiņš" }
           meta(charset: "utf-8")
           meta(name: "viewport", content: "width=device-width, initial-scale=1.0")
-          link(rel: "prefetch", href: "/DM_Mono/DMMono-Regular.ttf")
-          link(rel: "prefetch", href: "/DM_Mono/DMMono-Medium.ttf")
-          link(rel: "stylesheet", href: "/site.css")
+          link(rel: "stylesheet", href: "/tailwind.css")
 
           script(defer: true, 'data-domain' => "farthergate.com", src: "https://plausible.farthergate.com/js/script.js")
 
@@ -46,15 +41,30 @@ module Pages
             meta(name: name, content: content)
           }
         }
-        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') {
+        body(class: 'm-0 p-0 font-sans') {
+          header(class: "#{@banner ? 'fixed' : 'sticky'} top-0 w-screen bg-transparent pointer-events-none flex p-3 items-center justify-center") {
+            nav(class: 'flex gap-2 p-2 rounded-full border border-gray-300 bg-white/50 backdrop-blur-md pointer-events-auto') {
               pages.each { |key, page|
-                a(href: page[:url], class: key == @page ? "active" : "") { page[:title].downcase }
+                a(href: page[:url], class: "block rounded-full px-3 py-1 #{key == @page ? 'bg-gray-100/50' : ''}") { page[:title] }
               }
             }
           }
-          yield
+          img(src: @banner, class: 'w-full h-[400px] object-cover') if @banner
+          main(class: 'p-6 max-w-4xl mx-auto') {
+            yield
+          }
+
+          footer(class: 'text-gray-500 py-4 text-center flex flex-col items-center gap-3') {
+            p {
+              a(href: 'https://git.farthergate.com/p') { 'git' }
+              plain ' ~ '
+              a(href: 'https://bsky.app/profile/farthergate.com') { 'bsky' }
+              plain ' ~ '
+              a(href: 'https://git.farthergate.com/p/rad:z3eNe9ayEhwgxmeJb92jwiY1QsANh') { 'source' }
+            }
+            p { "built with phlexite and tailwindcss" }
+            p { "© #{Time.now.year} Aleks Rūtiņš" }
+          }
         }
       }
     end