Added features, Screen size support

src/components/footer.tmpl

@@ -1,6 +1,6 @@
 {{ define "footer" }}
 <footer>
   <h2>MBot</h2>
-  <p>Discord.js</p>
+  <p>Developed by Keyemail.</p>
 </footer>
 {{ end }}

src/pages/home.tmpl

@@ -16,9 +16,26 @@
       </div>
     </div>
   </header>
-  <div id="what-about">
-    <h2>What is MBot?</h2>
-    <p>MBot is a Discord bot powered by Discord.js to help the user in moderation of their server, this bot can help ban, kick any user (as long as it has permission to do so) to help fight off anyone who could be doing anything against what the server goes for! It can also clear messages incase any big chunks of unwanted messages appear. If you want music for your server this is the bot for that! This bot is able to play about any music you want as long as it is a public link.</p>
+  <ul id="what-about">
+    <li>
+      <div>
+        <h2>Powerful Moderation!</h2>
+        <p>Moderate your server with ban or kick commands, this will get rid of any naughty people that break your server rules! You can also manage messages using the clear command, this will get rid of big chunk messages that you may not want on your server.</p>
       </div>
+      <img src="/src/assets/home/bot-moderation.png">
+    </li>
+    <li>
+      <img src="/src/assets/home/bot-music.png">
+      <div>
+        <h2>Music!</h2>
+        <p>Play music from youtube with our bot for free! Control your music how youd like by skipping, pausing, or stopping the queue entirely to play what you want on your server! You may also look at what the queue is storing for your server.</p>
+      </div>
+    </li>
+    <li>
+      <div class="shift-center">
+        <h2>More features coming soon!</h2>
+      </div>
+    </li>
+  </ul>
   {{ end }}
 </body>

src/styles/home.css

@@ -1,25 +1,19 @@
 header {
   display: flex;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
   position: relative;
-  left: 0;
-  top: 0;
-  margin: -20px -20px 0;
-  width: calc(100% + 40px);
+  margin: calc(-1 * var(--pad));
+  margin-bottom: 0;
+  width: calc(100% + 2 * var(--pad));
   height: 600px;
-  background-image: url(/src/assets/home/background.svg);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  background: #103161 no-repeat center / cover url(/src/assets/home/background.svg);
 
   #header-wrapped-content {
     display: flex;
     position: relative;
     align-items: center;
     justify-content: space-between;
-    max-width: 1920px;
     width: 100%;
     padding: 20px 100px;
 
@@ -41,12 +35,10 @@ header {
 
   #header-wrapped-profile {
     border-radius: 50% !important;
-    overflow: hidden;
+    overflow: clip;
     height: 300px !important;
     width: 300px !important;
-    border-style: solid;
-    border-color: white;
-    border-width: 3px;
+    border: #fff solid 3px;
     aspect-ratio: 1 / 1;
 
     img {
@@ -54,18 +46,58 @@ header {
       height: 100%;
       object-fit: cover;
       image-rendering: pixelated;
+      user-select: none;
     }
   }
 }
 
 #what-about {
-    margin-top: 30px; 
+  display: inline;
+  list-style: none;
+  max-width: 1200px;
+  margin: auto;
 
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 180px;
+    gap: 200px; 
+
+    div {
       h2 {
         font-size: 3rem;
       }
       p{
         font-size: 1.3rem;
-      max-width: 800px;
+      } 
+    }
+    img {
+      border-radius: 20px;
+      border: #fff solid 3px;
+      user-select: none;
+      width: 400px;
+    }
+  }
+}
+
+.shift-right {
+  margin-left: auto; 
+}
+
+.shift-center {
+  margin: auto;
+}
+
+@media only screen and (max-width: 1100px) {
+  header {
+    height: 750px;
+  }
+  #header-wrapped-content {
+    flex-direction: column-reverse;
+    text-align: center;
+  }
+  #header-wrapped-profile {
+    margin-bottom: 30px;
   }
 } 

src/styles/main.css

@@ -1,7 +1,7 @@
 @font-face {
   font-family: Poppins;
   src: url(/src/fonts/poppins/Poppins-Medium.ttf);
-  font-weight: 500;
+  font-weight: 400;
 }
 
 @font-face {
@@ -18,6 +18,7 @@
 
 :root {
   --font: 'Poppins', sans-serif;
+  --pad: 20px;
 }
 
 * {
@@ -32,12 +33,12 @@ body {
   justify-content: space-between;
   max-width: 1920px;
   margin: auto;
-  padding: 20px;
+  padding: var(--pad);
   min-height: 100vh;
   background-color: #121212;
-  color: white;
+  color: #fff;
   font-family: var(--font);
-  font-weight: 500;
+  font-weight: 400;
 }
 
 a {
@@ -51,7 +52,7 @@ nav {
   align-items: center;
   justify-content: space-between;
   z-index: 999;
-  width: calc(100% - 40px);
+  width: calc(100% - calc(var(--pad) + var(--pad)));
 
   h1 {
     font-size: 2rem;
@@ -66,7 +67,11 @@ nav {
     li {
       display: inline;
       cursor: pointer;
-      font-weight: 200;
+      font-weight: 500;
+      transition: border 0.15s;
+    }
+    li:hover {
+      border-bottom: 2px solid #fff;
     }
   }
 }