From 4caf4eede9045863c051876ff4ccf9a73a881e5d Mon Sep 17 00:00:00 2001
From: moonleay <contact@moonleay.net>
Date: Thu, 19 Oct 2023 00:00:25 +0200
Subject: [PATCH] feat: added basic responsive design

---
 app/layout.tsx                       |  2 +-
 app/util/wrapping_objects.module.css | 38 ++++++++++++++++++++++++++--
 app/util/wrapping_objects.tsx        | 29 ++++++++++++---------
 3 files changed, 54 insertions(+), 15 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 301b884..ca1a20f 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -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({
diff --git a/app/util/wrapping_objects.module.css b/app/util/wrapping_objects.module.css
index 286b32d..601a67a 100644
--- a/app/util/wrapping_objects.module.css
+++ b/app/util/wrapping_objects.module.css
@@ -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;
diff --git a/app/util/wrapping_objects.tsx b/app/util/wrapping_objects.tsx
index 5166019..9365251 100644
--- a/app/util/wrapping_objects.tsx
+++ b/app/util/wrapping_objects.tsx
@@ -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>
+                <Notice/>
             </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>