ui improvements

pluja · Sep 28, 2023 · 45a6a4b · 45a6a4b
1 parent 9b7f00b
commit 45a6a4b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 42 deletions.
diff --git a/templates/base.html b/templates/base.html
@@ -11,7 +11,7 @@
     </head>
     <body class="flex flex-col items-center justify-center min-h-screen py-4 font-mono text-gray-900 bg-gray-300 dark:bg-zinc-900 dark:text-gray-300">
         <main class="py-8 font-mono">
-            <div class="space-x-4 font-bold text-md">
+            <div class="space-x-2 font-bold text-center text-md">
                 <a class="underline text-base-content" href="/">Home</a>
                 <a class="underline text-base-content" href="/about">About</a>
             </div>

diff --git a/templates/post.html b/templates/post.html
@@ -36,41 +36,39 @@
 
 <section class="px-2 pt-2 pb-8 text-center">
     {{if ne .Article.Image ""}}
-    <div class="w-full px-2 my-4 h-80">
+    <div class="w-full px-2 my-4 h-60 md:h-72">
         <img src="{{.Article.Image}}" class="object-cover object-center w-full h-full opacity-90 dark:opacity-75" alt="">
     </div>
     {{end}}
 
     <h1 class="pt-4 mb-2 text-4xl font-bold text-gray-900 capitalize text-opacity-90 dark:text-gray-300 md:text-5xl">{{.Article.Title}}</h1>
+    {{range .Article.Tags}}
+        <span class="inline-block mb-2 text-xs text-center text-black dark:text-zinc-400">
+            <a class="no-underline hover:text-blue-900 dark:hover:text-blue-300" href="/t/{{.}}">#{{.}}</a>
+        </span>
+    {{end}}
     <div class="mt-3 mb-3 opacity-60">
-        {{if and (ne .Article.NostrUrl "") (ne .Article.NostrUrl "0") (ne .Article.NostrUrl "false")}}
-            <div class="pb-2 text-center">
-                <a class="text-sm font-bold text-blue-900 underline dark:text-blue-300" href="{{.Article.NostrUrl}}">Read on Nostr</a>
-            </div>
-        {{end}}
         {{if .Article.Draft}}
             <div class="pb-2 text-center">
                 <span class="font-bold badge badge-warning badge-lg">DRAFT</span>
             </div>
         {{end}}
-        <p class="pb-1 space-x-2 font-mono text-sm text-center text-base-content">
-            (~{{readTime .Article.Md}} min read)
-        </p>
         {{if ne .Article.Author ""}}
+        <div class="mb-0 text-xs text-black drop-shadow-sm dark:text-slate-100">~{{readTime .Article.Md}} min read</div>
             <div class="mb-0 text-sm text-black drop-shadow-sm dark:text-slate-100">by {{.Article.Author}}, {{humanizeTime .Article.Date}}</div>
         {{else}}
             <div class="mt-2 mb-0 text-sm font-bold text-black dark:text-slate-100">{{humanizeTime .Article.Date}}</div>
         {{end}}
-        {{range .Article.Tags}}
-            <span class="inline-block my-2 text-xs text-center text-black dark:text-slate-100">
-                <a class="no-underline hover:text-blue-900 dark:hover:text-blue-300" href="/t/{{.}}">#{{.}}</a>
-            </span>
+        {{if and (ne .Article.NostrUrl "") (ne .Article.NostrUrl "0") (ne .Article.NostrUrl "false")}}
+            <div class="pb-2 text-center">
+                <a class="text-sm font-bold text-blue-900 underline dark:text-blue-300" href="{{.Article.NostrUrl}}">Read on Nostr</a>
+            </div>
         {{end}}
     </div>  
 </section>
 
 <section class="max-w-full px-6 mt-1">
-    <div id="markdown" class="pb-12 prose prose-2xl prose-blue prose-code:text-base prose-hr:border-zinc-600 prose-hr:dark:border-zinc-400 prose-blockquote:border-blue-600 prose-blockquote:dark:border-blue-900 dark:prose-invert font-garamond">
+    <div id="markdown" class="pb-12 prose prose-xl md:prose-2xl prose-blue prose-code:text-base prose-hr:border-zinc-600 prose-hr:dark:border-zinc-400 prose-blockquote:border-blue-600 prose-blockquote:dark:border-blue-900 dark:prose-invert font-garamond">
         {{html .Article.Html}}
     </div>
 </section>

diff --git a/templates/tag.html b/templates/tag.html
@@ -12,33 +12,32 @@
 {{end}}
 
 {{define "main"}}
-    <section class="flex flex-col items-center justify-center font-mono px-4 mt-8">
-        <h2 class="text-2xl font-bold">🏷️ #{{.Tag}}</h2>
-        <ul class="max-w-lg mb-8 mt-6 space-y-3">
-            {{range .Articles}}
-                <li>
-                    <div class="text-xs text-gray-500">
-                        ({{humanizeTime .Date}})
-                    </div>
-                    <div>
-                        :: <a class="underline text-lg" href="/p/{{.Slug}}">{{.Title}}</a>
-                    </div>
-                    {{if ne .Summary ""}}
-                        <div class="text-sm text-base-content text-opacity-70 text-justify mt-2">
-                            {{.Summary}}
-                        </div>
-                    {{end}}
-                    {{if ne (len .Tags) 0}}
-                        <div class="mt-2">
-                            {{range .Tags}}
-                                <a class="no-underline text-gray-500 text-xs hover:text-info py-2" href="/t/{{.}}">#{{.}}</a>
-                            {{end}}
-                        </div>
-                    {{end}}
-                </li>
-                <div class="divider"></div>
+<section class="flex flex-col items-center justify-center px-4 mt-8 font-mono">
+    <h2 class="text-2xl font-bold">tag: #{{.Tag}}</h2>
+    <ul class="max-w-lg mt-4 mb-8 space-y-8 ">
+        {{range .Articles}}
+        <li>
+            <span class="text-xs mb-0.5 text-right text-gray-500">({{humanizeTime .Date}})</span>
+            <div>
+                .* <a class="text-lg font-bold underline capitalize hover:text-blue-900 dark:hover:text-blue-300"
+                    href="/p/{{.Slug}}">{{.Title}}</a>
+            </div>
+            {{if ne .Summary ""}}
+            <div class="mt-2 text-sm text-justify text-opacity-70 dark:text-gray-400">
+                {{.Summary}}
+            </div>
             {{end}}
-        </ul>
-    </section>
+            {{if ne (len .Tags) 0}}
+            <div class="mt-0.5">
+                {{range .Tags}}
+                <a class="py-2 text-xs text-gray-500 no-underline hover:text-blue-900 dark:hover:text-blue-300"
+                    href="/t/{{.}}">#{{.}}</a>
+                {{end}}
+            </div>
+            {{end}}
+        </li>
+        {{end}}
+    </ul>
+</section>
 
 {{end}}