fix style issues for dcl plugins
This commit is contained in:
Arvind Tiwari
parent
9dfb53f2f4
commit
b9a1882080
7 changed files with 176 additions and 194 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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 %}">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue