JCEEE
114 lines
2.5 KiB
Svelte
114 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import FamDone from './FamDone.svelte';
|
|
|
|
// Offset the footer content past the fixed sidebar on fam-scoped pages
|
|
// (220px desktop / 56px mobile). Standalone pages (landing, pricing, admin)
|
|
// have no sidebar and leave this false.
|
|
let { sidebar = false } = $props();
|
|
</script>
|
|
|
|
<footer class="bg-slate-100 text-[#4c1d95] border-t border-[#4338ca]">
|
|
<div class="footer-inner px-8 py-16" class:sidebar>
|
|
<div class="footer-row flex items-center justify-between gap-2">
|
|
<span class="footer-star">✦</span>
|
|
<div class="footer-center">
|
|
<span class="footer-copy"
|
|
>© {new Date().getFullYear()}
|
|
<span class="footer-text font-bold text-xl"><FamDone /></span> All rights reserved.</span
|
|
>
|
|
<span class="footer-links">
|
|
<a href="/privacy">Privacy Policy</a>
|
|
</span>
|
|
</div>
|
|
<aside
|
|
class="footer-aside text-text-200 text-wash-300 flex flex-col justify-end text-right text-sm"
|
|
>
|
|
<span>Built by humans</span>
|
|
<a href="https://threejjjs.xyz">
|
|
<h5 class="m-0 text-right font-tertiary text-xl md:text-3xl">
|
|
three<span class="opacity-55">jjj</span>s
|
|
<br />
|
|
</h5>
|
|
</a>
|
|
<span class="text-xs">Interactive Tech</span>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<style>
|
|
/* Offset the footer content past the fixed sidebar so it aligns with the
|
|
app-main content column (220px desktop / 56px mobile). */
|
|
.footer-inner.sidebar {
|
|
margin-left: 220px;
|
|
}
|
|
@media (max-width: 1023px) {
|
|
.footer-inner.sidebar {
|
|
margin-left: 56px;
|
|
}
|
|
}
|
|
.footer-star {
|
|
font-size: 2.5rem;
|
|
line-height: 1;
|
|
color: #4c1d95;
|
|
flex-shrink: 0;
|
|
position: absolute;
|
|
left: 2rem;
|
|
}
|
|
.footer-copy {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 0 1rem;
|
|
}
|
|
.footer-center {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
text-align: center;
|
|
}
|
|
.footer-links {
|
|
font-size: 0.8rem;
|
|
}
|
|
.footer-links a {
|
|
color: #4c1d95;
|
|
text-decoration: none;
|
|
}
|
|
.footer-links a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.footer-row {
|
|
position: relative;
|
|
}
|
|
.footer-aside {
|
|
position: absolute;
|
|
right: 2rem;
|
|
}
|
|
@media (max-width: 639px) {
|
|
.footer-star {
|
|
font-size: 1.75rem;
|
|
left: 1rem;
|
|
}
|
|
.footer-copy {
|
|
padding: 0 0.5rem;
|
|
}
|
|
.footer-aside {
|
|
right: 1rem;
|
|
}
|
|
.footer-row {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
text-align: center;
|
|
}
|
|
.footer-star {
|
|
position: static;
|
|
}
|
|
.footer-aside {
|
|
position: static;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|