diff --git a/datacenterlight/cms_models.py b/datacenterlight/cms_models.py new file mode 100644 index 00000000..20e39fde --- /dev/null +++ b/datacenterlight/cms_models.py @@ -0,0 +1,180 @@ +from djangocms_text_ckeditor.fields import HTMLField +from cms.models.pluginmodel import CMSPlugin +from django.db import models +from django.utils.safestring import mark_safe +from filer.fields.image import FilerImageField + +# Models for CMS Plugins + + +class DCLSectionPluginModel(CMSPlugin): + heading = models.CharField( + blank=True, null=True, max_length=100, + help_text='An optional heading for the Section', + ) + content = HTMLField() + TEXT_DIRECTIONS = ( + ('left', 'Left'), + ('right', 'Right') + ) + text_direction = models.CharField( + choices=TEXT_DIRECTIONS, max_length=10, default=True, + help_text='The alignment of text in the section' + ) + html_id = models.SlugField( + blank=True, null=True, + help_text=( + 'An optional html id for the Section. Required to set as target ' + 'of a link on page' + ) + ) + plain_heading = models.BooleanField( + default=False, + help_text='Select to keep the heading style simpler.' + ) + center_on_mobile = models.BooleanField( + default=False, + help_text='Select to center align content on small screens.' + ) + background_gradient = models.BooleanField( + default=False, + help_text='Select to add a gradient background to the section.' + ) + + def get_extra_classes(self): + extra_classes = self.text_direction + if self.center_on_mobile: + extra_classes += ' section-sm-center' + if self.background_gradient: + extra_classes += ' section-gradient' + if self.plain_heading: + extra_classes += ' split-section-plain' + return extra_classes + + def __str__(self): + return '#' + self.html_id if self.html_id else str(self.pk) + + +class DCLBannerListPluginModel(CMSPlugin): + heading = models.CharField( + blank=True, null=True, max_length=100, + help_text='An optional heading for the Section', + ) + html_id = models.SlugField( + blank=True, null=True, + help_text=( + 'An optional html id for the Section. Required to set as target ' + 'of a link on page' + ) + ) + + def __str__(self): + return '#' + self.html_id if self.html_id else str(self.pk) + + +class DCLBannerItemPluginModel(CMSPlugin): + content = HTMLField() + banner_text = HTMLField( + blank=True, null=True, max_length=100, + help_text='Optional text to be shown as banner in other half.', + ) + banner_image = FilerImageField( + on_delete=models.CASCADE, null=True, blank=True, + help_text='Optional image to be used in the banner in other half.' + ) + TEXT_DIRECTIONS = ( + ('left', 'Left'), + ('right', 'Right') + ) + text_direction = models.CharField( + choices=TEXT_DIRECTIONS, max_length=10, default=True, + help_text='The alignment of text in the section' + ) + + def get_extra_classes(self): + extra_classes = '' + if self.text_direction == 'left': + extra_classes = 'flex-row-rev' + return extra_classes + + +class DCLLinkPluginModel(CMSPlugin): + target = models.CharField( + max_length=100, + help_text='Url or #id to navigate to' + ) + text = models.CharField( + max_length=50, + help_text='Text for the menu item' + ) + title = models.CharField( + blank=True, null=True, max_length=100, + help_text=( + 'Optional title text, that will be shown when a user ' + 'hovers over the link' + ) + ) + separator = models.BooleanField( + default=False, + help_text='Select to include a separator after the previous link' + ) + + +class DCLNavbarDropdownPluginModel(CMSPlugin): + target = models.CharField( + max_length=100, null=True, blank=True, + help_text='Optional Url or #id to navigate on click' + ) + text = models.CharField( + max_length=50, + help_text='Text for the dropdown toggle' + ) + + +class DCLContactPluginModel(CMSPlugin): + heading = models.CharField(max_length=100, default="Contact", blank=True) + organization_name = models.CharField( + max_length=100, default="ungleich GmbH", blank=True + ) + email = models.EmailField(max_length=200, default="info@ungleich.ch") + address = models.CharField( + max_length=100, default="In der Au 7, Schwanden 8762", blank=True + ) + country = models.CharField( + max_length=100, default="Switzerland", blank=True + ) + form_header = models.CharField( + max_length=100, default="Send us a message.", blank=True + ) + + +class DCLFooterPluginModel(CMSPlugin): + copyright_label = models.CharField( + max_length=100, default='ungleich GmbH', blank=True, + help_text='Name of the company alongside the copyright year' + ) + + +class DCLSectionIconPluginModel(CMSPlugin): + fontawesome_icon_name = models.CharField( + max_length=30, + help_text=mark_safe( + 'Name of the fontawesome icon to use. ' + '' + 'Refer docs.' + ) + ) + + +class DCLSectionImagePluginModel(CMSPlugin): + image = FilerImageField( + on_delete=models.CASCADE, + help_text=( + 'Image file to be used in section. Add multiple plugins ' + 'to add more than one image' + ) + ) + caption = models.CharField( + max_length=100, null=True, blank=True, + help_text='Optional caption for the image.' + ) diff --git a/datacenterlight/cms_plugins.py b/datacenterlight/cms_plugins.py new file mode 100644 index 00000000..70ecfaa2 --- /dev/null +++ b/datacenterlight/cms_plugins.py @@ -0,0 +1,134 @@ +from cms.plugin_base import CMSPluginBase +from cms.plugin_pool import plugin_pool +from cms.models.pluginmodel import CMSPlugin + +from .cms_models import ( + DCLBannerItemPluginModel, DCLBannerListPluginModel, DCLContactPluginModel, + DCLFooterPluginModel, DCLLinkPluginModel, DCLNavbarDropdownPluginModel, + DCLSectionIconPluginModel, DCLSectionImagePluginModel, + DCLSectionPluginModel, +) +from .models import VMTemplate + + +@plugin_pool.register_plugin +class DCLSectionPlugin(CMSPluginBase): + module = "Datacenterlight" + name = "DCL Section Plugin" + model = DCLSectionPluginModel + render_template = "datacenterlight/cms/section.html" + cache = False + allow_children = True + child_classes = ['DCLSectionIconPlugin', 'DCLSectionImagePlugin'] + + +@plugin_pool.register_plugin +class DCLSectionIconPlugin(CMSPluginBase): + module = "Datacenterlight" + name = "DCL Section Icon Plugin" + model = DCLSectionIconPluginModel + render_template = "datacenterlight/cms/section_icon.html" + cache = False + require_parent = True + + +@plugin_pool.register_plugin +class DCLSectionImagePlugin(CMSPluginBase): + module = "Datacenterlight" + name = "DCL Section Image Plugin" + model = DCLSectionImagePluginModel + render_template = "datacenterlight/cms/section_image.html" + cache = False + require_parent = True + + +@plugin_pool.register_plugin +class DCLCalculatorPlugin(CMSPluginBase): + module = "Datacenterlight" + name = "DCL Calculator Plugin" + model = DCLSectionPluginModel + render_template = "datacenterlight/cms/calculator.html" + cache = False + + def render(self, context, instance, placeholder): + context = super(DCLCalculatorPlugin, self).render( + context, instance, placeholder + ) + context['templates'] = VMTemplate.objects.all() + return context + + +@plugin_pool.register_plugin +class DCLBannerListPlugin(CMSPluginBase): + module = "Datacenterlight" + name = "DCL Banner List Plugin" + model = DCLBannerListPluginModel + render_template = "datacenterlight/cms/banner_list.html" + cache = False + allow_children = True + child_classes = ['DCLBannerItemPlugin'] + + +@plugin_pool.register_plugin +class DCLBannerItemPlugin(CMSPluginBase): + module = "Datacenterlight" + name = "DCL Banner Item Plugin" + model = DCLBannerItemPluginModel + render_template = "datacenterlight/cms/banner_item.html" + cache = False + require_parent = True + parent_classes = ['DCLBannerListPlugin'] + + +@plugin_pool.register_plugin +class DCLNavbarPlugin(CMSPluginBase): + module = "Datacenterlight" + name = "DCL Navbar Plugin" + model = CMSPlugin + render_template = "datacenterlight/cms/navbar.html" + cache = False + allow_children = True + child_classes = ['DCLLinkPlugin', 'DCLNavbarDropdownPlugin'] + + +@plugin_pool.register_plugin +class DCLNavbarDropdownPlugin(CMSPluginBase): + module = "Datacenterlight" + name = "DCL Navbar Dropdown Plugin" + model = DCLNavbarDropdownPluginModel + render_template = "datacenterlight/cms/navbar_dropdown.html" + cache = False + allow_children = True + child_classes = ['DCLLinkPlugin'] + require_parent = True + parent_classes = ['DCLNavbarPlugin'] + + +@plugin_pool.register_plugin +class DCLLinkPlugin(CMSPluginBase): + module = "Datacenterlight" + name = "DCL Link Plugin" + model = DCLLinkPluginModel + render_template = "datacenterlight/cms/link.html" + cache = False + require_parent = True + + +@plugin_pool.register_plugin +class DCLContactPlugin(CMSPluginBase): + module = "Datacenterlight" + name = "DCL Contact Plugin" + model = DCLContactPluginModel + render_template = "datacenterlight/cms/contact.html" + cache = False + + +@plugin_pool.register_plugin +class DCLFooterPlugin(CMSPluginBase): + module = "Datacenterlight" + name = "DCL Footer Plugin" + model = DCLFooterPluginModel + render_template = "datacenterlight/cms/footer.html" + cache = False + allow_children = True + child_classes = ['DCLLinkPlugin'] diff --git a/datacenterlight/migrations/0012_dclcalculatorpluginmodel.py b/datacenterlight/migrations/0012_dclcalculatorpluginmodel.py new file mode 100644 index 00000000..1aa492af --- /dev/null +++ b/datacenterlight/migrations/0012_dclcalculatorpluginmodel.py @@ -0,0 +1,138 @@ +# -*- coding: utf-8 -*- +# Generated by Django 1.9.4 on 2018-03-01 20:41 +from __future__ import unicode_literals + +from django.db import migrations, models +import django.db.models.deletion +import djangocms_text_ckeditor.fields +import filer.fields.image + + +class Migration(migrations.Migration): + + dependencies = [ + ('cms', '0014_auto_20160404_1908'), + ('datacenterlight', '0011_auto_20180220_1423'), + ] + + operations = [ + migrations.CreateModel( + name='DCLSectionPluginModel', + fields=[ + ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')), + ('heading', models.CharField(blank=True, help_text='An optional heading for the Section', max_length=100, null=True)), + ('content', djangocms_text_ckeditor.fields.HTMLField()), + ('text_direction', models.CharField(choices=[('left', 'Left'), ('right', 'Right')], default=True, help_text='The alignment of text in the section', max_length=10)), + ('html_id', models.SlugField(blank=True, help_text='An optional html id for the Section. Required to set as target of a link on page', null=True)), + ('center_on_mobile', models.BooleanField(default=False, help_text='Select to center align content on small screens.')), + ('background_gradient', models.BooleanField(default=False, help_text='Select to add a gradient background to the section.')), + ('plain_heading', models.BooleanField(default=False, help_text='Select to keep the heading style simpler.')), + ], + options={ + 'abstract': False, + }, + bases=('cms.cmsplugin',), + ), + migrations.CreateModel( + name='DCLNavbarDropdownPluginModel', + fields=[ + ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')), + ('text', models.CharField(help_text='Text for the dropdown toggle', max_length=50)), + ('target', models.CharField(blank=True, help_text='Optional Url or #id to navigate on click', max_length=100, null=True)), + ], + options={ + 'abstract': False, + }, + bases=('cms.cmsplugin',), + ), + migrations.CreateModel( + name='DCLContactPluginModel', + fields=[ + ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')), + ('heading', models.CharField(blank=True, default='Contact', max_length=100)), + ('organization_name', models.CharField(blank=True, default='ungleich GmbH', max_length=100)), + ('email', models.EmailField(default='info@ungleich.ch', max_length=200)), + ('address', models.CharField(blank=True, default='In der Au 7, Schwanden 8762', max_length=100)), + ('country', models.CharField(blank=True, default='Switzerland', max_length=100)), + ('form_header', models.CharField(blank=True, default='Send us a message.', max_length=100)), + ], + options={ + 'abstract': False, + }, + bases=('cms.cmsplugin',), + ), + migrations.CreateModel( + name='DCLFooterPluginModel', + fields=[ + ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')), + ('copyright_label', models.CharField(blank=True, default='ungleich GmbH', help_text='Name of the company alongside the copyright year', max_length=100)), + ], + options={ + 'abstract': False, + }, + bases=('cms.cmsplugin',), + ), + migrations.CreateModel( + name='DCLLinkPluginModel', + fields=[ + ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')), + ('target', models.CharField(help_text='Url or #id to navigate to', max_length=100)), + ('text', models.CharField(help_text='Text for the menu item', max_length=50)), + ('title', models.CharField(blank=True, help_text='Optional title text, that will be shown when a user hovers over the link', max_length=100, null=True)), + ('separator', models.BooleanField(default=False, help_text='Select to include a separator after the previous link')), + ], + options={ + 'abstract': False, + }, + bases=('cms.cmsplugin',), + ), + migrations.CreateModel( + name='DCLSectionIconPluginModel', + fields=[ + ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')), + ('fontawesome_icon_name', models.CharField(help_text='Name of the fontawesome icon to use. Refer docs.', max_length=30)), + ], + options={ + 'abstract': False, + }, + bases=('cms.cmsplugin',), + ), + migrations.CreateModel( + name='DCLSectionImagePluginModel', + fields=[ + ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')), + ('caption', models.CharField(blank=True, help_text='Optional caption for the image.', max_length=100, null=True)), + ('image', filer.fields.image.FilerImageField(help_text='Image file to be used in section. Add multiple plugins to add more than one image', on_delete=django.db.models.deletion.CASCADE, to='filer.Image')), + ], + options={ + 'abstract': False, + }, + bases=('cms.cmsplugin',), + ), + migrations.CreateModel( + name='DCLBannerListPluginModel', + fields=[ + ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')), + ('heading', models.CharField(blank=True, help_text='An optional heading for the Section', max_length=100, null=True)), + ('html_id', models.SlugField(blank=True, help_text='An optional html id for the Section. Required to set as target of a link on page', null=True)), + ], + options={ + 'abstract': False, + }, + bases=('cms.cmsplugin',), + ), + migrations.CreateModel( + name='DCLBannerItemPluginModel', + fields=[ + ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='cms.CMSPlugin')), + ('content', djangocms_text_ckeditor.fields.HTMLField()), + ('banner_text', djangocms_text_ckeditor.fields.HTMLField(blank=True, help_text='Optional text to be shown as banner in other half.', max_length=100, null=True)), + ('text_direction', models.CharField(choices=[('left', 'Left'), ('right', 'Right')], default=True, help_text='The alignment of text in the section', max_length=10)), + ('banner_image', filer.fields.image.FilerImageField(blank=True, help_text='Optional image to be used in the banner in other half.', null=True, on_delete=django.db.models.deletion.CASCADE, to='filer.Image')), + ], + options={ + 'abstract': False, + }, + bases=('cms.cmsplugin',), + ), + ] diff --git a/datacenterlight/models.py b/datacenterlight/models.py index 2fbed5c8..6fcf24a9 100644 --- a/datacenterlight/models.py +++ b/datacenterlight/models.py @@ -29,3 +29,6 @@ class ContactUs(models.Model): email = models.CharField(max_length=250) message = models.TextField() field = models.DateTimeField(auto_now_add=True) + + def __str__(self): + return self.name diff --git a/datacenterlight/static/datacenterlight/css/cms.css b/datacenterlight/static/datacenterlight/css/cms.css index b9a19245..46abf8d8 100644 --- a/datacenterlight/static/datacenterlight/css/cms.css +++ b/datacenterlight/static/datacenterlight/css/cms.css @@ -1,51 +1,15 @@ -.dcl-cms_page-full-width { - color: #fff; - text-align: center; - background-image: -ms-linear-gradient(right, #29427A 50%, #4F6699 100%); - background-image: -moz-linear-gradient(right, #29427A 50%, #4F6699 100%); - background-image: -o-linear-gradient(right, #29427A 50%, #4F6699 100%); - background-image: -webkit-gradient(linear, right top, left top, color-stop(50, #29427A), color-stop(100, #4F6699)); - background-image: -webkit-linear-gradient(right, #29427A 50%, #4F6699 100%); - background-image: linear-gradient(to left, #29427A 50%, #4F6699 100%); +/* only for cms editing mode */ +.section-figure .cms-plugin { + flex-basis: 50%; + flex-grow: 1; } -.dcl-cms_page-header { - padding: 150px 0 150px 0; - text-align: center; - color: #f8f8f8; - background: url(../img/pattern.jpg) no-repeat center center; - background-size: cover; - position: relative; - background-attachment: fixed; -} - -.dcl-cms_page-header::before { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background: rgba(90, 116, 175, 0.85); -} - -.dcl-cms_page-header .container { - position: relative; -} - -#dcl-cms_page-text { - background: #fff; -} - -#dcl-cms_page-text h3 { - font-size: 42px; - width: 70%; +.split-section-plain .section-figure .cms-plugin { + flex-grow: 0; } @media (max-width: 767px) { - #dcl-cms_page-text h3 { - font-size: 30px; - line-height: 40px; - width: 100%; - } + .section-figure .cms-plugin { + flex-basis: 100%; + } } \ No newline at end of file diff --git a/datacenterlight/static/datacenterlight/css/header-slider.css b/datacenterlight/static/datacenterlight/css/header-slider.css new file mode 100644 index 00000000..9f5161d7 --- /dev/null +++ b/datacenterlight/static/datacenterlight/css/header-slider.css @@ -0,0 +1,179 @@ +.header_slider > .carousel .carousel-inner { + min-height: 95vh; + display: flex; +} + +.header_slider > .carousel .carousel-inner > .next, +.header_slider > .carousel .carousel-inner > .prev { + bottom: 0; +} + +.header_slider .carousel-indicators { + width: 100%; + left: 0; + margin-left: 0; +} + +.header_slider .carousel-indicators li { + margin-right: 25px; + width: 16px; + height: 16px; +} + +.header_slider .carousel-indicators li.active { + background-color: #ffffff; +} + +.header_slider .carousel-control { + display: none; +} + +.header_slider .carousel-control .fa { + font-size: 2em; + position: absolute; + top: 50%; + margin-top: -50px; +} + +.header_slider > .carousel .item { + background: rgba(0,0,0,0.5); + flex: 1; +} + +.header_slider > .carousel .item .container { + overflow: auto; + padding: 50px 20px 60px; + height: 100%; + display: flex; + flex-direction: column; + justify-content: flex-end; + /* background: rgba(0,0,0,0.5); */ +} + +.header_slider .intro-cap { + margin: 0; + text-align: right; + line-height: 1.1; + font-size: 23px; + padding-bottom: 10px; + color: #fff; +} + +.header_slider .btn-trans { + align-self: flex-end; + z-index: 2; + position: relative; +} + +@media (max-width: 767px) { + .header_slider .intro-cap, + .header_slider .intro_lead { + font-weight: 400; + } +} + +@media (min-width: 768px) { + .header_slider .intro-cap { + font-size: 2.5em; + } + .header_slider .carousel-control { + width: 50px; + display: block; + } + .header_slider .carousel-control .fa-angle-left { + left: 25px; + } + .header_slider .carousel-control .fa-angle-right { + right: 25px; + } + .header_slider .carousel-control .fa { + font-size: 4em; + } + .header_slider > .carousel .item .container { + overflow: auto; + padding: 75px 50px; + } + .header_slider .btn-trans { + padding: 8px 15px; + min-width: 175px; + letter-spacing: 1px; + font-size: 1.25em; + } +} + +@media (min-width: 992px) { + .header_slider .intro-cap { + font-size: 3.25em; + } +} + +.header_slider .intro_lead { + color: #fff; + font-size: 1.55em; + text-align: right; + line-height: 1.4; + margin-bottom: 0; + padding-bottom: 10px; +} + +@media (max-width: 768px) { + .header_slider .intro_lead { + font-size: 1.1em; + margin-bottom: 15px; + } + + .header_slider .carousel-indicators li { + margin: 1px 25px; + width: 16px; + height: 16px; + } + .header_slider .carousel-indicators li.active { + margin: 0 25px; + width: 18px; + height: 18px; + } +} + +.bg_img { + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; + background-size: cover; + background-position: center; +} + +.bg_vid { + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 100%; + height: 100%; + background-size: cover; + background-position: center; +} + +@media (min-aspect-ratio: 16/9) { + .bg_vid > video { + width: 100%; + height: auto; + } +} + +@media (max-aspect-ratio: 16/9) { + .bg_vid > video { + /* width: auto; */ + height: 100%; + } +} + +.btn-trans { + color: #fff; + border: 2px solid #fff; + padding: 4px 18px; + letter-spacing: 0.6px; + background: rgba(0,0,0,0.35); +} \ No newline at end of file diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css index 9c8b4acf..763867b2 100755 --- a/datacenterlight/static/datacenterlight/css/landing-page.css +++ b/datacenterlight/static/datacenterlight/css/landing-page.css @@ -19,17 +19,6 @@ textarea { * blue dark #29427A */ - -.lead { - font-size: 18px; -} - -@media (min-width: 768px) { - .lead-right { - text-align: right; - } -} - .btn { box-shadow: 0 1px 4px rgba(0, 0, 0, .6); } @@ -102,14 +91,32 @@ textarea { color: #fff; } -.navbar-transparent .navbar-nav>li>a { +.navbar-transparent .navbar-nav>li a { color: #fff; } -.navbar-transparent .navbar-nav>li>a:focus, -.navbar-transparent .navbar-nav>li>a:hover { +.navbar-transparent .navbar-nav>li a:focus, +.navbar-transparent .navbar-nav>li a:active, +.navbar-transparent .navbar-nav>li a:hover { color: #fff; background-color: transparent; + text-decoration: none; +} + +.navbar .dcl-link { + display: block; + padding: 15px; + color: #777; +} + +.navbar .dcl-link:focus, +.navbar .dcl-link:active, +.navbar .dcl-link:hover { + text-decoration: none; +} + +.navbar .dropdown-menu .dcl-link { + padding: 1px 10px; } .navbar-transparent .navbar-nav>li>.on-hover-border { @@ -195,8 +202,8 @@ textarea { margin-left: 15px; } -.dropdown-menu>li>a:focus, -.dropdown-menu>li>a:hover { +.dropdown-menu>li a:focus, +.dropdown-menu>li a:hover { background: transparent; text-decoration: underline !important; } @@ -237,6 +244,44 @@ textarea { padding: 5px 10px !important; } + +/* dcl header */ +.dcl-header { + padding: 150px 0 150px 0; + text-align: center; + color: #f8f8f8; + background: url(../img/pattern.jpg) no-repeat center center; + background-size: cover; + position: relative; + background-attachment: fixed; +} + +.dcl-header::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background: rgba(90, 116, 175, 0.85); +} + +.dcl-header .container { + position: relative; +} + +.dcl-header h1 { + font-size: 65px; + margin: 0; + padding: 0; +} + +@media(max-width:767px) { + .dcl-header h1 { + font-size: 50px; + } +} + .intro-header { min-height: 100vh; text-align: center; @@ -332,6 +377,7 @@ textarea { .split-section { padding: 70px 0; + border-top: 1px solid #f6f7f8; } .split-section .icon-section { @@ -354,9 +400,10 @@ textarea { font-weight: 300 !important; } -.new-lead { - font-weight: 300 !important; - font-size: 21px !important; +.split-section .split-text h2 { + font-size: 40px; + line-height: 50px; + color: #3a3a3a; } .split-section .split-text .split-title { @@ -366,13 +413,11 @@ textarea { .split-section .split-text .split-title h2 { font-size: 50px; - line-height: 50px; padding-bottom: 25px; - color: #3a3a3a; - letter-spacing: 3px; + letter-spacing: 2px; } -.split-section.left { +.section-gradient { background: -webkit-linear-gradient(#f0f4f7, #fff) no-repeat; background: -o-linear-gradient(#f0f4f7, #fff) no-repeat; background: linear-gradient(#f0f4f7, #fff) no-repeat; @@ -394,53 +439,85 @@ textarea { text-align: left; } -.split-section.right .split-text { - text-align: right; -} - -.split-section.right .split-text ul { - text-align: left; -} - +.split-section.right .split-text ul, .split-section.left .split-text { text-align: left; } -.split-section.right .split-text .split-title h2 { +.split-section.right .split-text { text-align: right; } -.split-section.left .split-text .split-title h2 { - text-align: left; -} - -.split-section.right .split-text .split-title::before { +.split-section .split-text .split-title::before { content: ""; position: absolute; bottom: 0; background: #29427A; height: 7px; width: 70px; + left: auto; +} + +.split-section.right .split-text .split-title::before { right: 0; } .split-section.left .split-text .split-title::before { - content: ""; - position: absolute; - bottom: 0; - background: #29427A; - height: 7px; - width: 70px; left: 0; } -.pricing-section { - padding: 80px 0 !important; - background: -webkit-linear-gradient(top, #f0f4f7, #fff) no-repeat; - background: linear-gradient(to bottom, #f0f4f7, #fff) no-repeat; +.section-figure { + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; } -.pricing-section .card { +.section-figure .section-image { + padding: 20px 40px 30px; + flex-basis: 50%; + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +@media (max-width: 767px) { + .section-figure .section-image { + flex-basis: 100%; + } +} + +.split-section-plain .section-figure .section-image { + flex-grow: 0; + padding: 50px 15px 0; +} + +.split-section-plain .section-figure { + justify-content: flex-start; +} + +@media (min-width: 768px) { + .split-section-plain .split-figure { + width: 41.66666667%; + } + + .split-section-plain .split-text { + width: 58.33333333%; + } +} + +.section-image img { + margin: auto; +} + +.section-image-caption { + padding-top: 20px; + display: inline-block; + color: #999 !important; +} + +.price-calc-section .card { width: 350px; margin: 0 auto; background: #fff; @@ -450,65 +527,33 @@ textarea { position: relative; } -.pricing-section .card .img-beta { - position: absolute; - top: 5px; - width: 60px; - left: 3px; -} - -.pricing-section .card .title { +.price-calc-section .card .title { padding: 15px 40px; } -.pricing-section .card .title h3 {} - -.pricing-section .card .price { +.price-calc-section .card .price { background: #5A74AF; padding: 22px; color: #fff; font-size: 32px; } -.pricing-section .card .description { +.price-calc-section .card .description { padding: 12px; } -.pricing-section .card .descriptions { +.price-calc-section .card .descriptions { padding: 10px 30px; } -.pricing-section .card .description p { +.price-calc-section .card .description p { margin: 0; } -.pricing-section .card .btn { +.price-calc-section .card .btn { margin-top: 20px; } -.pricing-section .text { - text-align: left; -} - -.pricing-section .text .section-heading { - font-size: 48px; - line-height: 50px; - padding-bottom: 25px; - color: #3a3a3a; - letter-spacing: 1px; - position: relative; -} - -.pricing-section .text .section-heading::before { - content: ""; - position: absolute; - bottom: 0; - background: #29427A; - height: 7px; - width: 70px; - left: 0; -} - .contact-section { padding: 80px 0; color: rgba(255, 255, 255, 0.9); @@ -672,43 +717,6 @@ textarea { /*Why DCL*/ -.full-whydcl-sec { - color: #fff; - text-align: center; - background-image: -ms-linear-gradient(right, #29427A 50%, #4F6699 100%); - background-image: -moz-linear-gradient(right, #29427A 50%, #4F6699 100%); - background-image: -o-linear-gradient(right, #29427A 50%, #4F6699 100%); - background-image: -webkit-gradient(linear, right top, left top, color-stop(50, #29427A), color-stop(100, #4F6699)); - background-image: -webkit-linear-gradient(right, #29427A 50%, #4F6699 100%); - background-image: linear-gradient(to left, #29427A 50%, #4F6699 100%); -} - -.whydcl-header { - padding: 150px 0 150px 0; - text-align: center; - color: #f8f8f8; - background: url(../img/pattern.jpg) no-repeat center center; - background-size: cover; - position: relative; - background-attachment: fixed; -} - -.whydcl-header::before { - content: ""; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background: rgba(90, 116, 175, 0.85); -} - -.single-heading h2 { - font-size: 65px; - margin: 0; - padding: 0; -} - #tech_stack { background: #fff; } @@ -759,13 +767,18 @@ tech-sub-sec h2 { } .space-middle { - padding: 45px 0; + /* padding: 45px 0; */ display: inline-block; } .ssdimg { - vertical-align: middle; - display: inline-block; + margin: 0 15px; + /* vertical-align: middle; */ + /* display: inline-block; */ +} + +.ssdimg img { + max-width: 125px; } @media (max-width: 767px) { @@ -775,7 +788,7 @@ tech-sub-sec h2 { } .padding-vertical { - padding: 30px 2px; + padding: 30px 2px 20px; } .logo-wrap .logo-caption { @@ -792,43 +805,13 @@ tech-sub-sec h2 { /*Pricing page*/ .price-calc-section { - padding: 80px 40px !important; - background: -webkit-linear-gradient(top, #f0f4f7, #fff) no-repeat; - background: linear-gradient(to bottom, #f0f4f7, #fff) no-repeat; display: flex; -} - -.price-calc-section .text { - width: 50%; -} - -.price-calc-section .text .section-heading { - font-size: 48px; - line-height: 48px; - padding-bottom: 27px; - color: #3a3a3a; - letter-spacing: 1px; - position: relative; - text-align: right; -} - -.price-calc-section .text .description { - font-size: 20px; - text-align: right; -} - -.price-calc-section .text .section-heading::before { - content: ""; - position: absolute; - bottom: 0; - background: #29427A; - height: 7px; - width: 70px; - right: 0; + margin-top: 25px; + margin-bottom: 25px; } .price-calc-section .card { - width: 50%; + width: 100%; margin: 0 auto; background: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); @@ -839,21 +822,6 @@ tech-sub-sec h2 { position: relative; } -.price-calc-section .landing { - width: 100% !important; -} - -.no-padding { - padding: 0 !important; -} - -.price-calc-section .card .img-beta { - position: absolute; - top: 5px; - width: 60px; - left: 3px; -} - .price-calc-section .card .title { padding: 15px 40px; } @@ -950,8 +918,6 @@ tech-sub-sec h2 { } - - /*Changed class****.price-calc-section .card .description.input input*/ .price-calc-section .card .description input { @@ -1009,20 +975,20 @@ tech-sub-sec h2 { } @media(max-width:991px) { - .pricing-section .text { - text-align: center; + .section-sm-center .split-text { + text-align: center !important; margin-bottom: 40px; } - .pricing-section .text .section-heading::before { - left: 50%; + .section-sm-center .split-text .split-title::before { + left: 50% !important; transform: translate(-50%, 0); } + .section-sm-center .split-description { + width: 100% !important; + } } @media(max-width:767px) { - .single-heading h2 { - font-size: 50px; - } .logo-wrap { padding: 10px; } @@ -1102,7 +1068,7 @@ tech-sub-sec h2 { background-color: transparent; } .split-section { - padding: 10px 0; + padding: 20px 0; } .split-section .icon-section { min-height: 160px; @@ -1110,11 +1076,11 @@ tech-sub-sec h2 { .split-section .icon-section i { font-size: 120px; } - .split-section .split-text .split-title h2 { - font-size: 35px; + .split-section .split-text h2 { + font-size: 30px; line-height: 35px; } - .pricing-section .text .section-heading { + .split-section .split-text .split-title h2 { font-size: 35px; line-height: 35px; } @@ -1139,7 +1105,7 @@ tech-sub-sec h2 { } .price-calc-section { flex-direction: column; - padding: 60px 10px !important; + /* padding: 60px 10px !important; */ } .price-calc-section .card { width: 90%; @@ -1179,9 +1145,6 @@ tech-sub-sec h2 { font-weight: normal; font-size: 37px; } - .pricing-section .card { - width: 90%; - } .contact-section .card { width: 90%; } @@ -1210,11 +1173,6 @@ tech-sub-sec h2 { display: block; } -.content-section-a { - padding: 50px 0; - background-color: #f8f8f8; -} - .section-heading { margin-bottom: 30px; } @@ -1237,6 +1195,11 @@ footer { margin-top: 25px; } +.flex-row .percent-text { + display: flex; + align-items: center; +} + @media (min-width: 768px) { .flex-row { display: flex; @@ -1247,8 +1210,11 @@ footer { flex-shrink: 0; padding: 0 15px; } - .flex-row .percent-text, - .flex-row .desc-text { + .flex-row .desc-text, + .flex-row .percent-text { + max-width: 380px; + } + .flex-row-rev .desc-text { max-width: 710px; } .flex-row-rev .percent-text { @@ -1279,4 +1245,40 @@ footer { border-width: 0 3px 3px 0; /*Rotate the L 45 degrees to turn it into a checkmark*/ transform: rotate(45deg); +} + +footer .dcl-link-separator { + position: relative; + padding-left: 10px; +} + +footer .dcl-link-separator::before { + content: ""; + position: absolute; + display: inline-block; + top: 9px; + bottom: 0; + left: -2px; + right: 0; + width: 2px; + height: 2px; + border-radius: 100%; + background: #777; +} + +/* new styles for whydcl section cms plugin (to replace older style) */ + +.banner-list { + border-top: 2px solid #eee; + padding: 50px 0; +} + +.banner-list-heading h2 { + font-size: 42px; +} + +@media (max-width: 767px) { + .banner-list-heading h2 { + font-size: 30px; + } } \ No newline at end of file diff --git a/datacenterlight/static/datacenterlight/js/main.js b/datacenterlight/static/datacenterlight/js/main.js index d5deaa21..10412824 100644 --- a/datacenterlight/static/datacenterlight/js/main.js +++ b/datacenterlight/static/datacenterlight/js/main.js @@ -54,7 +54,7 @@ Nav panel classic --------------------------------------------- */ if (window.matchMedia("(min-width: 767px)").matches) { - $('ul.nav li.dropdown').hover(function() { + $('ul.nav .dropdown').hover(function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500); }, function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500); diff --git a/datacenterlight/templates/datacenterlight/base.html b/datacenterlight/templates/datacenterlight/base.html index 15e66fc7..8bdfb65f 100644 --- a/datacenterlight/templates/datacenterlight/base.html +++ b/datacenterlight/templates/datacenterlight/base.html @@ -1,4 +1,4 @@ -{% load staticfiles i18n cms_tags sekizai_tags %} +{% load static i18n cms_tags sekizai_tags %} {% get_current_language as LANGUAGE_CODE %} @@ -22,6 +22,8 @@ {% block css_extra %} {% endblock css_extra %} + {% render_block "css" postprocessor "compressor.contrib.sekizai.compress" %} + {% render_block "js" postprocessor "compressor.contrib.sekizai.compress" %} diff --git a/datacenterlight/templates/datacenterlight/cms/banner_item.html b/datacenterlight/templates/datacenterlight/cms/banner_item.html new file mode 100644 index 00000000..4f0fdaeb --- /dev/null +++ b/datacenterlight/templates/datacenterlight/cms/banner_item.html @@ -0,0 +1,17 @@ +
+
+ {% if instance.banner_text %} +
{{ instance.banner_text }}
+ {% endif %} + {% if instance.banner_image %} +
+ image +
+ {% endif %} +
+
+
+ {{ instance.content }} +
+
+
\ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/cms/banner_list.html b/datacenterlight/templates/datacenterlight/cms/banner_list.html new file mode 100644 index 00000000..ed1a3d49 --- /dev/null +++ b/datacenterlight/templates/datacenterlight/cms/banner_list.html @@ -0,0 +1,12 @@ +{% load static i18n cms_tags %} + + \ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/cms/base.html b/datacenterlight/templates/datacenterlight/cms/base.html new file mode 100644 index 00000000..a6123cc3 --- /dev/null +++ b/datacenterlight/templates/datacenterlight/cms/base.html @@ -0,0 +1,75 @@ +{% load static i18n cms_tags sekizai_tags %} +{% get_current_language as LANGUAGE_CODE %} + + + + + + + + + + + {% page_attribute page_title %} + + + + + + + + + + + {% if request.toolbar.edit_mode %} + + {% endif %} + {% render_block "css" postprocessor "compressor.contrib.sekizai.compress" %} + {% render_block "js" postprocessor "compressor.contrib.sekizai.compress" %} + + + + + + + + + + + + {% include "google_analytics.html" %} + + + + + {% cms_toolbar %} + + {% placeholder 'datacenterlight_navbar' %} + + {% placeholder 'Datacenterlight Header' or %} +
+
+

