spoopy

app/assets/stylesheets/application.tailwind.css

@@ -1,3 +1,5 @@
+@import "./cursors.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -7,44 +9,46 @@
         @apply py-1 px-2 rounded-sm bg-primary-200;
     }
     .btn:hover {
-        @apply bg-secondary-100;
+        @apply bg-secondary-900 text-white;
     }
     .btn-cta {
-        @apply py-1 px-2 rounded-sm bg-secondary-100;
+        @apply py-1 px-2 rounded-sm bg-secondary-900 text-white;
     }
     .btn-cta:hover {
-        @apply bg-secondary-200;
+        @apply bg-secondary-700 text-white;
     }
     .btn-sm {
         @apply py-0.5 px-1 rounded-sm text-sm bg-primary-200;
     }
     .btn-sm:hover {
-        @apply bg-secondary-100;
+        @apply bg-secondary-900 text-white;
     }
 
     .link {
-        @apply underline text-black;
+        @apply underline text-white;
     }
 
     .link:hover {
         @apply text-primary-400;
     }
 
+    .link--dark {
+        @apply underline text-secondary-900;
+    }
+
+    .link--dark:hover {
+        @apply underline text-secondary-700;
+    }
+
     .link--light {
-        @apply underline text-black bg-primary-400 px-1; 
+        @apply underline text-white bg-primary-400 px-1; 
     }
 
     .link--light:hover {
         @apply underline text-primary-400 bg-primary-900 px-1; 
     }
 }
 
-body {
-    cursor: url(flower_cursor.png), auto;
-}
-a, button {
-    cursor: url(flower_cursor.png), pointer;
-}
 table a:hover {
     text-decoration: underline;
 }

app/assets/stylesheets/cursors.css.erb

@@ -0,0 +1,6 @@
+body {
+    cursor: url(<%= Dir[ './public/cursors/halloween/**/*' ].sample.split('/').last(3).join('/') %>), auto;
+}
+a, button {
+    cursor: url(<%= Dir[ './public/cursors/halloween/**/*' ].sample.split('/').last(3).join('/') %>), pointer;
+}

app/models/site_theme.rb

@@ -1,14 +1,11 @@
 class SiteTheme
     def self.pick_color(number)
         color_wheel = %w[
-            bg-fuchsia-100
-            bg-orange-100
-            bg-yellow-100
-            bg-lime-100
-            bg-teal-100
-            bg-lime-100
-            bg-yellow-100
-            bg-orange-100
+            bg-amber-600
+            bg-amber-500
+            bg-amber-400
+            bg-amber-300
+            bg-amber-200
         ]
 
         index = number % color_wheel.length

app/views/devise/confirmations/new.html.erb

@@ -1,6 +1,6 @@
 <% title("Confirm account") %>
 
-<h1 class="text-lg mb-1 px-1 inline-block bg-secondary-300">resend confirmation instructions</h1>
+<h1 class="text-lg mb-1 px-1 inline-block bg-secondary-700 text-white">resend confirmation instructions</h1>
 
 <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
   <%= render "devise/shared/error_messages", resource: resource %>

app/views/devise/passwords/edit.html.erb

@@ -1,6 +1,6 @@
 <% title("Change password") %>
 
-<h1 class="text-lg mb-1 px-1 inline-block bg-secondary-300">change your password</h1>
+<h1 class="text-lg mb-1 px-1 inline-block bg-secondary-700 text-white">change your password</h1>
 
 <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }, class: "py-3") do |f| %>
   <%= render "devise/shared/error_messages", resource: resource %>

app/views/devise/passwords/new.html.erb

@@ -1,6 +1,6 @@
 <% title("Forgot password") %>
 
-<h1 class="text-lg mb-1 px-1 inline-block bg-secondary-300">forgot your password?</h1>
+<h1 class="text-lg mb-1 px-1 inline-block bg-secondary-700 text-white">forgot your password?</h1>
 
 <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
   <%= render "devise/shared/error_messages", resource: resource %>

