donation page
All checks were successful
/ build (push) Successful in 7m17s

This commit is contained in:
Ruben 2025-10-26 21:03:17 -05:00
commit a9e15b347d
Signed by: sneexy
GPG key ID: 8ECFA045E63BC583
7 changed files with 49 additions and 33 deletions

View file

@ -1,7 +1,7 @@
<card-container>
<card-entry id="sneexy">
<h3><a href="#sneexy">Sneexy <small>(Ruben)</small></a></h3>
<p>Current webmaster; <span class="_info" title="Not literally - in reference to my synth/sona's capability to run software and store endless amounts of data thanks to advanced Goo-Storage™ technology.">Hardware host <small><i>(slosh!~)</i></small></span>; Admin.</p>
<p>Current webmaster; <span title="Not literally - in reference to my synth/sona's capability to run software and store endless amounts of data thanks to advanced Goo-Storage™ technology.">Hardware host <small><i>(slosh!~)</i></small></span>; Admin.</p>
<buttons-container>
<a button href="https://sneexy.synth.download" aria-label="Personal Page">
<icon-tabler arrow-forward></icon-tabler>

View file

@ -2,7 +2,7 @@
<article id="donate" class="window">
<div class="header">
<titlebar-icon aria-hidden="true">
<icon-tabler message-chatbot></icon-tabler>
<icon-tabler currency-dollar></icon-tabler>
</titlebar-icon>
<a href="#donate">donate</a>
<window-controls aria-hidden="true">
@ -14,9 +14,27 @@
</window-controls>
</div>
<section>
<p>Hi! I'm <a href="https://sneexy.synth.download">Ruben</a>. Currently just a student running synth.download in my spare time because I like doing so.</p>
<p>If you'd like to donate, you may choose so through either <a href="https://ko-fi.com/sneexy" style="padding: .2rem; color: var(--sapphire); background-color: color-mix(in srgb, var(--sapphire) 20%, transparent); border-radius: .2rem;">Ko-fi</a>, or directly donate to me via Stripe with the widget below:</p>
<stripe-buy-button buy-button-id="buy_btn_1R9UrrGPbe5QWVnnm6jC3XUf" publishable-key="pk_live_51QFpvEGPbe5QWVnnCUUlT1nEYhVy2F4z30BVaG3LHD8o4qNc7IL67QcPUzBUeptEYpFOtYs6Jc1GvM3ujqsFltYb00oUvMTDMM"></stripe-buy-button>
<p>Please don't feel like you need to donate. Currently, I am able to pay things on my own, but donations do help. <span aria-hidden="true">^^</span></p>
<p>If you enjoy using Synth.Download and any of its services and would like for us to continue running our place, feel free to chime in with donations.</p>
<h4>To help with keeping Synth.Download up:</h4>
<ul>
<li>
Donate directly to <a href="https://foxgirl.dev/">Lua</a> via <a href="https://foxgirl.dev/tip">Helcim <small>(redirect)</small></a> or <a href="https://ko-fi.com/luavixen">Ko-fi</a>, who manages the hardware that Synth.Download lives on <small>(Thank you, Lua! 💚)</small>
</li>
<li>
Donate directly to <a href="https://sneexy.synth.download">Sneexy</a> via <a href="https://ko-fi.com/sneexy">Ko-fi</a> <small>(Leave a note mentioning that the donation is for Synth.Download)</small>
</li>
<li>
Donate via Stripe on this page:<br>
<stripe-buy-button buy-button-id="buy_btn_1R9UrrGPbe5QWVnnm6jC3XUf" publishable-key="pk_live_51QFpvEGPbe5QWVnnCUUlT1nEYhVy2F4z30BVaG3LHD8o4qNc7IL67QcPUzBUeptEYpFOtYs6Jc1GvM3ujqsFltYb00oUvMTDMM"></stripe-buy-button>
</li>
</ul>
<h4>To help administrators and individuals directly:</h4>
<ul>
<li>
Donate directly to <a href="/admins">any administrator</a> for personal purposes <small>(such as mutual aid)</small>
</li>
</ul>
<p>For Synth.Download, donations are not required, but do help us keep things in check. <span style="color: var(--accent);" aria-hidden="true">^^</span></p>
<p><small>This page will also be used to notify for any required donations or mutual aid posts of any Synth.Download administrators.</small></p>
</section>
</article>

