diff --git a/datacenterlight/cms_models.py b/datacenterlight/cms_models.py index c7a68a07..d5ec180c 100644 --- a/datacenterlight/cms_models.py +++ b/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 diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css index 5ff6ed1d..34f3a9e3 100755 --- a/datacenterlight/static/datacenterlight/css/landing-page.css +++ b/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; +} \ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/cms/includes/_section_split_content.html b/datacenterlight/templates/datacenterlight/cms/includes/_section_split_content.html index 38db14d5..a5a5119c 100644 --- a/datacenterlight/templates/datacenterlight/cms/includes/_section_split_content.html +++ b/datacenterlight/templates/datacenterlight/cms/includes/_section_split_content.html @@ -1,5 +1,6 @@ {% load cms_tags %} + {% if instance.heading %}

{{ instance.heading }}

@@ -13,7 +14,7 @@
{% endif %} {% if children_to_left|length %} -
+
{% for plugin in children_to_left %} {% render_plugin plugin %} {% endfor %} diff --git a/datacenterlight/templates/datacenterlight/cms/section_promo.html b/datacenterlight/templates/datacenterlight/cms/section_promo.html index 46a6b67c..7a4ad455 100644 --- a/datacenterlight/templates/datacenterlight/cms/section_promo.html +++ b/datacenterlight/templates/datacenterlight/cms/section_promo.html @@ -1,11 +1,13 @@ -
- {% if instance.heading %} -

{{instance.heading}}

- {% endif %} - {% if instance.subheading %} -

{{instance.subheading}}

- {% endif %} - {% if instance.content %} -

{{instance.content}}

- {% endif %} +
+
+ {% if instance.heading %} +

{{instance.heading}}

+ {% endif %} + {% if instance.subheading %} +

{{instance.subheading}}

+ {% endif %} + {% if instance.content %} +

{{instance.content}}

+ {% endif %} +
\ No newline at end of file