Make footer stick to the bottom. Fixes #120

This commit is contained in:
Alexis Métaireau 2023-08-12 20:37:21 +02:00 committed by Laetitia Getti
parent 30ea525619
commit 5a309ee8e8
5 changed files with 32 additions and 13 deletions

View file

@ -10285,12 +10285,19 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
body { body {
min-height: 100vh; min-height: 100vh;
background-color: hsl(0, 0%, 96%); background-color: hsl(0, 0%, 96%);
display: flex;
min-height: 100vh;
flex-direction: column;
} }
a { a {
color: #A52951; color: #A52951;
} }
main {
flex: 1;
}
.box.is-info, .card.is-info { .box.is-info, .card.is-info {
border-bottom: 2px solid #e9b049; border-bottom: 2px solid #e9b049;
border-right: 1px solid #e9b049; border-right: 1px solid #e9b049;
@ -10471,3 +10478,7 @@ p.mobile-content-title {
.tabs > ul { .tabs > ul {
margin-left: 0; margin-left: 0;
} }
footer > .columns {
margin-bottom: 1rem !important;
}

View file

@ -0,0 +1,2 @@
footer > .columns
margin-bottom: 1rem !important

View file

@ -1,10 +1,16 @@
body body
min-height: 100vh min-height: 100vh
background-color: $background background-color: $background
display: flex
min-height: 100vh
flex-direction: column
a a
color: $betterave color: $betterave
main
flex: 1
.box.is-info, .card.is-info .box.is-info, .card.is-info
border-bottom: 2px solid $beige border-bottom: 2px solid $beige
border-right: 1px solid $beige border-right: 1px solid $beige

View file

@ -16,3 +16,4 @@
@import "./base/table" @import "./base/table"
@import "./base/titles" @import "./base/titles"
@import "./base/tabs" @import "./base/tabs"
@import "./base/footer"

View file

@ -126,21 +126,20 @@
{% endblock %} {% endblock %}
</div> </div>
</main> </main>
<footer class="footer">
<div class="content has-text-centered columns">
<div class="column">
<p>
<strong>La Chariotte</strong> | version 0.5.0
</p>
</div>
<div class="column">
<a href="{% url 'legal_notice' %}">Mentions légales</a>
</div>
</div>
</footer>
</body> </body>
<footer class="footer">
<div class="content has-text-centered columns">
<div class="column">
<p>
<strong>La Chariotte</strong> | version 0.5.0
</p>
</div>
<div class="column">
<a href="{% url 'legal_notice' %}">Mentions légales</a>
</div>
</div>
</footer>
</html> </html>
<script> <script>