From 1eb249a510233aba50c3a2ac33f2e24b95502bec Mon Sep 17 00:00:00 2001
From: Inhji <johnnie@posteo.de>
Date: Wed, 15 Mar 2023 19:16:01 +0100
Subject: [PATCH] go for theming like a boss, then back out bc of prose styles
 :3

---
 assets/css/app.css                              | 17 ++++++++++-------
 assets/tailwind.config.js                       |  4 ++--
 .../components/layouts/public.html.heex         |  8 ++++----
 .../controllers/page_html/home.html.heex        |  6 +++---
 .../controllers/page_html/note.html.heex        | 11 +++++++----
 5 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 2645847..53a8819 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -7,23 +7,26 @@
 
 @layer base {
   :root {
+    --color-primary: 16 185 129;
     --color-background: 255 255 255;
     --color-text-base: 82 82 91;
     --color-text-heading: 24 24 27;
     --color-text-muted: 82 82 91;
-    --color-primary: 16 185 129;
-    --color-secondary: 245 158 11;
+    --color-text-dim: 244 244 245;
   }
 
   :root[data-theme=roguelight] {
-    --color-background: 118 174 128;
+    --color-primary: 150 207 133;
+    --color-background: 53 43 49;
     --color-text-base: 245 245 212;
-    --color-text-heading: 150 44 67;
+    --color-text-heading: 150 207 133;
     --color-text-muted: 245 245 212;
-    --color-primary: 150 44 67;
-    --color-secondary: 150 44 67;
+    --color-text-dim: 74 107 131;
   }
 }
 
 /* Set appropriate width for identity icons */
-a[rel] svg { width: 1em; }
\ No newline at end of file
+a[rel] svg { 
+  width: 1em;
+  fill: rgb(var(--color-text-heading));
+}
\ No newline at end of file
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index 8d6f6f2..3c64e78 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -19,11 +19,11 @@ module.exports = {
         gray: colors.zinc,
         theme: {
           primary: 'rgb(var(--color-primary) / <alpha-value>)',
-          secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
           heading: 'rgb(var(--color-text-heading) / <alpha-value>)',
           base: 'rgb(var(--color-text-base) / <alpha-value>)',
           muted: 'rgb(var(--color-text-muted) / <alpha-value>)',
-          background: 'rgb(var(--color-background) / <alpha-value>)'
+          background: 'rgb(var(--color-background) / <alpha-value>)',
+          dim: 'rgb(var(--color-text-dim) / <alpha-value>)'
         } 
       }
     },
diff --git a/lib/chiya_web/components/layouts/public.html.heex b/lib/chiya_web/components/layouts/public.html.heex
index 111e994..887e0f3 100644
--- a/lib/chiya_web/components/layouts/public.html.heex
+++ b/lib/chiya_web/components/layouts/public.html.heex
@@ -1,15 +1,15 @@
 <header class="px-4 sm:px-6 lg:px-8">
-  <div class="flex items-center justify-between border-b border-gray-100 py-3">
+  <div class="flex items-center justify-between border-b border-theme-dim py-3">
     <div class="flex items-center gap-4">
-      <a href="/">Chiya</a>
-      <p class="rounded-full bg-theme-primary px-2 text-[0.8125rem] font-medium leading-6">
+      <a href="/" class="text-theme-primary font-semibold hover:text-theme-primary/75">Chiya</a>
+      <p class="rounded-full bg-theme-base/5 px-2 text-[0.8125rem] font-medium leading-6 text-theme-base">
         v<%= Application.spec(:chiya, :vsn) %>
       </p>
     </div>
     <div class="flex items-center gap-4">
       <.link
         href={~p"/n/about"}
-        class="text-xs font-semibold leading-6 text-gray-900 hover:text-gray-700"
+        class="text-xs font-semibold leading-6 text-theme-base hover:text-theme-base/75"
       >
         About
       </.link>
diff --git a/lib/chiya_web/controllers/page_html/home.html.heex b/lib/chiya_web/controllers/page_html/home.html.heex
index f4e65a4..88e6c15 100644
--- a/lib/chiya_web/controllers/page_html/home.html.heex
+++ b/lib/chiya_web/controllers/page_html/home.html.heex
@@ -15,7 +15,7 @@
               rel={identity.rel}
               href={identity.url}
               target="_blank"
-              class="group -mx-2 -my-0.5 inline-flex items-center gap-3 rounded-lg px-2 py-0.5 hover:bg-gray-50 hover:text-gray-900"
+              class="group -mx-2 -my-0.5 inline-flex items-center gap-3 rounded-lg px-2 py-0.5 hover:bg-theme-dim"
             >
               <%= raw identity.icon %>
               <%= identity.name %>
@@ -28,8 +28,8 @@
       <div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
         <%= for note <- @channel.notes do %>
           <a href={~p"/n/#{note.slug}"} class="group">
-            <span class="text-theme-heading text-lg font-semibold leading-8"><%= note.name %></span>
-            <span class="text-theme-muted text-sm"><%= pretty_date(note.published_at) %></span>
+            <span class="text-theme-heading text-lg font-semibold leading-8 group-hover:text-theme-heading/75"><%= note.name %></span>
+            <span class="text-theme-muted text-sm group-hover:text-theme-muted/75"><%= pretty_date(note.published_at) %></span>
           </a>
         <% end %>
       </div>
diff --git a/lib/chiya_web/controllers/page_html/note.html.heex b/lib/chiya_web/controllers/page_html/note.html.heex
index 46b3d3a..29402dc 100644
--- a/lib/chiya_web/controllers/page_html/note.html.heex
+++ b/lib/chiya_web/controllers/page_html/note.html.heex
@@ -1,7 +1,10 @@
-<.header>
-  <%= @note.name %>
-  <:subtitle><%= pretty_date(@note.published_at) %></:subtitle>
-</.header>
+<header>
+  <h1 class="text-lg font-semibold leading-8 text-theme-heading"><%= @note.name %></h1>
+  <p class="mt-2 text-sm leading-6 text-theme-muted">
+    <%= pretty_date(@note.published_at) %>
+  </p>
+</header>
+
 
 <section class="prose mt-8">
 	<%= Markdown.render(@note.content) |> raw %>