{% page_attribute page_title %}

+
+
+ {% endplaceholder %} + + {% placeholder 'datacenterlight_content' %} + + {% placeholder 'datacenterlight_footer'%} + + + + + + + + + + + + + diff --git a/datacenterlight/templates/datacenterlight/cms/calculator.html b/datacenterlight/templates/datacenterlight/cms/calculator.html new file mode 100644 index 00000000..c2580fc7 --- /dev/null +++ b/datacenterlight/templates/datacenterlight/cms/calculator.html @@ -0,0 +1,25 @@ +
+
+
+
+
+
+

{{ instance.heading }}

+
+
+
+ {{ instance.content }} +
+
+
+
+
+
+
+ {% include "datacenterlight/includes/_calculator_form.html" %} +
+
+
+
+
+
\ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/cms/contact.html b/datacenterlight/templates/datacenterlight/cms/contact.html new file mode 100644 index 00000000..32919668 --- /dev/null +++ b/datacenterlight/templates/datacenterlight/cms/contact.html @@ -0,0 +1,35 @@ +{% load i18n %} + +
+
+
+
+
+
+

{{ instance.contact_text }}

+
+
+
+

{{ instance.organization_name }}

+
+
+

{{ instance.email }}

+

{{ instance.address }}

+

{{ instance.country }}

