Jonas_Jones/wiki.jonasjones.dev
1
0
Fork 0
mirror of https://github.com/JonasunderscoreJones/wiki.jonasjones.dev.git synced 2025-10-22 22:09:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

Fixed Footer Style

Browse source 
Fixed an issue where the footer text would wrap in a wrong way on smaller screens and not be aligned correctly.
This commit is contained in:
Jonas_Jones 2023-10-02 19:40:44 +02:00
parent 3c3e128475
commit 6f855a9f45
1 changed files with 21 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/lib/components/Footer.svelte
View file

@ -4,23 +4,25 @@
<!-- Footer.svelte --> <!-- Footer.svelte -->
<footer> <footer>
<a href="/">Home</a> <div class="footer-flex">
<a href="/">Home</a>
<nav>
<ul>
<li>
<a href="https://jonasjones.dev/">Homepage</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="footer"> <div class="footer">
<p>Website by Jonas_Jones 2021 - 2023</p> <p>Website by Jonas_Jones 2021 - 2023</p>
</div> </div>
<nav>
<ul>
<li>
<a href="https://jonasjones.dev/">Homepage</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/contact">Contact</a>
</li>
</ul>
</nav>
</footer> </footer>
<style> <style>
@ -30,10 +32,13 @@
margin-bottom: 2rem; margin-bottom: 2rem;
margin-top: 0; margin-top: 0;
background: var(--container-background-color); background: var(--container-background-color);
border-radius: 0.5rem;
}
.footer-flex {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
border-radius: 0.5rem;
} }
ul { ul {
@ -49,10 +54,8 @@
} }
.footer { .footer {
display: flex;
justify-content: center;
align-items: center;
font-size: 20px; font-size: 20px;
text-align: center;
} }
@media (max-width: 550px) { @media (max-width: 550px) {