index: Update design of footer

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

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index eb09aaf72f515fdba3756e77b5d11669f8f3af69..319b58037f3c8a0f034a08b02248afa180b2124c 100644 (file)
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -66,7 +66,7 @@ $h1-font-size:                                3.75rem;
 $h2-font-size:                         2.5rem;
 $h3-font-size:                         2.25rem;
 $h4-font-size:                         1.875rem;
-$h5-font-size:                         1.5rem;
+$h5-font-size:                         1.625rem;
 $h6-font-size:                         1.25rem;
 
 $display1-size:                                5rem;

diff --git a/src/scss/style.scss b/src/scss/style.scss
index 9221a44d6e8d88ccf9bed330818b257c180a3c9d..2627c5c354f206601bb6aa4b3a76d288b4c018ea 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -156,42 +156,22 @@ footer {
        margin-top: auto;
 
        .footer {
-               margin-top: $spacer * 3;
+               margin: ($spacer * 2) 0;
 
-               .footer-info {
-                       padding: 2rem 0 0 0;
+               ul {
+                       @include list-unstyled();
 
-                       color: $white;
-                       background-color: rgba($gray-400, .04);
-
-                       @include media-breakpoint-down(md) {
-                               padding-top: 31px;
-                       }
-
-                       a, .btn-link {
-                               color: inherit;
-
-                               &:hover {
-                                       color: inherit;
-                               }
-                       }
-
-                       ul {
-                               li {
-                                       margin-bottom: $spacer / 4;
-                               }
+                       li {
+                               padding: ($spacer / 2) 0;
                        }
                }
+       }
 
-               .copyright {
-                       background-color: rgba($gray-400, .06);
-                       padding: $spacer 0;
-
-                       font-size: $small-font-size;
+       .footer-link {
+               color: inherit;
 
-                       a {
-                               color: $text-muted;
-                       }
+               &:hover {
+                       color: inherit;
                }
        }
 }

diff --git a/src/templates/base.html b/src/templates/base.html
index 82efc4538e9b94c8e499f761e32f9dc8696860a9..5598700c30221cb27de8b77dd8391deaeea262b7 100644 (file)
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -273,122 +273,81 @@
 
                {% block footer %}
                        <footer>
-                               <div class="footer">
-                                       {% if hostname in ("www.ipfire.org", "dev.ipfire.org") %}
-                                               <div class="footer-info">
-                                                       <div class="container pb-3">
-                                                               <div class="row mb-6 justify-content-between">
-                                                                       <div class="col-12 col-lg-4 mb-4">
-                                                                               <a class="btn btn-primary btn-block mb-3" href="https://people.ipfire.org/register">
-                                                                                       {{ _("Join Us To Stay Up To Date") }}
-                                                                               </a>
+                               <div class="container border-top">
+                                       <div class="footer">
+                                               <div class="row">
+                                                       <div class="col-12 col-lg-5 mb-3">
+                                                               <h5>IPFire<span class="text-primary">_</span>People</h5>
+
+                                                               <p>
+                                                                       Join the community and sign up for our newsletter
+                                                               </p>
+
+                                                               <a class="btn btn-outline-primary text-uppercase" href="https://people.ipfire.org/">
+                                                                       {{ _("Join Now") }}
+                                                               </a>
+                                                       </div>
 
-                                                                               <p>
-                                                                                       {{ _("Sign up to our community to take part and get the latest news") }}
-                                                                               </p>
-                                                                       </div>
-
-                                                                       <div class="col-12 col-lg-3 mb-4 small">
-                                                                               <h6>{{ _("Looking For More?") }}</h6>
-
-                                                                               <div class="row">
-                                                                                       <div class="col">
-                                                                                               <ul class="list-unstyled">
-                                                                                                       <li>
-                                                                                                               <a href="/features">{{ _("Features") }}</a>
-                                                                                                       </li>
-
-                                                                                                       <li>
-                                                                                                               <a href="/support">{{ _("Support") }}</a>
-                                                                                                       </li>
-
-                                                                                                       <li>
-                                                                                                               <a href="https://wiki.ipfire.org/devel">{{ _("Development") }}</a>
-                                                                                                       </li>
-                                                                                               </ul>
-                                                                                       </div>
-
-                                                                                       <div class="col">
-                                                                                               <ul class="list-unstyled">
-                                                                                                       <li>
-                                                                                                               <a href="/download">{{ _("Download") }}</a>
-                                                                                                       </li>
-
-                                                                                                       <li>
-                                                                                                               <a href="https://blog.ipfire.org">{{ _("Blog") }}</a>
-                                                                                                       </li>
-
-                                                                                                       <li>
-                                                                                                               <a href="https://community.ipfire.org/">{{ _("Community") }}</a>
-                                                                                                       </li>
-                                                                                               </ul>
-                                                                                       </div>
-                                                                               </div>
-                                                                       </div>
-
-                                                                       <div class="col-12 col-lg-4 text-center mb-4">
-                                                                               <a class="btn btn-primary btn-lg px-4 my-3" href="/donate">
-                                                                                       {{ _("Donate") }}
-                                                                               </a>
+                                                       <div class="col-12 col-lg-1">
+                                                               <!-- spacer -->
+                                                       </div>
 
-                                                                               <div class="btn-toolbar justify-content-center">
-                                                                                       <a class="btn btn-link" href="https://twitter.com/ipfire">
-                                                                                               <span class="fab fa-twitter"></span>
-                                                                                       </a>
+                                                       <div class="col-12 col-lg-2">
+                                                               <ul>
+                                                                       <li>
+                                                                               <a class="footer-link" href="/features">{{ _("Features") }}</a>
+                                                                       </li>
 
-                                                                                       <a class="btn btn-link" href="https://www.facebook.com/IPFire.org">
-                                                                                               <span class="fab fa-facebook"></span>
-                                                                                       </a>
+                                                                       <li>
+                                                                               <a class="footer-link" href="https://wiki.ipfire.org">{{ _("Wiki") }}</a>
+                                                                       </li>
 
-                                                                                       <a class="btn btn-link" href="https://youtube.com/user/ipfireproject">
-                                                                                               <span class="fab fa-youtube"></span>
-                                                                                       </a>
-                                                                               </div>
-                                                                       </div>
-                                                               </div>
+                                                                       <li>
+                                                                               <a class="footer-link" href="/support">{{ _("Support") }}</a>
+                                                                       </li>
+
+                                                                       <li>
+                                                                               <a class="footer-link" href="https://wiki.ipfire.org/devel">{{ _("Development") }}</a>
+                                                                       </li>
+                                                               </ul>
                                                        </div>
-                                               </div>
-                                       {% elif hostname == "wiki.ipfire.org" %}
-                                               <div class="footer-info">
-                                                       <div class="container pb-3">
-                                                               <ul class="list-inline">
-                                                                       <li class="list-inline-item">
-                                                                               <a href="/watchlist">{{ _("My Watchlist") }}
+
+                                                       <div class="col-12 col-lg-2">
+                                                               <ul>
+                                                                       <li>
+                                                                               <a class="footer-link" href="/download">{{ _("Download") }}</a>
+                                                                       </li>
+
+                                                                       <li>
+                                                                               <a class="footer-link" href="https://blog.ipfire.org">{{ _("Blog") }}</a>
                                                                        </li>
 
-                                                                       <li class="list-inline-item">
-                                                                               <a href="/recent-changes">{{ _("Recent Changes") }}
+                                                                       <li>
+                                                                               <a class="footer-link" href="https://community.ipfire.org/">{{ _("Community") }}</a>
                                                                        </li>
 
-                                                                       <li class="list-inline-item">
-                                                                               <a href="/tree">{{ _("Tree") }}
+                                                                       <li>
+                                                                               <a class="footer-link" href="/legal">{{ _("Legal") }}</a>
                                                                        </li>
                                                                </ul>
                                                        </div>
-                                               </div>
-                                       {% end %}
 
-                                       <div class="copyright">
-                                               <div class="container">
-                                                       <div class="row flex-lg-row-reverse">
-                                                               <div class="col-12 col-lg-6 text-center text-lg-right">
-                                                                       {% if not current_user and hostname in ("blog.ipfire.org", "fireinfo.ipfire.org", "nopaste.ipfire.org", "wiki.ipfire.org") %}
-                                                                               <a href="/login">{{ _("Login") }}</a>
-                                                                       {% elif current_user %}
-                                                                               <p class="mb-0">
-                                                                                       <span class="mr-2">
-                                                                                               {{ _("You are currently logged in as %s") % current_user }}
-                                                                                       </span>
-
-                                                                                       <a href="/logout">{{ _("Logout") }}</a>
-                                                                               </p>
-                                                                       {% end %}
-                                                               </div>
+                                                       <div class="col-12 col-lg-2">
+                                                               <ul>
+                                                                       <li>
+                                                                               <a class="footer-link" href="https://twitter.com/ipfire">{{ _("Twitter") }}</a>
+                                                                       </li>
+
+                                                                       <li>
+                                                                               <a class="footer-link" href="https://www.linkedin.com/company/ipfire/">{{ _("LinkedIn") }}</a>
+                                                                       </li>
 
-                                                               <div class="col-12 col-lg-6 text-center text-lg-left">
-                                                                       &copy; {{ year }} - IPFire - {{ _("The Open Source Firewall") }}
-                                                                       - <a href="https://www.ipfire.org/legal">{{ _("Legal") }}</a>
-                                                               </div>
+                                                                       <li>
+                                                                               <a class="btn btn-primary text-uppercase" href="https://www.ipfire.org/donate">
+                                                                                       {{ _("Donate") }}
+                                                                               </a>
+                                                                       </li>
+                                                               </ul>
                                                        </div>
                                                </div>
                                        </div>