mirror of
https://git.moonleay.net/Websites/liljudd-website.git
synced 2025-07-25 19:12:02 +02:00
111 lines
2.3 KiB
Text
111 lines
2.3 KiB
Text
<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>
|