View file

@ -8,8 +8,8 @@
<img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" />
</label>
<ul>
<li class="nav-home">
<a href="/home"><icon-tabler home></icon-tabler> <span class="text">Home</span></a>
<li class="nav-about">
<a href="/about"><icon-tabler info-circle></icon-tabler> <span class="text">About</span></a>
</li>
<li class="nav-services">
<a href="/services"><icon-tabler server-cog></icon-tabler> <span class="text">Services</span></a>
@ -19,7 +19,7 @@
</li>
</ul>
</div>
<a class="nav-base nav-links nav-home" href="/home"><icon-tabler home></icon-tabler> <span>Home</span></a>
<a class="nav-base nav-links nav-about" href="/about"><icon-tabler info-circle></icon-tabler> <span>About</span></a>
<a class="nav-base nav-links nav-services" href="/services"><icon-tabler server-cog></icon-tabler> <span>Services</span></a>
<a class="nav-base nav-links nav-donate" href="/donate"><icon-tabler currency-dollar></icon-tabler> <span>Donate</span></a>
</navbar-left>

View file

@ -92,6 +92,7 @@ content-wrapper {
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: var(--foreground);
margin-bottom: .5rem;
margin-top: .5rem;
text-decoration-color: transparent;
transition: .2s;
@ -159,13 +160,20 @@ small a {
}
/* lists need some styling */
li {
margin-left: -.7em;
padding-bottom: .5rem;
ul {
margin-left: -1.3rem;
li {
margin-bottom: .5rem;
&::marker {
color: var(--accent);
}
}
}
/* text with "title", little hover-over info tibblets */
._info {
span[title] {
cursor: help;
text-decoration-color: color-mix(in srgb, var(--foreground) 40%, transparent);
text-decoration-line: underline;
@ -689,7 +697,7 @@ radio-button-group {
&:has(input:checked) {
border-color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 30%, var(--background));
background-color: color-mix(in srgb, var(--accent) 15%, var(--background));
}
&:hover, &:focus-visible {
@ -735,7 +743,7 @@ checkbox-button-group {
&:has(input:checked) {
border-color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 30%, var(--background));
background-color: color-mix(in srgb, var(--accent) 15%, var(--background));
&::before {
background: var(--accent);

View file

@ -112,7 +112,7 @@
}
}
.nav-home {
.nav-about {
&:hover, &:focus-visible {
background-color: light-dark(color-mix(in srgb, var(--accent) 25%, var(--background)), var(--accent));
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
@ -126,13 +126,6 @@
}
}
.nav-webmaster {
&:hover, &:focus-visible {
background-color: light-dark(color-mix(in srgb, var(--green) 25%, var(--background)), var(--green));
outline-color: color-mix(in srgb, var(--green) 60%, transparent);
}
}
.nav-donate {
&:hover, &:focus-visible {
background-color: light-dark(color-mix(in srgb, var(--purple) 25%, var(--background)), var(--purple));
@ -201,7 +194,7 @@
}
}
.nav-home {
.nav-about {
&:hover, &:focus-visible {
background-color: light-dark(color-mix(in srgb, var(--accent) 25%, var(--background)), var(--accent));
}
@ -213,12 +206,6 @@
}
}
.nav-webmaster {
&:hover, &:focus-visible {
background-color: light-dark(color-mix(in srgb, var(--green) 25%, var(--background)), var(--green));
}
}
.nav-donate {
&:hover, &:focus-visible {
background-color: light-dark(color-mix(in srgb, var(--purple) 25%, var(--background)), var(--purple));

View file

@ -11,11 +11,11 @@ article#services {
details[styled] {
services-filters {
display: flex;
flex-wrap: wrap;
flex-flow: column wrap;
gap: 1rem;
sf-category, sf-publicity {
margin-right: auto;
checkbox-button-group {
flex-flow: row wrap;
}
}
}

View file

@ -81,6 +81,9 @@
section, article {
padding: .8rem;
p:first-of-type { margin-top: 0; }
p:last-of-type { margin-bottom: 0; }
}
@media screen and (max-width: 60rem) {