From 3b13ee03a2c7acb5d7a5fcad8ee4d2e980182eb4 Mon Sep 17 00:00:00 2001
From: Adrien Beudin <beudbeud@beudibox.fr>
Date: Wed, 13 Apr 2016 11:45:26 +0200
Subject: [PATCH 1/4] add support of text color

---
 prosopopee/themes/exposure/static/css/style-page.css        | 4 +---
 .../exposure/templates/sections/bordered-picture.html       | 4 ++--
 prosopopee/themes/exposure/templates/sections/html.html     | 6 +++---
 .../themes/exposure/templates/sections/paragraph.html       | 6 +++---
 .../themes/exposure/templates/sections/pictures-group.html  | 4 ++--
 prosopopee/themes/exposure/templates/sections/text.html     | 6 +++---
 prosopopee/themes/material/static/css/styles.css            | 6 ++++++
 prosopopee/themes/material/templates/sections/html.html     | 6 +++---
 .../themes/material/templates/sections/paragraph.html       | 6 +++---
 prosopopee/themes/material/templates/sections/text.html     | 6 +++---
 10 files changed, 29 insertions(+), 25 deletions(-)

diff --git a/prosopopee/themes/exposure/static/css/style-page.css b/prosopopee/themes/exposure/static/css/style-page.css
index ddc7db4..cedb963 100644
--- a/prosopopee/themes/exposure/static/css/style-page.css
+++ b/prosopopee/themes/exposure/static/css/style-page.css
@@ -8,6 +8,7 @@ body {
     height: 100%;
     width: 100%;
     background-color: #FBFBFB;
+    color: black;
     margin: 0;
 }
 
