aronmal/liljudd-website
1
0
Fork 0
mirror of https://git.moonleay.net/Websites/liljudd-website.git synced 2025-07-26 11:22: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

111
src/components/NavBar.astro Normal file
View file

@ -0,0 +1,111 @@
<nav class="navMenu">
<ul class="grid">
<li class="navElem">
<div class="logoWtxt">
<a class:list={["pad3px", "textBx"]} href={"/"} target={"_self"}
><img
class:list={["logo", "pad3px"]}
src={"https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"}
alt={"The Bots Logo"}
/>li'l Judd</a
>
</div>
</li>
<li class="navElem">
<a class="navLink" href={"/features"} target={"_self"}>Features</a>
</li>
<li class="navElem">
<a class="navLink" href={"/how-do-i"} target={"_self"}>How do I...?</a>
</li>
<li class="navElem">
<a class="navLink" href={"/stack"} target={"_self"}>The Stack</a>
</li>
<li class="navElem">
<a class="navLink" href={"/about"} target={"_self"}>About</a>
</li>
<li class="navElemR">
<a
class="navLink"
href={"https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=8&scope=bot"}
target={"_blank"}>Invite to your server</a
>
</li>
</ul>
</nav>
<style>
.navMenu {
display: flex;
flex-direction: column;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
position: sticky;
border-radius: 5px;
}
.logo {
width: 32px;
height: 32px;
border-radius: 100%;
max-width: initial;
max-height: initial;
margin: 0.35rem;
}
.navElem {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: 0.5s;
}
.navElem:hover {
color: rgb(96 59 255) !important;
}
.navElemR {
transition: 0.5s;
}
.navElemR:hover {
color: rgb(96 59 255) !important;
}
.logoWtxt {
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
.pad3px {
padding: 3px;
}
.textBx {
display: flex;
align-items: center;
}
@media (min-width: 768px) {
.grid {
display: grid;
/*grid-template-columns: repeat(6, 1fr);*/
grid-template-columns: repeat(8, 1fr);
}
.navElem {
grid-column: span 1;
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
align-items: center;
text-align: center;
}
.navElemR {
grid-column: 8;
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
align-items: center;
text-align: center;
}
}
</style>