Visual changes
- Advanced instances wrap around and are comma-separated - Body text is darker on dark theme and lighter on light theme - Added icons next to cryptocurrencies in `/donate` - Reduced bottom margin on headers so they are closer to body text - Made the theme toggle look like a button
This commit is contained in:
parent
b8efde379d
commit
b7f5941313
|
|
@ -2,7 +2,9 @@
|
|||
<h1 class="text-5xl font-extrabold text-accent my-0 border-b-0 pb-0">
|
||||
Project Segfault
|
||||
</h1>
|
||||
<p class="text-2xl">Open source development and hosted services.</p>
|
||||
<p class="text-2xl text-text">
|
||||
Open source development and hosted services.
|
||||
</p>
|
||||
<div class="flex gap-4 flex-col w-full sm:(flex-row justify-center)">
|
||||
<a
|
||||
href="/instances"
|
||||
|
|
|
|||
|
|
@ -17,12 +17,19 @@
|
|||
|
||||
<button
|
||||
on:click={toggle}
|
||||
class="text-text flex items-center text-sm"
|
||||
class="theme-toggle button text-text flex items-center text-sm"
|
||||
aria-label="Toggle theme"
|
||||
>
|
||||
<div
|
||||
class="i-ic:{theme === 'dark'
|
||||
? 'outline-light-mode'
|
||||
: 'outline-dark-mode'} h-4 w-4"
|
||||
/>
|
||||
<span class="ml-2 navPlus1:(hidden)">Toggle theme</span>
|
||||
<span class="navPlus1:(hidden)">Toggle theme</span>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.theme-toggle:hover {
|
||||
@apply brightness-70;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<a
|
||||
href="https://liberapay.com/ProjectSegfault/donate"
|
||||
class="button !bg-amber !text-black w-fit"
|
||||
><div class="i-simple-icons:liberapay" />
|
||||
><div class="va-icon i-simple-icons:liberapay" />
|
||||
Liberapay</a
|
||||
>
|
||||
|
||||
|
|
@ -46,7 +46,13 @@
|
|||
and <a href="https://electrum-ltc.org">Electrum-LTC</a>.
|
||||
</p>
|
||||
|
||||
<h4>Monero</h4>
|
||||
<p class="text-text font-bold mt-4">
|
||||
<i
|
||||
class="va-icon i-simple-icons:monero inline-block text-[#F60]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Monero
|
||||
</p>
|
||||
|
||||
<CryptoInfo
|
||||
name="Monero"
|
||||
|
|
@ -54,7 +60,13 @@
|
|||
qr="Monero.png"
|
||||
/>
|
||||
|
||||
<h4>Bitcoin</h4>
|
||||
<p class="text-text font-bold mt-4">
|
||||
<i
|
||||
class="va-icon i-simple-icons:bitcoin inline-block text-[#F7931A]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Bitcoin
|
||||
</p>
|
||||
|
||||
<CryptoInfo
|
||||
name="Bitcoin"
|
||||
|
|
@ -62,10 +74,22 @@
|
|||
qr="Bitcoin.png"
|
||||
/>
|
||||
|
||||
<h4>Litecoin</h4>
|
||||
<p class="text-text font-bold mt-4">
|
||||
<i
|
||||
class="va-icon i-simple-icons:litecoin inline-block text-[#A6A9AA]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Litecoin
|
||||
</p>
|
||||
|
||||
<CryptoInfo
|
||||
name="Litecoin"
|
||||
address="ltc1qn3ald586h2ntt0n3zkvwsmju2e5vndgtvvgatj"
|
||||
qr="Litecoin.png"
|
||||
/>
|
||||
|
||||
<style>
|
||||
.va-icon {
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,50 +18,56 @@
|
|||
{#each data.instances as category}
|
||||
{#each category.data as instance}
|
||||
<h2>{instance.name}</h2>
|
||||
<div class="flex flex-row gap-2">
|
||||
<ul class="instances flex flex-row flex-wrap gap-2">
|
||||
{#if instance.geo}
|
||||
<a href={instance.geo}>GeoDNS</a>
|
||||
<li><a href={instance.geo}>GeoDNS</a></li>
|
||||
{/if}
|
||||
{#if instance.eu}
|
||||
<a href={instance.eu}>EU</a>
|
||||
<li><a href={instance.eu}>EU</a></li>
|
||||
{/if}
|
||||
{#if instance.us}
|
||||
<a href={instance.us}>US</a>
|
||||
<li><a href={instance.us}>US</a></li>
|
||||
{/if}
|
||||
{#if instance.in}
|
||||
<a href={instance.in}>IN</a>
|
||||
<li><a href={instance.in}>IN</a></li>
|
||||
{/if}
|
||||
{#if instance.bp}
|
||||
<a href={instance.bp}>Backup</a>
|
||||
<li><a href={instance.bp}>Backup</a></li>
|
||||
{/if}
|
||||
{#if instance.short_geo}
|
||||
<a href={instance.short_geo}>GeoDNS (Short URL)</a>
|
||||
<li><a href={instance.short_geo}>GeoDNS (Short URL)</a></li>
|
||||
{/if}
|
||||
{#if instance.short_eu}
|
||||
<a href={instance.short_eu}>EU (Short URL)</a>
|
||||
<li><a href={instance.short_eu}>EU (Short URL)</a></li>
|
||||
{/if}
|
||||
{#if instance.short_us}
|
||||
<a href={instance.short_us}>US (Short URL)</a>
|
||||
<li><a href={instance.short_us}>US (Short URL)</a></li>
|
||||
{/if}
|
||||
{#if instance.short_in}
|
||||
<a href={instance.short_in}>IN (Short URL)</a>
|
||||
<li><a href={instance.short_in}>IN (Short URL)</a></li>
|
||||
{/if}
|
||||
{#if instance.short_bp}
|
||||
<a href={instance.short_bp}>Backup (Short URL)</a>
|
||||
<li><a href={instance.short_bp}>Backup (Short URL)</a></li>
|
||||
{/if}
|
||||
{#if instance.tor}
|
||||
<a href={instance.tor}>Tor</a>
|
||||
<li><a href={instance.tor}>Tor</a></li>
|
||||
{/if}
|
||||
{#if instance.torBp}
|
||||
<a href={instance.torBp}>Tor backup</a>
|
||||
<li><a href={instance.torBp}>Tor backup</a></li>
|
||||
{/if}
|
||||
{#if instance.i2p}
|
||||
<a href={instance.i2p}>I2P</a>
|
||||
<li><a href={instance.i2p}>I2P</a></li>
|
||||
{/if}
|
||||
{#if instance.i2pBp}
|
||||
<a href={instance.i2pBp}>I2P backup</a>
|
||||
<li><a href={instance.i2pBp}>I2P backup</a></li>
|
||||
{/if}
|
||||
</div>
|
||||
</ul>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.instances li:not(:last-child)::after {
|
||||
content: ",";
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
},
|
||||
{
|
||||
"name": "py_",
|
||||
"description": "Self-proclaimed front-end dev",
|
||||
"description": "self-proclaimed front-end dev",
|
||||
"position": "Webdev",
|
||||
"website": "https://py.p.psf.lt",
|
||||
"matrix": "https://matrix.to/#/@py_:catgirl.cloud",
|
||||
|
|
|
|||
Loading…
Reference in New Issue