Fix shrine footer and increase gap between footer elements

This commit is contained in:
Helen Chong 2024-06-12 07:57:58 +08:00
parent 28618734ed
commit 72a6a444e2
1 changed files with 13 additions and 12 deletions

View File

@ -17,6 +17,10 @@
</footer> </footer>
<style> <style>
:root {
--footer-gap: 0.5em;
}
.footer { .footer {
margin-top: auto; margin-top: auto;
width: 100%; width: 100%;
@ -24,33 +28,30 @@
padding: 1.5rem 1rem clamp(2rem, calc(100% - 2rem), 3rem); padding: 1.5rem 1rem clamp(2rem, calc(100% - 2rem), 3rem);
text-align: center; text-align: center;
display: grid; display: grid;
gap: 0.3em; gap: var(--footer-gap);
} }
.footer p { .footer__links,
padding: 0; .footer__shrines {
display: flex;
flex-wrap: wrap;
justify-content: center;
column-gap: var(--footer-gap);
} }
.footer__links { .footer__links {
justify-self: center; justify-self: center;
list-style: none; list-style: none;
text-align: center;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex;
column-gap: 0.5em;
flex-wrap: wrap;
justify-content: center;
} }
.footer__links li:not(:last-child)::after { .footer__links li:not(:last-child)::after {
content: '•'; content: '•';
padding-left: 0.5em; padding-left: var(--footer-gap);
} }
.footer__shrines { .footer__shrines {
display: flex; align-self: center;
gap: 0.7em;
justify-self: center;
} }
</style> </style>