Jonas_Jones/dash.jonasjones.dev
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/dash.jonasjones.dev.git synced 2025-10-22 21:29:19 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

added proper footer

Browse source
This commit is contained in:
Jonas_Jones 2025-03-02 21:44:44 +01:00
parent 1e3aaa33ee
commit a4e42be994
2 changed files with 93 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/routes/+layout.svelte
View file

@ -1,5 +1,6 @@
<script>
import Header from './Header.svelte';
import Footer from './Footer.svelte';
import '../app.css';
let { children } = $props();
@ -12,11 +13,7 @@
{@render children()}
</main>
<footer>
<p>
visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to learn about SvelteKit
</p>
</footer>
<Footer />
</div>
<style>

91
src/routes/Footer.svelte Normal file
View file

@ -0,0 +1,91 @@
<head>
<!-- Include Font Awesome CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<div class="footer">
<div class="footer-left">
<a href="https://github.com/JonasunderscoreJones" target="_blank"><i class="fab fa-github" /></a>
<a href="https://www.youtube.com/channel/UCVIxvKBIMSMgurYS8pK7fSg" target="_blank"><i class="fab fa-youtube" /></a>
<a href="https://discord.gg/V2EsuUVmWh" target="_blank"><i class="fab fa-discord" /></a>
<a href="mailto:me@jonasjones.dev" target="_blank"><i class="fas fa-envelope" /></a>
</div>
<p>Website by Jonas_Jones 2021 - <script>document.write(new Date().getFullYear());</script></p>
<div class="footer-right">
<a href="https://jonasjones.dev" class="footer-link" target="_blank">
Homepage
<i class="fas fa-external-link"></i>
</a>
<a href="https://blog.jonasjones.dev" class="footer-link" target="_blank">
Blog
<i class="fas fa-external-link"></i>
</a>
<a href="https://docs.jonasjones.dev" class="footer-link" target="_blank">
Docs
<i class="fas fa-external-link"></i>
</a>
</div>
</div>
<style>
.footer {
height: 1rem;
background-color: black;
color: white;
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
padding-top: 0.25rem;
padding-bottom: 0.5rem;
font-size: 20px;
}
.footer-left, .footer-right {
display: flex;
align-items: center;
}
.footer-left a, .footer-right a {
margin: 3px 10px;
display: flex;
align-items: center;
color: gray;
text-decoration: none;
}
.footer-left a:hover, .footer-right a:hover {
color: lightgray;
}
.footer-right {
position: fixed;
right: 10px; /* Keep the right section fixed */
bottom: 0;
}
.footer-left {
position: fixed;
left: 10px; /* Keep the left section fixed */
bottom: 0;
}
.footer-link i {
margin-left: 5px;
font-size: 15px;
}
@media (max-width: 1200px) {
.footer-left, .footer-right {
display: none;
}
.footer-left a, .footer-right a {
display: none;
}
}
</style>