From e7a42b121e039ef205acc3f0dfb8025ae3685afa Mon Sep 17 00:00:00 2001
From: moonleay <contact@moonleay.net>
Date: Thu, 9 Nov 2023 12:44:18 +0100
Subject: [PATCH] feat: kinda finished homepage

---
 app/home.module.css                  | 30 +++++++++++++++++++++-
 app/page.tsx                         |  6 +++--
 app/util/wrapping_objects.module.css | 38 ++++++++++++++++++++++++++--
 app/util/wrapping_objects.tsx        | 17 +++++--------
 4 files changed, 76 insertions(+), 15 deletions(-)

diff --git a/app/home.module.css b/app/home.module.css
index 1c82707..0018cfd 100644
--- a/app/home.module.css
+++ b/app/home.module.css
@@ -1,5 +1,33 @@
 .section {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
+    text-align: center;
 }
+
+.section h1 {
+    font-size: 4rem;
+    margin-top: 8rem;
+}
+
+.section h5 {
+    font-size: 1.5rem;
+    margin-top: .25rem;
+}
+
+.section div {
+    margin-top: 1.5rem;
+}
+
+.p1 {
+    font-size: 1rem;
+}
+
+.p2 {
+    font-size: 0.8rem;
+}
+
+.p2 a {
+    font-weight: bolder;
+}
+
diff --git a/app/page.tsx b/app/page.tsx
index 45ebb1b..25b20f3 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,8 +7,10 @@ export default function Home() {
           <section className={styles.section}>
               <h1>li'l Judd</h1>
               <h5>The competetive Splatoon Bot</h5>
-              <p>Improve your competitive Splatoon experience!</p>
-              <p>See what li'l Judd can help you with: <a href={"/features"}>here</a><br/>Invite the bot <a href={"https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=8&scope=bot"} target={"_blank"}>here</a></p>
+              <div>
+                  <p className={styles.p1}>Improve your competitive Splatoon experience!</p>
+                  <p className={styles.p2}>See what li'l Judd can help you with: <a href={"/features"}>here</a></p>
+              </div>
           </section>
       </>
   )
diff --git a/app/util/wrapping_objects.module.css b/app/util/wrapping_objects.module.css
index 9405dd8..49dd35a 100644
--- a/app/util/wrapping_objects.module.css
+++ b/app/util/wrapping_objects.module.css
@@ -13,6 +13,7 @@
     border-radius: 100%;
     max-width: initial;
     max-height: initial;
+    margin: .35rem;
 }
 
 .navElem {
@@ -20,8 +21,23 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    transition: .5s;
 }
 
+
+.navElem:hover {
+    color: rgb(96 59 255) !important;
+}
+
+.navElemR {
+    transition: .5s;
+}
+
+.navElemR:hover {
+    color: rgb(96 59 255) !important;
+}
+
+
 .logoWtxt {
     display: flex;
     align-items: center;
@@ -33,6 +49,11 @@
     padding: 3px;
 }
 
+.textBx {
+    display: flex;
+    align-items: center;
+}
+
 .footer {
     align-items: center;
     margin: 100px 1px 0 0;
@@ -56,7 +77,7 @@
     max-width: initial;
     max-height: initial;
     width: 48px;
-    margin: 0 auto;
+    margin: 0.5rem auto;
 }
 
 .footerNotice {
@@ -72,6 +93,9 @@
     gap: 20px;
 }
 
+.footerTable div {
+}
+
 .footerTable h3 {
     margin-bottom: 8px;
 }
@@ -79,6 +103,7 @@
 .footerLinks {
     display: flex;
     flex-direction: column;
+    align-items: baseline;
 }
 
 
@@ -136,13 +161,22 @@
 
     .grid {
         display: grid;
-        grid-template-columns: repeat(6, 1fr);
+        /*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;
     }
 
     .footerIcon {
diff --git a/app/util/wrapping_objects.tsx b/app/util/wrapping_objects.tsx
index f03f83a..3ef5306 100644
--- a/app/util/wrapping_objects.tsx
+++ b/app/util/wrapping_objects.tsx
@@ -6,26 +6,23 @@ export function NavBar(){
             <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>
+                        <a className={[styles.pad3px, styles.textBx].join(" ")} href={"/"} target={"_self"}><img className={`${styles.logo} ${styles.pad3px}`}src={"https://static.moonleay.net/img/lilJuddWeb/logos/logox256.png"}alt={"The Bots Logo"}/>li'l Judd</a>
                     </div>
                 </li>
                 <li className={styles.navElem}>
-                    <a href={"/features"} target={"_self"}>Features</a>
+                    <a className={styles.navLink} href={"/features"} target={"_self"}>Features</a>
                 </li>
                 <li className={styles.navElem}>
-                    <a href={"/how-do-i"} target={"_self"}>How do I...?</a>
+                    <a className={styles.navLink} href={"/how-do-i"} target={"_self"}>How do I...?</a>
                 </li>
                 <li className={styles.navElem}>
-                    <a href={"/stack"} target={"_self"}>The Stack</a>
+                    <a className={styles.navLink} href={"/stack"} target={"_self"}>The Stack</a>
                 </li>
                 <li className={styles.navElem}>
-                    <a href={"/about"} target={"_self"}>About</a>
+                    <a className={styles.navLink} href={"/about"} target={"_self"}>About</a>
                 </li>
-                <li className={styles.navElem}>
-                    <a href={"https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=8&scope=bot"}
+                <li className={styles.navElemR}>
+                    <a className={styles.navLink} href={"https://discord.com/api/oauth2/authorize?client_id=1024410658973941862&permissions=8&scope=bot"}
                        target={"_blank"}>Invite to your server</a>
                 </li>
             </ul>