@@ -103,7 +104,6 @@ a {
     line-height: 1.8em;
     margin-left: 21%;
     margin-right: 21%;
-    color: black;
 }
 
 .paragraph {
@@ -112,7 +112,6 @@ a {
     font-size: 1em;
     margin-left: 21%;
     margin-right: 21%;
-    color: #333;
 }
 
 .paragraph h2 {
@@ -120,7 +119,6 @@ a {
     font-weight: normal;
     font-size: 2.5em;
     text-transform: uppercase;
-    color: black;
     line-height: 1.4em;
 }
 
diff --git a/prosopopee/themes/exposure/templates/sections/bordered-picture.html b/prosopopee/themes/exposure/templates/sections/bordered-picture.html
index 5a9d230..bc6ef98 100644
--- a/prosopopee/themes/exposure/templates/sections/bordered-picture.html
+++ b/prosopopee/themes/exposure/templates/sections/bordered-picture.html
@@ -1,7 +1,7 @@
 {% set image = Image(section.image) %}
 {% set caption = section.text %}
 {{ image.copy()}}
-{% if section.color %}
+{% if section.background %}
 <div style="padding: 1px 0px;background: {{ section.background }};">
 {% endif %}
 <section class="bordered-picture baguette">
@@ -16,7 +16,7 @@
     </div>
         </a>
 </section>
-{% if section.color %}
+{% if section.background %}
 </div>
 {% endif %}
 
diff --git a/prosopopee/themes/exposure/templates/sections/html.html b/prosopopee/themes/exposure/templates/sections/html.html
index 602e299..c233fe8 100644
--- a/prosopopee/themes/exposure/templates/sections/html.html
+++ b/prosopopee/themes/exposure/templates/sections/html.html
@@ -1,12 +1,12 @@
-{% if section.color %}
-<div style="padding: 1px 0px;background: {{ section.background }};">
+{% if section.background or section.color %}
+<div style="{% if section.background -%}padding: 1px 0px;background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
 {% endif %}
 <section class="html">
     <center>
         {{ section.html }}
     </center>
 </section>
-{% if section.color %}
+{% if section.background or section.color %}
 </div>
 {% endif %}
 
diff --git a/prosopopee/themes/exposure/templates/sections/paragraph.html b/prosopopee/themes/exposure/templates/sections/paragraph.html
index efba68e..c52f6f6 100644
--- a/prosopopee/themes/exposure/templates/sections/paragraph.html
+++ b/prosopopee/themes/exposure/templates/sections/paragraph.html
@@ -1,5 +1,5 @@
-{% if section.color %}
-<div style="padding: 1px 0px;background: {{ section.background }};">
+{% if section.background or section.color %}
+<div style="{% if section.background -%}padding: 1px 0px;background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
 {% endif %}
 <section class="paragraph">
   {% if section.title %}
@@ -9,6 +9,6 @@
   {% endif %}
   <p>{{ section.text }}</p>
 </section>
-{% if section.color %}
+{% if section.background or 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 7b2a850..cc48ba3 100644
--- a/prosopopee/themes/exposure/templates/sections/pictures-group.html
+++ b/prosopopee/themes/exposure/templates/sections/pictures-group.html
@@ -1,4 +1,4 @@
-{% if section.color %}
+{% if section.background %}
 <div style="padding: 1px 0px;background: {{ section.background }};">
 {% endif %}
 <section class="pictures-group baguette">
@@ -25,6 +25,6 @@
         </div>
         {% endfor %}
 </section>
-{% if section.color %}
+{% if section.background %}
 </div>
 {% endif %}
diff --git a/prosopopee/themes/exposure/templates/sections/text.html b/prosopopee/themes/exposure/templates/sections/text.html
index 803cc4a..3769bb9 100644
--- a/prosopopee/themes/exposure/templates/sections/text.html
+++ b/prosopopee/themes/exposure/templates/sections/text.html
@@ -1,9 +1,9 @@
-{% if section.color %}
-<div style="padding: 1px 0px;background: {{ section.background }};">
+{% if section.background or section.color %}
+<div style="{% if section.background -%}padding: 1px 0px;background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
 {% endif %}
 <section class="text">
   {{ section.text }}
 </section>
-{% if section.color %}
+{% if section.background or section.color %}
 </div>
 {% endif %}
diff --git a/prosopopee/themes/material/static/css/styles.css b/prosopopee/themes/material/static/css/styles.css
index d8fbf05..7b5bdd9 100644
--- a/prosopopee/themes/material/static/css/styles.css
+++ b/prosopopee/themes/material/static/css/styles.css
@@ -120,3 +120,9 @@ main {
 .fixed-action-btn.horizontal ul {
     top: 22%;
 }
+
+.card .card-image .card-title {
+    background-color: rgba(0, 0, 0, 0.3);
+    width: 100%;
+    height: 100%;
+}
diff --git a/prosopopee/themes/material/templates/sections/html.html b/prosopopee/themes/material/templates/sections/html.html
index 59153b2..eb1d8d0 100644
--- a/prosopopee/themes/material/templates/sections/html.html
+++ b/prosopopee/themes/material/templates/sections/html.html
@@ -1,11 +1,11 @@
-{% if section.background %}
-<div style="padding: 1px 0px;background: {{ section.background }};">
+{% if section.background or section.color %}
+<div style="{% if section.background -%}padding: 1px 0px;background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
 {% endif %}
 <section class="html">
 	<center>
 		{{ section.html }}
 	</center>
 </section>
-{% if section.background %}
+{% if section.background or section.color %}
 </div>
 {% endif %}
diff --git a/prosopopee/themes/material/templates/sections/paragraph.html b/prosopopee/themes/material/templates/sections/paragraph.html
index 4f04800..cf8ebfd 100644
--- a/prosopopee/themes/material/templates/sections/paragraph.html
+++ b/prosopopee/themes/material/templates/sections/paragraph.html
@@ -1,5 +1,5 @@
-{% if section.background %}
-<div style="padding: 1px 0px;background: {{ section.background }};">
+{% if section.background or section.color %}
+<div style="{% if section.background -%}padding: 1px 0px;background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
 {% endif %}
 <div class="container">
 	{% if section.title %}
@@ -11,6 +11,6 @@
 		<p class="flow-text">{{ section.text }}</p>
 	</div>
 </div>
-{% if section.background %}
+{% if section.background or section.color %}
 </div>
 {% endif %}
diff --git a/prosopopee/themes/material/templates/sections/text.html b/prosopopee/themes/material/templates/sections/text.html
index e54bc2e..81366da 100644
--- a/prosopopee/themes/material/templates/sections/text.html
+++ b/prosopopee/themes/material/templates/sections/text.html
@@ -1,11 +1,11 @@
-{% if section.background %}
-<div style="padding: 1px 0px;background: {{ section.background }};">
+{% if section.background or section.color %}
+<div style="{% if section.background -%}padding: 1px 0px;background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
 {% endif %}
 <div class="container">
     <p class="flow-text">
     {{ section.text }}
     </p>
 </div>
-{% if section.background %}
+{% if section.background or section.color %}
 </div>
 {% endif %}

From af49a9b2afebfdafedb223dd6989bbd298055727 Mon Sep 17 00:00:00 2001
From: Adrien Beudin <beudbeud@beudibox.fr>
Date: Wed, 13 Apr 2016 19:16:22 +0200
Subject: [PATCH 2/4] update doc

---
 CHANGELOG.md |  2 +-
 README.md    | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index db58f10..b800cfb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@ CHANGELOG
 * possibility to use a range for the full picture date https://github.com/Psycojoker/prosopopee#full-screen-picture-with-or-without-text-on-it by beudbeud
 * Update material theme by beudbeud
 * social share https://github.com/Psycojoker/prosopopee#share by beudbeud 
-* Define background of section https://github.com/abeudin/prosopopee#background-settings by beudbeud 
+* Define background and text color of section https://github.com/abeudin/prosopopee#background-settings by beudbeud 
 
 0.2 (2016-02-23)
 ----------------
diff --git a/README.md b/README.md
index a914769..51c77ee 100644
--- a/README.md
+++ b/README.md
@@ -428,6 +428,18 @@ or you can use picture
     image: another_picture.jpg
 ```
 
+### Background settings
+
+For text, html and paragraph  section you can define the text color.
+
+Exemple
+
+```yaml
+  - type: bordered-picture
+    color: "#333"
+```
+
+
 ### Example
 
 As a recap, here is how the files of the example gallery are organised:

From 17d65a389d6607f8e483d8aa12f64f3d0e731d13 Mon Sep 17 00:00:00 2001
From: Adrien Beudin <beudbeud@beudibox.fr>
Date: Wed, 13 Apr 2016 19:20:50 +0200
Subject: [PATCH 3/4] fix doc

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 51c77ee..6a7cf66 100644
--- a/README.md
+++ b/README.md
@@ -428,7 +428,7 @@ or you can use picture
     image: another_picture.jpg
 ```
 
-### Background settings
+### Text color settings
 
 For text, html and paragraph  section you can define the text color.
 

From 5213dcaa27082d1f02d9360cc28472e5f61a0771 Mon Sep 17 00:00:00 2001
From: Adrien Beudin <beudbeud@beudibox.fr>
Date: Wed, 13 Apr 2016 19:22:48 +0200
Subject: [PATCH 4/4] fix doc 2

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 6a7cf66..1d9c759 100644
--- a/README.md
+++ b/README.md
@@ -423,9 +423,9 @@ Exemple for background color
 or you can use picture
 
 ```yaml
-  - type: bordered-picture
+  - type: text
     background: "url(background_picture.jpg)"
-    image: another_picture.jpg
+    text: Some text
 ```
 
 ### Text color settings