feat: added basic responsive design

This commit is contained in:
moonleay 2023-10-19 00:00:25 +02:00
parent 1749f7f3b1
commit 4caf4eede9
3 changed files with 54 additions and 15 deletions

View file

@ -9,7 +9,7 @@ const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Lil Judd',
description: 'The Discord bot with unique features.',
description: 'The Splatoon Discord bot with unique features.',
}
export default function RootLayout({

View file

@ -1,19 +1,38 @@
.navMenu {
display: flex;
flex-direction: column;
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(5px);
position: sticky;
background-color: #5d5d61;
border-radius: 5px;
}
.logo {
width: 32px;
height: 32px;
border-radius: 10%;
border-radius: 100%;
max-width: initial;
max-height: initial;
}
.navElem {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logoWtxt {
display: flex;
align-items: center;
margin: 0;
padding: 0;
}
.pad3px {
padding: 3px;
}
.footer {
align-items: center;
margin: 100px 1px 0 0;
@ -24,6 +43,10 @@
padding: 5px;
}
.footerImageNote {
font-size: 0.75rem;
}
.footerIcon {
display: block;
text-align: center;
@ -99,6 +122,17 @@
margin: 0 auto;
}
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.navElem {
grid-column: span 1;
margin: 0.5rem 0.5rem 0.5rem 0.5rem;
align-items: center;
}
.footerIcon {
grid-column: span 1;
justify-self: center;

View file

@ -3,22 +3,28 @@ import styles from "./wrapping_objects.module.css"
export function NavBar(){
return(
<nav className={styles.navMenu}>
<img className={styles.logo} src={"https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"} alt={"The Bots Logo"}/>
<a href={"/"} target={"_self"}>li'l Judd</a>
<ul>
<li>
<ul className={styles.grid}>
<li className={styles.navElem}>
<div className={styles.logoWtxt}>
<img className={`${styles.logo} ${styles.pad3px}`}
src={"https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"}
alt={"The Bots Logo"}/>
<a className={styles.pad3px} href={"/"} target={"_self"}>li'l Judd</a>
</div>
</li>
<li className={styles.navElem}>
<a href={"/features"} target={"_self"}>Features</a>
</li>
<li>
<li className={styles.navElem}>
<a href={"/how-do-i"} target={"_self"}>How do I...?</a>
</li>
<li>
<li className={styles.navElem}>
<a href={"/stack"} target={"_self"}>The Stack</a>
</li>
<li>
<li className={styles.navElem}>
<a href={"/about"} target={"_self"}>About</a>
</li>
<li>
<li className={styles.navElem}>
<a href={"https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=8&scope=bot"}
target={"_blank"}>Invite to your Discord Server</a>
</li>
@ -35,6 +41,7 @@ export function Footer() {
<img className={styles.footerImage} src={"https://static.moonleay.net/img/lilJuddWeb/lilJudd.png"}
alt={"A cute Image of lil Judd <3"}/>
<p>li'l Judd</p>
<p className={styles.footerImageNote}>Your competitive Splatoon assistant.</p>
</div>
<div className={styles.footerTable}>
<table className={styles.table}>
@ -119,9 +126,7 @@ export function Footer() {
</tbody>
</table>
</div>
<div className={styles.footerNotice}>
<Notice/>
</div>
</footer>
</>
)
@ -129,7 +134,7 @@ export function Footer() {
export function Notice() {
return (
<div>
<div className={styles.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>