index: Add new jumbo container

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

diff --git a/Makefile.am b/Makefile.am
index ef7480ac9103a967d0e711d5d2bafc637b3b6cd3..c611249daf37f7ab0c3ff0eabe831a344b725051 100644 (file)
--- 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 ba8d6ce1e75db32fd2e787dd4064601da0c00925..c2e1acb3f7547da508ee64804736b056e0d8f6c3 100644 (file)
--- 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 (file)
index 0000000..6eb558d
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 17520e3be13bf772a6d269e5244455650298800b..8c78b780406a976042e3e7f64d4485e5ec461665 100644 (file)
--- 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">