From 2878eaaeadbc285634c2f655d1154ae61efbd7c2 Mon Sep 17 00:00:00 2001
From: Quentin Schulz <foss@0leil.net>
Date: Mon, 8 Mar 2021 20:07:32 +0100
Subject: [PATCH] prosopopee: themes: exposure: full-picture: fix deformed
 thumbnails for videos

full-picture class used to fit the whole screen which is fine for photos
since they're cropped.

However when a video is to be put in full-picture class, its width is
limited to the one of the display though its thumbnail still has its
width and height set to 100%.

This makes the thumbnail not respect its original ratio and results in
in the video being surrounded by deformed parts of the thumbnail (the
thumbnail taking 100% of the display height while the video only takes
whatever is needed to respect the ratio with the width being 100% of
the display's).

Fixes #138.

Signed-off-by: Quentin Schulz <foss@0leil.net>
---
 prosopopee/themes/exposure/static/css/style-page.css         | 5 ++---
 .../themes/exposure/templates/sections/full-picture.html     | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/prosopopee/themes/exposure/static/css/style-page.css b/prosopopee/themes/exposure/static/css/style-page.css
index 352fc068..4ef4b99c 100644
--- a/prosopopee/themes/exposure/static/css/style-page.css
+++ b/prosopopee/themes/exposure/static/css/style-page.css
@@ -26,10 +26,9 @@ a {
 }
 
 .full-picture {
-  height: 100%;
-  width: 100%;
   min-height: 250px;
   margin-top: 0;
+  display: flex;
 }
 
 .full-picture > .picture-text {
@@ -398,7 +397,7 @@ padding-bottom: 7em;
   z-index: 0;
   bottom: 0;
 }
-.video-container video.fillWidth {
+.video-container .fillWidth {
   width: 100%;
 }
 
diff --git a/prosopopee/themes/exposure/templates/sections/full-picture.html b/prosopopee/themes/exposure/templates/sections/full-picture.html
index 338c4526..064358b8 100644
--- a/prosopopee/themes/exposure/templates/sections/full-picture.html
+++ b/prosopopee/themes/exposure/templates/sections/full-picture.html
@@ -21,13 +21,13 @@ <h2>{{ section.text.sub_title }}</h2>
     <video autoplay loop muted class="fillWidth">
       <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
     </video>
-    <img class="lazy full-picture responsive-video" src="/../static/img/11-14.svg" data-src="{{ video.generate_thumbnail("2000") }}">
+    <img class="lazy fillWidth responsive-video" src="/../static/img/11-14.svg" data-src="{{ video.generate_thumbnail("2000") }}">
   </div>
 </section>
 {% else %}
 {% set image = Image(section.image) %}
 {{ image.copy() }}
-<section class="lazy full-picture" data-bg="url({{ image.generate_thumbnail("x2000") }})" style="background-position: {% if section.background_position %} {{ section.background_position }} {% else %} 50% 50%{% endif %}; background-repeat: no-repeat; background-attachment: {% if section.fixed %} fixed {% else %} scroll {% endif %};background-size: cover;">
+<section class="lazy full-picture" data-bg="url({{ image.generate_thumbnail("x2000") }})" style="background-position: {% if section.background_position %} {{ section.background_position }} {% else %} 50% 50%{% endif %}; background-repeat: no-repeat; background-attachment: {% if section.fixed %} fixed {% else %} scroll {% endif %};background-size: cover; height: 100%;">
   {% if section.text %}
   <div class="picture-text">
     <div class="picture-text-column animated animatedFadeInUp fadeInUp">