+
+
+ +
+
+
+ {% include "datacenterlight/contact_form.html" with form_header=instance.form_header %} +
+
+
+
+
+
\ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/cms/footer.html b/datacenterlight/templates/datacenterlight/cms/footer.html new file mode 100644 index 00000000..2d92ff7e --- /dev/null +++ b/datacenterlight/templates/datacenterlight/cms/footer.html @@ -0,0 +1,15 @@ +{% load i18n cms_tags %} + \ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/cms/link.html b/datacenterlight/templates/datacenterlight/cms/link.html new file mode 100644 index 00000000..081f8551 --- /dev/null +++ b/datacenterlight/templates/datacenterlight/cms/link.html @@ -0,0 +1,5 @@ +{% load cms_tags %} + + + {{ instance.text }} + \ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/cms/navbar.html b/datacenterlight/templates/datacenterlight/cms/navbar.html new file mode 100644 index 00000000..30624525 --- /dev/null +++ b/datacenterlight/templates/datacenterlight/cms/navbar.html @@ -0,0 +1,64 @@ +{% load static i18n custom_tags cms_tags %} +{% get_current_language as LANGUAGE_CODE %} + + \ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/cms/navbar_dropdown.html b/datacenterlight/templates/datacenterlight/cms/navbar_dropdown.html new file mode 100644 index 00000000..814e6be1 --- /dev/null +++ b/datacenterlight/templates/datacenterlight/cms/navbar_dropdown.html @@ -0,0 +1,10 @@ +{% load cms_tags %} + +
+ + +
\ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/cms/section.html b/datacenterlight/templates/datacenterlight/cms/section.html new file mode 100644 index 00000000..ed399ebc --- /dev/null +++ b/datacenterlight/templates/datacenterlight/cms/section.html @@ -0,0 +1,25 @@ +{% load cms_tags %} + +
+
+
+
+
+ {% for plugin in instance.child_plugin_instances %} + {% render_plugin plugin %} + {% endfor %} +
+
+
+
+

