index: Fix design on mobile

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

diff --git a/src/scss/style.scss b/src/scss/style.scss
index ab6d5491748c85c8fc69195c7f0863978603dec0..bcf0277f7a4f75f7a99a341133c94ee06708cc04 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -151,8 +151,19 @@ footer {
 
                margin-top: -6rem;
 
+               @include media-breakpoint-down(sm) {
+                       padding-top: 6rem;
+               }
+
                display: flex;
                align-items: center;
+
+               h1 {
+                       @include media-breakpoint-up(lg) {
+                               font-size: 4rem;
+                               line-height: 5rem;
+                       }
+               }
        }
 
        section {

diff --git a/src/templates/index.html b/src/templates/index.html
index 6d6da74a7de0a494d51f39289c99dac9deeb85ef..547a6e6e04b1a1778b7d6a3f778951810ac23654 100644 (file)
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -9,19 +9,19 @@
 {% block container %}
        <div class="main">
                <div class="container intro">
-                       <div class="row">
-                               <div class="col-7">
-                                       <h1 class="display-3 mt-5">The Open Source Firewall Distribution</h1>
+                       <div class="row flex-md-row-reverse">
+                               <div class="col-md-5 my-5 text-center">
+                                       <img class="img-fluid" src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Logo" />
+                               </div>
+
+                               <div class="col-md-7 my-5 align-self-center">
+                                       <h1>The Open Source Firewall Distribution</h1>
 
                                        <div class="btn-toolbar">
                                                <a class="btn btn-outline-primary btn-lg mr-3" href="/download">{{ _("Download") }}</a>
                                                <a class="btn btn-outline-secondary btn-lg ml-3" href="/features">{{ _("Features") }}</a>
                                        </div>
                                </div>
-
-                               <div class="col-5 text-center">
-                                       <img class="img-fluid" src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Logo" />
-                               </div>
                        </div>
                </div>