From b9a1882080c61190e91ffee93275d5c95e71e31c Mon Sep 17 00:00:00 2001 From: Arvind Tiwari <tiwariav@gmail.com> Date: Tue, 13 Mar 2018 01:52:54 +0530 Subject: [PATCH 1/7] fix style issues for dcl plugins --- .../datacenterlight/css/landing-page.css | 73 ++----- .../datacenterlight/cms/banner_list.html | 8 +- .../datacenterlight/cms/calculator.html | 18 +- .../datacenterlight/cms/contact.html | 28 ++- .../datacenterlight/cms/navbar_dropdown.html | 2 +- .../datacenterlight/cms/section.html | 51 +++-- .../datacenterlight/whydatacenterlight.html | 190 +++++++++--------- 7 files changed, 176 insertions(+), 194 deletions(-) diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css index 61128e69..05b2f075 100755 --- a/datacenterlight/static/datacenterlight/css/landing-page.css +++ b/datacenterlight/static/datacenterlight/css/landing-page.css @@ -501,10 +501,15 @@ textarea { .split-section-plain .split-figure { width: 41.66666667%; } - + .split-section-plain .split-figure.col-sm-push-6 { + left: 58.33333333%; + } .split-section-plain .split-text { width: 58.33333333%; } + .split-section-plain .split-text.col-sm-pull-6 { + right: 41.66666667%; + } } .section-image img { @@ -726,34 +731,10 @@ textarea { width: 70%; } -hr.thick-divider { - border-top: 3px solid #eee !important; -} - .space { padding: 50px 0; -} - -tech-sub-sec h2 { - font-size: 45px; - line-height: 60px; - padding-bottom: 25px; - color: #3a3a3a; - letter-spacing: 1px; -} - -.logo-wrap { - text-align: center; - min-height: 140px; - padding: 20px 40px 30px 40px; -} - -.btm-space { - padding-bottom: 8px; -} - -.btm-space-tayga { - padding-bottom: 12px; + max-width: 660px; + margin: auto; } .percent-text { @@ -761,11 +742,6 @@ tech-sub-sec h2 { color: #999; } -.tech-sub-sec h2 { - font-size: 40px; - line-height: 55px; -} - .space-middle { /* padding: 45px 0; */ display: inline-block; @@ -791,16 +767,6 @@ tech-sub-sec h2 { padding: 30px 2px 20px; } -.logo-wrap .logo-caption { - padding-top: 20px; - display: inline-block; - color: #999 !important; -} - -.logo-wrap-1 { - padding-top: 50px; -} - /*Pricing page*/ @@ -966,13 +932,6 @@ tech-sub-sec h2 { } } -@media (min-width: 576px) and (max-width: 767px) { - .logo-wrap, .logo-wrap-1 { - width: 50%; - padding: 15px 30px !important; - min-height: 179px; - } -} @media(max-width:991px) { .section-sm-center .split-text { @@ -989,9 +948,6 @@ tech-sub-sec h2 { } @media(max-width:767px) { - .logo-wrap { - padding: 10px; - } .navbar-transparent li a { color: #777 !important; } @@ -1138,9 +1094,6 @@ tech-sub-sec h2 { } @media(max-width:575px) { - .logo-wrap { - padding: 30px; - } .percent-text { font-weight: normal; font-size: 37px; @@ -1210,12 +1163,16 @@ footer { flex-shrink: 0; padding: 0 15px; } + .flex-row .desc-text { + text-align: right; + } .flex-row .desc-text, .flex-row .percent-text { - max-width: 380px; + max-width: 430px; } .flex-row-rev .desc-text { max-width: 710px; + text-align: left; } .flex-row-rev .percent-text { order: 2; @@ -1225,10 +1182,6 @@ footer { } } -.w380 { - max-width: 380px !important; -} - .checkmark { display: inline-block; } diff --git a/datacenterlight/templates/datacenterlight/cms/banner_list.html b/datacenterlight/templates/datacenterlight/cms/banner_list.html index 7ef1c1c5..92c5c059 100644 --- a/datacenterlight/templates/datacenterlight/cms/banner_list.html +++ b/datacenterlight/templates/datacenterlight/cms/banner_list.html @@ -2,9 +2,11 @@ <div class="banner-list" id="{{ instance.html_id }}"> <div class="container"> - <div class="banner-list-heading"> - <h2>{{ instance.heading }}</h2> - </div> + {% if instance.heading %} + <div class="banner-list-heading"> + <h2>{{ instance.heading }}</h2> + </div> + {% endif %} {% for plugin in instance.child_plugin_instances %} {% render_plugin plugin %} {% endfor %} diff --git a/datacenterlight/templates/datacenterlight/cms/calculator.html b/datacenterlight/templates/datacenterlight/cms/calculator.html index c2580fc7..5ea97e84 100644 --- a/datacenterlight/templates/datacenterlight/cms/calculator.html +++ b/datacenterlight/templates/datacenterlight/cms/calculator.html @@ -3,14 +3,18 @@ <div class="row"> <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-push-6{% endif %}"> <div class="split-text"> - <div class="{% if not instance.plain_heading %}split-title{% endif %}"> - <h2>{{ instance.heading }}</h2> - </div> - <div class="split-description"> - <div class="lead"> - {{ instance.content }} + {% if instance.heading %} + <div class="{% if not instance.plain_heading %}split-title{% endif %}"> + <h2>{{ instance.heading }}</h2> </div> - </div> + {% endif %} + {% if instance.content %} + <div class="split-description"> + <div class="lead"> + {{ instance.content }} + </div> + </div> + {% endif %} </div> </div> <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-pull-6{% endif %}"> diff --git a/datacenterlight/templates/datacenterlight/cms/contact.html b/datacenterlight/templates/datacenterlight/cms/contact.html index b340a911..63455dd0 100644 --- a/datacenterlight/templates/datacenterlight/cms/contact.html +++ b/datacenterlight/templates/datacenterlight/cms/contact.html @@ -3,17 +3,27 @@ <div class="container"> <div class="row"> <div class="col-sm-6"> - <div class="title"> - <h2>{{ instance.contact_text }}</h2> - </div> - <div class="contact-details"> - <div class="subtitle"> - <h3>{{ instance.organization_name }}</h3> + {% if instance.contact_text %} + <div class="title"> + <h2>{{ instance.contact_text }}</h2> </div> + {% endif %} + <div class="contact-details"> + {% if instance.organization_name %} + <div class="subtitle"> + <h3>{{ instance.organization_name }}</h3> + </div> + {% endif %} <div class="description"> - <p>{{ instance.email }}</p> - <p>{{ instance.address }}</p> - <p>{{ instance.country }}</p> + {% if instance.email %} + <p>{{ instance.email }}</p> + {% endif %} + {% if instance.address %} + <p>{{ instance.address }}</p> + {% endif %} + {% if instance.country %} + <p>{{ instance.country }}</p> + {% endif %} </div> </div> <div class="social"> diff --git a/datacenterlight/templates/datacenterlight/cms/navbar_dropdown.html b/datacenterlight/templates/datacenterlight/cms/navbar_dropdown.html index 814e6be1..051e8914 100644 --- a/datacenterlight/templates/datacenterlight/cms/navbar_dropdown.html +++ b/datacenterlight/templates/datacenterlight/cms/navbar_dropdown.html @@ -1,7 +1,7 @@ {% load cms_tags %} <div class="dropdown highlights-dropdown"> - <a class="dropdown-toggle url-init dcl-link" href="{{ instance.url }}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ instance.text }} <span class="caret"></span></a> + <a class="dropdown-toggle url-init dcl-link" href="{{ instance.url|default:'#' }}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ instance.text }} <span class="caret"></span></a> <ul class="dropdown-menu"> {% for plugin in instance.child_plugin_instances %} {% render_plugin plugin %} diff --git a/datacenterlight/templates/datacenterlight/cms/section.html b/datacenterlight/templates/datacenterlight/cms/section.html index ed399ebc..5a464b10 100644 --- a/datacenterlight/templates/datacenterlight/cms/section.html +++ b/datacenterlight/templates/datacenterlight/cms/section.html @@ -2,24 +2,43 @@ <div class="split-section {{ instance.get_extra_classes }}" id="{{ instance.html_id }}"> <div class="container"> - <div class="row"> - <div class="col-sm-6 {% if instance.text_direction == 'left' %}col-sm-push-6{% endif %} split-figure"> - <div class="section-figure"> - {% for plugin in instance.child_plugin_instances %} - {% render_plugin plugin %} - {% endfor %} - </div> - </div> - <div class="col-sm-6 {% if instance.text_direction == 'left' %}col-sm-pull-6{% endif %} split-text"> - <div class="{% if not instance.plain_heading %}split-title{% endif %}"> - <h2>{{ instance.heading }}</h2> - </div> - <div class="split-description"> - <div class="lead"> - {{ instance.content }} + {% if instance.child_plugin_instances|length %} + <div class="row"> + <div class="col-sm-6 {% if instance.text_direction == 'left' %}col-sm-push-6{% endif %} split-figure"> + <div class="section-figure"> + {% for plugin in instance.child_plugin_instances %} + {% render_plugin plugin %} + {% endfor %} </div> </div> + <div class="col-sm-6 {% if instance.text_direction == 'left' %}col-sm-pull-6{% endif %} split-text"> + {% if instance.heading %} + <div class="{% if not instance.plain_heading %}split-title{% endif %}"> + <h2>{{ instance.heading }}</h2> + </div> + {% endif %} + {% if instance.content %} + <div class="split-description"> + <div class="lead"> + {{ instance.content }} + </div> + </div> + {% endif %} + </div> </div> - </div> + {% else %} + <div class="space"> + {% if instance.heading %} + <div class="{% if not instance.plain_heading %}split-title{% endif %}"> + <h2>{{ instance.heading }}</h2> + </div> + {% endif %} + {% if instance.content %} + <div class="split-description"> + {{ instance.content }} + </div> + {% endif %} + </div> + {% endif %} </div> </div> \ No newline at end of file diff --git a/datacenterlight/templates/datacenterlight/whydatacenterlight.html b/datacenterlight/templates/datacenterlight/whydatacenterlight.html index 19d11a73..49083101 100644 --- a/datacenterlight/templates/datacenterlight/whydatacenterlight.html +++ b/datacenterlight/templates/datacenterlight/whydatacenterlight.html @@ -10,126 +10,120 @@ </div> <div class="split-section left" id="tech_stack"> - <div class="space"> - <div class="container"> - <div class="row"> - <div class="col-sm-6"> - <div class="split-text"> - <div class="split-title"> - <h2>{% trans "Tech Stack" %}</h2> - </div> - <div class="split-description"> - <h3>{% trans "We are seriously open source." %}</h3> - <p class="lead">{% blocktrans %} Our full software stack is open source – We don't use anything that isn't open source. <br>Yes, we are that cool. {% endblocktrans %}</p> - </div> - </div> + <div class="container"> + <div class="row"> + <div class="col-sm-6 split-text"> + <div class="split-title"> + <h2>{% trans "Tech Stack" %}</h2> </div> - <div class="col-sm-6"> - <div class="col-sm-6 logo-wrap"> - <img class="img-responsive btm-space" src="{% static 'datacenterlight/img/devuan.png' %}" alt="Devuan"> - <span class="logo-caption">{% trans "Our services run on" %}</span> + <div class="split-description"> + <h3>{% trans "We are seriously open source." %}</h3> + <p class="lead">{% blocktrans %} Our full software stack is open source – We don't use anything that isn't open source. <br>Yes, we are that cool. {% endblocktrans %}</p> + </div> + </div> + <div class="col-sm-6 split-figure"> + <div class="section-figure"> + <div class="section-image"> + <img class="img-responsive" src="{% static 'datacenterlight/img/devuan.png' %}" alt="Devuan"> + <div class="section-image-caption">{% trans "Our services run on" %}</div> </div> - <div class="col-sm-6 logo-wrap"> + <div class="section-image"> <img class="img-responsive" src="{% static 'datacenterlight/img/prometheus.png' %}" alt="Prometheus"> - <span class="logo-caption">{% trans "Our monitoring" %}</span> + <div class="section-image-caption">{% trans "Our monitoring" %}</div> </div> - <div class="col-sm-6 logo-wrap"> - <img class="img-responsive btm-space" src="{% static 'datacenterlight/img/Ceph_Logo.png' %}" alt="Ceph"> - <span class="logo-caption">{% trans "Our storage layer" %}</span> + <div class="section-image"> + <img class="img-responsive" src="{% static 'datacenterlight/img/Ceph_Logo.png' %}" alt="Ceph"> + <div class="section-image-caption">{% trans "Our storage layer" %}</div> </div> - <div class="col-sm-6 logo-wrap"> + <div class="section-image"> <img class="img-responsive" src="{% static 'datacenterlight/img/django.png' %}" alt="Django"> - <span class="logo-caption">{% trans "Our web frontend" %}</span> + <div class="section-image-caption">{% trans "Our web frontend" %}</div> </div> - <div class="col-sm-6 logo-wrap"> - <img class="img-responsive btm-space" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula"> - <span class="logo-caption">{% trans "Our cloud" %}</span> + <div class="section-image"> + <img class="img-responsive" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula"> + <div class="section-image-caption">{% trans "Our cloud" %}</div> </div> - <div class="col-sm-6 logo-wrap"> + <div class="section-image"> <img class="img-responsive" src="{% static 'datacenterlight/img/cdistbyungleich.png' %}" alt="Cdist by ungleich"> - <span class="logo-caption">{% trans "Our configuration management system" %}</span> + <div class="section-image-caption">{% trans "Our configuration management system" %}</div> </div> - <div class="col-sm-6 logo-wrap"> + <div class="section-image"> <img class="img-responsive" src="{% static 'datacenterlight/img/python-logo.png' %}" alt="Python"> - <span class="logo-caption">{% trans "Our awesome juice" %}</span> + <div class="section-image-caption">{% trans "Our awesome juice" %}</div> </div> - <div class="col-sm-6 logo-wrap"> - <img class="img-responsive btm-space-tayga" src="{% static 'datacenterlight/img/tayga.png' %}" alt="Tayga"> - <span class="logo-caption">{% trans "Our NAT64 gateway" %}</span> + <div class="section-image"> + <img class="img-responsive" src="{% static 'datacenterlight/img/tayga.png' %}" alt="Tayga"> + <div class="section-image-caption">{% trans "Our NAT64 gateway" %}</div> </div> </div> </div> </div> </div> - - <hr class="thick-divider"/><!-- Divider --> - - <div class="space"> - <div class="container"> - <div class="row"> - <div class="col-sm-4 col-md-5"> - <div class="row"> - <div class="col-md-6 logo-wrap-1"> - <img class="img-responsive" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula"> - </div> - <div class="col-md-6 logo-wrap-1"> - <img class="img-responsive" src="{% static 'datacenterlight/img/cdistbyungleich.png' %}" alt="Cdist byu ngleich"> - </div> - <div class="col-md-6 logo-wrap-1"> - <img class="img-responsive" src="{% static 'datacenterlight/img/prometheus.png' %}" alt="Prometheus"> - </div> - </div> - </div> - <div class="col-sm-8 col-md-7 text-right"> - <div class="tech-sub-sec"> - <h2>{% trans "We believe in giving back to the FOSS community." %}</h2> - <p class="lead">{% blocktrans %}Data Center Light is the child of free and open source software (FOSS) movement. <br>We grew up with it, live by it, and believe in it.<br> The more we work on our data center,<br> the more we contribute back to the FOSS community.{% endblocktrans %}</p> - </div> - </div> - </div> - </div> - </div> - - <hr class="thick-divider"/><!-- Divider --> - - <div class="space"> - <div class="container"> - <div class="tech-sub-sec"> - <h3>{% trans "We bring the future to you." %}</h3> - </div> - <div class="flex-row flex-row-rev"> - <div class="percent-text"> - 100% <strong>IPv6</strong> - </div> - <div class="desc-text padding-vertical"> - <p class="lead">{% blocktrans %}Data Center Light uses the most modern technologies out there.<br>Your VM needs only IPv6. Data Center Light provides<br> transparent two-way IPv6/IPv4 translation.{% endblocktrans %}</p> - </div> - </div> - <div class="flex-row"> - <div class="percent-text"> - <span class="space-middle"> 100% <strong>SSD</strong></span> <span class="ssdimg"><img class="img-responsive" src="{% static 'datacenterlight/img/ssd.jpg' %}" alt="SSD"></span> - </div> - <div class="desc-text padding-vertical w380"> - <p class="lead text-right">{% blocktrans %} No more spinning metal plates! Data Center Light uses only SSDs. We keep things faster and lighter. {% endblocktrans %}</p> - </div> - </div> - </div> - </div> </div> - <div class="split-section pricing-section section-gradient" id="price"> + <div class="split-section right split-section-plain"> <div class="container"> <div class="row"> - <div class="col-md-6"> - <div class="split-text"> - <div class="split-title"> - <h2>{% trans "Starting from only 15CHF per month. Try now." %}</h2> - </div> - <div class="split-description"> - <div class="lead"> - <p>{% trans "Actions speak louder than words. Let's do it, try our VM now." %}</p> + <div class="col-sm-4 col-md-5 split-figure"> + <div class="section-figure"> + <div class="section-image"> + <img class="img-responsive" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula"> + </div> + <div class="section-image"> + <img class="img-responsive" src="{% static 'datacenterlight/img/cdistbyungleich.png' %}" alt="Cdist byu ngleich"> + </div> + <div class="section-image"> + <img class="img-responsive" src="{% static 'datacenterlight/img/prometheus.png' %}" alt="Prometheus"> + </div> + </div> + </div> + <div class="col-sm-8 col-md-7 split-text"> + <div> + <h2>{% trans "We believe in giving back to the FOSS community." %}</h2> + </div> + <div class="split-description"> + <p class="lead">{% blocktrans %}Data Center Light is the child of free and open source software (FOSS) movement. <br>We grew up with it, live by it, and believe in it.<br> The more we work on our data center,<br> the more we contribute back to the FOSS community.{% endblocktrans %}</p> + </div> + </div> + </div> + </div> + </div> + + <div class="banner-list"> + <div class="container"> + <div class="banner-list-heading"> + <h2>{% trans "We bring the future to you." %}</h3> + </div> + <div class="flex-row flex-row-rev"> + <div class="percent-text"> + 100% <strong>IPv6</strong> + </div> + <div class="desc-text padding-vertical"> + <p class="lead">{% blocktrans %}Data Center Light uses the most modern technologies out there.<br>Your VM needs only IPv6. Data Center Light provides<br> transparent two-way IPv6/IPv4 translation.{% endblocktrans %}</p> + </div> + </div> + <div class="flex-row"> + <div class="percent-text"> + <span class="space-middle"> 100% <strong>SSD</strong></span> <span class="ssdimg"><img class="img-responsive" src="{% static 'datacenterlight/img/ssd.jpg' %}" alt="SSD"></span> + </div> + <div class="desc-text padding-vertical"> + <p class="lead">{% blocktrans %} No more spinning metal plates! Data Center Light uses only SSDs. We keep things faster and lighter. {% endblocktrans %}</p> + </div> + </div> + </div> + </div> + + <div class="split-section section-gradient left" id="price"> + <div class="container"> + <div class="row"> + <div class="col-md-6 split-text"> + <div class="split-title"> + <h2>{% trans "Starting from only 15CHF per month. Try now." %}</h2> + </div> + <div class="split-description"> + <div class="lead"> + <p>{% trans "Actions speak louder than words. Let's do it, try our VM now." %}</p> </div> - </div> </div> </div> <div class="col-md-6"> From a29a1514535faa1cace3446cdca87d29c445720f Mon Sep 17 00:00:00 2001 From: Arvind Tiwari <tiwariav@gmail.com> Date: Tue, 13 Mar 2018 02:34:39 +0530 Subject: [PATCH 2/7] change font size --- .../datacenterlight/cms/section.html | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/datacenterlight/templates/datacenterlight/cms/section.html b/datacenterlight/templates/datacenterlight/cms/section.html index 5a464b10..46eac673 100644 --- a/datacenterlight/templates/datacenterlight/cms/section.html +++ b/datacenterlight/templates/datacenterlight/cms/section.html @@ -28,16 +28,20 @@ </div> {% else %} <div class="space"> - {% if instance.heading %} - <div class="{% if not instance.plain_heading %}split-title{% endif %}"> - <h2>{{ instance.heading }}</h2> - </div> - {% endif %} - {% if instance.content %} - <div class="split-description"> - {{ instance.content }} - </div> - {% endif %} + <div class="split-text"> + {% if instance.heading %} + <div class="{% if not instance.plain_heading %}split-title{% endif %}"> + <h2>{{ instance.heading }}</h2> + </div> + {% endif %} + {% if instance.content %} + <div class="split-description"> + <div class="lead"> + {{ instance.content }} + </div> + </div> + {% endif %} + </div> </div> {% endif %} </div> From 6b67cb815cff91d4362abaf5631aa269d6636d34 Mon Sep 17 00:00:00 2001 From: Arvind Tiwari <tiwariav@gmail.com> Date: Tue, 13 Mar 2018 02:55:55 +0530 Subject: [PATCH 3/7] reduce split-titlestyle speciicity --- .../datacenterlight/css/landing-page.css | 44 ++++++++++++------- .../datacenterlight/cms/section.html | 26 +++++------ .../datacenterlight/whydatacenterlight.html | 2 +- 3 files changed, 41 insertions(+), 31 deletions(-) diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css index 05b2f075..17ec907e 100755 --- a/datacenterlight/static/datacenterlight/css/landing-page.css +++ b/datacenterlight/static/datacenterlight/css/landing-page.css @@ -394,24 +394,22 @@ textarea { color: #5A74AF; } -.split-section .split-text .lead { - font-size: 21px; - color: #3a3a3a; - font-weight: 300 !important; +.split-section h2 { + font-size: 34px; } -.split-section .split-text h2 { +.split-section .split-title-plain h2 { font-size: 40px; line-height: 50px; color: #3a3a3a; } -.split-section .split-text .split-title { +.split-section .split-title { position: relative; margin-bottom: 25px; } -.split-section .split-text .split-title h2 { +.split-section .split-title h2 { font-size: 50px; padding-bottom: 25px; letter-spacing: 2px; @@ -428,6 +426,14 @@ textarea { margin-right: auto; } +.split-section .split-description .lead { + color: #3a3a3a; +} + +.split-section .space .split-description .lead { + font-size: 20px; +} + .split-section.right .split-description { width: 90%; margin-left: auto; @@ -440,15 +446,17 @@ textarea { } .split-section.right .split-text ul, -.split-section.left .split-text { +.split-section.left .split-text, +.split-section.left .space { text-align: left; } -.split-section.right .split-text { +.split-section.right .split-text, +.split-section.right .space { text-align: right; } -.split-section .split-text .split-title::before { +.split-section .split-title::before { content: ""; position: absolute; bottom: 0; @@ -458,11 +466,11 @@ textarea { left: auto; } -.split-section.right .split-text .split-title::before { +.split-section.right .split-title::before { right: 0; } -.split-section.left .split-text .split-title::before { +.split-section.left .split-title::before { left: 0; } @@ -934,11 +942,12 @@ textarea { @media(max-width:991px) { - .section-sm-center .split-text { + .section-sm-center .split-text, + .section-sm-center .space { text-align: center !important; margin-bottom: 40px; } - .section-sm-center .split-text .split-title::before { + .section-sm-center .split-title::before { left: 50% !important; transform: translate(-50%, 0); } @@ -1032,11 +1041,14 @@ textarea { .split-section .icon-section i { font-size: 120px; } - .split-section .split-text h2 { + .split-section h2 { + font-size: 28px; + } + .split-section .split-title-plain h2 { font-size: 30px; line-height: 35px; } - .split-section .split-text .split-title h2 { + .split-section .split-title h2 { font-size: 35px; line-height: 35px; } diff --git a/datacenterlight/templates/datacenterlight/cms/section.html b/datacenterlight/templates/datacenterlight/cms/section.html index 46eac673..8e7b5bf0 100644 --- a/datacenterlight/templates/datacenterlight/cms/section.html +++ b/datacenterlight/templates/datacenterlight/cms/section.html @@ -13,7 +13,7 @@ </div> <div class="col-sm-6 {% if instance.text_direction == 'left' %}col-sm-pull-6{% endif %} split-text"> {% if instance.heading %} - <div class="{% if not instance.plain_heading %}split-title{% endif %}"> + <div class="{% if not instance.plain_heading %}split-title{% else %}split-title-plain{% endif %}"> <h2>{{ instance.heading }}</h2> </div> {% endif %} @@ -28,20 +28,18 @@ </div> {% else %} <div class="space"> - <div class="split-text"> - {% if instance.heading %} - <div class="{% if not instance.plain_heading %}split-title{% endif %}"> - <h2>{{ instance.heading }}</h2> + {% if instance.heading %} + <div class="{% if not instance.plain_heading %}split-title{% endif %}"> + <h2>{{ instance.heading }}</h2> + </div> + {% endif %} + {% if instance.content %} + <div class="split-description"> + <div class="lead"> + {{ instance.content }} </div> - {% endif %} - {% if instance.content %} - <div class="split-description"> - <div class="lead"> - {{ instance.content }} - </div> - </div> - {% endif %} - </div> + </div> + {% endif %} </div> {% endif %} </div> diff --git a/datacenterlight/templates/datacenterlight/whydatacenterlight.html b/datacenterlight/templates/datacenterlight/whydatacenterlight.html index 49083101..2e2402ed 100644 --- a/datacenterlight/templates/datacenterlight/whydatacenterlight.html +++ b/datacenterlight/templates/datacenterlight/whydatacenterlight.html @@ -78,7 +78,7 @@ </div> </div> <div class="col-sm-8 col-md-7 split-text"> - <div> + <div class="split-title-plain"> <h2>{% trans "We believe in giving back to the FOSS community." %}</h2> </div> <div class="split-description"> From db3703bedca299c10d07c7b7d234cbfc8250780d Mon Sep 17 00:00:00 2001 From: Arvind Tiwari <tiwariav@gmail.com> Date: Tue, 13 Mar 2018 02:57:29 +0530 Subject: [PATCH 4/7] ehading fix --- datacenterlight/templates/datacenterlight/cms/section.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/datacenterlight/templates/datacenterlight/cms/section.html b/datacenterlight/templates/datacenterlight/cms/section.html index 8e7b5bf0..0266e6a3 100644 --- a/datacenterlight/templates/datacenterlight/cms/section.html +++ b/datacenterlight/templates/datacenterlight/cms/section.html @@ -29,7 +29,7 @@ {% else %} <div class="space"> {% if instance.heading %} - <div class="{% if not instance.plain_heading %}split-title{% endif %}"> + <div class="{% if not instance.plain_heading %}split-title{% else %}split-title-plain{% endif %}"> <h2>{{ instance.heading }}</h2> </div> {% endif %} From b7af6ad4e6911446a4a68a672a6bf1fc7d1181a5 Mon Sep 17 00:00:00 2001 From: Arvind Tiwari <tiwariav@gmail.com> Date: Tue, 13 Mar 2018 03:03:28 +0530 Subject: [PATCH 5/7] headning font weight change --- datacenterlight/static/datacenterlight/css/landing-page.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css index 17ec907e..7c5736e0 100755 --- a/datacenterlight/static/datacenterlight/css/landing-page.css +++ b/datacenterlight/static/datacenterlight/css/landing-page.css @@ -395,7 +395,8 @@ textarea { } .split-section h2 { - font-size: 34px; + font-size: 38px; + font-weight: 400; } .split-section .split-title-plain h2 { From 776cd35172dd8e76edbc8af8c096a27fdf6107ac Mon Sep 17 00:00:00 2001 From: Arvind Tiwari <tiwariav@gmail.com> Date: Tue, 13 Mar 2018 19:17:04 +0530 Subject: [PATCH 6/7] heading font weight --- datacenterlight/static/datacenterlight/css/landing-page.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css index 7c5736e0..1aa260ac 100755 --- a/datacenterlight/static/datacenterlight/css/landing-page.css +++ b/datacenterlight/static/datacenterlight/css/landing-page.css @@ -395,12 +395,13 @@ textarea { } .split-section h2 { - font-size: 38px; + font-size: 36px; font-weight: 400; } .split-section .split-title-plain h2 { font-size: 40px; + font-weight: 300; line-height: 50px; color: #3a3a3a; } @@ -412,6 +413,7 @@ textarea { .split-section .split-title h2 { font-size: 50px; + font-weight: 300; padding-bottom: 25px; letter-spacing: 2px; } From 4431ddf5ec47d2c429c4b866ca7f53c75c270c38 Mon Sep 17 00:00:00 2001 From: Arvind Tiwari <tiwariav@gmail.com> Date: Tue, 13 Mar 2018 22:38:55 +0530 Subject: [PATCH 7/7] plugins change image and text order on mobile --- .../static/datacenterlight/css/landing-page.css | 2 +- .../templates/datacenterlight/cms/section.html | 16 ++++++++-------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/datacenterlight/static/datacenterlight/css/landing-page.css b/datacenterlight/static/datacenterlight/css/landing-page.css index 1aa260ac..2f44613b 100755 --- a/datacenterlight/static/datacenterlight/css/landing-page.css +++ b/datacenterlight/static/datacenterlight/css/landing-page.css @@ -431,6 +431,7 @@ textarea { .split-section .split-description .lead { color: #3a3a3a; + font-size: 21px; } .split-section .space .split-description .lead { @@ -743,7 +744,6 @@ textarea { } .space { - padding: 50px 0; max-width: 660px; margin: auto; } diff --git a/datacenterlight/templates/datacenterlight/cms/section.html b/datacenterlight/templates/datacenterlight/cms/section.html index 0266e6a3..bdef3196 100644 --- a/datacenterlight/templates/datacenterlight/cms/section.html +++ b/datacenterlight/templates/datacenterlight/cms/section.html @@ -4,14 +4,7 @@ <div class="container"> {% if instance.child_plugin_instances|length %} <div class="row"> - <div class="col-sm-6 {% if instance.text_direction == 'left' %}col-sm-push-6{% endif %} split-figure"> - <div class="section-figure"> - {% for plugin in instance.child_plugin_instances %} - {% render_plugin plugin %} - {% endfor %} - </div> - </div> - <div class="col-sm-6 {% if instance.text_direction == 'left' %}col-sm-pull-6{% endif %} split-text"> + <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-push-6{% endif %} split-text"> {% if instance.heading %} <div class="{% if not instance.plain_heading %}split-title{% else %}split-title-plain{% endif %}"> <h2>{{ instance.heading }}</h2> @@ -25,6 +18,13 @@ </div> {% endif %} </div> + <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-pull-6{% endif %} split-figure"> + <div class="section-figure"> + {% for plugin in instance.child_plugin_instances %} + {% render_plugin plugin %} + {% endfor %} + </div> + </div> </div> {% else %} <div class="space">