index: Cleanup CSS for page cover

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

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 068e2b88a80d36e7bceddfa770af52ff5ad3f8d9..3ad9029bba09ef92479a11c1b216c26d71bab79f 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -44,12 +44,9 @@
        color: $body-bg;
 }
 
-html, body {
-       height: 100%;
-}
-
 body {
        display: flex;
+       min-height: 100vh;
        flex-flow: column;
 }
 
@@ -113,6 +110,19 @@ body {
        }
 }
 
+header {
+       &.cover {
+               position: relative;
+               width: 100%;
+               height: auto;
+               min-height: 35rem;
+
+               @include media-breakpoint-up(lg) {
+                       height: calc(100vh - #{$navbar-height});
+               }
+       }
+}
+
 footer {
        margin-top: auto;
 
@@ -174,19 +184,6 @@ section {
                        line-height: $display-line-height;
                }
        }
-
-       &.intro {
-               padding: 0;
-
-               min-height: 100%;
-               min-height: 100vh;
-
-               margin-top: -$navbar-height;
-
-               @include media-breakpoint-down(sm) {
-                       padding-top: $navbar-height;
-               }
-       }
 }
 
 .blog-post {

diff --git a/src/templates/index.html b/src/templates/index.html
index 2399a8f24a43f019dc1d72d9168b34b00ffb1f0b..ec5b4bd6211dea74432cdff2a88c714d79a555ac 100644 (file)
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -7,9 +7,9 @@
 {% block title %}{{ _("Welcome to IPFire") }}{% end block %}
 
 {% block container %}
-       <section class="intro d-flex align-items-center">
-               <div class="container">
-                       <div class="row flex-md-row-reverse">
+       <header class="cover">
+               <div class="container d-flex h-100 align-items-center">
+                       <div class="row w-100 flex-md-row-reverse">
                                <div class="col-12 col-md-5 my-5 text-center">
                                        <img class="img-fluid" src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Logo" />
                                </div>
@@ -24,7 +24,7 @@
                                </div>
                        </div>
                </div>
-       </section>
+       </header>
 
        <section class="inverse">
                <div class="container">