moep/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Merge pull request #585 from tiwariav/task/4246/dcl_section_cms_full_width

Browse source 
Task/4246 dcl section cms plugin style fix
This commit is contained in:
Arvind Tiwari 2018-03-15 00:58:02 +05:30 committed by GitHub
commit db9111a94d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 209 additions and 210 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
datacenterlight/static/datacenterlight/css/landing-page.css
View file

@ -394,25 +394,26 @@ textarea {
color: #5A74AF; color: #5A74AF;
} }
.split-section .split-text .lead { .split-section h2 {
font-size: 21px; font-size: 36px;
color: #3a3a3a; font-weight: 400;
font-weight: 300 !important;
} }
.split-section .split-text h2 { .split-section .split-title-plain h2 {
font-size: 40px; font-size: 40px;
font-weight: 300;
line-height: 50px; line-height: 50px;
color: #3a3a3a; color: #3a3a3a;
} }
.split-section .split-text .split-title { .split-section .split-title {
position: relative; position: relative;
margin-bottom: 25px; margin-bottom: 25px;
} }
.split-section .split-text .split-title h2 { .split-section .split-title h2 {
font-size: 50px; font-size: 50px;
font-weight: 300;
padding-bottom: 25px; padding-bottom: 25px;
letter-spacing: 2px; letter-spacing: 2px;
} }
@ -428,6 +429,15 @@ textarea {
margin-right: auto; margin-right: auto;
} }
.split-section .split-description .lead {
color: #3a3a3a;
font-size: 21px;
}
.split-section .space .split-description .lead {
font-size: 20px;
}
.split-section.right .split-description { .split-section.right .split-description {
width: 90%; width: 90%;
margin-left: auto; margin-left: auto;
@ -440,15 +450,17 @@ textarea {
} }
.split-section.right .split-text ul, .split-section.right .split-text ul,
.split-section.left .split-text { .split-section.left .split-text,
.split-section.left .space {
text-align: left; text-align: left;
} }
.split-section.right .split-text { .split-section.right .split-text,
.split-section.right .space {
text-align: right; text-align: right;
} }
.split-section .split-text .split-title::before { .split-section .split-title::before {
content: ""; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
@ -458,11 +470,11 @@ textarea {
left: auto; left: auto;
} }
.split-section.right .split-text .split-title::before { .split-section.right .split-title::before {
right: 0; right: 0;
} }
.split-section.left .split-text .split-title::before { .split-section.left .split-title::before {
left: 0; left: 0;
} }
@ -501,10 +513,15 @@ textarea {
.split-section-plain .split-figure { .split-section-plain .split-figure {
width: 41.66666667%; width: 41.66666667%;
} }
.split-section-plain .split-figure.col-sm-push-6 {
left: 58.33333333%;
}
.split-section-plain .split-text { .split-section-plain .split-text {
width: 58.33333333%; width: 58.33333333%;
} }
.split-section-plain .split-text.col-sm-pull-6 {
right: 41.66666667%;
}
} }
.section-image img { .section-image img {
@ -726,34 +743,9 @@ textarea {
width: 70%; width: 70%;
} }
hr.thick-divider {
border-top: 3px solid #eee !important;
}
.space { .space {
padding: 50px 0; max-width: 660px;
} margin: auto;
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;
} }
.percent-text { .percent-text {
@ -761,11 +753,6 @@ tech-sub-sec h2 {
color: #999; color: #999;
} }
.tech-sub-sec h2 {
font-size: 40px;
line-height: 55px;
}
.space-middle { .space-middle {
/* padding: 45px 0; */ /* padding: 45px 0; */
display: inline-block; display: inline-block;
@ -791,16 +778,6 @@ tech-sub-sec h2 {
padding: 30px 2px 20px; 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*/ /*Pricing page*/
@ -966,20 +943,14 @@ 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) { @media(max-width:991px) {
.section-sm-center .split-text { .section-sm-center .split-text,
.section-sm-center .space {
text-align: center !important; text-align: center !important;
margin-bottom: 40px; margin-bottom: 40px;
} }
.section-sm-center .split-text .split-title::before { .section-sm-center .split-title::before {
left: 50% !important; left: 50% !important;
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
@ -989,9 +960,6 @@ tech-sub-sec h2 {
} }
@media(max-width:767px) { @media(max-width:767px) {
.logo-wrap {
padding: 10px;
}
.navbar-transparent li a { .navbar-transparent li a {
color: #777 !important; color: #777 !important;
} }
@ -1076,11 +1044,14 @@ tech-sub-sec h2 {
.split-section .icon-section i { .split-section .icon-section i {
font-size: 120px; font-size: 120px;
} }
.split-section .split-text h2 { .split-section h2 {
font-size: 28px;
}
.split-section .split-title-plain h2 {
font-size: 30px; font-size: 30px;
line-height: 35px; line-height: 35px;
} }
.split-section .split-text .split-title h2 { .split-section .split-title h2 {
font-size: 35px; font-size: 35px;
line-height: 35px; line-height: 35px;
} }
@ -1138,9 +1109,6 @@ tech-sub-sec h2 {
} }
@media(max-width:575px) { @media(max-width:575px) {
.logo-wrap {
padding: 30px;
}
.percent-text { .percent-text {
font-weight: normal; font-weight: normal;
font-size: 37px; font-size: 37px;
@ -1210,12 +1178,16 @@ footer {
flex-shrink: 0; flex-shrink: 0;
padding: 0 15px; padding: 0 15px;
} }
.flex-row .desc-text {
text-align: right;
}
.flex-row .desc-text, .flex-row .desc-text,
.flex-row .percent-text { .flex-row .percent-text {
max-width: 380px; max-width: 430px;
} }
.flex-row-rev .desc-text { .flex-row-rev .desc-text {
max-width: 710px; max-width: 710px;
text-align: left;
} }
.flex-row-rev .percent-text { .flex-row-rev .percent-text {
order: 2; order: 2;
@ -1225,10 +1197,6 @@ footer {
} }
} }
.w380 {
max-width: 380px !important;
}
.checkmark { .checkmark {
display: inline-block; display: inline-block;
} }

2
datacenterlight/templates/datacenterlight/cms/banner_list.html
View file

@ -2,9 +2,11 @@
<div class="banner-list" id="{{ instance.html_id }}"> <div class="banner-list" id="{{ instance.html_id }}">
<div class="container"> <div class="container">
{% if instance.heading %}
<div class="banner-list-heading"> <div class="banner-list-heading">
<h2>{{ instance.heading }}</h2> <h2>{{ instance.heading }}</h2>
</div> </div>
{% endif %}
{% for plugin in instance.child_plugin_instances %} {% for plugin in instance.child_plugin_instances %}
{% render_plugin plugin %} {% render_plugin plugin %}
{% endfor %} {% endfor %}

4
datacenterlight/templates/datacenterlight/cms/calculator.html
View file

@ -3,14 +3,18 @@
<div class="row"> <div class="row">
<div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-push-6{% endif %}"> <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-push-6{% endif %}">
<div class="split-text"> <div class="split-text">
{% if instance.heading %}
<div class="{% if not instance.plain_heading %}split-title{% endif %}"> <div class="{% if not instance.plain_heading %}split-title{% endif %}">
<h2>{{ instance.heading }}</h2> <h2>{{ instance.heading }}</h2>
</div> </div>
{% endif %}
{% if instance.content %}
<div class="split-description"> <div class="split-description">
<div class="lead"> <div class="lead">
{{ instance.content }} {{ instance.content }}
</div> </div>
</div> </div>
{% endif %}
</div> </div>
</div> </div>
<div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-pull-6{% endif %}"> <div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-pull-6{% endif %}">

10
datacenterlight/templates/datacenterlight/cms/contact.html
View file

@ -3,17 +3,27 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6">
{% if instance.contact_text %}
<div class="title"> <div class="title">
<h2>{{ instance.contact_text }}</h2> <h2>{{ instance.contact_text }}</h2>
</div> </div>
{% endif %}
<div class="contact-details"> <div class="contact-details">
{% if instance.organization_name %}
<div class="subtitle"> <div class="subtitle">
<h3>{{ instance.organization_name }}</h3> <h3>{{ instance.organization_name }}</h3>
</div> </div>
{% endif %}
<div class="description"> <div class="description">
{% if instance.email %}
<p>{{ instance.email }}</p> <p>{{ instance.email }}</p>
{% endif %}
{% if instance.address %}
<p>{{ instance.address }}</p> <p>{{ instance.address }}</p>
{% endif %}
{% if instance.country %}
<p>{{ instance.country }}</p> <p>{{ instance.country }}</p>
{% endif %}
</div> </div>
</div> </div>
<div class="social"> <div class="social">

2
datacenterlight/templates/datacenterlight/cms/navbar_dropdown.html
View file

@ -1,7 +1,7 @@
{% load cms_tags %} {% load cms_tags %}
<div class="dropdown highlights-dropdown"> <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 }}&nbsp;<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 }}&nbsp;<span class="caret"></span></a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
{% for plugin in instance.child_plugin_instances %} {% for plugin in instance.child_plugin_instances %}
{% render_plugin plugin %} {% render_plugin plugin %}

29
datacenterlight/templates/datacenterlight/cms/section.html
View file

@ -2,24 +2,45 @@
<div class="split-section {{ instance.get_extra_classes }}" id="{{ instance.html_id }}"> <div class="split-section {{ instance.get_extra_classes }}" id="{{ instance.html_id }}">
<div class="container"> <div class="container">
{% if instance.child_plugin_instances|length %}
<div class="row"> <div class="row">
<div class="col-sm-6 {% if instance.text_direction == 'left' %}col-sm-push-6{% endif %} split-figure"> <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>
</div>
{% endif %}
{% if instance.content %}
<div class="split-description">
<div class="lead">
{{ instance.content }}
</div>
</div>
{% endif %}
</div>
<div class="col-sm-6 {% if instance.text_direction == 'right' %}col-sm-pull-6{% endif %} split-figure">
<div class="section-figure"> <div class="section-figure">
{% for plugin in instance.child_plugin_instances %} {% for plugin in instance.child_plugin_instances %}
{% render_plugin plugin %} {% render_plugin plugin %}
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
<div class="col-sm-6 {% if instance.text_direction == 'left' %}col-sm-pull-6{% endif %} split-text"> </div>
<div class="{% if not instance.plain_heading %}split-title{% endif %}"> {% else %}
<div class="space">
{% if instance.heading %}
<div class="{% if not instance.plain_heading %}split-title{% else %}split-title-plain{% endif %}">
<h2>{{ instance.heading }}</h2> <h2>{{ instance.heading }}</h2>
</div> </div>
{% endif %}
{% if instance.content %}
<div class="split-description"> <div class="split-description">
<div class="lead"> <div class="lead">
{{ instance.content }} {{ instance.content }}
</div> </div>
</div> </div>
{% endif %}
</div> </div>
</div> {% endif %}
</div> </div>
</div> </div>

88
datacenterlight/templates/datacenterlight/whydatacenterlight.html
View file

@ -10,11 +10,9 @@
</div> </div>
<div class="split-section left" id="tech_stack"> <div class="split-section left" id="tech_stack">
<div class="space">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-6"> <div class="col-sm-6 split-text">
<div class="split-text">
<div class="split-title"> <div class="split-title">
<h2>{% trans "Tech Stack" %}</h2> <h2>{% trans "Tech Stack" %}</h2>
</div> </div>
@ -23,66 +21,67 @@
<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> <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> </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>
<div class="col-sm-6"> <div class="section-image">
<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>
<div class="col-sm-6 logo-wrap">
<img class="img-responsive" src="{% static 'datacenterlight/img/prometheus.png' %}" alt="Prometheus"> <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>
<div class="col-sm-6 logo-wrap"> <div class="section-image">
<img class="img-responsive btm-space" src="{% static 'datacenterlight/img/Ceph_Logo.png' %}" alt="Ceph"> <img class="img-responsive" src="{% static 'datacenterlight/img/Ceph_Logo.png' %}" alt="Ceph">
<span class="logo-caption">{% trans "Our storage layer" %}</span> <div class="section-image-caption">{% trans "Our storage layer" %}</div>
</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"> <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>
<div class="col-sm-6 logo-wrap"> <div class="section-image">
<img class="img-responsive btm-space" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula"> <img class="img-responsive" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula">
<span class="logo-caption">{% trans "Our cloud" %}</span> <div class="section-image-caption">{% trans "Our cloud" %}</div>
</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"> <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>
<div class="col-sm-6 logo-wrap"> <div class="section-image">
<img class="img-responsive" src="{% static 'datacenterlight/img/python-logo.png' %}" alt="Python"> <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="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 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> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<hr class="thick-divider"/><!-- Divider --> <div class="split-section right split-section-plain">
<div class="space">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-4 col-md-5"> <div class="col-sm-4 col-md-5 split-figure">
<div class="row"> <div class="section-figure">
<div class="col-md-6 logo-wrap-1"> <div class="section-image">
<img class="img-responsive" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula"> <img class="img-responsive" src="{% static 'datacenterlight/img/opennebula.png' %}" alt="Opennebula">
</div> </div>
<div class="col-md-6 logo-wrap-1"> <div class="section-image">
<img class="img-responsive" src="{% static 'datacenterlight/img/cdistbyungleich.png' %}" alt="Cdist byu ngleich"> <img class="img-responsive" src="{% static 'datacenterlight/img/cdistbyungleich.png' %}" alt="Cdist byu ngleich">
</div> </div>
<div class="col-md-6 logo-wrap-1"> <div class="section-image">
<img class="img-responsive" src="{% static 'datacenterlight/img/prometheus.png' %}" alt="Prometheus"> <img class="img-responsive" src="{% static 'datacenterlight/img/prometheus.png' %}" alt="Prometheus">
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-8 col-md-7 text-right"> <div class="col-sm-8 col-md-7 split-text">
<div class="tech-sub-sec"> <div class="split-title-plain">
<h2>{% trans "We believe in giving back to the FOSS community." %}</h2> <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> <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>
@ -90,12 +89,10 @@
</div> </div>
</div> </div>
<hr class="thick-divider"/><!-- Divider --> <div class="banner-list">
<div class="space">
<div class="container"> <div class="container">
<div class="tech-sub-sec"> <div class="banner-list-heading">
<h3>{% trans "We bring the future to you." %}</h3> <h2>{% trans "We bring the future to you." %}</h3>
</div> </div>
<div class="flex-row flex-row-rev"> <div class="flex-row flex-row-rev">
<div class="percent-text"> <div class="percent-text">
@ -109,19 +106,17 @@
<div class="percent-text"> <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> <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>
<div class="desc-text padding-vertical w380"> <div class="desc-text padding-vertical">
<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> <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>
</div> </div>
</div> </div>
<div class="split-section pricing-section section-gradient" id="price"> <div class="split-section section-gradient left" id="price">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6 split-text">
<div class="split-text">
<div class="split-title"> <div class="split-title">
<h2>{% trans "Starting from only 15CHF per month. Try now." %}</h2> <h2>{% trans "Starting from only 15CHF per month. Try now." %}</h2>
</div> </div>
@ -131,7 +126,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="col-md-6"> <div class="col-md-6">
<div class="price-calc-section"> <div class="price-calc-section">
<div class="card"> <div class="card">