From 35c610f8846001ba4da4a4993c328755f3a3751b Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 28 Sep 2018 15:55:25 +0100
Subject: [PATCH] index: Fix design on mobile

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---
 src/scss/style.scss      | 11 +++++++++++
 src/templates/index.html | 14 +++++++-------
 2 files changed, 18 insertions(+), 7 deletions(-)

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>
 
-- 
2.47.3