Refactor homepage list

4 files changed, 65 insertions, 10 deletions

diff --git a/assets/theme.scss b/assets/theme.scss
index 4459a79..f98dd45 100644
--- a/assets/theme.scss
+++ b/assets/theme.scss
@@ -94,7 +94,7 @@ a {
 }
 
 .button {
-	padding: .5em 1em;
+	padding: .5em .75em;
 	font-size: 1.2em;
 	text-align: center;
 	border: 1px solid black;
@@ -211,8 +211,7 @@ blockquote {
 	}
 }
 
-.content,
-.summary {
+.content {
 	width: 100%;
 	& > * {
 		margin-top: 1.5em;
@@ -293,6 +292,34 @@ blockquote {
 	}
 }
 
+.summary {
+	&:not(:first-child) {
+		margin-top: 5em;
+	}
+	& > * {
+		margin-top: 1em;
+	}
+	&__container {
+		position: relative;
+		width: 100%;
+		margin-bottom: 5em;
+	}
+	&__title {
+		position: absolute;
+		bottom: -2em;
+		margin: .5em;
+		padding: .5em;
+		z-index: 1;
+		background-color: white;
+		border: 1px solid #333;
+		text-align: center;
+	}
+	.button {
+		display: block;
+		margin: inherit 1em;
+	}
+}
+
 @media (max-width: 1200px) {
 	body {
 		grid-gap: 0;
@@ -304,7 +331,7 @@ blockquote {
 	}
 	.main,
 	.footer {
-		margin: .5em 0.75em 0 .5em;
+		margin: 1em 0.75em 0 .5em;
 	}
 	.header {
 		margin: 0;
@@ -329,6 +356,25 @@ blockquote {
 		margin-left: 0;
 		margin-right: 0;
 	}
+	.summary {
+		margin-top: unset;
+		&:not(:first-child) {
+			margin-top: 3em;
+		}
+		&__container {
+			position: relative;
+			margin-bottom: unset;
+		}
+		&__title {
+			margin: unset;
+			padding: unset;
+			position: unset;
+			border: none;
+		}
+		&__image {
+			margin-top: 1em;
+		}
+	}
 }
 
 @media (max-width: 600px) {
diff --git a/layouts/index.html b/layouts/index.html
index c5336f9..328efa5 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,9 +1,6 @@
 {{ define "main" }}
 	{{ range .Paginator.Pages }}
-		<article class="summary">
-			<h2><a href="{{.Permalink}}" data-rel="prefetch">{{.Title}}</a></h2>
-			<p>{{.Summary}}</p>
-		</article>
+		{{- partial "post/summary.html" . -}}
 	{{ end }}
 	{{- partial "page/pagination.html" . -}}
 {{ end }}
diff --git a/layouts/partials/page/pagination.html b/layouts/partials/page/pagination.html
index 0c70579..d303240 100644
--- a/layouts/partials/page/pagination.html
+++ b/layouts/partials/page/pagination.html
@@ -1,10 +1,10 @@
 {{ if gt .Paginator.TotalPages 1 }}
 	<nav class="pagination">
 		{{ if .Paginator.HasPrev }}
-			<a class="button" role="button" href="{{ trim .Paginator.Prev.URL "/" | absLangURL }}" data-rel="prefetch"><< {{ i18n "previous" }} </a>
+			<a class="button" role="button" href="{{ trim .Paginator.Prev.URL "/" | absLangURL }}" data-rel="prefetch">< {{ i18n "previous" }} </a>
 		{{ else }} <span></span> {{ end }}
 		{{ if .Paginator.HasNext }}
-			<a class="button" role="button" href="{{ trim .Paginator.Next.URL "/" | absLangURL }}" data-rel="prefetch"> {{ i18n "next" }} >></a>
+			<a class="button" role="button" href="{{ trim .Paginator.Next.URL "/" | absLangURL }}" data-rel="prefetch"> {{ i18n "next" }} ></a>
 		{{ else }} <span></span> {{ end }}
 	</nav>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/post/summary.html b/layouts/partials/post/summary.html
new file mode 100644
index 0000000..560d92f
--- /dev/null
+++ b/layouts/partials/post/summary.html
@@ -0,0 +1,12 @@
+<article class="summary">
+    <div class="summary__container">
+        <h2 class="summary__title">{{.Title}}</h2>
+        <amp-img class="summary__image"
+            src="{{.Params.Image.Src}}"
+            layout="responsive"
+            width="1280"
+            height="720"></amp-img>
+    </div>
+    <p>{{.Summary}}</p>
+    <a class="button" role="button" href="{{.Permalink}}" data-rel="prefetch">Seguir leyendo...</a>
+</article>
\ No newline at end of file