tootired

assets/css/app.css

@@ -7,9 +7,19 @@
 @import "./lightbox.css";
 
 @layer base {
-  :root { font-family: 'Inter', sans-serif; }
+  :root {
+    --font-features: "case", "cpsp", "frac", "salt", "ss02", "ccmp";
+  }
+
+  :root {
+    font-family: 'Inter', sans-serif;
+    font-feature-settings: var(--font-features);
+  }
   @supports (font-variation-settings: normal) {
-    :root { font-family: 'Inter var', sans-serif; }
+    :root { 
+      font-family: 'Inter var', sans-serif;
+      font-feature-settings: var(--font-features);
+    }
   }
 
   :root {
@@ -64,7 +74,7 @@
     --color-heading: var(--color-secondary);
   }
 
-    :root[data-mode=dark] .prose {
+  :root[data-mode=dark] .prose {
     @apply prose-invert;
   }
 
@@ -92,4 +102,10 @@
   .footnotes hr { display: none; }
   .footnote:before { content: '{'; }
   .footnote:after { content: '}'; }
+}
+
+@layer utilities {
+  a.underline-link {
+    @apply underline decoration-2 decoration-theme-primary hover:decoration-theme-secondary transition;
+  }
 }

lib/chiya_web/components/layouts/root_public.html.heex

@@ -41,7 +41,7 @@
       <%= @inner_content %>
     </main>
 
-    <footer class="mx-auto max-w-xl mt-8 text-theme-base/75 border-t pt-8 border-theme-background1">
+    <footer class="mx-auto max-w-xl mt-8 mb-8 text-theme-base/75 border-t pt-8 border-theme-background1">
       <p>
         <span>Served by Chiya v<%= Application.spec(:chiya, :vsn) %></span>
         <.dot />

lib/chiya_web/components/public_components.ex

@@ -109,15 +109,17 @@ defmodule ChiyaWeb.PublicComponents do
               <div class="prose prose-gruvbox">
                 <%= raw render(note.content) %>
               </div>
-              <time class="text-theme-base/75">
+              <footer class="mt-1">
-                <%= pretty_datetime(note.published_at) %>
+                <time class="text-theme-base/75">
-              </time>
+                  <%= pretty_datetime(note.published_at) %>
-              <.dot />
+                </time>
-              <a href={~p"/#{note.slug}"} class="text-theme-base/75">Permalink</a>
-              <%= if not Enum.empty?(note.images) do %>
                 <.dot />
-                <.icon name="hero-photo" />
+                <a href={~p"/#{note.slug}"} class="text-theme-base/75">Permalink</a>
-              <% end %>
+                <%= if not Enum.empty?(note.images) do %>
+                  <.dot />
+                  <.icon name="hero-photo" />
+                <% end %>
+              </footer>
             </article>
           <% end %>
         </section>

lib/chiya_web/controllers/note_html/edit.html.heex

@@ -10,4 +10,4 @@
   tags={@tags}
 />
 
-<.back navigate={~p"/admin/notes"}>Back to notes</.back>
+<.back navigate={~p"/admin/notes/#{@note.id}"}>Back to note</.back>

lib/chiya_web/controllers/page_html/note.html.heex

@@ -1,30 +1,30 @@
 <div>
   <header class="mx-auto max-w-xl">
-    <h1 class="mt-16 text-3xl font-extrabold text-theme-base">
+    <h1 class="mt-16 lg:text-5xl md:text-4xl text-3xl font-bold text-theme-base">
       <%= @note.name %>
     </h1>
-    <p class="mt-2 text-sm leading-6 text-theme-base">
+    <p class="mt-2 leading-6 text-theme-base">
       <%= if @note.published_at do %>
         <span>Published</span>
       <% else %>
         <span>Unpublished</span>
       <% end %>
       <time class="font-semibold"><%= pretty_date(@note.published_at) %></time>
-      <span>·</span>
+      <.dot />
       <span>Last Updated</span>
       <time class="font-semibold"><%= pretty_date(@note.updated_at) %></time>
       <%= if not Enum.empty?(@note.tags) do %>
-      <span>·</span>
+      <.dot />
       <span>Tags</span>
-      <span class="text-theme-primary font-semibold">
+      <span>
         <%= for tag <- @note.tags do %>
-          <a href={~p"/t/#{tag.slug}"}><%= tag.name %></a>
+          <a href={~p"/t/#{tag.slug}"} class="underline-link font-semibold"><%= tag.name %></a>
         <% end %>
       </span>
       <% end %>
       <%= if @current_user do %>
-        <span>·</span>
+        <.dot />
-        <a href={~p"/admin/notes/#{@note}/edit"} class="font-semibold underline decoration-2 decoration-theme-primary hover:bg-theme-primary hover:text-theme-background transition">Edit</a>
+        <a href={~p"/admin/notes/#{@note}"} class="underline-link font-semibold">Show in Admin</a>
       <% end %>
     </p>
   </header>

lib/chiya_web/live/note_show_live.ex

@@ -12,9 +12,6 @@ defmodule ChiyaWeb.NoteShowLive do
     ~H"""
     <.header>
       <%= @note.name %>
-      <:subtitle>
-        <pre class="p-1 bg-gray-100 rounded select-all">[[<%= @note.slug %>]]</pre>
-      </:subtitle>
       <:actions>
         <.link href={~p"/admin/notes/#{@note}/edit"}>
           <.button>Edit</.button>
@@ -47,6 +44,7 @@ defmodule ChiyaWeb.NoteShowLive do
       <:item title="Tags"><%= note_tags(@note.tags) %></:item>
       <:item title="Links outgoing"><%= note_links(@note.links_from) %></:item>
       <:item title="Links incoming"><%= note_links(@note.links_to) %></:item>
+      <:item title="Embed"><pre class="p-1 bg-gray-100 text-black rounded select-all">[[<%= @note.slug %>]]</pre></:item>
     </.list>
 
     <.line />