Rework the footer

This commit is contained in:
Alexis Métaireau 2024-02-05 21:35:31 +01:00
parent ad0782d8f3
commit e5de39e568
2 changed files with 61 additions and 43 deletions

View file

@ -1,6 +1,18 @@
.footer
padding-bottom: 10px !important
padding: 50px 0
padding-left: 2em
font-size: 1em
logo > h2
font-size: 2rem
footer > .columns
margin-bottom: 1rem !important
margin-top: 0
footer .margin-auto
margin: auto
footer .logo
letter-spacing: 1px

View file

@ -1,7 +1,6 @@
{% load static %}
{% load settings %}
{% load sass_tags %}
<!DOCTYPE html>
<html lang="fr">
<head>
@ -121,46 +120,53 @@
{% block content %}{% endblock %}
</div>
</main>
<footer class="footer">
<div class="content columns has-text-centered">
<div class="column margin-auto">
<p>
<strong>La Chariotte</strong> | version {{ version }}
</p>
<p>
<a href="{% url 'legal_notice' %}">Mentions légales</a>
</p>
</div>
<div class="column is-size-6 columns">
<div class="column margin-auto">
<p>Contact : <a href="mailto:{% settings_value "CONTACT_MAIL" %}">{% settings_value "CONTACT_MAIL" %}</a>
<p>Suivez <strong>la Chariotte</strong> sur :</p>
</div>
<div class="column">
<a href="https://www.facebook.com/profile.php?id=100091984176981"
target="_blank"
rel="noopener">
<i class="fa fa-facebook-square mr-2" aria-hidden="true"></i>Facebook
</a>
<br>
<a href="https://www.linkedin.com/company/la-chariotte-commandes-groupees/"
target="_blank"
rel="noopener">
<i class="fa fa-linkedin-square mr-3" aria-hidden="true"></i>Linkedin
</a>
<br>
<a href="https://mastodon.scop.coop/@la_chariotte"
target="_blank"
rel="noopener">
<i class="fa fa-mastodon-square mr-3" aria-hidden="true"></i>Mastodon
</a>
</div>
</div>
</div>
</footer>
</body>
</html>
<script>
<footer class="footer section">
<div class="container">
<div class="columns is-multiline is-justify-content-center">
<div class="column is-4-desktop is-5-tablet">
<div class="widget mb-0">
<div class="logo mb-4">
<p>
{% settings_value "PROJECT_NAME" %}
| <a href="https://gitlab.com/la-chariotte/">version {{ version }}</a>
</p>
</div>
<ul class="list-unstyled footer-menu lh-35">
<a href="mailto:{% settings_value "CONTACT_MAIL" %}"><i class="fa fa-envelope-square mr-2 text-muted"></i>
{% settings_value "CONTACT_MAIL" %}
</a>
</li>
<li>
<a href="{% url 'legal_notice' %}"><i class="fa fa-legal mr-2 text-muted"></i>Mentions légales</a>
</li>
</ul>
</div>
</div>
<div class="column is-2-desktop is-5-tablet">
<div class="widget mb-0">
<h4 class="mb-4">Suivez nous</h4>
<ul class="list-unstyled footer-socials">
<li>
<a href="https://blog.chariotte.fr"><i class="fa fa-rss-square mr-2 text-muted"></i>Chariotte news</a>
</li>
<li>
<a href="https://mastodon.scop.coop/@la_chariotte"><i class="fa fa-mastodon-square mr-2 text-muted"></i>Mastodon</a>
</li>
<li>
<a href="https://www.facebook.com/profile.php?id=100091984176981"><i class="fa fa-facebook-square mr-2 text-muted"></i>Facebook</a>
</li>
<li>
<a href="https://www.linkedin.com/company/la-chariotte-commandes-groupees/"><i class="fa fa-linkedin-square mr-2 text-muted"></i>LinkedIn</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
<script>
// For responsive menu
document.addEventListener('DOMContentLoaded', () => {
@ -183,4 +189,4 @@
});
});
{% block extra_js %} {% endblock %}
</script>
</script>