TheThomaas/11ty-resume
1
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

Fix footer in small screens

Browse source
This commit is contained in:
TheThomaas 2025-06-09 10:40:21 +02:00
parent 22ca1dec59
commit f0753d0e7a
2 changed files with 9 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/_includes/partials/footer.liquid
View file

@ -1,13 +1,12 @@
<footer class="wrapper-full"> <footer class="wrapper-full">
<div> <div>
{% render 'partials/components/socials', socials: author.socials, mail: author.mail, showLabel: false %}
<ul class="list-inline"> <ul class="list-inline">
<li>Réalisé avec {% render 'partials/components/link', label: "Eleventy", href: "https://11ty.dev/", target: "_blank", rel: "nofollow" %}</li> <li>Réalisé avec {% render 'partials/components/link', label: "Eleventy", href: "https://11ty.dev/", target: "_blank", rel: "nofollow" %}</li>
{% if site.repository and site.repository != "" %} {% if site.repository and site.repository != "" %}
<li>Source sur {% render 'partials/components/link', label: site.repoSrc, href: site.repository, target: "_blank", rel: "nofollow" %}</li> <li>Source sur {% render 'partials/components/link', label: site.repoSrc, href: site.repository, target: "_blank", rel: "nofollow" %}</li>
{% endif %} {% endif %}
</ul> </ul>
{% render 'partials/components/socials', socials: author.socials, mail: author.mail, showLabel: false %}
</div> </div>
</footer> </footer>

9
src/css/footer.css
View file

@ -4,9 +4,10 @@ footer {
} }
footer > div { footer > div {
place-content: center space-between; place-content: center space-between;
align-items: center; align-items: start;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column;
} }
footer .list-inline a { footer .list-inline a {
--item-color: var(--text-2); --item-color: var(--text-2);
@ -23,3 +24,9 @@ footer .socials-list {
footer .button.button { footer .button.button {
--button-padding: .2em; --button-padding: .2em;
} }
@media (min-width: 768px) {
footer > div {
align-items: center;
flex-direction: row-reverse;
}
}