From: Michael Tremer <michael.tremer@ipfire.org>
Date: Tue, 3 Nov 2020 11:47:18 +0000 (+0000)
Subject: index: Add new jumbo container
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=2e7764cbaaeb3a1017924d4c853286e0eec2dce4;p=ipfire.org.git

index: Add new jumbo container

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

diff --git a/Makefile.am b/Makefile.am
index ef7480ac..c611249d 100644
--- a/Makefile.am
+++ b/Makefile.am
@@ -963,6 +963,7 @@ static_img_DATA = \
 	src/static/img/apple-touch-icon-72x72-precomposed.png \
 	src/static/img/apple-touch-icon-60x60-precomposed.png \
 	src/static/img/bash-logo.svg \
+	src/static/img/bg-img.jpg \
 	src/static/img/debian-logo.svg \
 	src/static/img/default-avatar.jpg \
 	src/static/img/ipfire-tux.png \
diff --git a/src/scss/style.scss b/src/scss/style.scss
index ba8d6ce1..c2e1acb3 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -144,7 +144,25 @@ pre {
 	}
 }
 
-header {
+.bg-brand {
+	min-height: 40rem;
+
+	// Background Image
+	background-image: url("img/bg-img.jpg");
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+
+	// Text is white
+	color: $white;
+
+	// Center the content
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+headeXXr {
 	&.cover {
 		position: relative;
 		width: 100%;
diff --git a/src/static/img/bg-img.jpg b/src/static/img/bg-img.jpg
new file mode 100644
index 00000000..6eb558df
Binary files /dev/null and b/src/static/img/bg-img.jpg differ
diff --git a/src/templates/index.html b/src/templates/index.html
index 17520e3b..8c78b780 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -8,8 +8,15 @@
 {% block title %}{{ _("Welcome to IPFire") }}{% end block %}
 
 {% block container %}
+	<div class="bg-brand">
+		<div class="container">
+			<h1 class="display-1">{{ _("More Than A Firewall") }}</h1>
+			<h4>Customisable, easy to configure, and the leading example</h4>
+		</div>
+	</div>
+
 	<header class="cover">
-		<div class="container h-100">
+		<div class="container">
 			{% module ChristmasBanner() %}
 
 			<div class="row d-flex h-100 flex-fill flex-md-row-reverse align-items-center">