From cc255e0732032b1bef523cfa7ccfc7ea98f5167d Mon Sep 17 00:00:00 2001
From: Inhji <johnnie@posteo.de>
Date: Mon, 11 Sep 2023 20:16:37 +0200
Subject: [PATCH] colors and stuff

---
 assets/css/app.css                               | 16 ++++++++++++++--
 assets/tailwind.config.js                        |  4 +++-
 .../controllers/page_html/note.html.heex         | 16 ++++++++++------
 3 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/assets/css/app.css b/assets/css/app.css
index 7ac8a4e..2a509c8 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -10,13 +10,23 @@
   The base layer is for things like reset rules or default styles applied to plain HTML elements.
 */
 @layer base {
+  :root {
+    --color-foreground: 15 23 42;
+    --color-background: 241 245 249;
+  }
+
+  :root[data-mode=dark] {
+    --color-foreground: 241 245 249;
+    --color-background: 15 23 42;   
+  }
+
   html {
     font-family: 'Inter', sans-serif;
     font-feature-settings: "case", "cpsp", "frac", "salt", "ccmp", "cv01", "cv02", "cv03", "cv04", "cv05", "cv06", "cv07", "cv09", "cv10", "cv11";
   }
 
   body {
-    @apply dark:bg-neutral-800;
+    @apply bg-background text-foreground;
   }
 
   .stack > * + * {
@@ -119,7 +129,9 @@
 */
 @layer components {
   .divider {
-    @apply flex items-center my-8 before:flex-1 after:flex-1 before:content-[''] after:content-[''] before:p-[0.5px] after:p-[0.5px] w-full mx-auto last:hidden before:bg-neutral-500/25 after:bg-neutral-500/25 before:mr-2 after:ml-2;
+    @apply flex text-red-500 items-center my-8 w-full mx-auto last:hidden;
+    @apply before:flex-1 before:content-[''] before:bg-neutral-500/25 before:p-[0.5px] before:mr-2;
+    @apply after:flex-1 after:content-[''] after:bg-neutral-500/25 after:p-[0.5px] after:ml-2;
   }
 
   .dot {
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
index 139d6d9..ab08a61 100644
--- a/assets/tailwind.config.js
+++ b/assets/tailwind.config.js
@@ -18,7 +18,9 @@ module.exports = {
     extend: {
       colors: {
         primary: colors.sky,
-        neutral: colors.slate
+        neutral: colors.slate,
+        foreground: 'rgb(var(--color-foreground) / <alpha-value>)',
+        background: 'rgb(var(--color-background) / <alpha-value>)'
       }
     }
   },
diff --git a/lib/chiya_web/controllers/page_html/note.html.heex b/lib/chiya_web/controllers/page_html/note.html.heex
index 1d1e168..e306a27 100644
--- a/lib/chiya_web/controllers/page_html/note.html.heex
+++ b/lib/chiya_web/controllers/page_html/note.html.heex
@@ -15,12 +15,6 @@
         <%= Markdown.render(@note.content) |> raw %>
       </section>
 
-      <%= if String.length(@note.url || "") > 0 do %>
-        <section class="text-center">
-          <.icon name="hero-link" /> <a href={@note.url}><%= @note.url %></a>
-        </section>
-      <% end %>
-
       <footer>
         <a href={~p"/"} class="hidden | h-card u-author">Inhji</a>
         <a href={~p"/note/#{@note.slug}"} class="hidden | u-url u-uid"><%= @note.name %></a>
@@ -78,6 +72,16 @@
       </ul>
     </section>
 
+    <%= if String.length(@note.url || "") > 0 do %>
+      <h3><.icon name="hero-link" /> URL</h3>
+
+      <section>
+        <ul>
+          <li><a href={@note.url}><%= @note.url %></a></li>
+        </ul>
+      </section>
+    <% end %>
+
     <%= if not Enum.empty?(@note.links_to) do %>
       <h3>Notes linking here</h3>
       <section>
-- 
2.39.5