añadida pagina para los posts
This commit is contained in:
@@ -38,7 +38,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<hr class="m-4" />
|
||||
<div class="flex justify-center p-8">
|
||||
|
||||
<!-- Aca esta la parte de abajo de la portada -->
|
||||
|
||||
<div class="flex justify-center p-8 flex-col items-center bg-sky-200 rounded-t-lg shadow-md">
|
||||
<div
|
||||
class="w-[80%] rounded-lg overflow-hidden border-2 shadow-2xl bg-[radial-gradient(circle,rgba(0,0,0,0)_0%,rgba(0,0,0,0.5)_70%,#ffffff_100%),repeating-linear-gradient(45deg,#000000,#000000_10px,#ffffff_10px,#ffffff_20px)]"
|
||||
>
|
||||
@@ -57,100 +60,7 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{{ range first 3 (where .Site.RegularPages "Section" "proyectos") }}
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-md overflow-hidden border hover:shadow-xl transition-shadow duration-300"
|
||||
>
|
||||
{{ if .Params.image }}
|
||||
<img
|
||||
src="{{ .Params.image }}"
|
||||
alt="{{ .Title }}"
|
||||
class="w-full h-48 object-cover"
|
||||
/>
|
||||
{{ else }}
|
||||
<div
|
||||
class="w-full h-48 bg-gray-200 flex items-center justify-center"
|
||||
>
|
||||
<span class="text-gray-500">No image</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="p-4">
|
||||
<h2 class="text-xl font-bold mb-2">{{ .Title }}</h2>
|
||||
<p class="text-gray-700 mb-4">
|
||||
{{ with .Params.description }}{{ . | truncate 150 }}{{ else
|
||||
}}{{ .Summary | truncate 150 }}{{ end }}
|
||||
</p>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<a
|
||||
href="{{ .Permalink }}"
|
||||
class="text-blue-500 hover:text-blue-700"
|
||||
>Ver más</a
|
||||
>
|
||||
|
||||
{{ with .Params.tags }}
|
||||
<div class="flex flex-wrap">
|
||||
{{ range first 2 . }}
|
||||
<span
|
||||
class="text-xs bg-gray-200 rounded-full px-2 py-1 mr-1 mb-1"
|
||||
>
|
||||
{{ . }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<h2 class="text-2xl font-bold mb-6 text-center">Todos los Posts</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{{ range first 6 (where .Site.RegularPages "Section" "posts") }}
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-md overflow-hidden border hover:shadow-xl transition-shadow duration-300"
|
||||
>
|
||||
{{ if .Params.image }}
|
||||
<img
|
||||
src="{{ .Params.image }}"
|
||||
alt="{{ .Title }}"
|
||||
class="w-full h-48 object-cover"
|
||||
/>
|
||||
{{ else }}
|
||||
<div
|
||||
class="w-full h-48 bg-gray-200 flex items-center justify-center"
|
||||
>
|
||||
<span class="text-gray-500">No image</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="p-4">
|
||||
<h2 class="text-xl font-bold mb-2">{{ .Title }}</h2>
|
||||
<p class="text-gray-700 mb-4">
|
||||
{{ with .Params.description }}{{ . | truncate 150 }}{{ else
|
||||
}}{{ .Summary | truncate 150 }}{{ end }}
|
||||
</p>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<a
|
||||
href="{{ .Permalink }}"
|
||||
class="text-blue-500 hover:text-blue-700"
|
||||
>Leer más</a
|
||||
>
|
||||
|
||||
<span class="text-sm text-gray-500"
|
||||
>{{ .Date.Format "Jan 2, 2006" }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{partial "proyectos.html" .}}
|
||||
{{partial "posts.html" .}}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<nav class="bg-gray-800 fixed w-full top-0 z-1">
|
||||
<nav class="bg-gray-800 fixed w-full top-0 z-3">
|
||||
<div class="mx-auto px-4">
|
||||
<div class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center">
|
||||
|
||||
56
layouts/partials/posts.html
Normal file
56
layouts/partials/posts.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<h2 class="text-2xl font-bold mb-6 text-center">Todos los Posts</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{{ range first 6 (where .Site.RegularPages "Section" "posts") }}
|
||||
<div
|
||||
class="
|
||||
bg-white rounded-lg
|
||||
border-4 border-black
|
||||
shadow-[0_4px_0_black]
|
||||
hover:shadow-[0_8px_0_black]
|
||||
hover:-translate-y-1
|
||||
hover:scale-105
|
||||
transition-all duration-100 ease-linear
|
||||
overflow-hidden
|
||||
transform
|
||||
mx-auto
|
||||
hover:z-2
|
||||
"
|
||||
>
|
||||
{{ if .Params.image }}
|
||||
<img
|
||||
src="{{ .Params.image }}"
|
||||
alt="{{ .Title }}"
|
||||
class="w-full h-48 object-cover"
|
||||
/>
|
||||
{{ else }}
|
||||
<div
|
||||
class="w-full h-48 bg-gray-200 flex items-center justify-center"
|
||||
>
|
||||
<span class="text-gray-500 font-mono text-sm">No image</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="p-4">
|
||||
<h2 class="text-xl font-bold mb-2">{{ .Title }}</h2>
|
||||
<p class="text-gray-700 mb-4 font-sans">
|
||||
{{ with .Params.description }}{{ . | truncate 150 }}{{ else
|
||||
}}{{ .Summary | truncate 150 }}{{ end }}
|
||||
</p>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<a
|
||||
href="{{ .Permalink }}"
|
||||
class="text-blue-700 underline hover:text-blue-900 font-medium"
|
||||
>Leer más</a
|
||||
>
|
||||
|
||||
<span class="text-sm text-gray-600 font-mono">
|
||||
{{ .Date.Format "Jan 2, 2006" }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
52
layouts/partials/proyectos.html
Normal file
52
layouts/partials/proyectos.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{{ range first 3 (where .Site.RegularPages "Section" "proyectos") }}
|
||||
<div
|
||||
class="hover:scale-120 hover:z-2 transform-3d hover:rotate-z-2 duration-100 hover:-translate-y-2
|
||||
bg-white rounded-lg shadow-md overflow-hidden border-3 hover:shadow-xl ease-in"
|
||||
>
|
||||
{{ if .Params.image }}
|
||||
<img
|
||||
src="{{ .Params.image }}"
|
||||
alt="{{ .Title }}"
|
||||
class="w-full h-48 object-cover"
|
||||
/>
|
||||
{{ else }}
|
||||
<div
|
||||
class="w-full h-48 bg-gray-200 flex items-center justify-center"
|
||||
>
|
||||
<span class="text-gray-500">No image</span>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="p-4">
|
||||
<h2 class="text-xl font-bold mb-2">{{ .Title }}</h2>
|
||||
<p class="text-gray-700 mb-4">
|
||||
{{ with .Params.description }}{{ . | truncate 150 }}{{ else
|
||||
}}{{ .Summary | truncate 150 }}{{ end }}
|
||||
</p>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<a
|
||||
href="{{ .Permalink }}"
|
||||
class="text-blue-500 hover:text-blue-700"
|
||||
>Ver más</a
|
||||
>
|
||||
|
||||
{{ with .Params.tags }}
|
||||
<div class="flex flex-wrap">
|
||||
{{ range first 2 . }}
|
||||
<span
|
||||
class="text-xs bg-gray-200 rounded-full px-2 py-1 mr-1 mb-1"
|
||||
>
|
||||
{{ . }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -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 }}
|
||||
|
||||
Reference in New Issue
Block a user