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 {

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>)'
       }
     }
   },

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>