{{ instance.heading }}

+
+
+
+ {{ instance.content }} +
+
+
+
+
+
\ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/cms/section_icon.html b/datacenterlight/templates/datacenterlight/cms/section_icon.html new file mode 100644 index 00000000..c0d8feba --- /dev/null +++ b/datacenterlight/templates/datacenterlight/cms/section_icon.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/cms/section_image.html b/datacenterlight/templates/datacenterlight/cms/section_image.html new file mode 100644 index 00000000..d8bd5e6e --- /dev/null +++ b/datacenterlight/templates/datacenterlight/cms/section_image.html @@ -0,0 +1,6 @@ +
+ image + {% if instance.caption %} +
{{ instance.caption }}
+ {% endif %} +
\ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/cms_page.html b/datacenterlight/templates/datacenterlight/cms_page.html index b770773c..a6201b39 100644 --- a/datacenterlight/templates/datacenterlight/cms_page.html +++ b/datacenterlight/templates/datacenterlight/cms_page.html @@ -10,13 +10,13 @@ {% endblock %} {% block content %} -
+

{% page_attribute page_title %}

-
+
{% placeholder 'datacenterlight_cms_page_text' %} diff --git a/datacenterlight/templates/datacenterlight/contact_form.html b/datacenterlight/templates/datacenterlight/contact_form.html index 7b57f227..87848ff2 100644 --- a/datacenterlight/templates/datacenterlight/contact_form.html +++ b/datacenterlight/templates/datacenterlight/contact_form.html @@ -13,7 +13,11 @@
-

{% trans "Get in touch with us!" %}

+ {% if form_header %} +

{{ form_header }}

+ {% else %} +

{% trans "Get in touch with us!" %}

+ {% endif %}
diff --git a/datacenterlight/templates/datacenterlight/includes/_calculator_form.html b/datacenterlight/templates/datacenterlight/includes/_calculator_form.html index d1355245..f38150bb 100644 --- a/datacenterlight/templates/datacenterlight/includes/_calculator_form.html +++ b/datacenterlight/templates/datacenterlight/includes/_calculator_form.html @@ -1,5 +1,5 @@ {% load staticfiles i18n%} -
+ {% csrf_token %}

{% trans "VM hosting" %}

@@ -77,9 +77,6 @@ {% endfor %}
-
diff --git a/datacenterlight/templates/datacenterlight/includes/_footer.html b/datacenterlight/templates/datacenterlight/includes/_footer.html index 933755bf..828a5d19 100644 --- a/datacenterlight/templates/datacenterlight/includes/_footer.html +++ b/datacenterlight/templates/datacenterlight/includes/_footer.html @@ -1,5 +1,4 @@ {% load staticfiles i18n%} -{% get_current_language as LANGUAGE_CODE %}