app/views/devise/sessions/new.html.erb

@@ -1,6 +1,6 @@
 <% title("Log in") %>
 
-<h1 class="text-lg mb-1 px-1 inline-block bg-secondary-300">log in</h1>
+<h1 class="text-lg mb-1 px-1 inline-block bg-secondary-700 text-white">log in</h1>
 
 <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
   <div class="field">

app/views/devise/unlocks/new.html.erb

@@ -1,6 +1,6 @@
 <% title("Unlock account") %>
 
-<h1 class="text-lg mb-1 px-1 inline-block bg-secondary-300">resend unlock instructions</h1>
+<h1 class="text-lg mb-1 px-1 inline-block bg-secondary-700 text-white">resend unlock instructions</h1>
 
 <%= form_for(resource, as: resource_name, url: unlock_path(resource_name), html: { method: :post }) do |f| %>
   <%= render "devise/shared/error_messages", resource: resource %>

app/views/layouts/application.html.erb

@@ -16,22 +16,22 @@
 
   <body class="h-full">
     <nav class="w-full bg-primary-200 py-1 px-1 flex justify-between">
-      <%= link_to 'home', root_path, class: 'link' %>
+      <%= link_to 'home', root_path, class: 'link--dark' %>
       <div>
       <% if user_signed_in? %>
-          <%= link_to 'directory', user_directory_path, class: 'px-1 link' %>
-          <%= link_to '*s', my_starred_path, class: 'px-1 link' %>
-          <%= link_to '@s', my_mentions_path, class: 'px-1 link' %>
-          <%= link_to 'my profile', my_profile_path, class: 'px-1 link' %>
-          <%= link_to "sign out", destroy_user_session_path, method: :delete, class: "px-1 link", data: { turbo_method: "delete" } %>
+          <%= link_to 'directory', user_directory_path, class: 'px-1 link--dark' %>
+          <%= link_to '*s', my_starred_path, class: 'px-1 link--dark' %>
+          <%= link_to '@s', my_mentions_path, class: 'px-1 link--dark' %>
+          <%= link_to 'my profile', my_profile_path, class: 'px-1 link--dark' %>
+          <%= link_to "sign out", destroy_user_session_path, method: :delete, class: "px-1 link--dark", data: { turbo_method: "delete" } %>
         <% else %>
-          <%= link_to "sign in", new_user_session_path, class: 'link' %>
+          <%= link_to "sign in", new_user_session_path, class: 'link--dark' %>
         <% end %>
       </div>
     </nav>
     <div class="w-full snow">
-      <p class="px-1 bg-secondary-200 text-black"><%= notice %></p>
-      <p class="px-1 bg-secondary-100 text-black"><%= alert %></p>
+      <p class="px-1 bg-secondary-800 text-white"><%= notice %></p>
+      <p class="px-1 bg-secondary-900 text-white"><%= alert %></p>
     </div>
     <div class="py-5 px-3">
       <%= yield %>

app/views/profile/edit.html.erb

@@ -1,6 +1,6 @@
 <% title("Edit profile") %>
 
-<h1 class="text-lg px-1 inline-block bg-secondary-300">editing <%= @profile.user.username %>'s profile</h1>
+<h1 class="text-lg px-1 inline-block bg-secondary-700 text-white">editing <%= @profile.user.username %>'s profile</h1>
 <div class="py-3">
     <%= form_with model: @profile, url: profile_path(@profile.user) do |f| %>
         <%= render 'shared/errors', errors: @profile.errors %>

app/views/profile/show.html.erb

@@ -1,7 +1,7 @@
 <% title("@#{@profile.user.username}'s Profile") %>
 
 <% if Rails.configuration.x.invitations.enabled && current_user.has_invites_available? %>
