feat: Page templata and initial figure/gallery support.

README.md

@@ -1,2 +1,10 @@
 # zola-ludwig
+The theme needs some translation keys to be put on the `config.toml` file to work:
+```toml
+default-language = "es"
+[translations]
+date-published = "Publicado en"
+[languages.en.translations]
+date-published = "Published on"
+```
 

sass/forkawesome/_icons.scss

@@ -48,7 +48,7 @@
 // .#{$fa-css-prefix}-barcode:before { content: fa-content($fa-var-barcode); }
 // .#{$fa-css-prefix}-tag:before { content: fa-content($fa-var-tag); }
 // .#{$fa-css-prefix}-tags:before { content: fa-content($fa-var-tags); }
-// .#{$fa-css-prefix}-book:before { content: fa-content($fa-var-book); }
+.#{$fa-css-prefix}-book:before { content: fa-content($fa-var-book); }
 // .#{$fa-css-prefix}-bookmark:before { content: fa-content($fa-var-bookmark); }
 // .#{$fa-css-prefix}-print:before { content: fa-content($fa-var-print); }
 // .#{$fa-css-prefix}-camera:before { content: fa-content($fa-var-camera); }
@@ -121,7 +121,7 @@
 // .#{$fa-css-prefix}-warning:before,
 // .#{$fa-css-prefix}-exclamation-triangle:before { content: fa-content($fa-var-exclamation-triangle); }
 // .#{$fa-css-prefix}-plane:before { content: fa-content($fa-var-plane); }
-// .#{$fa-css-prefix}-calendar:before { content: fa-content($fa-var-calendar); }
+.#{$fa-css-prefix}-calendar:before { content: fa-content($fa-var-calendar); }
 // .#{$fa-css-prefix}-random:before { content: fa-content($fa-var-random); }
 // .#{$fa-css-prefix}-comment:before { content: fa-content($fa-var-comment); }
 // .#{$fa-css-prefix}-magnet:before { content: fa-content($fa-var-magnet); }

sass/main.scss

