changed the sizes again and again perfectionism lol
This commit is contained in:
@@ -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>
|
||||||
|
@@ -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>
|
||||||
|
@@ -30,7 +30,6 @@ import { ViewTransitions } from "astro:transitions";
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
|
@@ -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;
|
||||||
}
|
}
|
||||||
|
@@ -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;
|
||||||
}
|
}
|
||||||
|
@@ -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;
|
||||||
|
Reference in New Issue
Block a user