forked from ProjectSegfault/website
split buttons into component and format stuff
This commit is contained in:
parent
71d6a9d9cd
commit
7623aed2bc
33
src/lib/LinkButton.svelte
Normal file
33
src/lib/LinkButton.svelte
Normal file
@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
export let url: string;
|
||||
export let icon: string;
|
||||
export let title: string;
|
||||
export let bg: string;
|
||||
export let color: string;
|
||||
</script>
|
||||
|
||||
<a href={url} style="background-color: {bg}; color: {color};">
|
||||
{#if icon}
|
||||
<div class={icon} />
|
||||
{/if}
|
||||
{title}
|
||||
</a>
|
||||
|
||||
<style>
|
||||
a {
|
||||
text-decoration: none;
|
||||
background-color: var(--accent);
|
||||
padding: 8px 1em 8px 1em;
|
||||
color: var(--primary);
|
||||
border-radius: 10px;
|
||||
transition: filter 0.25s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: fit-content;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
filter: brightness(125%);
|
||||
}
|
||||
</style>
|
@ -3,6 +3,10 @@ title: Donate to Project Segfault
|
||||
description: The ways you can donate to us and more.
|
||||
---
|
||||
|
||||
<script>
|
||||
import LinkButton from "$lib/LinkButton.svelte";
|
||||
</script>
|
||||
|
||||
# { title }
|
||||
|
||||
{ description }
|
||||
@ -11,30 +15,27 @@ description: The ways you can donate to us and more.
|
||||
|
||||
If you donate, we will be more motivated to work on the server and host more stuff and maybe even get more hardware. We really recommend you donate any spare money you have if you enjoy or use our services on a daily basis. Thanks!
|
||||
|
||||
# Donation Links
|
||||
## Donation links
|
||||
|
||||
## Credit Card
|
||||
### Credit Card
|
||||
|
||||
<div class="buttons">
|
||||
<a href="https://liberapay.com/ProjectSegfault/donate">
|
||||
<div class="i-simple-icons:liberapay"/>Donate</a>
|
||||
</div>
|
||||
<LinkButton url="https://liberapay.com/ProjectSegfault/donate" icon="i-simple-icons:liberapay" title="Donate" bg="#F6C915" color="#151515" />
|
||||
|
||||
## Cryptos
|
||||
### Cryptocurrency
|
||||
|
||||
### You can use our [domain name](https://projectsegfau.lt) as a crypto wallet address in supported OpenAlias Clients such as [MyMonero](https://mymonero.com/), [Electrum](https://electrum.org/) and [Electrum-LTC](https://electrum-ltc.org/).
|
||||
You can use our [domain name](https://projectsegfau.lt) as a crypto wallet address in supported OpenAlias clients such as [MyMonero](https://mymonero.com/), [Electrum](https://electrum.org/) and [Electrum-LTC](https://electrum-ltc.org/).
|
||||
|
||||
### Monero
|
||||
#### Monero
|
||||
|
||||
Address: `47L7Qsto7XcifY3CdG18ySe5Tt83kpFLDLve9jQwbc9taPBLNGv6ZrJNUKpMG9Nj9zHgCZ4FQMSyt75e8Jvx12JFLtJyFdA`
|
||||
![Monero QR code](/Monero.png)
|
||||
|
||||
### Bitcoin
|
||||
#### Bitcoin
|
||||
|
||||
Address: `bc1qrc8ywgp95a6p3zausp4nff70qzstp6h8z86sxd`
|
||||
![Bitcoin QR code](/Bitcoin.png)
|
||||
|
||||
### Litecoin
|
||||
#### Litecoin
|
||||
|
||||
Address: `ltc1qn3ald586h2ntt0n3zkvwsmju2e5vndgtvvgatj`
|
||||
![Litecoin QR code](/Litecoin.png)
|
||||
@ -45,40 +46,4 @@ _You can find all of our financial reports on [our transparency repository on Gi
|
||||
code {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.money {
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 452px) {
|
||||
.buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
html {
|
||||
--accent: #F6C915;
|
||||
}
|
||||
|
||||
html.light {
|
||||
--accent: #F6C915;
|
||||
|
||||
}
|
||||
|
||||
.buttons a {
|
||||
text-decoration: none;
|
||||
background-color: var(--accent);
|
||||
padding: 8px 1em 8px 1em;
|
||||
color: var(--primary);
|
||||
border-radius: 10px;
|
||||
transition: filter 0.25s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.buttons a:hover {
|
||||
filter: brightness(125%);
|
||||
}
|
||||
</style>
|
||||
|
@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import SvelteSeo from "svelte-seo";
|
||||
import Hero from "$lib/Hero.svelte";
|
||||
import LinkButton from "$lib/LinkButton.svelte";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
let description: string = "Open source development and hosted services.";
|
||||
@ -24,12 +25,13 @@
|
||||
marginTop="7"
|
||||
>
|
||||
<div class="buttons">
|
||||
<a href="/instances">Explore our services</a>
|
||||
<a href="/projects">Explore our projects</a>
|
||||
<a href="/donate"
|
||||
><div class="i-fa6-solid:money-bill" />
|
||||
Donate</a
|
||||
>
|
||||
<LinkButton url="/instances" title="Explore our services" />
|
||||
<LinkButton url="/projects" title="Explore our projects" />
|
||||
<LinkButton
|
||||
url="/donate"
|
||||
icon="i-fa6-solid:money-bill"
|
||||
title="Donate"
|
||||
/>
|
||||
</div>
|
||||
</Hero>
|
||||
|
||||
@ -107,22 +109,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.buttons a {
|
||||
text-decoration: none;
|
||||
background-color: var(--accent);
|
||||
padding: 8px 1em 8px 1em;
|
||||
color: var(--primary);
|
||||
border-radius: 10px;
|
||||
transition: filter 0.25s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.buttons a:hover {
|
||||
filter: brightness(125%);
|
||||
}
|
||||
|
||||
.announcement-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
Loading…
Reference in New Issue
Block a user