revamping the services page
All checks were successful
/ build (push) Successful in 4m35s

This commit is contained in:
Ruben 2025-10-19 23:24:45 -05:00
commit 5834fd1e04
Signed by: sneexy
GPG key ID: 8ECFA045E63BC583
17 changed files with 207 additions and 90 deletions

View file

@ -23,6 +23,7 @@
</footer-section>
<footer-section blurbs>
<p><span style="color: var(--link);">Synth.Download</span> is not affiliated with the Synth species creator <span no-uncap>(Vader-San)</span> in any way, and is simply just a fun little passion site.</p>
<p>By accessing and using Synth.Download and any of our services, you agree to our Privacy Policy and Terms of Service.</p>
<p>Made with love, lack of sleep and procrastination.</p>
<p>♡2025 All wrongs reversed. Please copy and share.</p>
</footer-section>

View file

@ -1,15 +1,15 @@
<details id="frontends" class="styled">
<summary><span class="icon tabler--cloud-network"></span> Frontends <span class="icon tabler--arrow-autofit-height"></span></summary>
<section>
<div id="redlib" class="card redlib">
<h4><a href="#redlib">Redlib</a></h4>
<p>A simple alternative frontend for accessing <a href="https://reddit.com">Reddit</a> content.</p>
<p class="button-container"><a class="button" href="https://reddit.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
</div>
<div id="safetwitch" class="card last safetwitch">
<h4><a href="#safetwitch">SafeTwitch</a></h4>
<p>Alternative frontend for watching live <a href="https://twitch.tv">Twitch</a> streams.</p>
<p class="button-container"><a class="button" href="https://twitch.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
</div>
</section>
</details>
<h2 style="margin-top: .8rem;">Frontends</h2>
<p style="margin-top: -.6rem;">Alternative, faster, privacy-respecting methods of accessing different websites or services contents.</p>
<card-container frontends>
<card-entry redlib>
<h3><img icon src="/assets/synth.download/icons/redlib.svg" alt="Redlib" /> Redlib <icon-tabler planet aria-label="Public, can be used publicly and/or service is entirely client-side."></icon-tabler></h3>
<p desc>A privacy respecting frontend for <a href="https://reddit.com">Reddit</a>.</p>
<p warning><icon-tabler alert-triangle aria-label="Warning"></icon-tabler> This instance may be nonfunctional from time to time.</p>
<buttons-container><a button href="https://reddit.synth.download"><icon-tabler arrow-forward></icon-tabler> Go</a> <a button href="https://github.com/redlib-org/redlib"><icon-tabler brand-git></icon-tabler> Source</a></buttons-container>
</card-entry>
<card-entry safetwitch>
<h3><img icon src="/assets/synth.download/icons/twitch.svg" alt="Twitch" /> SafeTwitch <icon-tabler planet aria-label="Public, can be used publicly and/or service is entirely client-side."></icon-tabler></h3>
<p desc>A privacy respecting frontend for watching live <a href="https://twitch.com">Twitch</a> streams.</p>
<buttons-container><a button href="https://twitch.synth.download"><icon-tabler arrow-forward></icon-tabler> Go</a> <a button href="https://codeberg.org/safetwitch/safetwitch"><icon-tabler brand-git></icon-tabler> Source</a></buttons-container>
</card-entry>
</card-container>

View file

@ -18,7 +18,7 @@
<p>All of our services that we host on Synth.download will be listed here. If you have a suggestion for a service to possibly look into hosting, feel free to poke at <a href="https://sneexy.synth.download">Sneexy</a>!</p>
<p>Any service with <span class="badge">Private</span> listed next to its name means that it's an invite-only service, and/or requires an account for accessibility/complete usage. <small>To boil it down, almost all services will be <span class="badge">Private</span> unless it's a service that has no need for an account such an alternative frontend.</small></p>
{% include "layouts/services/toc.njk" %}
<hr class=solid>
<hr class="solid">
{% include "layouts/services/frontends.njk" %}
{% include "layouts/services/social.njk" %}
{% include "layouts/services/chat.njk" %}

