From ef199a5d527065db50fa8d41dc690d8f2667ee36 Mon Sep 17 00:00:00 2001
From: Adrien Beudin <beudbeud@beudibox.fr>
Date: Thu, 26 May 2016 12:09:01 +0200
Subject: [PATCH] fix caption on video

---
 .../themes/exposure/static/css/style-page.css | 19 ++++++++++++-------
 .../exposure/templates/sections/author.html   |  5 +++--
 .../templates/sections/pictures-group.html    |  6 ++++++
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/prosopopee/themes/exposure/static/css/style-page.css b/prosopopee/themes/exposure/static/css/style-page.css
index 1ef75c8..0c2888a 100644
--- a/prosopopee/themes/exposure/static/css/style-page.css
+++ b/prosopopee/themes/exposure/static/css/style-page.css
@@ -256,7 +256,7 @@ footer a {
 }
 
 
-.share, .author {
+.share, .author-meta {
     text-align: center;
     height: auto;
     position: relative;
@@ -310,25 +310,30 @@ a.google {
     background-position: -172px 0 !important;
 }
 
-.author img.circle {
+.author-meta img.circle {
     border-radius: 50%;
     width: 80px;
 }
 
-.author {
+.author-meta {
     padding-bottom: 7em;
 }
 
-.author-meta {
+.author-info {
     color: #ccc;
     font-style: italic;
     font-size: 19px;
 }
 
-.author h4 {
+.author-info h4 {
     text-transform: uppercase;
+    text-align: center;
+    font-family: 'crimson', serif;
+    color: black;
+    font-style: normal;
+    font-weight: bold;
 }
-.author .desc {
+.author-info .desc {
     width: 350px;
     margin: auto;
     padding-bottom: 10px;
@@ -343,7 +348,7 @@ a.google {
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 2;
+    z-index: 0;
     width: 100%;
     height: auto;
 }
diff --git a/prosopopee/themes/exposure/templates/sections/author.html b/prosopopee/themes/exposure/templates/sections/author.html
index b321bf6..3676d4c 100644
--- a/prosopopee/themes/exposure/templates/sections/author.html
+++ b/prosopopee/themes/exposure/templates/sections/author.html
@@ -1,13 +1,14 @@
 {% set image = Image(section.image) %}
 {{ image.copy() }}
-<div class="author">
+<div class="author-meta">
     <img src={{ image.generate_thumbnail("200x200") }} alt="" class="circle">
     <div>
-        <span class=author-meta>Story by</span>
+        <span class=author-info>Story by
         <h4>{{ section.name }}</h4>
         {% if section.text %}
         <div class=desc>{{ section.text }}</div>
         {% endif %}
+        </span>
     </div>
     <div class="separator"></div>
     <div>
diff --git a/prosopopee/themes/exposure/templates/sections/pictures-group.html b/prosopopee/themes/exposure/templates/sections/pictures-group.html
index b0dc977..09e4ed4 100644
--- a/prosopopee/themes/exposure/templates/sections/pictures-group.html
+++ b/prosopopee/themes/exposure/templates/sections/pictures-group.html
@@ -6,6 +6,7 @@
         <div class="pictures-line">
             {% for image in line %}
             {% if image.type == "video" %}
+            {% set caption = image.text %}
             {% set video = Video(image) %}
             {{ video.copy() }}
             {% else %}
@@ -19,6 +20,11 @@
                 <video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
                     <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
                 </video>
+                {% if caption %}
+                <div class="caption__overlay">
+                    <h5 class="caption__overlay__title">{{ caption }}</h5>
+                </div>
+                {% endif %}
                 {% set video = "" %}
                 {% else %}
                 <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>