-    <div class="py-1 px-3 mb-3 bg-secondary-200">
+    <div class="py-1 px-3 mb-3 bg-secondary-800 text-white">
         hello, you have an invite available! care to <%= link_to 'invite someone', new_user_invitation_path, class: 'link' %>?
     </div>
 <% end %>

app/views/topics/_table.html.erb

@@ -1,6 +1,6 @@
 <table class="w-full my-3" id="topics-table">
     <thead>
-        <tr class="py-1 bg-primary-300 border-b-2 border-secondary-100 text-left">
+        <tr class="py-1 bg-primary-300 border-b-2 border-secondary-900 text-left">
             <th class="pl-3 w-1">📜<span class="sr-only">notices</span></th>
             <th class="px-3 w-10/12 md:w-7/12 break-all">title</th>
             <th class="px-3 hidden md:table-cell w-1/12">author</th>
@@ -14,7 +14,7 @@
             <% views_for_topic = topic_views[topic.id] %>
             <% unread_posts = unread_posts?(topic, views_for_topic) %>
 
-            <tr class="py-1 border-b-2 border-secondary-100 <%= SiteTheme.pick_color(index) %> <%= 'font-bold' if unread_posts %>">
+            <tr class="py-1 border-b-2 border-secondary-900 <%= SiteTheme.pick_color(index) %> <%= 'font-bold' if unread_posts %>">
                 <td class="pl-3 w-1">
                     <% if unread_mentions?(mentions[topic.id], views_for_topic) %>
                         👀

app/views/topics/index.html.erb

@@ -3,16 +3,16 @@
 
 <div class="flex justify-between">
     <%= link_to root_path do %>
-        <h1 class="text-lg mb-1 px-1 inline-block bg-secondary-300 link">topics</h1>
+        <h1 class="text-lg mb-1 px-1 inline-block bg-secondary-700 link">topics</h1>
     <% end %>
     <%= link_to "new topic", new_topic_path, class: "btn inline-block" %>
 </div>
 
-<details class="w-full my-3">
-    <summary class="py-1 px-1 bg-secondary-200">forum-wide pinned posts</summary>
+<details class="w-full my-3 text-white">
+    <summary class="py-1 px-1 bg-secondary-800">forum-wide pinned posts</summary>
     <table class="w-full" id="pinned">
         <thead>
-            <tr class="bg-secondary-300 border-b-2 border-secondary-100 text-left">
+            <tr class="bg-secondary-700 border-b-2 border-secondary-900 text-left">
                 <th class="px-3 w-10/12 md:w-7/12 break-all">title</th>
                 <th class="px-3 hidden md:table-cell w-1/12">author</th>
                 <th class="px-3 hidden md:table-cell w-1/12">#</th>
@@ -25,7 +25,7 @@
                 <% views_for_topic = @topic_views[topic.id] %>
                 <% unread_posts = unread_posts?(topic, views_for_topic) %>
 
-                <tr class="py-1 border-b-2 border-secondary-200 bg-secondary-100 <%= 'font-bold' if unread_posts %>">
+                <tr class="py-1 border-b-2 border-secondary-800 bg-secondary-900 <%= 'font-bold' if unread_posts %>">
                     <td class="px-3 w-10/12 md:w-6/12 break-all"><%= link_to topic.title, topic_path(topic) %> <span class="sr-only"><%= '(unread)' if unread_posts %></span></td>
                     <td class="px-3 hidden md:table-cell w-1/12"><%= link_to topic.author.username, profile_path(topic.author) %></td>
                     <td class="px-3 hidden md:table-cell w-1/12"><%= topic.posts.length %></td>

app/views/topics/mentions.html.erb

@@ -1,7 +1,7 @@
 <% title("Mentions") %>
 
 <div class="flex justify-between">
-    <h1 class="text-lg mb-1 px-1 inline-block bg-secondary-300">topics you've been mentioned in</h1>
+    <h1 class="text-lg mb-1 px-1 inline-block bg-secondary-700 text-white">topics you've been mentioned in</h1>
     <%= link_to "new topic", new_topic_path, class: "btn inline-block" %>
 </div>
 

