This commit is contained in:
parent
63d030cb69
commit
a9e15b347d
7 changed files with 49 additions and 33 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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));
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue