changed the sizes again and again perfectionism lol

2024-02-15 20:33:51 +01:00
parent b8762d733a
commit 847ba60610
6 changed files with 21 additions and 25 deletions
--- a/src/components/DonationCallout.astro
+++ b/src/components/DonationCallout.astro
@@ -8,13 +8,11 @@ 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
-  >
+  <img class="heart" src="/img/animated/green-heart.webp" alt="Green Heart" />
+  <p>
+    {text}<br />
+    <button
+      ><a href="https://ko-fi.com/vaporvee" target="_blank">Donate</a></button
+    >
+  </p>
 </div>
--- a/src/layouts/DocsLayout.astro
+++ b/src/layouts/DocsLayout.astro
@@ -44,7 +44,7 @@ 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!"
+        text="These projects require a lot of time and effort. If you make money using this project, consider consider donating of whatever it's worth to you!"
      />
    </div>
  </div>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -30,7 +30,6 @@ import { ViewTransitions } from "astro:transitions";
  </head>
  <body>
    <Navbar />
-
    <main>
      <slot />
    </main>
--- a/src/styles/donation_callout.scss
+++ b/src/styles/donation_callout.scss
@@ -1,26 +1,25 @@
 .donation-callout {
  position: sticky;
-  text-align: center;
-  .donation-text {
-    display: flex;
-    text-align: center;
    .heart {
-      width: 50px;
-      height: 50px;
-      margin-top: 30px;
-      margin-right: 20px;
-      align-self: left;
+      margin-right: 10px;
+      margin-top: 10px;
+      width: 5vh;
+      height: 5vh;
+      max-width: 50px;
+      max-height: 50px;
    }
-  }
+  display: flex;
  border-radius: 10px;
  margin-block: 50px;
  background-color: #7c7c7c1f;
  border: 1px solid lighten(#7c7c7c1f, 12%);
-  padding: 20px;
+  padding: 16px;
  font-size: 16px;
  button {
+    align-self: self-end;
    margin: 0;
-    margin-left: 70px;
+    margin-top: 16px;
+    min-width: 150px;
    a[target="_blank"]::after {
      background-color: white;
    }
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -39,7 +39,7 @@ main {
  border: 1px solid lighten($highlight-primary, 12%);
  box-shadow: 0px 4px 4px 0px #00000040;
  padding: 2vw;
-  width: 60vw;
+  width: 65vw;

  margin-bottom: 11vh;
 }
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -6,7 +6,7 @@
  display: flex;
  justify-content: space-evenly;
  margin-top: 3vh;
-  width: 25vw;
+  width: 18vw;
  a {
    color: white;
    text-decoration: none;