From bb6e6da2cb283e34cabfd528035d093e396a3568 Mon Sep 17 00:00:00 2001 From: Arvind Tiwari <tiwariav@gmail.com> Date: Thu, 15 Feb 2018 01:55:29 +0530 Subject: [PATCH] left alignment for mobile text, letter spacing reduced to 0px for headings --- .../static/ungleich_page/css/agency.css | 11 +++++++++-- .../static/ungleich_page/css/glasfaser.css | 8 +++++++- .../static/ungleich_page/css/ungleich.css | 4 ++++ .../templates/ungleich_page/glasfaser.html | 18 +++++++++--------- .../glasfaser/_services_item.html | 2 +- .../ungleich_page/includes/_services.html | 6 +++--- .../ungleich_page/includes/_team.html | 8 ++++---- .../ungleich_page/ungleich/_services_item.html | 5 ++--- 8 files changed, 39 insertions(+), 23 deletions(-) diff --git a/ungleich_page/static/ungleich_page/css/agency.css b/ungleich_page/static/ungleich_page/css/agency.css index 60985d06..af09759d 100755 --- a/ungleich_page/static/ungleich_page/css/agency.css +++ b/ungleich_page/static/ungleich_page/css/agency.css @@ -215,7 +215,7 @@ fieldset[disabled] .btn-xl.active { .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { - background-color: #fed136; + background-color: transparent; } .navbar-default .nav li a { @@ -364,6 +364,7 @@ section h2.section-heading { margin-bottom: 15px; font-size: 26px; color: #494949; + letter-spacing: 0px; } section h3.section-subheading { @@ -697,6 +698,11 @@ section h3.section-subheading { .team-member .team-member-caption p { line-height: 1.5; } + .team-member { + max-width: 400px; + margin-left: auto; + margin-right: auto; + } } @media(min-width:768px) { @@ -978,7 +984,8 @@ section h3.section-comment { @media (max-width: 767px) { .carousel-text { height: 220px; - overflow: scroll; + overflow-y: scroll; + text-align: left; } .carousel-author { height: 72px; diff --git a/ungleich_page/static/ungleich_page/css/glasfaser.css b/ungleich_page/static/ungleich_page/css/glasfaser.css index 5547ea0e..0508bad1 100644 --- a/ungleich_page/static/ungleich_page/css/glasfaser.css +++ b/ungleich_page/static/ungleich_page/css/glasfaser.css @@ -150,10 +150,15 @@ .timeline>li .timeline-panel { display: flex; min-height: 80px; - align-items: center; padding-bottom: 15px; } +@media(min-width: 768px) { + .timeline>li .timeline-panel { + align-items: center; + } +} + .timeline>li.timeline-inverted>.timeline-panel { padding-bottom: 0; } @@ -170,6 +175,7 @@ .contact-section p { font-size: 20px; + line-height: 1.4; } footer { diff --git a/ungleich_page/static/ungleich_page/css/ungleich.css b/ungleich_page/static/ungleich_page/css/ungleich.css index c52e0425..2537a921 100644 --- a/ungleich_page/static/ungleich_page/css/ungleich.css +++ b/ungleich_page/static/ungleich_page/css/ungleich.css @@ -120,6 +120,7 @@ padding: 0px 25px; max-width: 400px; text-align: center; + width: 100%; } .cursor-pointer { @@ -146,6 +147,9 @@ .section-subheading.sm_left { padding-left: 15px; padding-right: 15px; + max-width: 600px; + margin-left: auto; + margin-right: auto; } } diff --git a/ungleich_page/templates/ungleich_page/glasfaser.html b/ungleich_page/templates/ungleich_page/glasfaser.html index 77338ac9..a1a01716 100644 --- a/ungleich_page/templates/ungleich_page/glasfaser.html +++ b/ungleich_page/templates/ungleich_page/glasfaser.html @@ -104,8 +104,8 @@ <h2 class="section-heading text-center">Was ist es?</h2> </div> <div class="split-description text-center wow fadeInUp"> - <p class="lead">Bei diesem Angebot handelt es sich um einen Internetzugang für Firmenkunden.</p> - <p class="lead">Sie erhalten in Zusammenarbeit mit unseren Partnern einen Glasfaseranschluss und eine Internetverbindung.</p> + <p class="lead sm_left">Bei diesem Angebot handelt es sich um einen Internetzugang für Firmenkunden.</p> + <p class="lead sm_left">Sie erhalten in Zusammenarbeit mit unseren Partnern einen Glasfaseranschluss und eine Internetverbindung.</p> </div> </div> </div> @@ -123,8 +123,8 @@ <img src="{% static 'ungleich_page/img/glasfaser/business.svg' %}" class="img-responsive img-circle" alt=""> <div class="team-member-caption inline-block"> <h4 class="portfolio-caption">Business-Internet</h4> - <p class="text-muted">Symmetrische Internetleitung 100 Mbit/s upload und 100 Mbit/s download</p> - <p class="text-muted">Glasfaser-Installation bis ins Haus (keine Hausverkabelung)</p> + <p class="text-muted sm_left">Symmetrische Internetleitung 100 Mbit/s upload und 100 Mbit/s download</p> + <p class="text-muted sm_left">Glasfaser-Installation bis ins Haus (keine Hausverkabelung)</p> </div> </div> </div> @@ -133,8 +133,8 @@ <img src="{% static 'ungleich_page/img/glasfaser/ip.svg' %}" class="img-responsive img-circle" alt=""> <div class="team-member-caption inline-block"> <h4 class="portfolio-caption">Erreichbarkeit im Internet</h4> - <p class="text-muted">1 öffentliches IPv6-Netzwerk (/64)</p> - <p class="text-muted">1 öffentliche IPv4-Adresse</p> + <p class="text-muted sm_left">1 öffentliches IPv6-Netzwerk (/64)</p> + <p class="text-muted sm_left">1 öffentliche IPv4-Adresse</p> </div> </div> </div> @@ -143,8 +143,8 @@ <img src="{% static 'ungleich_page/img/glasfaser/switch.svg' %}" class="img-responsive img-circle" alt=""> <div class="team-member-caption inline-block"> <h4 class="portfolio-caption">Einfach zu nutzen</h4> - <p class="text-muted">2 bereits für Sie konfigurierte Endgeräte (benötigt zwei Ihrer Steckdosen)</p> - <p class="text-muted">Einfach einstecken und los!</p> + <p class="text-muted sm_left">2 bereits für Sie konfigurierte Endgeräte (benötigt zwei Ihrer Steckdosen)</p> + <p class="text-muted sm_left">Einfach einstecken und los!</p> </div> </div> </div> @@ -157,7 +157,7 @@ <div class="container"> <div class="text-center wow fadeInDown section-heading-contain"> <h2 class="section-heading">Wie funktioniert es?</h2> - <h3 class="section-subheading text-muted">So kommen Sie in wenigen einfachen Schritten zu Ihrem High-Speed-Internet</h3> + <h3 class="section-subheading text-muted sm_left">So kommen Sie in wenigen einfachen Schritten zu Ihrem High-Speed-Internet</h3> </div> <div class="row"> <div class="col-lg-12"> diff --git a/ungleich_page/templates/ungleich_page/glasfaser/_services_item.html b/ungleich_page/templates/ungleich_page/glasfaser/_services_item.html index e2433953..47bd4eb0 100644 --- a/ungleich_page/templates/ungleich_page/glasfaser/_services_item.html +++ b/ungleich_page/templates/ungleich_page/glasfaser/_services_item.html @@ -2,6 +2,6 @@ <img src="{{ instance.image.url }}" class="img-responsive img-circle" alt=""> <div class="team-member-caption inline-block"> <h4 class="portfolio-caption">{{ instance.title }}</h4> - <p class="text-muted">{{ instance.description }}</p> + <p class="text-muted sm_left">{{ instance.description }}</p> </div> </div> \ No newline at end of file diff --git a/ungleich_page/templates/ungleich_page/includes/_services.html b/ungleich_page/templates/ungleich_page/includes/_services.html index cee09db4..51202b90 100644 --- a/ungleich_page/templates/ungleich_page/includes/_services.html +++ b/ungleich_page/templates/ungleich_page/includes/_services.html @@ -16,7 +16,7 @@ <img src="{% static 'ungleich_page/img/team/5.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/hosting.png' %}" class="img-responsive img-circle img-toggle" alt=""> <div class="team-member-caption inline-block"> <h4 class="portfolio-caption">{% trans "Hosting" %}</h4> - <p class="text-muted">{% trans "Ruby on Rails. Java hosting, Django hosting, we make it everything run smooth and safe." %}</p> + <p class="text-muted sm_left">{% trans "Ruby on Rails. Java hosting, Django hosting, we make it everything run smooth and safe." %}</p> </div> </div> </div> @@ -25,7 +25,7 @@ <img src="{% static 'ungleich_page/img/team/4.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/configuration.png' %}" class="img-responsive img-circle img-toggle" alt=""> <div class="team-member-caption inline-block"> <h4 class="portfolio-caption">{% trans "Configuration as a Service" %}</h4> - <p class="text-muted">{% trans "Ruby on Rails, Django, Java, Webserver, Mailserver, any infrastructure that needs to configured, we provide comprehensive solutions. Amazon, rackspace or bare metal servers, we configure for you." %}</p> + <p class="text-muted sm_left">{% trans "Ruby on Rails, Django, Java, Webserver, Mailserver, any infrastructure that needs to configured, we provide comprehensive solutions. Amazon, rackspace or bare metal servers, we configure for you." %}</p> </div> </div> </div> @@ -34,7 +34,7 @@ <img src="{% static 'ungleich_page/img/team/6.jpg' %}" data-replaced="{% static 'ungleich_page/img/services/linux.png' %}" class="img-responsive img-circle img-toggle cursor-pointer" alt=""> <div class="team-member-caption inline-block"> <h4 class="portfolio-caption">{% trans "Linux System Engineering" %}</h4> - <p class="text-muted">{% trans "Let your developers develop! We take care of your system administration. Gentoo, Archlinux, Debian, Ubuntu, and many more." %}</p> + <p class="text-muted sm_left">{% trans "Let your developers develop! We take care of your system administration. Gentoo, Archlinux, Debian, Ubuntu, and many more." %}</p> </div> </div> </div> diff --git a/ungleich_page/templates/ungleich_page/includes/_team.html b/ungleich_page/templates/ungleich_page/includes/_team.html index 339008aa..b4e5b24d 100644 --- a/ungleich_page/templates/ungleich_page/includes/_team.html +++ b/ungleich_page/templates/ungleich_page/includes/_team.html @@ -11,7 +11,7 @@ <div class="row"> <div class="col-sm-10 col-sm-offset-1 wow fadeInDown"> <!-- start:recommendationSlider --> - <div id="carousel-recommendation-ungleich" class="carousel slide ungleich ungleich-gallery ungleich-gallery-text-carousel" data-ride="carousel" data-interval="3000"> + <div id="carousel-recommendation-ungleich" class="carousel slide ungleich ungleich-gallery ungleich-gallery-text-carousel" data-interval="3000"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-recommendation-ungleich" data-slide-to="0" class="active"></li> @@ -23,7 +23,7 @@ <div class="carousel-inner" role="listbox"> <div class="item active"> <img class="center-block img-client img-responsive" src="{% static 'ungleich_page/img/client-logos/teralytics.png' %}" /> - <p class="carousel-text text-muted text-center"> + <p class="carousel-text text-muted"> {% blocktrans %} "ungleich helped us getting started with our internal infrastructure, hosted on physical servers in a @@ -45,7 +45,7 @@ </div> <div class="item"> <img class="center-block img-client img-responsive" src="{% static 'ungleich_page/img/client-logos/panter.png' %}" /> - <p class="carousel-text text-muted text-center"> + <p class="carousel-text text-muted"> {% blocktrans %} "Thanks to ungleich team, who has designed and configured our company's Linux infrastructure, our @@ -61,7 +61,7 @@ </div> <div class="item"> <img class="center-block img-client img-responsive" src="{% static 'ungleich_page/img/client-logos/logo_ruag.png' %}" /> - <p class="carousel-text text-muted text-center"> + <p class="carousel-text text-muted"> {% blocktrans %} "ungleich provided an excellent service in designing our system architecture and created secure and stable diff --git a/ungleich_page/templates/ungleich_page/ungleich/_services_item.html b/ungleich_page/templates/ungleich_page/ungleich/_services_item.html index 62d462e4..089adcd8 100644 --- a/ungleich_page/templates/ungleich_page/ungleich/_services_item.html +++ b/ungleich_page/templates/ungleich_page/ungleich/_services_item.html @@ -1,8 +1,7 @@ <div class="team-member wow fadeInUp" data-wow-delay="0.25s"> <img src="{{ instance.image.url }}" class="img-responsive img-circle" alt=""> <div class="team-member-caption inline-block"> - <h4 class="portfolio-caption">{{ instance.title }}</h4> - <p> </p> - <p><span class="text-muted">{{ instance.description }}</span></p> + <h4 class="portfolio-caption">{{ instance.title }}</h4> + <p><span class="text-muted">{{ instance.description }}</span></p> </div> </div> \ No newline at end of file