From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 28 Sep 2018 14:55:25 +0000 (+0100)
Subject: index: Fix design on mobile
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=35c610f8846001ba4da4a4993c328755f3a3751b;p=ipfire.org.git

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 ab6d5491..bcf0277f 100644
--- 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 6d6da74a..547a6e6e 100644
--- 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>