DebaucheryLibrarian/traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Split footer to prevent overflows.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2026-07-13 21:40:12 +02:00
parent 18693faa5f
commit 29a17b2e94
3 changed files with 52 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
components/footer/footer.vue
View File

@@ -7,44 +7,61 @@ const { env } = pageContext;
<template>
<footer class="footer">
<span class="footer-segment">© traxxx</span>
<div class="footer-row">
<a
v-if="env.links.matrix"
:href="env.links.matrix"
target="_blank"
rel="noopener noreferrer"
class="footer-segment footer-link nolink matrix"
><Icon icon="matrix-full" /></a>
<a
v-if="env.links.matrix"
:href="env.links.matrix"
target="_blank"
rel="noopener noreferrer"
class="footer-segment footer-link nolink matrix"
><Icon icon="matrix-full" /></a>
<a
v-if="env.links.discord"
:href="env.links.discord"
target="_blank"
rel="noopener noreferrer"
class="footer-segment footer-link nolink discord"
><Icon icon="discord-full" /></a>
<a
v-if="env.links.discord"
:href="env.links.discord"
target="_blank"
rel="noopener noreferrer"
class="footer-segment footer-link nolink discord"
><Icon icon="discord-full" /></a>
<a
v-if="env.links.content"
:href="env.links.content"
target="_blank"
class="footer-segment footer-link"
>Content Removal (DMCA)</a>
</div>
<a
v-if="env.links.content"
:href="env.links.content"
target="_blank"
class="footer-segment footer-link"
>Content Removal / DMCA</a>
<div class="footer-row">
<span class="footer-segment">© traxxx v{{ env.version }}</span>
</div>
</footer>
</template>
<style scoped>
.footer {
display: flex;
justify-content: center;
align-items: stretch;
flex-direction: column;
background: var(--background-base-20);
box-shadow: inset 0 0 3px var(--shadow-weak-30);
font-size: .8rem;
font-size: .75rem;
font-weight: bold;
}
.footer-row {
display: flex;
justify-content: center;
align-items: stretch;
&:first-child .footer-segment {
padding-top: .6rem;
}
&:not(:first-child) {
border-top: solid 1px var(--glass-weak-30);
}
}
.footer-segment {
display: inline-flex;
align-items: center;