Make big header slightly lighter

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

diff --git a/src/scss/style.scss b/src/scss/style.scss
index d2f21bc1e9318e8eb9f9c14611428a04745238c4..4731b066bad5822e17170b1b94ecf2f5a264dcab 100644 (file)
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -99,25 +99,30 @@ body {
 
 footer {
        margin-top: auto;
-       padding: 3rem 0 0 0;
 
-       color: $white;
+       .footer {
+               margin-top: $spacer * 4;
+               padding: 2rem 0 0 0;
 
-       @include media-breakpoint-down(md) {
-               padding-top: 31px;
-       }
+               color: $white;
+               background-color: rgba($gray-400, .04);
 
-       a, .btn-link {
-               color: inherit;
+               @include media-breakpoint-down(md) {
+                       padding-top: 31px;
+               }
 
-               &:hover {
+               a, .btn-link {
                        color: inherit;
+
+                       &:hover {
+                               color: inherit;
+                       }
                }
-       }
 
-       ul {
-               li {
-                       margin-bottom: $spacer / 4;
+               ul {
+                       li {
+                               margin-bottom: $spacer / 4;
+                       }
                }
        }
 

diff --git a/src/templates/base.html b/src/templates/base.html
index 90f9f747813da27043781a32a15a1c0c2ef1304e..ba7b3adba6d6e760ea3853ecf3c1f1f4ae609fbb 100644 (file)
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -67,80 +67,82 @@
                {% end block %}
 
                {% block footer %}
-                       <footer class="footer">
+                       <footer>
                                {% if hostname in ("www.ipfire.org", "blog.ipfire.org", "dev.ipfire.org") %}
-                                       <div class="container pb-3">
-                                               <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="footer">
+                                               <div class="container pb-3">
+                                                       <div class="row mb-6 justify-content-between">
+                                                               <div class="col-12 col-lg-4 mb-4">
+                                                                       <h6>{{ _("Subscribe to our Newsletter") }}</h6>
 
-                                                               <form method="POST" action="https://{{ "dev" if debug else "www" }}.ipfire.org/newsletter/subscribe">
-                                                                       {% raw xsrf_form_html() %}
+                                                                       <form method="POST" action="https://{{ "dev" if debug else "www" }}.ipfire.org/newsletter/subscribe">
+                                                                               {% raw xsrf_form_html() %}
 
-                                                                       <label class="sr-only" for="email">{{ _("Email Address") }}</label>
+                                                                               <label class="sr-only" for="email">{{ _("Email Address") }}</label>
 
-                                                                       <input type="email" class="form-control mb-2 mr-sm-2" id="email" name="email"
-                                                                               placeholder="{{ _("Your Email Address") }}">
+                                                                               <input type="email" class="form-control mb-2 mr-sm-2" id="email" name="email"
+                                                                                       placeholder="{{ _("Your Email Address") }}">
 
-                                                                       <button type="submit" class="btn btn-primary btn-block mb-2">{{ _("Subscribe") }}</button>
-                                                               </form>
-                                                       </div>
-
-                                                       <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>
+                                                                               <button type="submit" class="btn btn-primary btn-block mb-2">{{ _("Subscribe") }}</button>
+                                                                       </form>
+                                                               </div>
 
-                                                                                       <li>
-                                                                                               <a href="https://www.ipfire.org/legal">{{ _("Legal") }}</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>
 
-                                                       <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-center">
-                                                                       <a class="btn btn-link" href="https://twitter.com/ipfire">
-                                                                               <span class="fab fa-twitter"></span>
+                                                               <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>
 
-                                                                       <a class="btn btn-link" href="https://www.facebook.com/IPFire.org">
-                                                                               <span class="fab fa-facebook"></span>
-                                                                       </a>
+                                                                       <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-link" href="https://youtube.com/user/ipfireproject">
-                                                                               <span class="fab fa-youtube"></span>
-                                                                       </a>
+                                                                               <a class="btn btn-link" href="https://www.facebook.com/IPFire.org">
+                                                                                       <span class="fab fa-facebook"></span>
+                                                                               </a>
+
+                                                                               <a class="btn btn-link" href="https://youtube.com/user/ipfireproject">
+                                                                                       <span class="fab fa-youtube"></span>
+                                                                               </a>
+                                                                       </div>
                                                                </div>
                                                        </div>
                                                </div>