añadida pagina para los posts

layouts/posts/single.html

@@ -1,18 +1,59 @@
 {{ define "main" }}
-{{ partial "nav.html" . }}
-<div class="pt-16 shadow-md">
-    {{ if .Params.image }}
-    <img alt="" src="{{.Params.Image | relURL}}"
-        style="object-fit: cover;"
-        class="w-screen h-80  object-cover"
-    />
-    {{ end }}
-    <div class="flex pt-4 gap-2 md-4 text-center flex-col bg-slate-800 text-white">
-        <h1 class="font-bold text-6xl antialiased underline font-sans">{{ .Title }}</h1>
-        <p class="text-xl font-thin italic">Fecha: {{ .Date.Format "02 Jan 2006" }}</p>
+{{ partial "nav.html" .}}
+<div class="bg-blue-300 p-12"></div>
+<div class="bg-blue-300">
+    <div class="bg-white rounded-md flex flex-col items-center px-2 py-6 max-w-4xl mx-auto">
+        <!-- Portada del post -->
+        <div class="w-full mb-8 overflow-hidden rounded-lg shadow-xl border-4 border-black">
+            {{ if .Params.image }}
+            <img
+                src="{{ .Params.Image | relURL }}"
+                alt="{{ .Title }}"
+                class="w-full h-auto object-cover"
+            />
+            {{ else }}
+            <div class="bg-gray-200 text-gray-600 font-mono text-center py-16">
+                No image
+            </div>
+            {{ end }}
+        </div>
+
+        <!-- Título -->
+        <h1 class="text-4xl font-bold mb-4 text-center">{{ .Title }}</h1>
+
+        <!-- Metadata -->
+        <div class="text-sm text-gray-600 mb-6 font-mono flex gap-4 justify-center">
+            <span>Publicado el: {{ .Date.Format "Jan 2, 2006" }}</span>
+            {{ with .Params.tags }}
+            <div class="flex gap-2">
+                {{ range . }}
+                <span class="px-2 py-1 bg-gray-200 rounded-full">#{{ . }}</span>
+                {{ end }}
+            </div>
+            {{ end }}
+        </div>
+
+        <!-- Contenido del post -->
+        <div class="prose prose-lg max-w-none mb-12">
+            {{ .Content }}
+        </div>
+
+        <!-- Botón de volver -->
+        <a
+            href="/"
+            class="
+                inline-block mt-6
+                border-2 border-black bg-white px-6 py-2
+                shadow-[0_4px_0_black]
+                hover:shadow-[0_8px_0_black]
+                hover:-translate-y-1
+                transition-all duration-100 ease-linear
+                font-medium
+            "
+        >
+            ← Volver
+        </a>
     </div>
 </div>
-<article class=" sm:px-2 md:px-16 lg:px-32">
-    <div>{{ .Content }}</div>
-</article>
+<div class="bg-blue-300 p-5"></div>
 {{ end }}