Merge pull request #41 from abeudin/master

add support of text color

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)
 ----------------

README.md

@@ -423,11 +423,23 @@ 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
+
+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:

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;
 }
 

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 %}
 

prosopopee/themes/exposure/templates/sections/html.html

@@ -1,12 +1,12 @@
-{% if section.color %}
+{% if section.background or section.color %}
-<div style="padding: 1px 0px;background: {{ section.background }};">
+<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 %}
 

prosopopee/themes/exposure/templates/sections/paragraph.html

@@ -1,5 +1,5 @@
-{% if section.color %}
+{% if section.background or section.color %}
-<div style="padding: 1px 0px;background: {{ section.background }};">
+<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 %}

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 %}

prosopopee/themes/exposure/templates/sections/text.html

@@ -1,9 +1,9 @@
-{% if section.color %}
+{% if section.background or section.color %}
-<div style="padding: 1px 0px;background: {{ section.background }};">
+<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 %}

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%;
+}

prosopopee/themes/material/templates/sections/html.html

@@ -1,11 +1,11 @@
-{% if section.background %}
+{% if section.background or section.color %}
-<div style="padding: 1px 0px;background: {{ section.background }};">
+<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 %}

prosopopee/themes/material/templates/sections/paragraph.html

@@ -1,5 +1,5 @@
-{% if section.background %}
+{% if section.background or section.color %}
-<div style="padding: 1px 0px;background: {{ section.background }};">
+<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 %}

prosopopee/themes/material/templates/sections/text.html

@@ -1,11 +1,11 @@
-{% if section.background %}
+{% if section.background or section.color %}
-<div style="padding: 1px 0px;background: {{ section.background }};">
+<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 %}