From a90e6333088b532af242b677b4442954515a3a11 Mon Sep 17 00:00:00 2001
From: Adrien Beudin <beudbeud@beudibox.fr>
Date: Sat, 9 Apr 2016 09:33:48 +0200
Subject: [PATCH] some stuff and background

---
 .../themes/exposure/static/css/style-page.css | 30 ++++++++++-
 .../exposure/templates/sections/author.html   | 33 ++++++++++++
 .../templates/sections/bordered-picture.html  |  7 +++
 .../exposure/templates/sections/html.html     |  7 +++
 .../templates/sections/paragraph.html         |  6 +++
 .../templates/sections/pictures-group.html    |  6 +++
 .../exposure/templates/sections/text.html     |  6 +++
 .../themes/exposure/templates/share.html      |  3 +-
 .../themes/material/static/css/styles.css     |  8 +++
 .../themes/material/templates/index.html      |  2 +-
 .../material/templates/sections/author.html   | 52 +++++++++++++++++++
 .../templates/sections/bordered-picture.html  |  6 +++
 .../templates/sections/full-picture.html      |  4 +-
 .../material/templates/sections/html.html     |  6 +++
 .../templates/sections/paragraph.html         |  6 +++
 .../templates/sections/pictures-group.html    |  6 +++
 .../material/templates/sections/text.html     |  6 +++
 .../themes/material/templates/share.html      |  2 +-
 18 files changed, 190 insertions(+), 6 deletions(-)
 create mode 100644 prosopopee/themes/exposure/templates/sections/author.html
 create mode 100644 prosopopee/themes/material/templates/sections/author.html

diff --git a/prosopopee/themes/exposure/static/css/style-page.css b/prosopopee/themes/exposure/static/css/style-page.css
index 561fdf2..ddc7db4 100644
--- a/prosopopee/themes/exposure/static/css/style-page.css
+++ b/prosopopee/themes/exposure/static/css/style-page.css
@@ -257,12 +257,13 @@ footer a {
 }
 
 
