basic styling Support page

diff --git a/static/css/style.css b/static/css/style.css
index b54e37a0baf446d258824a2d0e44ad86b546d061..5bb3e65896885789ad019fdc3f75cf14c567f73c 100644 (file)
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -4702,10 +4702,12 @@ h5.fireinfo {
 
 @media (min-width: 992px) {
   body.About li.nav-item a.about,
-  body.Download li.nav-item a.download {
+  body.Download li.nav-item a.download,
+  body.Involved li.nav-item a.support {
     color: #b71c1c; }
     body.About li.nav-item a.about:after,
-    body.Download li.nav-item a.download:after {
+    body.Download li.nav-item a.download:after,
+    body.Involved li.nav-item a.support:after {
       content: "";
       border-bottom: 2px solid #b71c1c;
       position: absolute;

diff --git a/static/scss/_nav.scss b/static/scss/_nav.scss
index 420648b2496ef12c3f89587f1bb92b48a8286c73..401338fce6729f624c4456948232b0fd2e28518f 100644 (file)
--- a/static/scss/_nav.scss
+++ b/static/scss/_nav.scss
@@ -209,7 +209,8 @@
 }
 
 body.About li.nav-item a.about,
-body.Download li.nav-item a.download {
+body.Download li.nav-item a.download,
+body.Involved li.nav-item a.support {
        @include media-breakpoint-up(lg) {
                color: $red_900;
                &:after {

diff --git a/templates/static/get-support.html b/templates/static/get-support.html
index 7f84b436f1c0789fdd5367b5b78dcfe7f24d8783..0bd3c1886c37dc685ddf3f7ffdbcc6c2b1d6ab8b 100644 (file)
--- a/templates/static/get-support.html
+++ b/templates/static/get-support.html
@@ -3,69 +3,68 @@
 {% block title %}{{ _("Get Involved") }}{% end block %}
 
 {% block container %}
-       <div class="container page-header">
-               <h1>{{ _("Get Support") }}</h1>
-       </div>
-
-       <section id="community" class="container content-section text-center">
-               <div class="row">
-                       <div class="col-md-4 text-center">
-                               <a href="//wiki.ipfire.org" class="link-normal">
-                                       <span class="fa fa-4x fa-pencil-square-o"></span>
-                                       <h3>{{ _("Documentation") }}</h3>
-                               </a>
+       <div class="container features-content">
+               <section class="content col-12">
+                       <h3 class="headline mb-5">{{ _("Get Support") }}</h3>
+                       
+                       <div class="row m-5">
+                               <div class="col-md-4 text-center">
+                                       <a href="//wiki.ipfire.org" class="link-normal">
+                                               <span class="fa fa-4x fa-pencil-square-o"></span>
+                                               <h3>{{ _("Documentation") }}</h3>
+                                       </a>
+                               </div>
+       
+                               <div class="col-md-4 text-center">
+                                       <a href="//forum.ipfire.org" class="link-normal">
+                                               <span class="fa fa-4x fa-users"></span>
+                                               <h3>{{ _("Forums") }}</h3>
+                                       </a>
+                               </div>
+       
+                               <div class="col-md-4 text-center">
+                                       <a href="/chat" class="link-normal">
+                                               <span class="fa fa-4x fa-wechat"></span>
+                                               <h3>{{ _("Chat") }}</h3>
+                                       </a>
+                               </div>
                        </div>
-
-                       <div class="col-md-4 text-center">
-                               <a href="//forum.ipfire.org" class="link-normal">
-                                       <span class="fa fa-4x fa-users"></span>
-                                       <h3>{{ _("Forums") }}</h3>
+               </section>
+                       
+               <section id="professinal" class="content col-12">
+                       <h3 class="headline mb-5">{{ _("Get Professional Support") }}</h3>
+                       
+                       <p class="lead">
+                               {% if lang == "de" %}
+                                       <a href="//www.lightningwirelabs.com">Lightning Wire Labs</a>
+                                       bietet professionelle Supportdienstleistungen rund um IPFire für
+                                       Unternehmen an.
+                               {% else %}
+                                       <a href="//www.lightningwirelabs.com">Lightning Wire Labs</a>
+                                       provides professional support services for companies that use IPFire.
+                               {% end %}
+                       </p>
+       
+                       <p class="lead">
+                               {% if lang == "de" %}
+                                       Das Entwicklerteam erarbeitet individuelle Lösungen basierend auf
+                                       IPFire und neue Funktionen. Bei der Planung von sicheren Netzwerken
+                                       und der Integration von IPFire stehen sie unterstützend zur Seite.
+                               {% else %}
+                                       Their team of developers implements custom solutions based on IPFire
+                                       and carries out development of new features. They will help you
+                                       with designing a secure network that is tailored to the specific
+                                       needs of your business and support you with the integration of
+                                       IPFire.
+                               {% end %}
+                       </p>
+                       
+                       <div class="d-flex justify-content-center">
+                               <a class="btn btn-lg mt-5" href="//www.lightningwirelabs.com">
+                                       {{ _("Go to Lightning Wire Labs") }}
                                </a>
                        </div>
+               </section>
+       </div>
 
-                       <div class="col-md-4 text-center">
-                               <a href="/chat" class="link-normal">
-                                       <span class="fa fa-4x fa-wechat"></span>
-                                       <h3>{{ _("Chat") }}</h3>
-                               </a>
-                       </div>
-               </div>
-       </section>
-
-       <section id="professional" class="container content-section text-center">
-               <div class="page-header">
-                       <h1>{{ _("Get Professional Support") }}</h1>
-               </div>
-
-               <p class="lead">
-                       {% if lang == "de" %}
-                               <a href="http://www.lightningwirelabs.com">Lightning Wire Labs</a>
-                               bietet professionelle Supportdienstleistungen rund um IPFire für
-                               Unternehmen an.
-                       {% else %}
-                               <a href="http://www.lightningwirelabs.com">Lightning Wire Labs</a>
-                               provides professional support services for companies that use IPFire.
-                       {% end %}
-               </p>
-
-               <p class="lead">
-                       {% if lang == "de" %}
-                               Das Entwicklerteam erarbeitet individuelle Lösungen basierend auf
-                               IPFire und neue Funktionen. Bei der Planung von sicheren Netzwerken
-                               und der Integration von IPFire stehen sie unterstützend zur Seite.
-                       {% else %}
-                               Their team of developers implements custom solutions based on IPFire
-                               and carries out development of new features. They will help you
-                               with designing a secure network that is tailored to the specific
-                               needs of your business and support you with the integration of
-                               IPFire.
-                       {% end %}
-               </p>
-
-               <p class="text-center">
-                       <a class="btn btn-lwl btn-lg" href="http://www.lightningwirelabs.com">
-                               {{ _("Go to Lightning Wire Labs") }}
-                       </a>
-               </p>
-       </section>
 {% end block %}