View file

@ -1,33 +1,28 @@
<h2>Social</h2>
<card-container horizontal>
</card-container>
<details id="social" class="styled">
<summary><span class="icon tabler--universe"></span> Social <span class="icon tabler--arrow-autofit-height"></span></summary>
<section>
<div id="sharkey" class="card sharkey">
<h4><a href="#sharkey">Sharkey</a> <span class="badge">Private</span></h4>
<p>Advanced social media software connected to the wider <a href="https://fediverse.info">Fediverse</a> (<a href="https://activitypub.rocks/">ActivityPub</a>), based on <a href="https://misskey-hub.net">Misskey</a> with <a href="https://docs.joinsharkey.org/docs/comparison/misskey">many improvements</a>.</p>
<p class="info-box info"><span class="icon tabler--info-circle"></span> Accounts from this instance shall be reached via <span style="color:var(--link);">@booping.synth.download</span></p>
<p class="button-container"><a class="button" href="/sharkey"><span class="icon tabler--info-circle"></span> Info</a> <a class="button" href="https://booping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
</div>
<div id="iceshrimp" class="card iceshrimp">
<h4><a href="#iceshrimp">Iceshrimp</a> <span class="badge">Private</span></h4>
<p>Another advanced social media software connected to the wider <a href="https://fediverse.info">Fediverse</a> (<a href="https://activitypub.rocks/">ActivityPub</a>), provided as an alternative for those who dislike the Misskey experience or prefer the Mastodon compatibility.</p>
<p class="info-box info"><span class="icon tabler--info-circle"></span> Accounts from this instance shall be reached via <span style="color:var(--link);">@synth.download</span>, wherever supported.</p>
<p class="button-container"><a class="button" href="/iceshrimp"><span class="icon tabler--info-circle"></span> Info</a> <a class="button" href="https://beeping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
</div>
<div id="mastodon" class="card mastodon">
<h4><a href="#mastodon">Mastodon</a> <span class="badge">Private</span></h4>
<p>Calmer social media software connected to the wider <a href="https://fediverse.info">Fediverse</a> (<a href="https://activitypub.rocks/">ActivityPub</a>), it's Mastodon. Running a <a href="https://github.com/melontini/mastodon">light fork</a> of <a href="https://github.com/TheEssem/mastodon">Chuckya</a> which includes features such as emoji reactions.</p>
<p class="info-box info"><span class="icon tabler--info-circle"></span> Accounts from this instance shall be reached via <span style="color:var(--link);">@merping.synth.download</span></p>
<p class="button-container"><a class="button" href="/mastodon"><span class="icon tabler--info-circle"></span> Info</a> <a class="button" href="https://merping.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
</div>
<div id="pds" class="card last pds">
<h4><a href="#pds">PDS</a> <span class="badge">Private</span></h4>
<p>Synth.download's <b>P</b>ersonal <b>D</b>ata <b>S</b>erver, to be used with the Atmosphere (<a href="https://atproto.com">ATProto</a>) and more specifically, <a href="https://bsky.app">Bluesky</a>.</p>
<p class="button-container"><a class="button" href="https://pds.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
</div>
</section>
</details>
<h2 style="margin-top: .8rem;">Social</h2>
<p style="margin-top: -.6rem;">Social media related services <small>(mainly those in the microblogging format)</small> ran and managed by us. Ranges from custom clients for certain platforms to our own social homes.</p>
<card-container social>
<card-entry sharkey>
<h3><img icon src="/assets/synth.download/icons/boopkey.svg" alt="Boopkey!" /> Sharkey <icon-tabler server aria-label="Private, requires user registration in order to access or fully use."></icon-tabler></h3>
<p desc>Advanced, fun, featureful and federated social media platform for the <a href="https://fediverse.info">Fediverse</a>. <small>Based on <a href="https://misskey-hub.net">Misskey</a>.</small></p>
<p info><icon-tabler info-circle aria-label="Information"></icon-tabler> Accounts are located at <span>@booping.synth.download</span></p>
<buttons-container><a button href="https://booping.synth.download"><icon-tabler arrow-forward></icon-tabler> Go</a> <a button href="/fediverse"><icon-tabler info-circle></icon-tabler> Information</a> <a button href="https://activitypub.software/TransFem-org/Sharkey"><icon-tabler brand-git></icon-tabler> Source</a></buttons-container>
</card-entry>
<card-entry mastodon>
<h3><img icon src="/assets/synth.download/icons/merpstodon.svg" alt="Merpstodon!" /> Mastodon <icon-tabler server aria-label="Private, requires user registration in order to access or fully use."></icon-tabler></h3>
<p desc>Traditional, Calmer, more Twitter-like and federated social media platform for the <a href="https://fediverse.info">Fediverse</a>. <small>Runs our own fork with added features.</small></p>
<p info><icon-tabler info-circle aria-label="Information"></icon-tabler> Accounts are located at <span>@merping.synth.download</span></p>
<buttons-container><a button href="https://merping.synth.download"><icon-tabler arrow-forward></icon-tabler> Go</a> <a button href="/fediverse"><icon-tabler info-circle></icon-tabler> Information</a> <a button href="https://github.com/synth-download/mastodon"><icon-tabler brand-git></icon-tabler> Source</a></buttons-container>
</card-entry>
<card-entry iceshrimp dont-suggest>
<h3><img icon src="/assets/synth.download/icons/icesynth.svg" alt="Icesynth!" /> Iceshrimp.NET <icon-tabler server aria-label="Private, requires user registration in order to access or fully use."></icon-tabler></h3>
<p desc>Lightweight, Misskey-inspired software for the <a href="https://fediverse.info">Fediverse</a>.</p>
<p info><icon-tabler info-circle aria-label="Information"></icon-tabler> Accounts are located at <span>@synth.download</span></p>
<p warning><icon-tabler alert-triangle aria-label="Warning"></icon-tabler> We currently do not suggest using this software. Sharkey and Mastodon provide better and more stable user experiences.</p>
<buttons-container><a button href="https://beeping.synth.download"><icon-tabler arrow-forward></icon-tabler> Go</a> <a button href="/fediverse"><icon-tabler info-circle></icon-tabler> Information</a> <a button href="https://iceshrimp.dev/iceshrimp/iceshrimp.net"><icon-tabler brand-git></icon-tabler> Source</a></buttons-container>
</card-entry>
<card-entry pds>
<h3><img icon src="/assets/synth.download/icons/atproto.svg" alt="Atproto" /> PDS <icon-tabler server aria-label="Private, requires user registration in order to access or fully use."></icon-tabler></h3>
<p desc><b>P</b>ersonal <b>D</b>ata <b>S</b>erver, used to store your profile data and interact with applications in the <a href="https://atproto.com">Atmosphere</a>, such as <a href="https://bsky.app">Bluesky</a>.</p>
<buttons-container><a button href="https://pds.synth.download"><icon-tabler arrow-forward></icon-tabler> Go</a> <a button href="https://github.com/bluesky-social/pds"><icon-tabler brand-git></icon-tabler> Source</a></buttons-container>
</card-entry>
</card-container>

View file

@ -16,6 +16,7 @@
<h3>Font</h3>
<radio-button-group aria-label="Font selector" role="radiogroup">
<label for="font-monospace" style="font-family: monospace !important;"><input type="radio" id="font-monospace" name="font-setting" value="monospace" checked>Monospace</label>
<label for="font-system" style="font-family: system-ui, -apple-system !important;"><input type="radio" id="font-system" name="font-setting" value="system">System UI</label>
<label for="font-sserif" style="font-family: sans-serif !important;"><input type="radio" id="font-sserif" name="font-setting" value="sserif">Sans Serif</label>
<label for="font-serif" style="font-family: serif !important;"><input type="radio" id="font-serif" name="font-setting" value="serif">Serif</label>
</radio-button-group>