aronmal/liljudd-website
1
0
Fork 0
mirror of https://git.moonleay.net/Websites/liljudd-website.git synced 2025-07-27 11:42:04 +02:00
Code Issues Projects Releases Packages Wiki Activity

Migrate Components

Browse source
This commit is contained in:
aronmal 2023-11-09 14:43:14 +01:00
parent c51593dbc4
commit 036a2d1e4a
Signed by: aronmal
GPG key ID: 816B7707426FC612
7 changed files with 302 additions and 352 deletions
Download patch file Download diff file Expand all files Collapse all files

172
src/components/Footer.astro Normal file
View file

@ -0,0 +1,172 @@
---
---
<footer class="footer">
<div class="footerIcon">
<img
class="footerImage"
src={"https://static.moonleay.net/img/lilJuddWeb/lilJudd.png"}
alt={"A cute Image of lil Judd <3"}
/>
<p>li'l Judd</p>
<p class="footerImageNote">Your competitive Splatoon assistant.</p>
</div>
<div class="footerTable">
<div>
<h3>Navigation</h3>
<div class="footerLinks">
<a href={"/"} target={"_self"}>Home</a>
<a href={"/features"} target={"_self"}>Features</a>
<a href={"/how-do-i"} target={"_self"}>How do I...?</a>
<a href={"/stack"} target={"_self"}>The Stack</a>
<a href={"/about"} target={"_self"}>About</a>
</div>
</div>
<div>
<h3>The Software</h3>
<div class="footerLinks">
<a
href={"https://git.moonleay.net/DiscordBots/lilJudd"}
target={"_blank"}>The Bot Code</a
>
<a
href={"https://git.moonleay.net/Websites/liljudd-website"}
target={"_blank"}>The Website Code</a
>
<a href={"/acknowledgements"} target={"_self"}>Acknowledgements</a>
</div>
</div>
<div>
<h3>More</h3>
<div class="footerLinks">
<a href={"https://moonleay.net/"} target={"_self"}>My homepage</a>
<a href={"https://moonleay.net/blog/"} target={"_blank"}>My blog</a>
<a href={"/contact"} target={"_self"}>Contact me</a>
<a href={"https://up.moonleay.net/"} target={"_blank"}>Uptime Status</a>
</div>
</div>
<div>
<h3>Legal</h3>
<div class="footerLinks">
<a href={"/imprint"} target={"_self"}>Imprint</a>
<a href={"/privacy-policy"} target={"_self"}>Privacy Policy</a>
<a href={"/terms-of-service"} target={"_self"}>Terms of Service</a>
<a
href={"https://git.moonleay.net/DiscordBots/lilJudd/src/branch/master/LICENSE"}
target={"_blank"}>The license</a
>
</div>
</div>
</div><div class="footerNotice">
<p>
This website is NOT affiliated with Nintendo or any other party. All
product names, logos, and brands are property of their respective owners.
</p>
<p>
li'l Judd &copy; 2023 <a href={"https://moonleay.net/"} target={"_blank"}
>moonleay</a
>
</p>
</div>
</footer>
<style>
.footer {
align-items: center;
margin: 100px 1px 0 0;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
bottom: 0;
width: 100%;
padding: 5px;
}
.footerIcon {
display: block;
text-align: center;
}
.footerImage {
max-width: initial;
max-height: initial;
width: 48px;
margin: 0.5rem auto;
}
.footerImageNote {
font-size: 0.75rem;
}
.footerTable {
padding: 20px 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.footerTable h3 {
margin-bottom: 8px;
}
.footerLinks {
display: flex;
flex-direction: column;
align-items: baseline;
}
.footerLinks a {
position: relative;
color: #ffffff;
text-decoration: none;
}
.footerLinks a:hover {
color: #ffffff;
}
.footerLinks a::before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
transform: scaleX(0);
transform-origin: left;
background-color: #ffffff;
transition: transform 0.3s ease;
}
.footerLinks a:hover::before {
transform: scaleX(1);
}
.footerNotice {
margin: 0 auto;
text-align: center;
font-size: 0.75rem;
}
@media (min-width: 768px) {
.footer {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 0px;
margin: 0 auto;
}
.footerIcon {
grid-column: span 1;
justify-self: center;
}
.footerTable {
grid-column: span 3;
}
.footerNotice {
grid-column: span 4;
}
}
</style>