improved css and added some content

src/pages/docs.astro

@@ -16,7 +16,16 @@ const docs = unsortedDocs.sort(
       <h1 style="text-align: center;">Docs</h1>
       {
         docs.map((doc) => (
-          <div class="second-content">
+          <div
+            class="second-content"
+            style={
+              doc.frontmatter.has_thumbnail
+                ? 'background-image: url("/img/docs/thumbnails/' +
+                  doc.frontmatter.repo +
+                  '.webp")'
+                : ""
+            }
+          >
             <div style="text-align: left;" />
             <a href={doc.url}>
               <h2>
@@ -24,13 +33,12 @@ const docs = unsortedDocs.sort(
               </h2>
             </a>
             <p>{doc.frontmatter.subtitle}</p>
-            {doc.frontmatter.has_thumbnail ? (
+            <h3 style="text-align: left;">Features:</h3>
-              <img
+            <ul style="text-align: left;">
-                width="100%"
+              {doc.frontmatter.features.map((feature) => (
-                style="border-radius: 5px;"
+                <li>{feature}</li>
-                src={"/img/docs/thumbnails/" + doc.frontmatter.repo + ".webp"}
+              ))}
-              />
+            </ul>
-            ) : null}
           </div>
         ))
       }

src/pages/docs/discord-sdk-godot/index.mdx

@@ -4,14 +4,15 @@ repo: discord-sdk-godot
 has_thumbnail: true
 title: Home
 subtitle: Discord Game SDK support for GDScript in Godot Engine 4.2. with the easiest code pattern!
-features: |
+features: [
- - Activities (Make people see what you are playing)
+ "Activities (Make people see what you are playing)",
- - Invites
+ "Invites",
- - Steam and launch command registering
+ "Steam and launch command registering",
- - User information
+ "User information",
- - Relationship Manager (Get friendlist and its updates)
+ "Relationship Manager (Get friendlist and its updates)",
- - Overlay management
+ "Overlay management",
- - Editor Presence (optional)
+ Editor Presence (optional)
+ ]
 ---
 
 :::note{title="Important Discord Game SDK information"}
@@ -24,7 +25,7 @@ The GameSDK's Achievements, Applications, Voice, Images, Lobbies, Networking, St
 The plugin only works with 4.2 and above for the current version
 :::
 <br/>
-:::deter{title="Important info"}
+:::assert{title="Important info"}
 To make anything work in the plugin make sure to run
 
  ```gdscript
@@ -44,7 +45,7 @@ To make anything work in the plugin make sure to run
 
 | Recommended                                                                                                                                                                                                                                            | Manual                                                                                                                                                                                            |
 | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 1. Open the AssetLib tab in your Godot Editor. <br /> 2. Search for "discord" and install all the files from this plugin <img width="30px" src="https://raw.githubusercontent.com/vaporvee/discord-sdk-godot/main/project/assets/Logo_V2_Clyde.png" /> | 1. [Download the addon](https://github.com/vaporvee/discord-sdk-godot/releases/latest/download/ADDON-Discord-SDK-Godot.zip/) <br /> 2. Put the `addons/` folder in the root of your Godot project |
+| 1. Open the AssetLib tab in your Godot Editor. <br />2. Search for "discord" and install all the files from this plugin <img width="30px" style="margin-top:-30px;" src="https://raw.githubusercontent.com/vaporvee/discord-sdk-godot/main/project/assets/Logo_V2_Clyde.png" /> | 1. [Download the addon](https://github.com/vaporvee/discord-sdk-godot/releases/latest/download/ADDON-Discord-SDK-Godot.zip/) <br />2. Put the `addons/` folder in the root of your Godot project |
 
 3. Enable the addon in your Project Settings under "Plugins" and "DiscordSDK". <br /><sub>(Also adds DiscordSDKLoader autoload wich should be ignored. It needs to run in the background to comunicate with the Discord client)</sub>
 4. Restart your project with the window that should now appear. <br /><img src="https://github.com/vaporvee/discord-sdk-godot/assets/80621863/620d90aa-6e76-4a80-980e-c8c57d8cfa58" width="200px" /><br />

src/pages/index.astro

@@ -26,6 +26,7 @@ const yannikAge = new Date().getFullYear() - 2004; // 31/12/2003
         />
       </div>
       <div class="content">
+        <div class="avatar portrait"><div class="avatar"></div></div>
         <p>
           Hello my name is <b>Yannik</b>!<br />
           I’m a {yannikAge} year old <b>Game Developer</b> living <b

src/styles/home.scss

@@ -1,46 +1,96 @@
-main{
+main {
-    display: unset;
+  display: unset;
-    flex-direction: unset;
+  flex-direction: unset;
-    align-items: unset;
+  align-items: unset;
 }
 
 .lines {
-    background-image: url("/diagonal_lines_home.png");
+  background-image: url("/diagonal_lines_home.png");
-    background-size: cover;
+  background-size: cover;
-    background-repeat: repeat;
+  background-repeat: repeat;
-    min-height: 75vh;
+  min-height: 75vh;
-    padding-inline: 10vw;
+  padding-inline: 10vw;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
 
-    .home-main-box {
+  .home-main-box {
-        padding-block: 7vh;
+    padding-block: 7vh;
-        display: flex;
+    display: flex;
-        justify-content: space-between;
+    justify-content: space-between;
-        align-items: center;
+    align-items: center;
+    width: 100vw;
 
-        .home-title-box {
+    .home-title-box {
-            justify-self: flex-start;
+      justify-self: flex-start;
-            margin-right: 5vw;
+      margin-right: 5vw;
 
-            h1 {
+      h1 {
-                font-size: 72px;
+        font-size: 72px;
-            }
+        color: #e6e6e6;
+        background: linear-gradient(to right, #e6e6e6 0, white 8%, #e6e6e6 16%);
+        background-position: 0;
+        background-color: #e6e6e6;
+        background-repeat: no-repeat;
+        background-size: 500px;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        animation: shine 5s infinite linear;
+        animation-fill-mode: forwards;
+        text-size-adjust: none;
+      }
 
-            .home-title {
+      .home-title {
-                margin: 0;
-                color: #FFF;
-                font-family: "Tanker-Regular";
-            }
-
-            .using-engines {
-                width: 21vw;
-            }
-        }
-    }
-
-    .content {
-        justify-self: flex-end;
         margin: 0;
-        margin-top: 2vh;
+        color: #fff;
-        max-width: 500px;
+        font-family: "Tanker-Regular";
+      }
+
+      .using-engines {
+        width: 21vw;
+      }
     }
+  }
+
+  .content {
+    justify-self: flex-end;
+    margin: 0;
+    margin-top: 2vh;
+    max-width: 500px;
+    &p {
+      z-index: 2;
+    }
+    .avatar {
+      position: absolute;
+      top: 0%;
+      right: 0%;
+      width: 4vw;
+      height: 4vw;
+      border-radius: 2.5vw;
+      background-size: cover;
+      transition: opacity 0.5s linear;
+      background-image: url("/img/avatar.webp");
+      z-index: 1;
+      &.portrait {
+        top: 5%;
+        right: 5%;
+        background-image: url("/img/portrait.webp");
+        &:hover {
+          opacity: 100;
+        }
+      }
+      &:hover {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+@keyframes shine {
+  0% {
+    background-position: -500px;
+  }
+  100% {
+    background-position: 500px;
+  }
 }

src/styles/main.scss

@@ -25,7 +25,7 @@ main {
 .content {
   display: flex;
   flex-direction: column;
-  position: inherit;
+  position: relative;
   align-self: center;
   background-color: $highlight-primary;
   border-radius: 25px;
@@ -42,10 +42,14 @@ main {
   background-color: $second-content-clr;
   border-radius: 25px;
   border: 1px solid lighten($second-content-clr, 16%);
-  width: 30vw;
+  min-width: 30vw;
   padding: 2vh;
+  padding-bottom: 30%;
   margin-inline: 10vw;
   margin-bottom: 11vh;
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  background-size: 100% auto;
 }
 
 td {
@@ -53,6 +57,11 @@ td {
   border-color: #ffffff00;
 }
 
+table{
+  overflow: scroll;
+  display: block;
+}
+
 b {
   font-family: "Satoshi-Bold";
   color: $accent;
@@ -70,7 +79,7 @@ a {
       no-repeat center;
     mask: $external_svg
       no-repeat center;
-    background-color: $link; /* This will color the SVG */
+    background-color: $link; // This will color the SVG
   }
   &.social::after {
     content: none;
@@ -138,3 +147,8 @@ h3 {
 svg {
   margin-bottom: -2px;
 }
+
+img{
+  max-width: 100%;
+  max-height: 100%;
+}