Template cleanup

app/templates/layouts/app.html.slim

@@ -4,7 +4,8 @@ html
 
     meta name="viewport" content="width=device-width, initial-scale=1.0"
 
-    meta name="theme-color" content="rgb(37, 99, 235)"
+    meta name="theme-color" content="#2563eb" media="(prefers-color-scheme: light)"
+    meta name="theme-color" content="#1e1b4b" media="(prefers-color-scheme: dark)"
 
     title #{context.content_for(:title)} #{Hanami.app.settings.site_name}
 
@@ -37,7 +38,7 @@ html
 
     - if Hanami.app.settings.micropub_pub_key
       link rel="pgpkey" href="/key"
-  body class="bg-white dark:bg-indigo-950 selection:bg-blue-100 selection:text-blue-900 dark:selection:bg-blue-600 dark:selection:text-blue-100" x-data="{ imgModal : false, imgModalSrc : '', imgModalDesc : '' }" x-on:keydown.escape="imgModal=false"
+  body class="bg-white dark:bg-indigo-950 selection:bg-blue-100 selection:text-blue-900 dark:selection:bg-amber-600 dark:selection:text-amber-400" x-data="{ imgModal : false, imgModalSrc : '', imgModalDesc : '' }" x-on:keydown.escape="imgModal=false"
     main class="pb-8 px-4 pt-4 md:pt-8"
       header class="mb-12 max-w-screen-md mx-auto"
         div class="flex items-center mb-8 md:mb-12 text-lg md:text-xl text-gray-400 dark:text-gray-600"

app/templates/recently_played/index.html.slim

@@ -1,10 +1,10 @@
-div class="grid grid-cols-4 gap-4"
+div class="grid grid-cols-4 gap-2"
     - recently_played_music.each do |album|
         a href="#{album[:href]}"
             div
-                img class="rounded transition-transform ease-out hover:scale-105" src="#{album[:image]}"
+                img class="m-0 rounded transition-transform ease-out hover:scale-105" src="#{album[:image]}"
                 span class="inline-block text-sm"
-                    = album[:name]
+                  = album[:name]
                 br
                 span class="inline-block text-sm font-bold"
-                    = album[:artist]
+                  = album[:artist]

app/templates/shared/_bookmark.html.slim

@@ -1,7 +1,7 @@
 div class="mb-4"
   div class="mb-4"
     h3 class="text-xl text-blue-600 dark:text-slate-200 mb-2"
-      a class="u-url border-b-2 border-transparent hover:border-blue-600 hover:dark:border-slate-200 hover:border-b-2" href="/bookmark/#{bookmark.slug}"
+      a class="u-url hover:text-blue-900 hover:dark:text-slate-600" href="/bookmark/#{bookmark.slug}"
         = "#{bookmark.name} "
 
     small class="text-gray-400 hover:text-gray-600"

app/templates/shared/_post.html.slim

@@ -1,6 +1,6 @@
 div class="mb-8 h-entry"
   h3 class="text-xl text-blue-500 dark:text-indigo-300 mb-2"
-    a class="hover:text-blue-900" href="/post/#{post.slug}"
+    a class="u-url hover:text-blue-900" href="/post/#{post.slug}"
       = post.display_title
   div class="e-content prose-p:mb-0 prose-img:my-2 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline p-name text-base prose prose-ul:list-none prose-ul:pl-0 prose-li:pl-0 text-gray-800 dark:text-gray-200 prose-a:dark:text-gray-100"
     == post.excerpt

app/templates/tags/index.html.slim

@@ -1,15 +1,15 @@
 - context.content_for(:title, "Tags | ")
 
-div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200"
+div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200 columns-2"
   h1 Tags
 
   - tag_groups.each do |group, tags|
-    div
-      h3 class="text-xl mt-6 mb-2 font-bold text-gray-800 dark:text-gray-200" = group.upcase
+    div class="break-inside-avoid-column"
+      h3 class="border-b-2" class="text-xl mt-6 mb-2 font-bold text-gray-800 dark:text-gray-200" = group.upcase
 
       - tags.each do |post_tag|
-        span class="inline-block mb-2"
-          a  class="p-category no-underline rounded p-1 mr-1 text-xsm u-url bg-yellow-100/60 hover:bg-yellow-200 dark:bg-amber-400/60 dark:hover:bg-amber-400/80 dark:text-amber-50 dark:hover:text-amber-100 text-gray-600" href="/tagged/#{post_tag.slug}"
+        div
+          a class="p-category no-underline rounded p-1 mr-1 u-url text-gray-600 dark:text-indigo-400 hover:text-gray-900" href="/tagged/#{post_tag.slug}"
             = post_tag.label
 div class="max-w-screen-md mx-auto border-t border-solid border-gray-200 dark:border-gray-600"