@@ -1,15 +1,26 @@
 html {
 	height: 100vh;
-}
+	text-rendering:optimizeLegibility;
-
-body {
-	margin: 0;
-	background-color: rgb(80, 80, 80);
-	color: rgb(255, 255, 255);
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 400;
 	font-size: 16pt;
+	color: rgb(255, 255, 255);
+}
+
+a {
+	color: rgb(255, 255, 255);
+	text-decoration: none;
+    font-weight: bold;
+}
+
+a:hover {
+	color: rgb(242,132,14);
+}
+
+body {
+	margin: 0;
+	background-color: rgb(80, 80, 80);
 }
 
 main.home {
@@ -17,6 +28,31 @@ main.home {
 	display: flex;
 }
 
+main.article {
+	width: 66vw;
+	max-width: 850px;
+	margin-left: auto;
+	margin-right: auto;
+	font-size: 14pt;
+}
+
+header {
+	width: 66vw;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+header h1 {
+	font-size: 2.5em;
+	padding-top: 1em;
+	margin: 0;
+}
+
+footer {
+	display: flex;
+	justify-content: center;
+}
+
 .column {
 	display: flex;
 	flex-direction: column;
@@ -37,26 +73,105 @@ main.home {
 
 .instant  {
 	background-color: rgb(255, 255, 255);
+	color: rgb(10, 10, 10);
 	padding: 2vw;
+	text-align: center;
 }
 
-.instant img {
+div.instant > img {
 	max-width: 25vw;
 }
 
 .instant h1 {
-	text-align: center;
+	font-weight: 700;
-	color: rgb(10, 10, 10);
-    font-weight: 700;
 	margin: 1vw 0 0 0;
 }
 
 .links a {
-	color: rgb(255, 255, 255);
 	font-size: xx-large;
 }
 
-.links a:hover {
+.meta {
-	color: rgb(242,132,14);
+	padding-left: 0.75em;
+	color: rgb(200, 200, 200);
+	font-size: 0.9em;
 }
 
+figure.instant {
+	margin-left: auto;
+	margin-right: auto;
+	padding: 2vw 0;
+}
+
+figure > picture > img {
+	display: block;
+	margin: 0 2vw;
+	max-width: calc(100% - 4vw);
+	width: calc(100% - 4vw);
+	height: auto;
+}
+
+figure > figcaption > p {
+	margin: 1vw 2vw 0;
+}
+
+.gallery {
+	@extend .instant;
+	padding: 1.5vw;
+	--row-height: 23vh;
+	// margin: -0.25rem;
+	display: flex;
+	flex-wrap: wrap;
+	overflow: hidden;
+	justify-content: center;
+	align-items: flex-end;
+}
+
+@media only screen and (max-height: 1044px) {
+.gallery {
+	--row-height: 240px;
+}
+}
+
+.gallery > .box {
+	--ratio: calc(var(--w) / var(--h));
+	flex-grow: calc(var(--ratio) * 100);
+	flex-shrink: calc(var(--ratio) * 100);
+	flex-basis: calc(var(--ratio) * var(--row-height));
+	/*min-width: var(--min-width);*/
+	min-height: calc(0.7 * var(--row-height));
+	margin: 0.5vw;
+}
+
+// .container-gallery .gallery .box {
+// 	margin: 0.5rem;
+// }
+
+.gallery > .box > figure {
+	display: block;
+	padding: 0;
+	margin: 0px;
+	width: 100%;
+	height: auto;
+	min-width: 100%;
+	min-height: 100%;
+	object-fit: cover;
+}
+
+.gallery img {
+	margin: 0;
+	min-width: 100%;
+	min-height: 100%;
+}
+
+// .gallery + .box {
+// 	margin-top: calc(0.5rem);
+// }
+//
+// .gallery + .gallery {
+// 	margin-top: calc(0.25rem);
+// }
+//
+// .box + .gallery {
+// 	margin-top: calc(0.25rem - 10px);
+// }

templates/page.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>{{ config.title }}</title>
+	<link as="font" crossorigin="" href="/fonts/forkawesome.woff2" rel="preload" type="font/woff2">
+	<link as="font" crossorigin="" href="/fonts/Montserrat-Regular.woff2" rel="preload" type="font/woff2">
+	<link as="font" crossorigin="" href="/fonts/Montserrat-Bold.woff2" rel="preload" type="font/woff2">
+	<link rel="stylesheet" href="{{ get_url(path='fonts.css') }}">
+	<link rel="stylesheet" href="{{ get_url(path='forkawesome.css') }}">
+	<link rel="stylesheet" href="{{ get_url(path='main.css') }}">
+</head>
+<body>
+	<header>
+		<h1>{{ page.title | safe }}</h1>
+		<span class="meta">
+			<span class="fa fa-calendar"></span>
+			{{ trans(key="published",lang=lang) }} {{ page.date }}
+			{% if page.updated -%}
+			({{ trans(key="updated",lang=lang) }} {{ page.updated }})
+			{%- endif -%}
+		</span>
+	</header>
+	<main class="article">
+		{{ page.content | safe }}
+	</main>
+	{%- if config.extra.links -%}
+	<footer>
+		<div class="links">
+			{%- for link in config.extra.links -%}
+				<a rel="me" href="{{ link.url }}" title="{{ link.title }}">
+					<span class="fa {{ 'fa-' ~ link.icon }}"></span>
+				</a>
+			{%- endfor -%}
+		</div>
+	</footer>
+	{%- endif -%}
+</body>
+</html>

templates/shortcodes/end.html

@@ -0,0 +1 @@
+</div>

templates/shortcodes/figure.html

@@ -0,0 +1,52 @@
+{% set orig_thumb = src %}
+{% if thumb %}
+	{% set orig_thumb = src |
+	replace(from=".jpg",to=thumb~".jpg") |
+	replace(from=".png",to=thumb~".png") %}
+{% endif %}
+{% set webp_thumb = thumb |
+replace(from=".jpg",to=".webp") |
+replace(from=".png",to=".webp") %}
+{% set avif_thumb = webp_thumb |
+replace(from=".webp",to=".avif") %}
+
+{% set src_url = get_url(path=src) %}
+{% set thumb_url = get_url(path=orig_thumb) %}
+{% set webp_url = get_url(path=webp_thumb) %}
+{% set avif_url = get_url(path=avif_thumb) %}
+
+{% set img_data = get_image_metadata(path=src) %}
+{% set thumb_data = get_image_metadata(path=orig_thumb) %}
+{% set avif_data = get_image_metadata(path=avif_thumb,allow_missing=true) %}
+{% set webp_data = get_image_metadata(path=webp_thumb,allow_missing=true) %}
+<div class="box"
+	style="--w:{{thumb_data.width}};--h:{{thumb_data.height}};"
+>
+<figure class="instant"
+	style="max-width:calc({{thumb_data.width}}px + 4vw)"
+	itemprop="associatedMedia" itemscope
+	itemtype="http://schema.org/ImageObject"
+>
+	<picture
+		
+		class="thumb {%if avif_data %} avif{%endif%}{%if webp_data %} webp{%endif%}"
+		data-size="{{img_data.width}}x{{img_data.height}}"
+	>
+		{% if avif_data %}
+		<source srcset="{{avif_url}}" type="image/avif">
+		{% endif %}
+		{% if webp_data %}
+		<source srcset="{{webp_url}}" type="image/webp">
+		{% endif %}
+		<source srcset="{{thumb_url}}" type="image/{{thumb_data.format}}">
+		<img itemprop="thumbnail" src="{{thumb_url}}"
+		{% if caption %} alt="{{caption | markdown | striptags}}{% endif %}"/>
+	</picture>
+	<a href="/{{src_url}}" itemprop="contentUrl"></a>
+	{% if caption %}
+	<figcaption>
+		{{ caption | markdown | safe }}
+	</figcaption>
+	{% endif %}
+</figure>
+</div>

templates/shortcodes/gallery.html

@@ -0,0 +1 @@
+<div class="gallery" itemscope itemtype="http://schema.org/ImageGallery">