Redesign footer

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

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 6a5fe07f542602304a0f35dce1600091466fa26f..d2f21bc1e9318e8eb9f9c14611428a04745238c4 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -101,37 +101,26 @@ footer {
        margin-top: auto;
        padding: 3rem 0 0 0;
 
+       color: $white;
+
        @include media-breakpoint-down(md) {
                padding-top: 31px;
        }
 
-       h4 {
-               margin-bottom: 1.25rem;
-               color: rgba($gray-400, .6);
-               font-size: 20px;
-               line-height: 28px;
+       a, .btn-link {
+               color: inherit;
+
+               &:hover {
+                       color: inherit;
+               }
        }
 
        ul {
                li {
-                       font-size: 14px;
-                       margin-bottom: .75rem;
-
-                       a {
-                               color: rgba($gray-400, .6);
-                               text-decoration: none;
-                               &:hover {
-                                       color: $gray-400;
-                                       text-decoration: underline;
-                               }
-                       }
+                       margin-bottom: $spacer / 4;
                }
        }
 
-       .btn-lg {
-               margin-bottom: 2.75rem;
-       }
-
        .copyright {
                background-color: rgba($gray-400, .06);
                padding: $spacer 0;

diff --git a/src/templates/base.html b/src/templates/base.html
index a9ab690dea54233f6acbcdbce6a5331cfc719395..129c4f4bb2467f481d8426f67039c5351f5c6d38 100644 (file)
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -50,78 +50,75 @@
                        <footer class="footer">
                                {% if hostname in ("www.ipfire.org", "blog.ipfire.org", "dev.ipfire.org") %}
                                        <div class="container pb-3">
-                                               <div class="row mb-6">
-                                                       <div class="col-6 col-sm-5 offset-sm-2 col-md-3 offset-md-0 col-lg-2 mb-5">
-                                                               <h4>{{ _("About") }}</h4>
-
-                                                               <ul class="list-unstyled">
-                                                                       <li>
-                                                                               <a href="https://www.ipfire.org/about">{{ _("About IPFire") }}</a>
-                                                                       </li>
-                                                                       <li>
-                                                                               <a href="https://downloads.ipfire.org">{{ _("Download") }}</a>
-                                                                       </li>
-                                                                       <li>
-                                                                               <a href="https://blog.ipfire.org">{{ _("Blog") }}</a>
-                                                                       </li>
-                                                                       <li>
-                                                                               <a href="https://www.ipfire.org/legal">{{ _("Legal") }}</a>
-                                                                       </li>
-                                                               </ul>
-                                                       </div>
+                                               <div class="row mb-6 justify-content-between">
+                                                       <div class="col-12 col-lg-4 mb-4">
+                                                               <h6>{{ _("Subscribe to our Newsletter") }}</h6>
 
-                                                       <div class="col-6 col-sm-5 col-md-3 col-lg-2 mb-5">
-                                                               <h4>{{ _("Support") }}</h4>
-
-                                                               <ul class="list-unstyled">
-                                                                       <li>
-                                                                               <a href="https://www.ipfire.org/get-support#professional">{{ _("Professional Support") }}</a>
-                                                                       </li>
-                                                                       <li>
-                                                                               <a href="https://wiki.ipfire.org">{{ _("Documentation") }}</a>
-                                                                       </li>
-                                                               </ul>
-                                                       </div>
+                                                               <form method="POST" action="/subscribe">
+                                                                       {% raw xsrf_form_html() %}
 
-                                                       <div class="col-6 col-sm-5 offset-sm-2 col-md-3 offset-md-0 col-lg-2 mb-5">
-                                                               <h4>{{ _("Community") }}</h4>
+                                                                       <label class="sr-only" for="email">{{ _("Email Address") }}</label>
 
-                                                               <ul class="list-unstyled">
-                                                                       <li>
-                                                                               <a href="https://forum.ipfire.org">{{ _("Forum") }}</a>
-                                                                       </li>
-                                                               </ul>
-                                                       </div>
+                                                                       <input type="text" class="form-control mb-2 mr-sm-2" id="email"
+                                                                               placeholder="{{ _("Your Email Address") }}">
 
-                                                       <div class="col-6 col-sm-5 col-md-3 col-lg-2 mb-6">
-                                                               <h4>{{ _("Development") }}</h4>
+                                                                       <button type="submit" class="btn btn-primary btn-block mb-2">{{ _("Subscribe") }}</button>
+                                                               </form>
+                                                       </div>
 
-                                                               <ul class="list-unstyled">
-                                                                       <li>
-                                                                               <a href="https://wiki.ipfire.org/devel/start">{{ _("Development") }}</a>
-                                                                       </li>
-                                                               </ul>
+                                                       <div class="col-12 col-lg-3 mb-4">
+                                                               <h6>{{ _("About") }}</h6>
+
+                                                               <div class="row">
+                                                                       <div class="col">
+                                                                               <ul class="list-unstyled">
+                                                                                       <li>
+                                                                                               <a href="https://www.ipfire.org/features">{{ _("Features") }}</a>
+                                                                                       </li>
+
+                                                                                       <li>
+                                                                                               <a href="https://downloads.ipfire.org">{{ _("Download") }}</a>
+                                                                                       </li>
+
+                                                                                       <li>
+                                                                                               <a href="https://www.ipfire.org/support">{{ _("Support") }}</a>
+                                                                                       </li>
+                                                                               </ul>
+                                                                       </div>
+
+                                                                       <div class="col">
+                                                                               <ul class="list-unstyled">
+                                                                                       <li>
+                                                                                               <a href="https://blog.ipfire.org">{{ _("Blog") }}</a>
+                                                                                       </li>
+
+                                                                                       <li>
+                                                                                               <a href="https://wiki.ipfire.org/devel/start">{{ _("Development") }}</a>
+                                                                                       </li>
+
+                                                                                       <li>
+                                                                                               <a href="https://www.ipfire.org/legal">{{ _("Legal") }}</a>
+                                                                                       </li>
+                                                                               </ul>
+                                                                       </div>
+                                                               </div>
                                                        </div>
 
-                                                       <div class="col-sm-8 offset-sm-2 col-md-12 offset-md-0 col-lg-4 pt-md-6 pt-lg-1 text-center">
-                                                               <a class="btn btn-primary btn-lg" href="//www.ipfire.org/donate">
+                                                       <div class="col-12 col-lg-4 text-center mb-4">
+                                                               <a class="btn btn-primary btn-lg my-4" href="//www.ipfire.org/donate">
                                                                        <span class="fas fa-heart"></span> {{ _("Donate") }}
                                                                </a>
 
-                                                               <div class="btn-toolbar justify-content-around col-md-6 offset-md-3">
-                                                                       <a class="btn btn-lg" href="https://blog.ipfire.org/feed.xml">
-                                                                               <span class="fas fa-rss"></span>
-                                                                       </a>
-
-                                                                       <a class="btn btn-lg" href="https://twitter.com/ipfire">
+                                                               <div class="btn-toolbar justify-content-center">
+                                                                       <a class="btn btn-link" href="https://twitter.com/ipfire">
                                                                                <span class="fab fa-twitter"></span>
                                                                        </a>
 
-                                                                       <a class="btn btn-lg" href="https://www.facebook.com/IPFire.org">
+                                                                       <a class="btn btn-link" href="https://www.facebook.com/IPFire.org">
                                                                                <span class="fab fa-facebook"></span>
                                                                        </a>
 
-                                                                       <a class="btn btn-lg" href="https://youtube.com/user/ipfireproject">
+                                                                       <a class="btn btn-link" href="https://youtube.com/user/ipfireproject">
                                                                                <span class="fab fa-youtube"></span>
                                                                        </a>
                                                                </div>