diff --git a/content/fotos/_index.md b/content/fotos/_index.md
index 7d90b79..7a2fd87 100644
--- a/content/fotos/_index.md
+++ b/content/fotos/_index.md
@@ -1,3 +1,4 @@
---
title: Fotos
+type: gallery
---
diff --git a/content/fotos/p01/foto.jpg b/content/fotos/p01/foto.jpg
new file mode 100644
index 0000000..af7ac23
Binary files /dev/null and b/content/fotos/p01/foto.jpg differ
diff --git a/content/fotos/p01/index.md b/content/fotos/p01/index.md
new file mode 100644
index 0000000..4682507
--- /dev/null
+++ b/content/fotos/p01/index.md
@@ -0,0 +1,9 @@
++++
+image = "foto.jpg"
+title = "Playa y sombrero en mano"
+type = "gallery"
++++
+
+"La brisa de la playa y el calor del sol en mi cara.
+Solo yo, mi fiel sombrero y la tranquilidad infinita del océano.
+Pura felicidad"
diff --git a/content/fotos/p02/foto.jpg b/content/fotos/p02/foto.jpg
new file mode 100644
index 0000000..8a698c3
Binary files /dev/null and b/content/fotos/p02/foto.jpg differ
diff --git a/content/fotos/p02/index.md b/content/fotos/p02/index.md
new file mode 100644
index 0000000..cfc4a4e
--- /dev/null
+++ b/content/fotos/p02/index.md
@@ -0,0 +1,8 @@
++++
+image = "foto.jpg"
+title = "En medio de la naturaleza"
+type = "gallery"
++++
+
+"En medio del encantador abrazo de la naturaleza,
+una foto para recordar buenos tiempos"
diff --git a/content/fotos/p03/foto.jpg b/content/fotos/p03/foto.jpg
new file mode 100644
index 0000000..6a0a968
Binary files /dev/null and b/content/fotos/p03/foto.jpg differ
diff --git a/content/fotos/p03/index.md b/content/fotos/p03/index.md
new file mode 100644
index 0000000..eb81c3f
--- /dev/null
+++ b/content/fotos/p03/index.md
@@ -0,0 +1,8 @@
++++
+image = "foto.jpg"
+title = "Ritmo vibrante de la noche"
+type = "gallery"
++++
+
+"En el ritmo vibrante de la noche,
+vestido para una importante celebración"
diff --git a/content/fotos/p04/foto.jpg b/content/fotos/p04/foto.jpg
new file mode 100644
index 0000000..98c3c3a
Binary files /dev/null and b/content/fotos/p04/foto.jpg differ
diff --git a/content/fotos/p04/index.md b/content/fotos/p04/index.md
new file mode 100644
index 0000000..c8f688e
--- /dev/null
+++ b/content/fotos/p04/index.md
@@ -0,0 +1,8 @@
++++
+image = "foto.jpg"
+title = "Unión"
+type = "gallery"
++++
+
+"Los momentos más importantes y preciados, son a veces
+los más simples"
diff --git a/content/fotos/p05/foto.jpg b/content/fotos/p05/foto.jpg
new file mode 100644
index 0000000..2aae78f
Binary files /dev/null and b/content/fotos/p05/foto.jpg differ
diff --git a/content/fotos/p05/index.md b/content/fotos/p05/index.md
new file mode 100644
index 0000000..4d06612
--- /dev/null
+++ b/content/fotos/p05/index.md
@@ -0,0 +1,8 @@
++++
+image = "foto.jpg"
+title = "En un abrir y cerrar de ojos"
+type = "gallery"
++++
+
+"Este momento es realmente emotivo y para siempre
+recordará el maravilloso logro de crear una familia"
diff --git a/content/fotos/p06/foto.jpg b/content/fotos/p06/foto.jpg
new file mode 100644
index 0000000..0d98318
Binary files /dev/null and b/content/fotos/p06/foto.jpg differ
diff --git a/content/fotos/p06/index.md b/content/fotos/p06/index.md
new file mode 100644
index 0000000..1684ded
--- /dev/null
+++ b/content/fotos/p06/index.md
@@ -0,0 +1,9 @@
++++
+image = "foto.jpg"
+title = "Decisión"
+type = "gallery"
++++
+
+"A medida que nuestras manos se entrelazan, se abre un nuevo capítulo.
+Adornado con la promesa eterna del amor, con el corazón rebosante de alegría,
+entramos en el camino de la unión"
diff --git a/themes/blog/layouts/_default/baseof.html b/themes/blog/layouts/_default/baseof.html
index 5f8e2ec..55100d5 100644
--- a/themes/blog/layouts/_default/baseof.html
+++ b/themes/blog/layouts/_default/baseof.html
@@ -1,11 +1,14 @@
-
- {{- partial "head.html" . -}}
-
+
+{{- partial "head.html" . -}}
+
+
{{- partial "header.html" . -}}
-
- {{- block "main" . }}{{- end }}
-
- {{- partial "footer.html" . -}}
-
+
+ {{ block "main" . }}{{ end }}
+ {{ partial "footer.html" . }}
+
+
diff --git a/themes/blog/layouts/gallery/list.html b/themes/blog/layouts/gallery/list.html
new file mode 100644
index 0000000..8423ab1
--- /dev/null
+++ b/themes/blog/layouts/gallery/list.html
@@ -0,0 +1,17 @@
+{{ define "main" }}
+{{ .Page.Title }}
+{{ .Content }}
+
+{{ end }}
diff --git a/themes/blog/layouts/gallery/single.html b/themes/blog/layouts/gallery/single.html
new file mode 100644
index 0000000..83ebf85
--- /dev/null
+++ b/themes/blog/layouts/gallery/single.html
@@ -0,0 +1,13 @@
+{{ define "main" }}
+{{ .Page.Title }}
+
+{{ if and (isset .Params "image") .Params.image }}
+ {{ $image := .Page.Resources.GetMatch .Params.image }}
+ {{ with $image }}
+ {{ $thumb := .Resize "x1080" }}
+ {{ printf `
` $thumb.RelPermalink .Title | safeHTML }}
+ {{end}}
+{{ end }}
+{{ .Content }}
+
+{{ end }}
diff --git a/themes/blog/static/css/default.css b/themes/blog/static/css/default.css
index 15b73e2..b7a0800 100644
--- a/themes/blog/static/css/default.css
+++ b/themes/blog/static/css/default.css
@@ -1,22 +1,34 @@
-/* Global formatting */
html {
+ --global-font-size: 15px;
+ --page-width: 60em;
width: 90%;
max-width: 800px;
font-family: sans-serif;
- font-size: 11pt;
background: #121212;
color: #ebdbb2;
margin: auto;
text-align: justify;
}
-/* Highlight links on hover */
-a:hover {
- transition: ease 0.2s;
- color: white;
+@media only screen and (max-width: 850px) {
+ :root {
+ --global-font-size: 14px;
+ --global-line-height: 1.6em;
+ --page-width: 70em;
+ }
+}
+
+/* hide class for certain objects on a phone*/
+@media (max-width: 850px) {
+ .hide-phone {
+ display: none;
+ }
+}
+
+h2,h3,h4,h5,h6,strong {
+ font-size:var(--global-font-size);
}
-/* Headings */
body,h1,h2,h3,h4,h5 {
text-align: left;
}
@@ -25,19 +37,36 @@ h2,h3,h4,h5 {
color: #b8bb26;
}
-/* Navbar */
+a:hover {
+ opacity:0.8;
+}
+
.navbar h2,h4,a {
color: #fe8019;
- padding: 20px 10px 0px;
+ padding: 10px 5px 0px;
text-align: center;
}
-/* EXTRA */
-
-/* hide class for certain objects on a phone*/
-@media (max-width: 600px) {
- .hide-phone {
- display: none;
- }
+.image-grid {
+ display: grid;
+ grid-gap: 10px;
+ grid-template-rows: auto;
+ grid-template-columns: repeat(auto-fit,
+ minmax(calc(var(--page-width) / 4), 1fr));
}
+.container {
+ margin: 0 auto;
+ padding: 0 calc(var(--global-space));
+ max-width: var(--page-width);
+}
+
+img {
+ width: 100%;
+}
+
+.single {
+ max-height: 60vh;
+ max-width: 90vw;
+ width: auto;
+}