changed the sizes again and again perfectionism lol

This commit is contained in:
2024-02-15 20:33:51 +01:00
parent b8762d733a
commit 847ba60610
6 changed files with 21 additions and 25 deletions

View File

@@ -8,13 +8,11 @@ const { text } = Astro.props;
--- ---
<div class="donation-callout"> <div class="donation-callout">
<div class="donation-text"> <img class="heart" src="/img/animated/green-heart.webp" alt="Green Heart" />
<img class="heart" src="/img/animated/green-heart.webp" alt="Green Heart" /> <p>
<p> {text}<br />
{text} <button
</p> ><a href="https://ko-fi.com/vaporvee" target="_blank">Donate</a></button
</div> >
<button </p>
><a href="https://ko-fi.com/vaporvee" target="_blank">Donate</a></button
>
</div> </div>

View File

@@ -44,7 +44,7 @@ const docs = unsortedDocs.sort((a) =>
}) })
} }
<DonationCallout <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>
</div> </div>

View File

@@ -30,7 +30,6 @@ import { ViewTransitions } from "astro:transitions";
</head> </head>
<body> <body>
<Navbar /> <Navbar />
<main> <main>
<slot /> <slot />
</main> </main>

View File

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

View File

@@ -39,7 +39,7 @@ main {
border: 1px solid lighten($highlight-primary, 12%); border: 1px solid lighten($highlight-primary, 12%);
box-shadow: 0px 4px 4px 0px #00000040; box-shadow: 0px 4px 4px 0px #00000040;
padding: 2vw; padding: 2vw;
width: 60vw; width: 65vw;
margin-bottom: 11vh; margin-bottom: 11vh;
} }

View File

@@ -6,7 +6,7 @@
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
margin-top: 3vh; margin-top: 3vh;
width: 25vw; width: 18vw;
a { a {
color: white; color: white;
text-decoration: none; text-decoration: none;