added donation callout and non responsive warning

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;
+    }
 }