From 30b0d61a085eda7d1faecedc5788ce3d58ec045e Mon Sep 17 00:00:00 2001
From: Michael Tremer <michael.tremer@ipfire.org>
Date: Wed, 26 Sep 2018 16:48:05 +0100
Subject: [PATCH] index: Redesign intro

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

diff --git a/src/scss/style.scss b/src/scss/style.scss
index bf33dbc4..0e178f97 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -133,6 +133,16 @@ footer {
 // Sections
 
 .main {
+	.intro {
+		min-height: 100%;
+		min-height: 100vh;
+
+		margin-top: -6rem;
+
+		display: flex;
+		align-items: center;
+	}
+
 	section {
 		padding: 3rem 0;
 
@@ -145,64 +155,6 @@ footer {
 		}
 	}
 
-	section.intro {
-		// Make it cover the navbar, too
-		margin-top: -6rem;
-		padding-top: 6rem;
-
-		min-height: 100vh;
-		position: relative;
-
-		.branding {
-			margin-top: 7.5rem;
-			margin-bottom: 4rem;
-
-			@include media-breakpoint-down(xs) {
-				margin-top: 2.5rem;
-			}
-
-			text-align: center;
-
-			h1 {
-				margin-bottom: 0;
-
-				@include media-breakpoint-down(xs) {
-					font-size: 72px;
-					line-height: 88px;
-				}
-			}
-
-			h1:before {
-				content: "";
-				height: 60px;
-				width: 76px;
-				background-image: url('img/ipfire-tux.png');
-				background-repeat: no-repeat;
-				background-position: center center;
-				background-size: contain;
-				display: inline-block;
-				position: relative;
-				top: 4px;
-
-				@include media-breakpoint-up(sm) {
-					height: 120px;
-					width: 93px;
-					margin-right: 32px;
-					top: 8px;
-				}
-			}
-
-			h5 {
-				color: $white;
-
-				@include media-breakpoint-down(xs) {
-					font-size: 14px;
-					line-height: 20px;
-				}
-			}
-		}
-	}
-
 	section#news, section#support, footer {
 		background-color: $body-color;
 		color: $body-bg;
@@ -299,27 +251,6 @@ footer {
 	position: fixed;
 }
 
-.page-scroll {
-	display: block;
-	visibility: visible;
-	position: absolute;
-	bottom: 48px;
-	left: 50%;
-	transform: translateX(-50%);
-	.btn {
-		width: 36px;
-		height: 36px;
-		fill: $red;
-		@include media-breakpoint-up(sm) {
-			width: 64px;
-			height: 64px;
-		}
-		&:hover .i_arrow_down {
-			fill: white;
-		}
-	}
-}
-
 .feature_icons {
 	width: 40px;
 	height: 100%;
diff --git a/src/templates/index.html b/src/templates/index.html
index dcf789b0..a431e581 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -8,25 +8,22 @@
 
 {% block container %}
 	<div class="main">
-		<section class="intro">
-			<div class="container">
-				<div class="branding">
-					<h1 class="display-1">IP<strong>Fire</strong></h1>
-					<h5>The Open Source Firewall Distribution</h5>
+		<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="btn-toolbar">
+						<a class="btn btn-outline-primary btn-lg mr-3" href="/download">{{ _("Download") }}</a>
+						<a class="btn btn-outline-light btn-lg ml-3" href="/features">{{ _("Features") }}</a>
+					</div>
 				</div>
 
-				<div class="row justify-content-center">
-					<a class="btn btn-outline-primary btn-lg mr-3" href="/download">{{ _("Download") }}</a>
-					<a class="btn btn-outline-dark btn-lg ml-3" href="/features">{{ _("Features") }}</a>
+				<div class="col-5 text-center">
+					<img class="img-fluid" src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Logo" />
 				</div>
 			</div>
-
-			<div class="page-scroll">
-				<a href="#features" class="btn btn-outline-primary rounded-circle scroll">
-					<svg class="icon i_lg i_arrow_down"><use xlink:href="#arrow_down"/></svg>
-				</a>
-			</div>
-		</section>
+		</div>
 
 		<section id="features">
 			<div class="container">
-- 
2.47.3