app/views/topics/new.html.erb

@@ -1,6 +1,6 @@
 <% title("New topic") %>
 
-<h1 class="text-lg mb-1 px-1 inline-block bg-secondary-300">new topic</h1>
+<h1 class="text-lg mb-1 px-1 inline-block bg-secondary-700 text-white">new topic</h1>
 <%= form_with model: @topic, class: "py-2" do |f| %>
     <%= render 'shared/errors', errors: @topic.errors if @topic.errors.any? %>
 

app/views/topics/starred.html.erb

@@ -1,7 +1,7 @@
 <% title("Starred topics") %>
 
 <div class="flex justify-between">
-    <h1 class="text-lg mb-1 px-1 inline-block bg-secondary-300">topics you've starred</h1>
+    <h1 class="text-lg mb-1 px-1 inline-block bg-secondary-700 text-white">topics you've starred</h1>
     <%= link_to "new topic", new_topic_path, class: "btn inline-block" %>
 </div>
 

app/views/users/index.html.erb

@@ -1,20 +1,20 @@
 <% title("Directory") %>
 
 <div class="flex justify-between">
-    <h1 class="text-lg mb-1 px-1 inline-block bg-secondary-300">the poster list</h1>
+    <h1 class="text-lg mb-1 px-1 inline-block bg-secondary-700 text-white">the poster list</h1>
 </div>
 
 <table class="w-full my-3">
     <thead>
-        <tr class="py-1 bg-primary-300 border-b-2 border-secondary-100 text-left">
+        <tr class="py-1 bg-primary-300 border-b-2 border-secondary-900 text-left">
             <th class="pl-3 w-6/12">username</th>
             <th class="px-3 hidden md:table-cell md:w-4/12">invited by</th>
             <th class="px-3 w-6/12 md:w-4/12">joined</th>
         </tr>
     </thead>
     <tbody>
         <% @users.each_with_index do |user, index| %>
-            <tr class="py-1 border-b-2 border-secondary-100 <%= SiteTheme.pick_color(index) %>">
+            <tr class="py-1 border-b-2 border-secondary-900 <%= SiteTheme.pick_color(index) %>">
                 <td class="px-3 pl-3 w-6/12"><%= link_to user.username, profile_path(user) %></td>
                 <% if user.invited_by.present? %>
                     <td class="px-3 hidden md:table-cell md:w-4/12">

app/views/users/invitations/edit.html.erb

@@ -1,6 +1,6 @@
 <% title("Accept invite") %>
 
-<h1 class="text-lg mb-1 px-1 inline-block bg-secondary-300">accept invite</h1>
+<h1 class="text-lg mb-1 px-1 inline-block bg-secondary-700 text-white">accept invite</h1>
 
 <%= form_for(resource, as: resource_name, url: invitation_path(resource_name), html: { method: :put }) do |f| %>
   <%= render "devise/shared/error_messages", resource: resource %>

app/views/users/invitations/new.html.erb

@@ -1,6 +1,6 @@
 <% title("Invite") %>
 
-<h1 class="text-lg mb-1 px-1 inline-block bg-secondary-300">invite new person</h1>
+<h1 class="text-lg mb-1 px-1 inline-block bg-secondary-700 text-white">invite new person</h1>
 
 <%= form_for(resource, as: resource_name, url: invitation_path(resource_name), html: { method: :post }) do |f| %>
   <%= render "devise/shared/error_messages", resource: resource %>

config/tailwind.config.js

@@ -11,8 +11,12 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        primary: colors.green,
-        secondary: colors.yellow,
+        stone: colors.stone,
+        yellow: colors.yellow,
+        amber: colors.amber,
+        orange: colors.orange,
+        primary: colors.amber,
+        secondary: colors.stone,
       },
     },
   },