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

Added sass and migrated styles

Browse source
This commit is contained in:
aronmal 2023-11-09 15:53:13 +01:00
parent ea5a815c2c
commit 906ca7806e
Signed by: aronmal
GPG key ID: 816B7707426FC612
7 changed files with 162 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

127
src/components/NavBar.astro
View file

@ -1,111 +1,84 @@
<nav class="navMenu">
<ul class="grid">
<nav>
<ul>
<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>
<a class="textBx" href="/" target="_self">
<img
id="logo"
src="https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"
alt="The Bots Logo"
/>
li'l Judd
</a>
</li>
<li class="navElem">
<a class="navLink" href="/features" target="_self">Features</a>
<a href="/features" target="_self">Features</a>
</li>
<li class="navElem">
<a class="navLink" href="/how-do-i" target="_self">How do I...?</a>
<a href="/how-do-i" target="_self">How do I...?</a>
</li>
<li class="navElem">
<a class="navLink" href="/stack" target="_self">The Stack</a>
<a href="/stack" target="_self">The Stack</a>
</li>
<li class="navElem">
<a class="navLink" href="/about" target="_self">About</a>
<a href="/about" target="_self">About</a>
</li>
<li class="navElemR">
<li class="navElem">
<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 {
<style lang="scss">
nav {
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;
}
ul {
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
.navElem {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: 0.5s;
}
.navElem {
margin: 0.5rem 1rem;
transition: 0.5s;
color: white;
.navElem:hover {
color: rgb(96 59 255) !important;
}
&:hover {
color: rgb(96 59 255) !important;
}
.navElemR {
transition: 0.5s;
}
.textBx {
display: flex;
align-items: center;
.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);
#logo {
width: 32px;
height: 32px;
border-radius: 100%;
max-width: initial;
max-height: initial;
margin: 0.5rem;
}
}
}
}
.navElem {
grid-column: span 1;
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
align-items: center;
text-align: center;
}
@media (min-width: 768px) {
ul {
flex-direction: row;
padding: 0 2rem;
.navElemR {
grid-column: 8;
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
align-items: center;
text-align: center;
.navElem:last-child {
margin-left: auto;
}
}
}
}
</style>