footer: Double-wrap the footer

This is needed so that we can collapse the two parts on mobile, but keep
the links and icons in a row each. Otherwise this does not fit on mobile
screens.

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

diff --git a/src/templates/base.html b/src/templates/base.html
index 20bd5fedcc16a5b93d3cf0719b41709790f0993d..4638ef40096ce22989429d8cbf90bd95580c71f5 100644 (file)
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -209,36 +209,44 @@
                {% block footer %}
                        <footer class="footer is-flex-shrink-0">
                                <div class="container">
-                                       <div class="level is-mobile">
+                                       <div class="level">
                                                <div class="level-left">
                                                        <div class="level-item">
-                                                               {{ year }} &copy; IPFire.org
-                                                       </div>
+                                                               <div class="level is-mobile">
+                                                                       <div class="level-item">
+                                                                               {{ year }} &copy; IPFire.org
+                                                                       </div>
 
-                                                       <div class="level-item">
-                                                               <a href="/legal">{{ _("Legal") }}</a>
-                                                       </div>
+                                                                       <div class="level-item">
+                                                                               <a href="/legal">{{ _("Legal") }}</a>
+                                                                       </div>
 
-                                                       <div class="level-item">
-                                                               <a href="/sitemap">{{ _("Sitemap") }}</a>
+                                                                       <div class="level-item">
+                                                                               <a href="/sitemap">{{ _("Sitemap") }}</a>
+                                                                       </div>
+                                                               </div>
                                                        </div>
                                                </div>
 
                                                <div class="level-right">
                                                        <div class="level-item">
-                                                               <a href="https://social.ipfire.org/@news" title="{{ _("Mastodon") }}">
-                                                                       <i class="fa-brands fa-mastodon px-2"></i>
-                                                               </a>
-                                                       </div>
-                                                       <div class="level-item">
-                                                               <a href="https://twitter.com/ipfire" title="{{ _("Twitter") }}">
-                                                                       <i class="fa-brands fa-twitter px-2"></i>
-                                                               </a>
-                                                       </div>
-                                                       <div class="level-item">
-                                                               <a href="https://linkedin.com/company/ipfire" title="{{ _("LinkedIn") }}">
-                                                                       <i class="fa-brands fa-linkedin-in px-2"></i>
-                                                               </a>
+                                                               <div class="level is-mobile">
+                                                                       <div class="level-item">
+                                                                               <a href="https://social.ipfire.org/@news" title="{{ _("Mastodon") }}">
+                                                                                       <i class="fa-brands fa-mastodon px-2"></i>
+                                                                               </a>
+                                                                       </div>
+                                                                       <div class="level-item">
+                                                                               <a href="https://twitter.com/ipfire" title="{{ _("Twitter") }}">
+                                                                                       <i class="fa-brands fa-twitter px-2"></i>
+                                                                               </a>
+                                                                       </div>
+                                                                       <div class="level-item">
+                                                                               <a href="https://linkedin.com/company/ipfire" title="{{ _("LinkedIn") }}">
+                                                                                       <i class="fa-brands fa-linkedin-in px-2"></i>
+                                                                               </a>
+                                                                       </div>
+                                                               </div>
                                                        </div>
                                                </div>
                                        </div>