continued sidebar

src/layouts/DocsLayout.astro

@@ -14,9 +14,23 @@ const docs = unsortedDocs.sort((a, b) =>
   title={title}
   description="This is my personal website with my projects, docs and other useful stuff."
 >
+  <div class="content">
+    <h1 style="text-align: center;">{frontmatter.title}</h1>
+    <br />
+    <br />
+    <slot />
+  </div>
   <div class="sidebar">
-    <input type="checkbox" class="sidebar" />
     <div class="sidebar" style="display: unset;">
+      <a
+        class="gh-mark"
+        href={"https://github.com/vaporvee/" + frontmatter.repo}
+        target="_blank"
+      >
+        <span style="font-size: 14px;">vaporvee /</span>
+        {frontmatter.repo}
+        <Icon name="mdi:external-link" /></a
+      ><br /><br />
       {
         docs.map((page) => {
           const isActive =
@@ -32,19 +46,5 @@ const docs = unsortedDocs.sort((a, b) =>
         })
       }
     </div>
-    <Icon size={22} name="mdi:chevron-left-circle" />
-  </div>
-  <div class="content">
-    <a href={"https://github.com/vaporvee/" + frontmatter.repo} target="_blank"
-      ><img
-        src="/github-mark.svg"
-        style="margin-bottom: -10px; margin-right:3px;"
-      />Respository</a
-    ><br />
-    <h1 style="text-align: center;">{frontmatter.title}</h1>
-    <br />
-    <hr style="width: 100%; margin: 2vh;" />
-    <br />
-    <slot />
   </div>
 </Layout>

src/pages/docs.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import { Icon } from "astro-icon/components";
 const unsortedDocs = await Astro.glob("./docs/*/index.mdx");
 const docs = unsortedDocs.sort(
   (a, b) => +new Date(b.frontmatter.date) - +new Date(a.frontmatter.date)
@@ -16,29 +17,18 @@ const docs = unsortedDocs.sort(
       {
         docs.map((doc) => (
           <div class="second-content">
-            <div style="text-align: left;">
-              <a
-                href={"https://github.com/vaporvee/" + doc.frontmatter.repo}
-                target="_blank"
-              >
-                <img
-                  src="/github-mark.svg"
-                  style="margin-bottom: -10px; margin-right:3px;"
-                />
-                Respository
-              </a>
-            </div>
+            <div style="text-align: left;" />
             <a href={doc.url}>
-              <h2>{doc.frontmatter.title}</h2>
+              <h2>
+                {doc.frontmatter.repo} <Icon name="mdi:arrow-forward-circle" />
+              </h2>
             </a>
             <p>{doc.frontmatter.subtitle}</p>
             {doc.frontmatter.has_thumbnail ? (
-              <a href={doc.url}>
-                <img
-                  width="100%"
-                  src={"/img/docs/thumbnails/" + doc.frontmatter.repo + ".webp"}
-                />
-              </a>
+              <img
+                width="100%"
+                src={"/img/docs/thumbnails/" + doc.frontmatter.repo + ".webp"}
+              />
             ) : null}
           </div>
         ))

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

@@ -3,7 +3,7 @@ layout: ../../../layouts/DocsLayout.astro
 repo: discord-sdk-godot
 title: Editor Presence
 ---
-<img width="550px" src="https://raw.githubusercontent.com/vaporvee/discord-sdk-godot/main/project/assets/GodotEditorPresenceBanner.svg" />
+<img width="80%" src="https://raw.githubusercontent.com/vaporvee/discord-sdk-godot/main/project/assets/GodotEditorPresenceBanner.svg" />
 <br/>
 <br/>
 
@@ -17,4 +17,4 @@ title: Editor Presence
 Editor Presence also updates a bit slower on client side. Your friends will see what you are doing in the exact second even when its not updated for you directly.
 ***
 (old image)
-<img width="500px" src="https://github.com/vaporvee/discord-sdk-godot/assets/80621863/72b85ea7-24f1-4136-b788-92590c165a55" />
+<img width="50%" src="https://github.com/vaporvee/discord-sdk-godot/assets/80621863/72b85ea7-24f1-4136-b788-92590c165a55" />

src/styles/footer.scss

@@ -2,7 +2,6 @@ footer {
     display: flexbox;
     align-items: center;
     text-align: center;
-    position: absolute;
     bottom: 0;
     width: 100%;
     margin-bottom: 2vh;

src/styles/main.scss

@@ -24,6 +24,7 @@ main{
 .content {
     display: flex;
     flex-direction: column;
+    position: inherit;
     align-self: center;
     background-color: $highlight-primary;
     border-radius: 25px;
@@ -32,6 +33,7 @@ main{
     padding: 2vw;
     width: 60vw;
     margin-bottom: 11vh;
+
 }
 .second-content {
     align-self: center;
@@ -46,12 +48,6 @@ main{
     margin-bottom: 11vh;
 }
 
-.sidebar{
-    right: 0;
-    top: 0;
-}
-
-
 td {
     border-inline: 15px solid;
     border-color: #ffffff00;
@@ -91,5 +87,5 @@ h3 {
 }
 
 svg{
-    margin-bottom: -1.5%;
+    margin-bottom: -2px;
 }

src/styles/sidebar.scss

@@ -1,10 +1,12 @@
 @import "./_var.scss";
 .sidebar {
+  left: 0;
+  top: 0;
+  font-size: 18px;
   display: flex;
   justify-content: space-evenly;
-  .sidebar-entries {
-    opacity: 1;
-  }
+  margin-top: 3vh;
+  width: 20vw;
   a {
     color: white;
     text-decoration: none;
@@ -12,27 +14,8 @@
   .active {
     color: $accent;
   }
-
-  rotate: 0deg;
-  svg {
-    transition: 0.3s ease-in-out;
-    rotate: 0deg;
-  }
-  &:checked ~ {
-    svg {
-      rotate: 180deg;
-    }
-    div {
-      //only works when the checkbox is on the correct line in the astro file
-      margin-left: -330%;
-    }
-  }
-
-  &[type="checkbox"] {
-    position: absolute;
-    transform: scale(2);
-    z-index: 2;
-    &:checked {
-    }
+  .gh-mark {
+    text-decoration: underline;
+    color: $accent;
   }
 }