Style adjustment on the new footer

This commit is contained in:
Antoine Bartuccio 2025-06-24 17:03:56 +02:00
parent f5a8228358
commit f474edc84f
Signed by: klmp200
GPG Key ID: E7245548C53F904B
2 changed files with 40 additions and 28 deletions

View File

@ -1,8 +1,8 @@
@import "colors"; @import "colors";
@import "devices"; @import "devices";
@media (max-width: $small-devices) { footer.bottom-links {
footer { @media (max-width: $small-devices) {
margin-top: 0.6em; margin-top: 0.6em;
padding: 1.25em; padding: 1.25em;
background-color: $primary-neutral-dark-color; background-color: $primary-neutral-dark-color;
@ -13,7 +13,7 @@
gap: 1.25em; gap: 1.25em;
> div { >section {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -21,24 +21,31 @@
justify-content: center; justify-content: center;
gap: 0.8em; gap: 0.8em;
> a { }
color: $white-color !important;
width: auto; a {
color: $white-color;
width: auto;
&:hover {
color: $white-color;
text-shadow: 0.5px 0.5px 0.5px $shadow-color;
} }
} }
> a { .fa-github {
color: $primary-neutral-color !important; color: $white-color;
} }
.fa-github { hr {
color: $primary-neutral-color; width: 100%;
height: 0px;
border: none;
border-top: 0.5px solid $white-color;
} }
} }
}
@media (min-width: $small-devices) { @media (min-width: $small-devices) {
footer {
width: 90%; width: 90%;
margin: 2em auto; margin: 2em auto;
@ -46,7 +53,7 @@
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
div { section:first-of-type {
margin: 0.6em 0; margin: 0.6em 0;
color: $white-color; color: $white-color;
border-radius: 5px; border-radius: 5px;
@ -57,24 +64,26 @@
box-shadow: $shadow-color 0 0 15px; box-shadow: $shadow-color 0 0 15px;
a { a {
color: $white-color;
width: auto;
padding: 0.8em; padding: 0.8em;
flex: 1; flex: 1;
font-weight: bold; font-weight: bold;
color: $white-color !important;
&:hover { &:hover {
color: $primary-dark-color; color: $white-color;
text-shadow: 0.5px 0.5px 0.5px $shadow-color;
} }
} }
} }
> .version {
margin-top: 3px;
color: rgba(0, 0, 0, 0.3);
}
.fa-github { .fa-github {
color: $githubblack; color: $githubblack;
} }
hr {
border: none;
height: 5px;
}
} }
} }

View File

@ -1,13 +1,16 @@
<footer> <footer class="bottom-links">
<div> <section>
<a href="{{ url('core:page', 'contacts') }}">{% trans %}Contacts{% endtrans %}</a> <a href="{{ url('core:page', 'contacts') }}">{% trans %}Contacts{% endtrans %}</a>
<a href="{{ url('core:page', 'legals') }}">{% trans %}Legal notices{% endtrans %}</a> <a href="{{ url('core:page', 'legals') }}">{% trans %}Legal notices{% endtrans %}</a>
<a href="{{ url('core:page', 'copyright_agent') }}">{% trans %}Intellectual property{% endtrans %}</a> <a href="{{ url('core:page', 'copyright_agent') }}">{% trans %}Intellectual property{% endtrans %}</a>
<a href="{{ url('core:page', 'docs') }}">{% trans %}Help & Documentation{% endtrans %}</a> <a href="{{ url('core:page', 'docs') }}">{% trans %}Help & Documentation{% endtrans %}</a>
<a href="{{ url('core:page', 'rd') }}">{% trans %}R&D{% endtrans %}</a> <a href="{{ url('core:page', 'rd') }}">{% trans %}R&D{% endtrans %}</a>
</div> </section>
<a rel="nofollow" href="https://github.com/ae-utbm/sith" target="#"> <hr>
<i class="fa-brands fa-github"></i> <section>
{% trans %}Site created by the IT Department of the AE{% endtrans %} <a rel="nofollow" href="https://github.com/ae-utbm/sith" target="#">
</a> <i class="fa-brands fa-github"></i>
{% trans %}Site created by the IT Department of the AE{% endtrans %}
</a>
</section>
</footer> </footer>