-.share {
+.share, .author {
     text-align: center;
     height: auto;
     position: relative;
     bottom: 0;
     padding: 0 0 10px 0;
+    font-family: 'crimson', serif;
 }
 
 
@@ -310,3 +311,30 @@ a.google {
     background-position: -172px 0 !important;
 }
 
+.author img.circle {
+    border-radius: 50%;
+    width: 80px;
+}
+
+.author {
+    padding-bottom: 7em;
+}
+
+.author-meta {
+    color: #ccc;
+    font-style: italic;
+    font-size: 19px;
+}
+
+.author h4 {
+    text-transform: uppercase;
+}
+.author .desc {
+    width: 350px;
+    margin: auto;
+    padding-bottom: 10px;
+    font-style: normal;
+    font-size: 14px;
+    line-height: normal;
+    color: #333;
+}
diff --git a/prosopopee/themes/exposure/templates/sections/author.html b/prosopopee/themes/exposure/templates/sections/author.html
new file mode 100644
index 0000000..d4dc3eb
--- /dev/null
+++ b/prosopopee/themes/exposure/templates/sections/author.html
@@ -0,0 +1,33 @@
+{% set image = Image(section.image) %}
+{{ image.copy() }}
+<div class="author">
+    <img src={{ image.generate_thumbnail("200x200") }} alt="" class="circle">
+    <div>
+        <span class=author-meta>Story by</span>
+        <h4>{{ section.name }}</h4>
+        {% if section.text %}
+        <div class=desc>{{ section.text }}</div>
+        {% endif %}
+    </div>
+    <div class="separator"></div>
+    <div>
+        {% if section.twitter %}
+        <span>
+            <a href="http://facebook.com/{{ section.twitter }}">Facebook</a>
+        </span>
+        <span> | </span>
+        {% endif %}
+        {% if section.facebook %}
+        <span>
+            <a href="http://twitter.com/{{ section.twitter }}">Twitter</a>
+        </span>
+        <span> | </span>
+        {% endif %}
+        {% if section.website %}
+        <span>
+            <a href="{{ section.sebsite }}">{{ section.website }}</a>
+        </span>
+        {% endif %}
+    </div>
+</div>
+</div>
diff --git a/prosopopee/themes/exposure/templates/sections/bordered-picture.html b/prosopopee/themes/exposure/templates/sections/bordered-picture.html
index a5f0cf8..5a9d230 100644
--- a/prosopopee/themes/exposure/templates/sections/bordered-picture.html
+++ b/prosopopee/themes/exposure/templates/sections/bordered-picture.html
@@ -1,6 +1,9 @@
 {% set image = Image(section.image) %}
 {% set caption = section.text %}
 {{ image.copy()}}
+{% if section.color %}
+<div style="padding: 1px 0px;background: {{ section.background }};">
+{% endif %}
 <section class="bordered-picture baguette">
     <div class="caption">
         <a href="{{ image }} {% if caption %}data-caption="{{ caption }}"{% endif %}">
@@ -13,3 +16,7 @@
     </div>
         </a>
 </section>
+{% if section.color %}
+</div>
+{% endif %}
+
diff --git a/prosopopee/themes/exposure/templates/sections/html.html b/prosopopee/themes/exposure/templates/sections/html.html
index 464eea9..602e299 100644
--- a/prosopopee/themes/exposure/templates/sections/html.html
+++ b/prosopopee/themes/exposure/templates/sections/html.html
@@ -1,5 +1,12 @@
+{% if section.color %}
+<div style="padding: 1px 0px;background: {{ section.background }};">
+{% endif %}
 <section class="html">
     <center>
         {{ section.html }}
     </center>
 </section>
+{% if section.color %}
+</div>
+{% endif %}
+
diff --git a/prosopopee/themes/exposure/templates/sections/paragraph.html b/prosopopee/themes/exposure/templates/sections/paragraph.html
index c6775a1..efba68e 100644
--- a/prosopopee/themes/exposure/templates/sections/paragraph.html
+++ b/prosopopee/themes/exposure/templates/sections/paragraph.html
@@ -1,3 +1,6 @@
+{% if section.color %}
+<div style="padding: 1px 0px;background: {{ section.background }};">
+{% endif %}
 <section class="paragraph">
   {% if section.title %}
     <h2>{{ section.title }}</h2>
@@ -6,3 +9,6 @@
   {% endif %}
   <p>{{ section.text }}</p>
 </section>
+{% if section.color %}
+</div>
+{% endif %}
diff --git a/prosopopee/themes/exposure/templates/sections/pictures-group.html b/prosopopee/themes/exposure/templates/sections/pictures-group.html
index 6f78714..7b2a850 100644
--- a/prosopopee/themes/exposure/templates/sections/pictures-group.html
+++ b/prosopopee/themes/exposure/templates/sections/pictures-group.html
@@ -1,3 +1,6 @@
+{% if section.color %}
+<div style="padding: 1px 0px;background: {{ section.background }};">
+{% endif %}
 <section class="pictures-group baguette">
     {% for line in section.images %}
         <div class="pictures-line">
@@ -22,3 +25,6 @@
         </div>
         {% endfor %}
 </section>
+{% if section.color %}
+</div>
+{% endif %}
diff --git a/prosopopee/themes/exposure/templates/sections/text.html b/prosopopee/themes/exposure/templates/sections/text.html
index 65e1121..803cc4a 100644
--- a/prosopopee/themes/exposure/templates/sections/text.html
+++ b/prosopopee/themes/exposure/templates/sections/text.html
@@ -1,3 +1,9 @@
+{% if section.color %}
+<div style="padding: 1px 0px;background: {{ section.background }};">
+{% endif %}
 <section class="text">
   {{ section.text }}
 </section>
+{% if section.color %}
+</div>
+{% endif %}
diff --git a/prosopopee/themes/exposure/templates/share.html b/prosopopee/themes/exposure/templates/share.html
index 3cabeda..dcb65b4 100644
--- a/prosopopee/themes/exposure/templates/share.html
+++ b/prosopopee/themes/exposure/templates/share.html
@@ -1,8 +1,9 @@
 {% set absolute_url = settings.url + "/" + link -%}
 <div class=share>
+<h5>Share this story</h5>
 <ul class="icon">
     <li>
-    <a class="twitter" href="https://twitter.com/share?text={{ gallery.name }}&url={{absolute_url}}&hashtags=weareawesome&via=bluleadz"  target="_blank">Twitter</i></a>
+        <a class="twitter" href="https://twitter.com/share?text={{ gallery.name }}&url={{absolute_url}}{%if gallery.tags %}&hashtags={% for tag in gallery.tags -%}{{ tag }}{% if not loop.lirst and not loop.last %},{% endif %}{% endfor -%}{% endif -%}"  target="_blank">Twitter</i></a>
     </li>
     <li>
     <a class="facebook" href="http://www.facebook.com/share.php?u={{absolute_url}}" target="_blank">Facebook</a>
diff --git a/prosopopee/themes/material/static/css/styles.css b/prosopopee/themes/material/static/css/styles.css
index 4cec8a8..d8fbf05 100644
--- a/prosopopee/themes/material/static/css/styles.css
+++ b/prosopopee/themes/material/static/css/styles.css
@@ -112,3 +112,11 @@ main {
 .card-action .right {
     margin-top: -5px;
 }
+
+.author {
+    padding-top: 7em;
+}
+
+.fixed-action-btn.horizontal ul {
+    top: 22%;
+}
diff --git a/prosopopee/themes/material/templates/index.html b/prosopopee/themes/material/templates/index.html
index b0f665e..76f6da6 100644
--- a/prosopopee/themes/material/templates/index.html
+++ b/prosopopee/themes/material/templates/index.html
@@ -14,7 +14,7 @@
         <div class="col s12 m12 l6">
             {% else %}
             {% if loop.last %}
-            <div class="col s12 m12 l12">
+            <div class="col s12 m12 l6">
                 {% else %}
                 <div class="col s12 m12 l6">
                     {% endif %}    
diff --git a/prosopopee/themes/material/templates/sections/author.html b/prosopopee/themes/material/templates/sections/author.html
new file mode 100644
index 0000000..f95e646
--- /dev/null
+++ b/prosopopee/themes/material/templates/sections/author.html
@@ -0,0 +1,52 @@
+{% set image = Image(section.image) %}
+{{ image.copy() }}
+<div class="container author">
+    <div class="section">
+        <div class="row">
+            <div class="col s12 m8 offset-m2 l6 offset-l3">
+                <div class="divider"></div>
+                <div class="section">
+                    <div class="row valign-wrapper">
+                        <div class="col s2">
+                            <img src={{ image.generate_thumbnail("200x200") }} alt="" class="circle responsive-img"> 
+                        </div>
+                        <div class="col s10">
+                            <div class="section">
+                                <span class="grey-text">Story by</span>
+                                <h5>{{ section.name }}</h5>
+                                {% if section.text %}
+                                <span>{{ section.text }}</span>
+                                {% endif %}
+                                <div class="section">
+                                    {% if section.twitter %}
+                                    <span>
+                                        <a class="black-text" href="http://facebook.com/{{ section.twitter }}">
+                                            <i class="fa fa-twitter-square grey-text"></i> Facebook
+                                        </a>
+                                    </span>
+                                    <span class="grey-text"> | </span>
+                                    {% endif %}
+                                    {% if section.facebook %}
+                                    <span>
+                                        <a class="black-text" href="http://twitter.com/{{ section.twitter }}">
+                                            <i class="fa fa-facebook-official grey-text"></i> Twitter
+                                        </a>
+                                    </span>
+                                    <span class="grey-text"> | </span>
+                                    {% endif %}
+                                    {% if section.website %}
+                                    <span>
+                                        <a class="black-text" href="{{ section.sebsite }}">
+                                            <i class="fa fa-globe grey-text"></i> {{ section.website }}
+                                        </a>
+                                    </span>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/prosopopee/themes/material/templates/sections/bordered-picture.html b/prosopopee/themes/material/templates/sections/bordered-picture.html
index 1744d07..b227bf4 100644
--- a/prosopopee/themes/material/templates/sections/bordered-picture.html
+++ b/prosopopee/themes/material/templates/sections/bordered-picture.html
@@ -1,6 +1,9 @@
 {% set image = Image(section.image) %}
 {% set caption = section.text %}
 {{ image.copy()}}
+{% if section.background %}
+<div style="padding: 1px 0px;background: {{ section.background }};">
+{% endif %}
 <div class="bordered-picture baguette caption">
     <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
         <img class="responsive-img" src="{{ image.generate_thumbnail("x2000") }}">
@@ -11,3 +14,6 @@
         {% endif %}
     </a>
 </div>
+{% if section.background %}
+</div>
+{% endif %}
diff --git a/prosopopee/themes/material/templates/sections/full-picture.html b/prosopopee/themes/material/templates/sections/full-picture.html
index 65a7afd..d835488 100644
--- a/prosopopee/themes/material/templates/sections/full-picture.html
+++ b/prosopopee/themes/material/templates/sections/full-picture.html
@@ -1,7 +1,7 @@
 {% set image = Image(section.image) %}
 {{ image.copy() }}
-<div class="parallax-container z-depth-1 valign-wrapper">
-    <div class="parallax"><img src="{{ image }}"></div>
+<div class="parallax-container z-depth-2 valign-wrapper">
+    <div class="parallax"><img class="responsive-img" src="{{ image }}"></div>
     {% if section.text %}
     <div class="parallax-tittle white-text">
         <h1>{{ section.text.title }}</h1>
diff --git a/prosopopee/themes/material/templates/sections/html.html b/prosopopee/themes/material/templates/sections/html.html
index ea85ebc..59153b2 100644
--- a/prosopopee/themes/material/templates/sections/html.html
+++ b/prosopopee/themes/material/templates/sections/html.html
@@ -1,5 +1,11 @@
+{% if section.background %}
+<div style="padding: 1px 0px;background: {{ section.background }};">
+{% endif %}
 <section class="html">
 	<center>
 		{{ section.html }}
 	</center>
 </section>
+{% if section.background %}
+</div>
+{% endif %}
diff --git a/prosopopee/themes/material/templates/sections/paragraph.html b/prosopopee/themes/material/templates/sections/paragraph.html
index 9b427ed..4f04800 100644
--- a/prosopopee/themes/material/templates/sections/paragraph.html
+++ b/prosopopee/themes/material/templates/sections/paragraph.html
@@ -1,3 +1,6 @@
+{% if section.background %}
+<div style="padding: 1px 0px;background: {{ section.background }};">
+{% endif %}
 <div class="container">
 	{% if section.title %}
 	<div id="{{ section.title }}" class="scrollspy">
@@ -8,3 +11,6 @@
 		<p class="flow-text">{{ section.text }}</p>
 	</div>
 </div>
+{% if section.background %}
+</div>
+{% endif %}
diff --git a/prosopopee/themes/material/templates/sections/pictures-group.html b/prosopopee/themes/material/templates/sections/pictures-group.html
index d912ab1..04b4427 100644
--- a/prosopopee/themes/material/templates/sections/pictures-group.html
+++ b/prosopopee/themes/material/templates/sections/pictures-group.html
@@ -1,3 +1,6 @@
+{% if section.background %}
+<div style="padding: 1px 0px;background: {{ section.background }};">
+{% endif %}
 <div class="pictures-group baguette">
     <div class="row">
         {% for line in section.images %}
@@ -25,3 +28,6 @@
         {% endfor %}
     </div>
 </div>
+{% if section.background %}
+</div>
+{% endif %}
diff --git a/prosopopee/themes/material/templates/sections/text.html b/prosopopee/themes/material/templates/sections/text.html
index 9b4381d..e54bc2e 100644
--- a/prosopopee/themes/material/templates/sections/text.html
+++ b/prosopopee/themes/material/templates/sections/text.html
@@ -1,5 +1,11 @@
+{% if section.background %}
+<div style="padding: 1px 0px;background: {{ section.background }};">
+{% endif %}
 <div class="container">
     <p class="flow-text">
     {{ section.text }}
     </p>
 </div>
+{% if section.background %}
+</div>
+{% endif %}
diff --git a/prosopopee/themes/material/templates/share.html b/prosopopee/themes/material/templates/share.html
index b0389e8..d0919eb 100644
--- a/prosopopee/themes/material/templates/share.html
+++ b/prosopopee/themes/material/templates/share.html
@@ -8,7 +8,7 @@
             <a href="../" class="btn-floating btn-large red"><i class="mdi-action-home"></i></a>
         </li>
         <li>
-            <a class="btn-floating grey lighten-3 " href="https://twitter.com/share?text={{ gallery.name }}&url={{absolute_url}}&hashtags=weareawesome&via=bluleadz"  target="_blank"><i class="fa fa-twitter-square grey-text"></i></a>
+            <a class="btn-floating grey lighten-3" href="https://twitter.com/share?text={{ gallery.name }}&url={{absolute_url}}{%if gallery.tags %}&hashtags={% for tag in gallery.tags -%}{{ tag }}{% if not loop.lirst and not loop.last %},{% endif %}{% endfor -%}{% endif -%}"  target="_blank"><i class="fa fa-twitter-square grey-text"></i></a>
         </li>
         <li>
             <a class="btn-floating grey lighten-3" href="http://www.facebook.com/share.php?u={{absolute_url}}" target="_blank"><i class="fa fa-facebook-official grey-text"></i>