Add the page block styles

diff --git a/app/static/src/sass/modules/_page.scss b/app/static/src/sass/modules/_page.scss
index 43d69ac123028b52c5af4cf11621c747b08f52fc..028b795c26de1196bc88ce1f6b8990f16ba500d0 100644 (file)
--- a/app/static/src/sass/modules/_page.scss
+++ b/app/static/src/sass/modules/_page.scss
@@ -57,4 +57,55 @@ $module: ".page";
 
     }
 
+    &__block {
+
+        @include padding-bottom(1);
+        background-color: white;
+
+        &--yellow {
+
+            background-color: $color-main;
+            @include padding-top(2);
+            @include padding-bottom(2);
+
+            h2:first-child {
+                margin-top: 0;
+            }
+
+        }
+
+        &--black {
+
+            background-color: $color-black;
+            color: white;
+            @include padding-top(2);
+            @include padding-bottom(2);
+
+            h2:first-child {
+                margin-top: 0;
+            }
+
+        }
+
+        &--red {
+
+            background-color: red;
+            color: white;
+            @include padding-top(2);
+            @include padding-bottom(2);
+
+            h2:first-child {
+                margin-top: 0;
+            }
+
+        }
+
+        p:last-child {
+
+            margin-bottom: 0;
+
+        }
+
+    }
+
 }

diff --git a/app/templates/core/inc/block.html b/app/templates/core/inc/block.html
index 1e013c85cbbc846a8499980260dd4b5a466e2708..8883640fddaf6421dfd213fb900786b5dbd97947 100644 (file)
--- a/app/templates/core/inc/block.html
+++ b/app/templates/core/inc/block.html
@@ -1,30 +1,25 @@
 {% load i18n mezzanine_tags keyword_tags pages_tags organization_tags %}
 {% if blocks %}
-    <div class="white-bg pb2">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-12">
-                    <hr class="mt0" />
-                    {% for block in blocks %}
-                        {% if block.background_color %}
-                          color style : {{ block.background_color }}
-                        {% endif %}
-                        <div class="row" data-summary-content>
-                            <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2 white-bg">
-                                {% if not forloop.first and block.with_separator %}
-                                    <hr />
-                                {% endif %}
-                                <h2 class="dotted">{{ block.title }}</h2>
-                                {% if block.content %}
-                                     {{ block.content|richtext_filters|safe }}
-                                {% else %}
-                                    {% lorem 3 p %}
-                                {% endif %}
-                            </div>
+    <div class="white-bg pb2 ">
+        <hr class="mt0" />
+        {% for block in blocks %}
+            <div class="page__block{% if block.background_color %} page__block--{{ block.background_color }}{% endif %}">
+                <div class="container">
+                    <div class="row" data-summary-content>
+                        <div class="col-sm-9 col-sm-push-3 col-lg-8 col-lg-push-2">
+                            {% if not forloop.first and block.with_separator %}
+                                <hr />
+                            {% endif %}
+                            <h2 class="dotted">{{ block.title }}</h2>
+                            {% if block.content %}
+                                 {{ block.content|richtext_filters|safe }}
+                            {% else %}
+                                {% lorem 3 p %}
+                            {% endif %}
                         </div>
-                    {% endfor %}
+                    </div>
                 </div>
             </div>
-        </div>
+        {% endfor %}
     </div>
 {% endif %}