index: Redesign intro

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

diff --git a/src/scss/style.scss b/src/scss/style.scss
index bf33dbc45c042f8d0f35105a0def8023338ca1c9..0e178f9763eeaa2dacbc5512c2e3271284127d20 100644 (file)
--- 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 dcf789b003998be9f91d5a4f2134c9f05b0ee885..a431e581d10f57b36f0a0fbc0044b5dbccc792de 100644 (file)
--- 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">