promo section styling

datacenterlight/cms_models.py

@@ -232,10 +232,20 @@ class DCLSectionPromoPluginModel(CMSPlugin):
         default=False,
         help_text='Select to keep the heading style simpler.'
     )
-    center_on_mobile = models.BooleanField(
+    text_center = models.BooleanField(
         default=False,
         help_text='Select to center align content on small screens.'
     )
 
     def __str__(self):
         return '#' + self.html_id if self.html_id else str(self.pk)
+
+    def get_extra_classes(self):
+        extra_classes = ''
+        if self.text_center:
+            extra_classes += ' text-center'
+        if self.plain_heading:
+            extra_classes += ' promo-section-plain'
+        if self.background_image:
+            extra_classes += ' promo-with-bg'
+        return extra_classes

datacenterlight/static/datacenterlight/css/landing-page.css

@@ -1268,3 +1268,63 @@ footer .dcl-link-separator::before {
     font-size: 30px;
   }
 }
+
+
+/* cms section promo */
+
+.promo-section {
+  padding: 75px 15px;
+}
+
+.promo-section.promo-with-bg {
+  color: #fff;
+  background-size: cover;
+  background-position: center;
+}
+
+.promo-section h3 {
+  font-weight: 700;
+  font-size: 36px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-top: 10px;
+  margin-bottom: 25px;
+}
+
+.promo-section h4 {
+  font-size: 24px;
+  margin-bottom: 20px;
+}
+
+.promo-section p {
+  font-size: 18px;
+}
+
+.promo-section.text-center h3,
+.promo-section.text-center h4 {
+  margin-bottom: 35px;
+}
+
+.split-text .split-subsection {
+  margin-top: 25px;
+  margin-bottom: 25px;
+}
+
+.split-text .promo-section {
+  padding: 20px 15px;
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+
+.split-text .promo-section .container {
+  width: auto;
+}
+
+.split-text .promo-section h3,
+.split-text .promo-section h4 {
+  margin-bottom: 15px;
+}
+
+.promo-section-plain h3 {
+  font-weight: 400;
+}

datacenterlight/templates/datacenterlight/cms/includes/_section_split_content.html

@@ -1,5 +1,6 @@
 {% load cms_tags %}
 
+
 {% if instance.heading %}
   <div class="{% if not instance.plain_heading %}split-title{% else %}split-title-plain{% endif %}">
     <h2>{{ instance.heading }}</h2>
@@ -13,7 +14,7 @@
   </div>
 {% endif %}
 {% if children_to_left|length %}
-  <div class="split-subsection lead">
+  <div class="split-subsection">
     {% for plugin in children_to_left %}
       {% render_plugin plugin %}
     {% endfor %}

datacenterlight/templates/datacenterlight/cms/section_promo.html

@@ -1,11 +1,13 @@
-<section class="promo-section">
+<section class="promo-section {{instance.get_extra_classes}}" {% if instance.background_image %}style="background-image:url({{ instance.background_image.url }})"{% endif %}>
-  {% if instance.heading %}
+  <div class="container">
-    <h1>{{instance.heading}}</h1>
+    {% if instance.heading %}
-  {% endif %}
+      <h3>{{instance.heading}}</h3>
-  {% if instance.subheading %}
+    {% endif %}
-    <h1>{{instance.subheading}}</h1>
+    {% if instance.subheading %}
-  {% endif %}
+      <h4>{{instance.subheading}}</h4>
-  {% if instance.content %}
+    {% endif %}
-    <h1>{{instance.content}}</h1>
+    {% if instance.content %}
-  {% endif %}
+      <p>{{instance.content}}</p>
+    {% endif %}
+  </div>
 </section>