added donation callout and non responsive warning

src/components/DonationCallout.astro

@@ -0,0 +1,20 @@
+---
+import "../styles/donation_callout.scss";
+interface Props {
+  text: string;
+}
+
+const { text } = Astro.props;
+---
+
+<div class="donation-callout">
+  <div class="donation-text">
+    <img class="heart" src="/img/animated/green-heart.webp" alt="Green Heart" />
+    <p>
+      {text}
+    </p>
+  </div>
+  <button
+    ><a href="https://ko-fi.com/vaporvee" target="_blank">Donate</a></button
+  >
+</div>

src/components/Navbar.astro

@@ -49,3 +49,7 @@ import "../styles/navbar.scss";
     >
   </div>
 </header>
+<div class="not-responsive-warning">
+  This website might not be optimized for your device yet and could look
+  unexpected. Consider opening this website on a bigger display.
+</div>

src/layouts/DocsLayout.astro

@@ -2,6 +2,7 @@
 const { frontmatter } = Astro.props;
 import Layout from "../layouts/Layout.astro";
 import { Icon } from "astro-icon/components";
+import DonationCallout from "../components/DonationCallout.astro";
 import "../styles/sidebar.scss";
 const title = frontmatter.title + " | Docs";
 const unsortedDocs = await Astro.glob("../pages/docs/*/*.{md,mdx}");
@@ -42,6 +43,9 @@ const docs = unsortedDocs.sort((a) =>
           );
         })
       }
+      <DonationCallout
+        text="These projects require a lot of time and effort. If you would like to support this project, consider making a donation of whatever it is worth to you!"
+      />
     </div>
   </div>
 </Layout>

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

@@ -6,7 +6,7 @@ title: Activities
 
 # Variables
 
-Anything of course begins with `DiscordSDK.{:gdscript}` e.g. `DiscordSDK.app_id = <your Application ID>{:gdscript}`
+Anything of course begins with `DiscordSDK.{:gdscript}` e.g. `DiscordSDK.app_id = #<your Application ID>{:gdscript}`
 ### Rich presence
 
 | Name | Type | Description |

src/styles/callout.scss

@@ -4,7 +4,7 @@
     --callout-background: ;
     --callout-border: 1px solid hsl(205, 15%, 33%);
     --callout-radius: 8px;
-    --callout-padding: 1.5vh;
+    --callout-padding: 1.2vh;
     border: var(--callout-border);
     border-radius: var(--callout-radius);
     background: var(--callout-background);

src/styles/donation_callout.scss

@@ -0,0 +1,25 @@
+.donation-callout {
+  text-align: right;
+  .donation-text {
+    display: flex;
+    text-align: left;
+    .heart {
+      width: 50px;
+      margin-right: 20px;
+      align-self: center;
+    }
+  }
+  border-radius: 10px;
+  margin-block: 50px;
+  background-color: #7c7c7c1f;
+  border: 1px solid lighten(#7c7c7c1f, 12%);
+  padding: 20px;
+  font-size: 16px;
+  button {
+    align-self: flex-end;
+    margin: 0;
+    a[target="_blank"]::after {
+      background-color: white;
+    }
+  }
+}

src/styles/home.scss

@@ -35,7 +35,7 @@ main {
         background-size: 500px;
         background-clip: text;
         -webkit-text-fill-color: transparent;
-        animation: shine 5s infinite linear;
+        animation: shine 3s infinite linear;
         animation-fill-mode: forwards;
         text-size-adjust: none;
       }
@@ -88,7 +88,7 @@ main {
 
 @keyframes shine {
   0% {
-    background-position: -500px;
+    background-position: -200px;
   }
   100% {
     background-position: 500px;

src/styles/main.scss

@@ -29,10 +29,11 @@ main {
   align-self: center;
   background-color: $highlight-primary;
   border-radius: 25px;
-  border: 1px solid lighten($highlight-primary, 16%);
+  border: 1px solid lighten($highlight-primary, 12%);
   box-shadow: 0px 4px 4px 0px #00000040;
   padding: 2vw;
   width: 60vw;
+
   margin-bottom: 11vh;
 }
 .second-content {
@@ -41,7 +42,7 @@ main {
   $second-content-clr: #6e6e6e40;
   background-color: $second-content-clr;
   border-radius: 25px;
-  border: 1px solid lighten($second-content-clr, 16%);
+  border: 1px solid lighten($second-content-clr, 12%);
   min-width: 30vw;
   padding: 2vh;
   padding-bottom: 30%;
@@ -92,6 +93,7 @@ figure {
 }
 
 .expressive-code {
+  border: 1px solid lighten(#282a36, 10%);
   code {
     background-color: transparent;
   }
@@ -100,9 +102,6 @@ figure {
     border: transparent !important;
     background: none !important;
   }
-  figure {
-    box-shadow: none !important;
-  }
   .copy {
     button {
       width: 30px !important;
@@ -125,14 +124,17 @@ figure {
   margin: 0;
   max-width: 50vw;
   background-color: #282a36;
-  border-radius: 25px;
+  border-radius: 20px;
+  .frame.is-terminal .header::before{
+    background-color: gray!important;
+  }
 }
 
 code {
   background-color: #282a36;
   padding-inline: 10px;
   padding-block: 2px;
-  border-radius: 25px;
+  border-radius: 15px;
 }
 
 h1,
@@ -152,3 +154,19 @@ img{
   max-width: 100%;
   max-height: 100%;
 }
+
+button{
+  $button-color: #42b971;
+  padding-block: 10px;
+  padding-inline: 20px;
+  margin: 10px;
+  border-radius: 25px;
+  font-family: "Satoshi-Bold";
+  background-color: $button-color;
+  border: 1px solid lighten($button-color, 12%);
+  font-size: 18px;
+  &:active{
+    background-color: darken($button-color,10);
+    transform: translateY(1px);
+  }
+}

src/styles/navbar.scss

@@ -36,7 +36,6 @@ header {
             }
 
             .active {
-                font-family: "Satoshi-Bold";
                 color: $accent;
             }
 
@@ -51,4 +50,16 @@ header {
         width: 22px;
         margin-inline: .2vw;
     }
+}
+
+.not-responsive-warning{
+    display: none;
+}
+
+@media (max-width: 1000px){
+    .not-responsive-warning{
+        display: flex;
+        font-family: "Satoshi-Bold";
+        padding-bottom: 10px;
+    }
 }