help: Tidy up markup

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/src/templates/static/help.html b/src/templates/static/help.html
index 8bd29748f5ff0a791c3be6a96410cad58eff96a4..a999d6e9ef6c5e3222d126dd44a1151c271b0d77 100644 (file)
--- a/src/templates/static/help.html
+++ b/src/templates/static/help.html
@@ -24,109 +24,93 @@
                        </div>
                </div>
        </section>
-       <!--<div class="header">
-               <div class="container">
-                       <h1>{{ _("Need Help?") }}</h1>
 
-                       <p class="text-muted">
-                               {{ _("We are here for you") }}
-                       </p>
-               </div>
-       </div>-->
-
-       <section class="section is-medium">
-               <div class="container">
-                       <section class="is-large">
-                               <div class="has-background-lwl has-text-white">
-                                       <div class="columns is-centered is-vcentered">
-                                               <div class="column is-7">
-                                                       <section class="section">
-                                                               <div class="block">
-                                                                       <h3 class="title is-3 has-text-white">{{ _("Get Professional Support") }}</h4>
-                                                               </div>
-                                                               <div class="block">
-                                                                       <p>
-                                                                               Lightning Wire Labs provides professional support services
-                                                                               for companies that use IPFire.
-                                                                       </p>
+       <div class="container">
+               <section class="section">
+                       <div class="box p-6 has-background-lwl has-text-white">
+                               <div class="columns is-mobile is-vcentered">
+                                       <div class="column">
+                                               <h3 class="title is-3 has-text-white">{{ _("Get Professional Support") }}</h3>
 
-                                                                       <p>
-                                                                               The 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.
-                                                                       </p>
-                                                               </div>
-                                                               <div class="block">
-                                                                       <button class="button is-white has-text-lwl has-text-weight-bold" href="https://www.lightningwirelabs.com/">
-                                                                               {{ _("Go to Website") }}
-                                                                       </button>
-                                                               </div>
-                                                       </section>
+                                               <div class="block">
+                                                       <p>
+                                                               Lightning Wire Labs provides professional support services
+                                                               for companies using IPFire.
+                                                               Their team of developers implements custom solutions based on IPFire and
+                                                               carries out development of new features.
+                                                               They help with designing a secure network which is tailored to
+                                                               the specific needs of your business and support with your IPFire integration.
+                                                       </p>
                                                </div>
-                                               <div class="column is-2">
-                                                       <figure class="image is-128x128">
-                                                               <img src="{{ static_url("img/lightningwirelabs-logo.svg") }}" alt="{{ _("Lightning Wire Labs") }}">
-                                                       </figure>
+
+                                               <div class="block">
+                                                       <a class="button is-white has-text-lwl has-text-weight-bold" href="https://www.lightningwirelabs.com/">
+                                                               {{ _("Go to Website") }}
+                                                       </a>
                                                </div>
                                        </div>
+
+                                       <div class="column is-narrow is-hidden-mobile has-text-centered">
+                                               <figure class="image m-5 is-128x128">
+                                                       <img src="{{ static_url("img/lightningwirelabs-logo.svg") }}" alt="{{ _("Lightning Wire Labs") }}">
+                                               </figure>
+                                       </div>
                                </div>
-                       </section>
-               </div>
-       </section>
+                       </div>
+               </section>
 
-               <div class="container">
+               <section class="section">
                        <div class="columns">
                                <div class="column is-half">
-                                                       <div class="block">
-                                                               <h3 class="title is-3">
-                                                                       IPFire<span class="has-text-primary">_</span>Wiki
-                                                               </h3>
-                                                       </div>
-                                                       <div class="block">
-                                                               <div class="column is-2 is-narrow is-centered">
-                                                                       <i class="fas fa-solid fa-pen-alt fa-5x"></i>
-                                                               </div>
-                                                       </div>
-                                                       <div class="block">
-                                                               <button class="button is-primary is-centered is-narrow is-large has-text-weight-bold is-fullwidth" href="https://wiki.ipfire.org/">
-                                                                       {{ _("Go to Wiki") }}
-                                                               </button>
-                                                       </div>
-                                                       <div class="block">
-                                                               <p>
-                                                                       Our wiki has everything there is to know about IPFire
-                                                                       It is written by the community and everyone can join and improve it
-                                                               </p>
-                                                       </div>
+                                       <div class="block">
+                                               <h3 class="title is-3">
+                                                       IPFire<span class="has-text-primary">_</span>Wiki
+                                               </h3>
+                                       </div>
+                                       <div class="block">
+                                               <div class="column is-2 is-narrow is-centered">
+                                                       <i class="fas fa-solid fa-pen-alt fa-5x"></i>
+                                               </div>
+                                       </div>
+                                       <div class="block">
+                                               <button class="button is-primary is-centered is-narrow is-large has-text-weight-bold is-fullwidth" href="https://wiki.ipfire.org/">
+                                                       {{ _("Go to Wiki") }}
+                                               </button>
+                                       </div>
+                                       <div class="block">
+                                               <p>
+                                                       Our wiki has everything there is to know about IPFire
+                                                       It is written by the community and everyone can join and improve it
+                                               </p>
+                                       </div>
                                </div>
+
                                <div class="column">
-                                                       <div class="block">
-                                                               <h3 class="title is-3">
-                                                                       IPFire<span class="has-text-primary">_</span>Community
-                                                               </h3>
-                                                       </div>
-                                                       <div class="block">
-                                                               <div class="column is-2 is-narrow is-centered">
-                                                                       <i class="fas fa-solid fa-hands-helping fa-5x"></i>
-                                                               </div>
-                                                       </div>
-                                                       <div class="block">
-                                                               <button class="button is-primary is-centered is-narrow is-large has-text-weight-bold is-fullwidth" href="https://community.ipfire.org/">
-                                                                       {{ _("Go to Community") }}
-                                                               </button>
-                                                       </div>
-                                                       <div class="block">
-                                                               <p>
-                                                                       Talk to the IPFire Community on our community portal.
-                                                                       Ask about how to get started with IPFire, how you can
-                                                                       contribute to the project, and what else you always
-                                                                       wanted to know about IPFire...
-                                                               </p>
-                                                       </div>
+                                       <div class="block">
+                                               <h3 class="title is-3">
+                                                       IPFire<span class="has-text-primary">_</span>Community
+                                               </h3>
+                                       </div>
+                                       <div class="block">
+                                               <div class="column is-2 is-narrow is-centered">
+                                                       <i class="fas fa-solid fa-hands-helping fa-5x"></i>
+                                               </div>
+                                       </div>
+                                       <div class="block">
+                                               <button class="button is-primary is-centered is-narrow is-large has-text-weight-bold is-fullwidth" href="https://community.ipfire.org/">
+                                                       {{ _("Go to Community") }}
+                                               </button>
+                                       </div>
+                                       <div class="block">
+                                               <p>
+                                                       Talk to the IPFire Community on our community portal.
+                                                       Ask about how to get started with IPFire, how you can
+                                                       contribute to the project, and what else you always
+                                                       wanted to know about IPFire...
+                                               </p>
+                                       </div>
                                </div>
                        </div>
-               </div>
+               </section>
        </div>
 {% end block %}