Compare commits

...

2 commits

Author SHA1 Message Date
6ce26f68cb
revamped services page (with temp ugly filters menu
All checks were successful
/ build (push) Successful in 4m36s
2025-10-26 00:36:55 -05:00
036ab72c9c
status page link in footer 2025-10-25 13:41:46 -05:00
22 changed files with 494 additions and 341 deletions

View file

@ -18,7 +18,9 @@
<a href="/privacy">Privacy Policy</a>
<a href="/tos">Terms of Service</a>
<a href="/admins">Administrators</a>
<a href="https://forged.synth.download/synth.download/site">Website source</a>
<a href="https://status.synth.download">Uptime Status</a>
<a href="https://forged.synth.download/sd/site">Website source</a>
<a href="https://forged.synth.download/sd/synth.download">Server configurations</a>
<span><a href="https://synthspecies.com">Synth species</a> created by <a href="https://www.furaffinity.net/user/vader-san" no-uncap>Vader-San</a></span>
</footer-section>
<footer-section blurbs>

View file

@ -14,9 +14,6 @@
<li class="nav-services">
<a href="/services"><icon-tabler server-cog></icon-tabler> <span class="text">Services</span></a>
</li>
<li class="nav-webmaster">
<a href="/admins"><icon-tabler user></icon-tabler> <span class="text">Admins</span></a>
</li>
<li class="nav-donate">
<a href="/donate"><icon-tabler currency-dollar></icon-tabler> <span class="text">Donate</span></a>
</li>
@ -24,7 +21,6 @@
</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-services" href="/services"><icon-tabler server-cog></icon-tabler> <span>Services</span></a>
<a class="nav-base nav-links nav-webmaster" href="/admins"><icon-tabler user></icon-tabler> <span>Admins</span></a>
<a class="nav-base nav-links nav-donate" href="/donate"><icon-tabler currency-dollar></icon-tabler> <span>Donate</span></a>
</navbar-left>
<navbar-right>

View file

@ -1,15 +0,0 @@
<details id="chat" class="styled">
<summary><span class="icon tabler--message-chatbot"></span> Chat <span class="icon tabler--arrow-autofit-height"></span></summary>
<section>
<div id="xmpp" class="card xmpp">
<h4><a href="#xmpp">XMPP</a> <span class="badge">Private</span></h4>
<p>Generic XMPP server ran by us, powered with ejabberd. Simply point your client to <code>synth.download</code>.</p>
<p style="margin-bottom:unset !important;"><a href="https://compliance.conversations.im/server/synth.download"><img src="https://compliance.conversations.im/badge/synth.download"></a></p>
</div>
<div id="xmpp" class="card last email">
<h4><a href="#email">Email</a> <span class="badge">Private</span></h4>
<p>A mailserver to get your own synth.download email. Mailserver run by us within a container, and probably blocked by Outlook. <small>Gmail <i>probably</i> works, though!... I hate email.</small></p>
<p>Can be used for <a href="https://delta.chat">Delta Chat</a>.</p>
</div>
</section>
</details>

View file

@ -0,0 +1,30 @@
<details styled>
<summary>
Filters
<icon-tabler arrow-autofit-height></icon-tabler>
</summary>
<details-content>
<services-filters>
<sf-category>
<h3>Category</h3>
<checkbox-button-group role="group">
<label for="service-frontend"><input type="checkbox" id="service-frontend" name="service-frontend" checked><icon-tabler cloud-network></icon-tabler> Frontend</label>
<label for="service-search"><input type="checkbox" id="service-search" name="service-search" checked><icon-tabler search></icon-tabler> Search</label>
<label for="service-social"><input type="checkbox" id="service-social" name="service-social" checked><icon-tabler social></icon-tabler> Social</label>
<label for="service-fun"><input type="checkbox" id="service-fun" name="service-fun" checked><icon-tabler mood-smile></icon-tabler> Fun</label>
<label for="service-chat"><input type="checkbox" id="service-chat" name="service-chat" checked><icon-tabler message></icon-tabler> Chat</label>
<label for="service-sharing"><input type="checkbox" id="service-sharing" name="service-sharing" checked><icon-tabler database-share></icon-tabler> Sharing</label>
<label for="service-git"><input type="checkbox" id="service-git" name="service-git" checked><icon-tabler brand-git></icon-tabler> Git</label>
<label for="service-personal"><input type="checkbox" id="service-personal" name="service-personal" checked><icon-tabler user></icon-tabler> Personal</label>
</checkbox-button-group>
</sf-category>
<sf-publicity>
<h3>Publicity</h3>
<checkbox-button-group role="group">
<label for="service-public"><input type="checkbox" id="service-public" name="service-public" checked><icon-tabler planet></icon-tabler> Public</label>
<label for="service-private"><input type="checkbox" id="service-private" name="service-private" checked><icon-tabler lock></icon-tabler> Private</label>
</checkbox-button-group>
</sf-publicity>
</services-filters>
</details-content>
</details>

View file

@ -1,15 +0,0 @@
<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/icons/redlib.svg" alt="" /> 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="" /> 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

@ -1,15 +0,0 @@
<details id="fun" class="styled">
<summary><span class="icon tabler--device-gamepad-2"></span> Fun <span class="icon tabler--arrow-autofit-height"></span></summary>
<section>
<div id="ask-js" class="card ask-js">
<h4><a href="#ask-js">Ask-js</a> <span class="badge">Private</span></h4>
<p>Platform for receiving and answering anonymous questions and answers.</p>
<p class="button-container"><a class="button" href="https://asking.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
</div>
<div id="dark-room" class="card last dark-room">
<h4><a href="#dark-room">A Dark Room</a></h4>
<p>Just a mirror of <a href="https://adarkroom.doublespeakgames.com">A Dark Room</a>, a minimalist and dark text adventure-like game</p>
<p class="button-container"><a class="button" href="https://adarkroom.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
</div>
</section>
</details>

View file

@ -0,0 +1,296 @@
<card-container>
<card-entry redlib>
<h3>
<img icon src="/assets/icons/redlib.svg" alt="">
Redlib
<span status>
<icon-tabler cloud-network aria-label="Frontend"></icon-tabler>
<icon-tabler planet aria-label="Public"></icon-tabler>
</span>
</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" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://github.com/redlib-org/redlib" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<img src="https://status.synth.download/api/badge/19/status?style=flat-square" alt="">
</buttons-container>
</card-entry>
<card-entry safetwitch>
<h3>
<img icon src="/assets/synth.download/icons/twitch.svg" alt="">
SafeTwitch
<span status>
<icon-tabler cloud-network aria-label="Frontend"></icon-tabler>
<icon-tabler planet aria-label="Public"></icon-tabler>
</span>
</h3>
<p desc>A privacy respecting frontend for proxying and watching live <a href="https://twitch.com">Twitch</a> streams.</p>
<buttons-container>
<a button href="https://twitch.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://codeberg.org/safetwitch/safetwitch" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<img src="https://status.synth.download/api/badge/21/status?style=flat-square" alt="">
</buttons-container>
</card-entry>
<card-entry searxng>
<h3>
<img icon src="/assets/synth.download/icons/search.svg" alt="">
SearxNG
<span status>
<icon-tabler search aria-label="Search"></icon-tabler>
<icon-tabler cloud-network aria-label="Frontend"></icon-tabler>
<icon-tabler planet aria-label="Public"></icon-tabler>
</span>
</h3>
<p desc><a href="https://en.wikipedia.org/wiki/Metasearch_engine">Metasearch engine</a> that retrieves web search results from multiple other search engines, while respecting user privacy.</p>
<buttons-container>
<a button href="https://searx.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://codeberg.org/safetwitch/safetwitch" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<img src="https://status.synth.download/api/badge/20/status?style=flat-square" alt="">
</buttons-container>
</card-entry>
<card-entry sharkey>
<h3>
<img icon src="/assets/icons/sharkey.svg" alt="">
Sharkey
<span status>
<icon-tabler social aria-label="Social"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</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" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="/fediverse" aria-label="Information">
<icon-tabler info-circle></icon-tabler>
</a>
<a button href="https://activitypub.software/TransFem-org/Sharkey" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<img src="https://status.synth.download/api/badge/1/status?style=flat-square" alt="">
</buttons-container>
</card-entry>
<card-entry mastodon>
<h3>
<img icon src="/assets/icons/mastodon.svg" alt="">
Mastodon
<span status>
<icon-tabler social aria-label="Social"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</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" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="/fediverse" aria-label="Information">
<icon-tabler info-circle></icon-tabler>
</a>
<a button href="https://github.com/synth-download/mastodon" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<img src="https://status.synth.download/api/badge/5/status?style=flat-square" alt="">
</buttons-container>
</card-entry>
<card-entry iceshrimp advise-against>
<h3>
<img icon src="/assets/icons/iceshrimp.svg" alt="">
Iceshrimp.NET
<span status>
<icon-tabler social aria-label="Social"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</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" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="/fediverse" aria-label="Information">
<icon-tabler info-circle></icon-tabler>
</a>
<a button href="https://iceshrimp.dev/iceshrimp/iceshrimp.net" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<img src="https://status.synth.download/api/badge/9/status?style=flat-square" alt="">
</buttons-container>
</card-entry>
<card-entry pds>
<h3>
<img icon src="/assets/synth.download/icons/atproto.svg" alt="">
PDS
<span status>
<icon-tabler social aria-label="Social"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</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" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://github.com/bluesky-social/pds" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<img src="https://status.synth.download/api/badge/11/status?style=flat-square" alt="">
</card-entry>
<card-entry pl-fe>
<h3>
<img icon src="/assets/synth.download/icons/pl-fe.svg" alt="">
pl-fe
<span status>
<icon-tabler device-desktop-cog aria-label="Client-side service, serves as a client or frontend where all data is accessed and stored on the users device."></icon-tabler>
<icon-tabler social aria-label="Social"></icon-tabler>
<icon-tabler planet aria-label="Public"></icon-tabler>
</span>
</h3>
<p desc>General fediverse compatible client, using a baseline of the Mastodon API with extended support for more APIs and features from other softwares.</small></p>
<buttons-container>
<a button href="https://pl-fe.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://codeberg.org/mkljczk/pl-fe" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
</buttons-container>
</card-entry>
<card-entry phanpy>
<h3>
<img icon src="/assets/icons/phanpy.svg" alt="">
Phanpy
<span status>
<icon-tabler device-desktop-cog aria-label="Client-side service, serves as a client or frontend where all data is accessed and stored on the users device."></icon-tabler>
<icon-tabler social aria-label="Social"></icon-tabler>
<icon-tabler planet aria-label="Public"></icon-tabler>
</span>
</h3>
<p desc>Opinionated Mastodon-API compatible fediverse client. <small>Our own fork with improved support for extra features, such as emoji reactions.</small></p>
<buttons-container>
<a button href="https://phanpy.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://github.com/zenfyrdev/phanpy" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
</buttons-container>
</card-entry>
<card-entry askjs>
<h3>
<img icon src="/assets/synth.download/icons/ask.svg" alt="">
AskJS
<span status>
<icon-tabler mood-smile aria-label="Fun"></icon-tabler>
<icon-tabler social aria-label="Social"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</h3>
<p desc>Anonymous asking site to ask users questions.</p>
<buttons-container>
<a button href="https://asking.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://github.com/ihateblueb/ask-js" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<img src="https://status.synth.download/api/badge/16/status?style=flat-square" alt="">
</buttons-container>
</card-entry>
<card-entry xmpp>
<h3>
<img icon src="/assets/icons/xmpp.svg" alt="">
XMPP
<span status>
<icon-tabler message aria-label="Chat"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</h3>
<p desc>Our <a href="https://ejabberd.im">Ejabberd</a> server, for the <a href="https://xmpp.org">XMPP chat protocol</a>.</p>
<buttons-container>
<a button href="https://github.com/processone/ejabberd" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<a href="https://compliance.conversations.im/server/synth.download"><img src="https://compliance.conversations.im/badge/synth.download" alt="XMPP Specifications compliance: 100%"></a>
<img src="https://status.synth.download/api/badge/13/status?style=flat-square" alt="">
</buttons-container>
</card-entry>
<card-entry forgejo>
<h3>
<img icon src="/assets/icons/forgejo.svg" alt="">
Forgejo
<span status>
<icon-tabler brand-git aria-label="Git"></icon-tabler>
<icon-tabler database-share aria-label="Sharing"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</h3>
<p desc>Self-hosted Git forge for storing code repositories.</p>
<buttons-container>
<a button href="https://forged.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://codeberg.org/forgejo/forgejo" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<img src="https://status.synth.download/api/badge/12/status?style=flat-square" alt="">
</buttons-container>
</card-entry>
<card-entry vaultwarden>
<h3>
<img icon src="/assets/icons/vaultwarden.svg" alt="">
Vaultwarden
<span status>
<icon-tabler user aria-label="Personal"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</h3>
<p desc>A Bitwarden-compatible password manager, hosted by us.</p>
<buttons-container>
<a button href="https://vault.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://github.com/dani-garcia/vaultwarden" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<img src="https://status.synth.download/api/badge/24/status?style=flat-square" alt="">
</buttons-container>
</card-entry>
<card-entry freshrss>
<h3>
<img icon src="/assets/icons/freshrss.svg" alt="">
FreshRSS
<span status>
<icon-tabler user aria-label="Personal"></icon-tabler>
<icon-tabler lock aria-label="Private, requires user registration for full access or complete usage. Refer to the information page, if linked."></icon-tabler>
</span>
</h3>
<p desc>An online RSS reader and news aggregator.</p>
<buttons-container>
<a button href="https://rss.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a button href="https://github.com/FreshRSS/FreshRSS" aria-label="Source">
<icon-tabler brand-git></icon-tabler>
</a>
<img src="https://status.synth.download/api/badge/15/status?style=flat-square" alt="">
</buttons-container>
</card-entry>
</card-container>

View file

@ -1,10 +0,0 @@
<details id="other" class="styled">
<summary><span class="icon tabler--server-cog"></span> Other <span class="icon tabler--arrow-autofit-height"></span></summary>
<section>
<div id="zitadel" class="card last zitadel">
<h4><a href="#zitadel">ZITADEL</a> <span class="badge">Private</span></h4>
<p>Our authenticator to access multiple services using one account... or an attempt to. Currently only used for FreshRSS and Forgejo, and hoping to expand more with this.</p>
<p class="button-container"><a class="button" href="https://auth.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
</div>
</section>
</details>

View file

@ -1,16 +0,0 @@
<details id="personal" class="styled">
<summary><span class="icon tabler--user-heart"></span> Personal <span class="icon tabler--arrow-autofit-height"></span></summary>
<section>
<div id="vaultwarden" class="card vaultwarden">
<h4><a href="#vaultwarden">Vaultwarden</a> <span class="badge">Private</span></h4>
<p>Bitwarden-compatible password manager with 2FA support and all that good stuff.</p>
<p class="button-container"><a class="button" href="https://vault.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
</div>
<div id="freshrss" class="card last freshrss">
<h4><a href="#freshrss">FreshRSS</a> <span class="badge">Private</span></h4>
<p>Online RSS and Atom compatible feed reader.</p>
<p class="info-box warn"><span class="icon tabler--alert-triangle"></span> Log in through ZITADEL.</p>
<p class="button-container"><a class="button" href="https://rss.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
</div>
</section>
</details>

View file

@ -15,16 +15,11 @@
</div>
<section>
<h1><a href="#services">Services</a></h1>
<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">
{% include "layouts/services/frontends.njk" %}
{% include "layouts/services/social.njk" %}
{% include "layouts/services/chat.njk" %}
{% include "layouts/services/sharing.njk" %}
{% include "layouts/services/fun.njk" %}
{% include "layouts/services/personal.njk" %}
{% include "layouts/services/other.njk" %}
<p>This page lists all services hoted on Synth.Download for both public and private member usage. Statuses, service announcements, incidents and general uptime information will be monitored and reported at <a href="https://status.synth.download">our status page</a>.</p>
<p>All services and systems for Synth.Download are manually upgraded and rebooted every week on the weekends in our available times. If services are down, please give it a few minutes before trying again.</p>
<p>To suggest a service to be run by us, please contact <span link-color>synth@synth.download</span> or poke at <a href="/admins">an admin</a>. Same case for if there is anything wrong.</p>
<p><small>For those curious on our systems or configurations, refer to <a href="/about">our about page</a>.</small></p>
{% include "layouts/services/filters.njk" %}
{% include "layouts/services/list.njk" %}
</section>
</article>

View file

@ -1,10 +0,0 @@
<details id="sharing" class="styled">
<summary><span class="icon tabler--database-share"></span> Sharing <span class="icon tabler--arrow-autofit-height"></span></summary>
<section>
<div id="forgejo" class="card last forgejo">
<h4><a href="#forgejo">Forgejo</a> <span class="badge">Private</span></h4>
<p>A home for all of your Git repositories.</p>
<p class="button-container"><a class="button" href="https://forged.synth.download"><span class="icon tabler--arrow-forward"></span> Go</a></p>
</div>
</section>
</details>

View file

@ -1,38 +0,0 @@
<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/icons/sharkey.svg" alt="" /> Sharkey <icon-tabler lock aria-label="Private, requires user registration in order to access or have complete usage with."></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/icons/mastodon.svg" alt="" /> Mastodon <icon-tabler lock aria-label="Private, requires user registration in order to access or have complete usage with."></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/icons/iceshrimp.svg" alt="" /> Iceshrimp.NET <icon-tabler lock aria-label="Private, requires user registration in order to access or have complete usage with."></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="" /> PDS <icon-tabler lock aria-label="Private, requires user registration in order to access or have complete usage with."></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-entry pl-fe>
<h3><img icon src="/assets/synth.download/icons/pl-fe.svg" alt="" /> pl-fe <icon-tabler planet aria-label="Public, can be used publicly and/or service is entirely client-side."></icon-tabler></h3>
<p desc>General fediverse compatible client, using a baseline of the Mastodon API with extended support for more APIs and features from other softwares.</small></p>
<buttons-container><a button href="https://pl-fe.synth.download"><icon-tabler arrow-forward></icon-tabler> Go</a> <a button href="https://codeberg.org/mkljczk/pl-fe"><icon-tabler brand-git></icon-tabler> Source</a></buttons-container>
</card-entry>
<card-entry phanpy>
<h3><img icon src="/assets/icons/phanpy.svg" alt="" /> Phanpy <icon-tabler planet aria-label="Public, can be used publicly and/or service is entirely client-side."></icon-tabler></h3>
<p desc>Opinionated Mastodon-API compatible fediverse client. <small>Our own fork with improved support for extra features, such as emoji reactions.</small></p>
<buttons-container><a button href="https://phanpy.synth.download"><icon-tabler arrow-forward></icon-tabler> Go</a> <a button href="https://github.com/zenfyrdev/phanpy"><icon-tabler brand-git></icon-tabler> Source</a></buttons-container>
</card-entry>
</card-container>

View file

@ -1,87 +0,0 @@
<details class="styled" style="margin-top: 2rem; margin-bottom: 1rem">
<summary>
<span class="icon tabler--list-tree"></span>Table-of-Contents
<span class="icon tabler--arrow-autofit-height"></span>
</summary>
<section>
<ul>
<li>
<a href="#frontends">Frontends</a>
</li>
<ul>
<li>
<a href="#redlib">Redlib</a>
</li>
<li>
<a href="#safetwitch">SafeTwitch</a>
</li>
</ul>
<li>
<a href="#social">Social</a>
</li>
<ul>
<li>
<a href="#sharkey">Sharkey</a>
</li>
<li>
<a href="#iceshrimp">Iceshrimp</a>
</li>
<li>
<a href="#mastodon">Mastodon</a>
</li>
<li>
<a href="#pds">PDS</a>
</li>
</ul>
<li>
<a href="#chat">Chat</a>
</li>
<ul>
<li>
<a href="#xmpp">XMPP</a>
</li>
<li>
<a href="#email">Email</a>
</li>
</ul>
<li>
<a href="#sharing">Sharing</a>
</li>
<ul>
<li>
<a href="#forgejo">Forgejo</a>
</li>
</ul>
<li>
<a href="#fun">Fun</a>
</li>
<ul>
<li>
<a href="#ask-js">Ask-js</a>
</li>
<li>
<a href="#dark-room">A Dark Room</a>
</li>
</ul>
<li>
<a href="#personal">Personal</a>
</li>
<ul>
<li>
<a href="#vaultwarden">Vaultwarden</a>
</li>
<li>
<a href="#freshrss">FreshRSS</a>
</li>
</ul>
<li>
<a href="#other">Other</a>
</li>
<ul>
<li>
<a href="#zitadel">ZITADEL</a>
</li>
</ul>
</ul>
</section>
</details>

View file

@ -119,13 +119,12 @@ h3 a, h4 a {
font-size: 1.4rem;
}
/* text */
p,
li,
button {
.icon {
transform: scale(1.13);
}
[accent] {
color: var(--accent);
}
[link-color] {
color: var(--link);
}
/* information colors */
@ -208,55 +207,41 @@ li {
}
/* styled details elements */
details.styled {
summary {
span {
padding-right: .6rem;
transform: translateY(.1rem);
vertical-align: middle;
details {
&[styled] {
background-color: light-dark(color-mix(in srgb, var(--accent) 5%, transparent), color-mix(in srgb, var(--accent) 3%, transparent));
border-radius: .8rem .4rem .8rem .4rem;
border: .13rem solid var(--accent);
margin-bottom: 1rem;
summary {
background: linear-gradient(color-mix(in srgb, var(--accent) 2%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
border-bottom: unset;
cursor: pointer;
padding: .45rem;
icon-tabler[arrow-autofit-height] {
float: right;
}
&::marker {
content: "";
}
}
.tabler--arrow-autofit-height:last-of-type {
margin-left: auto;
details-content {
display: block;
padding: .8rem;
p:first-of-type { margin-top: 0; }
p:last-of-type { margin-bottom: 0; }
}
background: linear-gradient(color-mix(in srgb, var(--accent) 3%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
border-bottom: unset !important;
cursor: pointer;
padding: .65rem;
}
section {
padding: 1rem;
text-align: start !important;
ul {
margin: 0 0 0 -.5rem;
&[open] {
summary {
border-bottom: .1rem solid var(--accent);
}
}
p:first-of-type {
margin-top: 0 !important;
}
p:last-of-type {
margin-bottom: 0 !important;
}
}
.last {
margin-bottom: .8rem;
}
background-color: color-mix(in srgb, var(--accent) 3%, transparent);
border-radius: .8rem .4rem .8rem .4rem;
border: .13rem solid var(--accent);
margin-top: 1.3rem;
overflow: clip;
}
details.styled[open] {
summary {
border-bottom: .1rem solid var(--accent) !important;
}
}
@ -329,7 +314,7 @@ details.cw[open] {
/* card styling */
card-container {
display: grid;
gap: 1rem;
gap: 1.2rem;
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
margin-bottom: 1.5rem;
@ -339,12 +324,13 @@ card-container {
border: .15rem solid var(--border);
display: flex;
flex-flow: column;
height: auto;
padding: .6rem;
width: auto;
h3 {
margin-top: 0;
margin-bottom: .6rem;
margin-bottom: 1rem;
[icon] {
height: 1.4rem;
@ -352,12 +338,19 @@ card-container {
vertical-align: top;
}
icon-tabler {
span[status] {
display: flex;
flex-direction: row;
float: right;
vertical-align: middle;
&[lock], &[server] {
color: var(--link);
icon-tabler {
margin-left: .3rem;
&[lock] {
color: var(--link);
}
&[device-desktop-cog] {
color: var(--blue);
}
}
}
}
@ -373,9 +366,10 @@ card-container {
p {
margin-top: 0;
margin-bottom: 1rem;
}
&[dont-suggest] {
&[advise-against] {
opacity: .7;
transition: 1s;
border-color: color-mix(in srgb, var(--warning) 30%, transparent);
@ -387,6 +381,25 @@ card-container {
buttons-container {
margin-top: auto;
img {
align-self: center;
border-radius: 10rem;
height: 1.3rem;
vertical-align: middle;
width: auto;
}
a {
icon-tabler {
pointer-events: none;
}
&:has(img[src^="https://compliance"]) {
align-self: center;
font-size: 0;
}
}
}
}
}
@ -436,11 +449,6 @@ audio {
border-radius: 3rem;
}
/* summary styling */
summary {
display: flex;
}
/* button link styling */
.button {
background-color: color-mix(in srgb, var(--accent) 25%, transparent);
@ -632,7 +640,6 @@ html:has(input[type="checkbox"]#spoil-nsfw-content:checked) {
.alt-popup {
position: fixed;
text-transform: none !important;
background-color: color-mix(in srgb, var(--background) 85%, transparent);
backdrop-filter: blur(.5rem);
color: var(--foreground);
@ -747,34 +754,4 @@ checkbox-button-group {
position: absolute;
pointer-events: none;
}
}
/* atmedia*/
@media screen and (max-width: 1083px) {
details.styled {
section {
/* reset margins for list on mobile view */
ul {
margin: unset !important;
}
}
}
}
/* different styling for elements in dark mode
must also be applied to the html element below - needed as to not break with users using their browser settings or manually setting the theme through the website */
html:not([data-theme="light"]) {
@media (prefers-color-scheme: dark) {
.button:hover {
color: var(--background);
}
}
}
html[data-theme="dark"] {
.button:hover {
color: var(--background);
}
}

View file

@ -42,6 +42,7 @@ icon-tabler {
&[corner-down-right] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 6v6a3 3 0 0 0 3 3h10l-4-4m0 8l4-4'/%3E%3C/svg%3E"); }
&[currency-dollar] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16.7 8A3 3 0 0 0 14 6h-4a3 3 0 0 0 0 6h4a3 3 0 0 1 0 6h-4a3 3 0 0 1-2.7-2M12 3v3m0 12v3'/%3E%3C/svg%3E"); }
&[database-share] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M4 6c0 1.657 3.582 3 8 3s8-1.343 8-3s-3.582-3-8-3s-8 1.343-8 3'/%3E%3Cpath d='M4 6v6c0 1.657 3.582 3 8 3q.541 0 1.065-.026M20 13V6'/%3E%3Cpath d='M4 12v6c0 1.657 3.582 3 8 3m4 1l5-5m0 4.5V17h-4.5'/%3E%3C/g%3E%3C/svg%3E"); }
&[device-desktop-cog] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 16H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v7M7 20h5m-3-4v4m8.001-1a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V17m0 4v1.5m3.031-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75'/%3E%3C/svg%3E"); }
&[device-gamepad-2] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 5h3.5a5 5 0 0 1 0 10H10l-4.015 4.227a2.3 2.3 0 0 1-3.923-2.035l1.634-8.173A5 5 0 0 1 8.6 5z'/%3E%3Cpath d='m14 15l4.07 4.284a2.3 2.3 0 0 0 3.925-2.023l-1.6-8.232M8 9v2m-1-1h2m5 0h2'/%3E%3C/g%3E%3C/svg%3E"); }
&[device-mobile] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2zm5-1h2m-1 13v.01'/%3E%3C/svg%3E"); }
&[external-link] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5'/%3E%3C/svg%3E"); }
@ -58,6 +59,7 @@ icon-tabler {
&[mail] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='m3 7l9 6l9-6'/%3E%3C/g%3E%3C/svg%3E"); }
&[maximize] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8V6a2 2 0 0 1 2-2h2M4 16v2a2 2 0 0 0 2 2h2m8-16h2a2 2 0 0 1 2 2v2m-4 12h2a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E"); }
&[message-chatbot] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3zM9.5 9h.01m4.99 0h.01'/%3E%3Cpath d='M9.5 13a3.5 3.5 0 0 0 5 0'/%3E%3C/g%3E%3C/svg%3E"); }
&[message] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 9h8m-8 4h6m4-9a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-5l-5 3v-3H6a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3z'/%3E%3C/svg%3E"); }
&[minimize] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 19v-2a2 2 0 0 1 2-2h2M15 5v2a2 2 0 0 0 2 2h2M5 15h2a2 2 0 0 1 2 2v2M5 9h2a2 2 0 0 0 2-2V5'/%3E%3C/svg%3E"); }
&[mood-empty] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m6-2h.01M15 10h.01M9 15h6'/%3E%3C/svg%3E"); }
&[mood-look-up] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m6-4h.01M15 8h.01M11 12h2'/%3E%3C/svg%3E"); }
@ -70,10 +72,12 @@ icon-tabler {
&[robot-face] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M6 5h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2'/%3E%3Cpath d='M9 16q1.5 1 3 1c1.5 0 2-.333 3-1M9 7L8 3m7 4l1-4m-7 9v-1m6 1v-1'/%3E%3C/g%3E%3C/svg%3E"); }
&[rosette-discount-check] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M5 7.2A2.2 2.2 0 0 1 7.2 5h1a2.2 2.2 0 0 0 1.55-.64l.7-.7a2.2 2.2 0 0 1 3.12 0l.7.7c.412.41.97.64 1.55.64h1a2.2 2.2 0 0 1 2.2 2.2v1c0 .58.23 1.138.64 1.55l.7.7a2.2 2.2 0 0 1 0 3.12l-.7.7a2.2 2.2 0 0 0-.64 1.55v1a2.2 2.2 0 0 1-2.2 2.2h-1a2.2 2.2 0 0 0-1.55.64l-.7.7a2.2 2.2 0 0 1-3.12 0l-.7-.7a2.2 2.2 0 0 0-1.55-.64h-1a2.2 2.2 0 0 1-2.2-2.2v-1a2.2 2.2 0 0 0-.64-1.55l-.7-.7a2.2 2.2 0 0 1 0-3.12l.7-.7A2.2 2.2 0 0 0 5 8.2z'/%3E%3Cpath d='m9 12l2 2l4-4'/%3E%3C/g%3E%3C/svg%3E"); }
&[rss] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 4a16 16 0 0 1 16 16M4 11a9 9 0 0 1 9 9'/%3E%3C/svg%3E"); }
&[search] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6'/%3E%3C/svg%3E"); }
&[server-cog] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm9 13H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h10.5m-.5 6a2 2 0 1 0 4 0a2 2 0 1 0-4 0m2-3.5V16m0 4v1.5m3.032-5.25l-1.299.75m-3.463 2l-1.3.75m0-3.5l1.3.75m3.463 2l1.3.75M7 8v.01M7 16v.01'/%3E%3C/svg%3E"); }
&[server] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm0 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm4-7v.01M7 16v.01'/%3E%3C/svg%3E"); }
&[settings] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37c1 .608 2.296.07 2.572-1.065'/%3E%3Cpath d='M9 12a3 3 0 1 0 6 0a3 3 0 0 0-6 0'/%3E%3C/g%3E%3C/svg%3E"); }
&[shield-lock] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M12 3a12 12 0 0 0 8.5 3A12 12 0 0 1 12 21A12 12 0 0 1 3.5 6A12 12 0 0 0 12 3'/%3E%3Cpath d='M11 11a1 1 0 1 0 2 0a1 1 0 1 0-2 0m1 1v2.5'/%3E%3C/g%3E%3C/svg%3E"); }
&[social] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 5a2 2 0 1 0 4 0a2 2 0 1 0-4 0M3 19a2 2 0 1 0 4 0a2 2 0 1 0-4 0m14 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0m-8-5a3 3 0 1 0 6 0a3 3 0 1 0-6 0m3-7v4m-5.3 6.8l2.8-2m7.8 2l-2.8-2'/%3E%3C/svg%3E"); }
&[text-size] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 7V5h13v2m-6-2v14m2 0H8m7-6v-1h6v1m-3-1v7m-1 0h2'/%3E%3C/svg%3E"); }
&[thumb-down] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 13V5a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1za4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2-2l-1-5a2 3 0 0 0-2-2h-7a3 3 0 0 0-3 3'/%3E%3C/svg%3E"); }
&[thumb-up] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 11v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1za4 4 0 0 0 4-4V6a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1-2 2h-7a3 3 0 0 1-3-3'/%3E%3C/svg%3E"); }

View file

@ -7,33 +7,86 @@
/
/ services - styling for managing the services page */
#services.window {
.flex-container {
display: flex;
flex-direction: row;
section {
flex: 1;
}
article#services {
details[styled] {
services-filters {
display: flex;
flex-wrap: wrap;
gap: 1rem;
#public {
padding: 0 .8rem 0 0;
}
#private {
padding: 0 0 0 .8rem;
}
}
}
@media screen and (max-width: 59em) {
#services.window {
.flex-container {
flex-direction: column !important;
#public, #private {
padding: unset !important;
sf-category, sf-publicity {
margin-right: auto;
}
}
}
/* frontends */
&:not(:has(input#service-frontend:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[cloud-network]) {
display: none;
}
}
/* search */
&:not(:has(input#service-search:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[search]) {
display: none;
}
}
/* social */
&:not(:has(input#service-social:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[social]) {
display: none;
}
}
/* fun */
&:not(:has(input#service-fun:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[mood-smile]) {
display: none;
}
}
/* chat */
&:not(:has(input#service-chat:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[message]) {
display: none;
}
}
/* sharing */
&:not(:has(input#service-sharing:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[database-share]) {
display: none;
}
}
/* git */
&:not(:has(input#service-git:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[brand-git]) {
display: none;
}
}
/* personal */
&:not(:has(input#service-personal:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[user]) {
display: none;
}
}
/* public */
&:not(:has(input#service-public:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[planet]) {
display: none !important;
}
}
/* private */
&:not(:has(input#service-private:checked)) {
card-container card-entry:has(h3 span[status] icon-tabler[lock]) {
display: none !important;
}
}
}

1
assets/icons/forgejo.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212 212" width="32" height="32"><style>circle,path{fill:none;stroke:#000;stroke-width:15}path{stroke-width:25}.orange{stroke:#f60}.red{stroke:#d40000}</style><g transform="translate(6 6)"><path d="M58 168V70a50 50 0 0 1 50-50h20" class="orange"/><path d="M58 168v-30a50 50 0 0 1 50-50h20" class="red"/><circle cx="142" cy="20" r="18" class="orange"/><circle cx="142" cy="88" r="18" class="red"/><circle cx="58" cy="180" r="18" class="red"/></g></svg>

After

Width:  |  Height:  |  Size: 503 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><circle cx="128" cy="128" r="128" style="fill:#ededed;stroke:none;stroke-width:3;stroke-linecap:round;fill-opacity:1"/><g transform="translate(18.867 18.867) scale(.8526)"><circle cx="128" cy="128" r="33" fill="#0062be"/><g fill="none" stroke="#0062be" stroke-width="24"><g stroke-opacity=".3"><path d="M12 128a116 116 0 1 1 116 116"/><path d="M54 128a74 74 0 1 1 74 74"/></g><path d="M128 12a116 116 0 0 1 116 116M128 54a74 74 0 0 1 74 74"/></g></g></svg>

After

Width:  |  Height:  |  Size: 521 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg44" width="280.484" height="280.484" version="1.1"><style id="style1">@media (prefers-color-scheme:dark){svg{-webkit-filter:invert(.9);filter:invert(.9)}}</style><defs id="defs4"><mask id="d"><path id="rect1" fill="#fff" d="M-60-60H60V60H-60z"/><circle id="b" cx="0" cy="-40" r="3"/><use xlink:href="#b" id="use1" transform="rotate(72)"/><use xlink:href="#b" id="use2" transform="rotate(144)"/><use xlink:href="#b" id="use3" transform="rotate(-144)"/><use xlink:href="#b" id="use4" transform="rotate(-72)"/></mask></defs><g id="g44" transform="translate(-10.708 -9.297)"><g id="e" transform="translate(150.95 149.539) scale(2.67128)"><g id="f" mask="url(#d)"><path id="path6" stroke="#000" stroke-width="4.512" d="m-31.172-33.813 26.496 74.189h9.352l26.496-74.19h-9.767l-16.73 47.59Q3.014 18.348 1.87 22.4.727 26.348 0 29.985q-.727-3.637-1.87-7.689-1.143-4.052-2.806-8.728L-21.3-33.813Z"/><circle id="circle6" cx="0" cy="0" r="43" fill="none" stroke="#000" stroke-width="9" transform="scale(-1 1)"/><g id="g" transform="scale(-1 1)"><path id="a" stroke="#000" stroke-linejoin="round" stroke-width="3" d="m51 0-5-3v6z"/><use xlink:href="#a" id="use6" transform="rotate(11.25)"/><use xlink:href="#a" id="use7" transform="rotate(22.5)"/><use xlink:href="#a" id="use8" transform="rotate(33.75)"/><use xlink:href="#a" id="use9" transform="rotate(45)"/><use xlink:href="#a" id="use10" transform="rotate(56.25)"/><use xlink:href="#a" id="use11" transform="rotate(67.5)"/><use xlink:href="#a" id="use12" transform="rotate(78.75)"/><use xlink:href="#a" id="use13" transform="rotate(90)"/><use xlink:href="#a" id="use14" transform="rotate(101.25)"/><use xlink:href="#a" id="use15" transform="rotate(112.5)"/><use xlink:href="#a" id="use16" transform="rotate(123.75)"/><use xlink:href="#a" id="use17" transform="rotate(135)"/><use xlink:href="#a" id="use18" transform="rotate(146.25)"/><use xlink:href="#a" id="use19" transform="rotate(157.5)"/><use xlink:href="#a" id="use20" transform="rotate(168.75)"/><use xlink:href="#a" id="use21" transform="scale(-1)"/><use xlink:href="#a" id="use22" transform="rotate(-168.75)"/><use xlink:href="#a" id="use23" transform="rotate(-157.5)"/><use xlink:href="#a" id="use24" transform="rotate(-146.25)"/><use xlink:href="#a" id="use25" transform="rotate(-135)"/><use xlink:href="#a" id="use26" transform="rotate(-123.75)"/><use xlink:href="#a" id="use27" transform="rotate(-112.5)"/><use xlink:href="#a" id="use28" transform="rotate(-101.25)"/><use xlink:href="#a" id="use29" transform="rotate(-90)"/><use xlink:href="#a" id="use30" transform="rotate(-78.75)"/><use xlink:href="#a" id="use31" transform="rotate(-67.5)"/><use xlink:href="#a" id="use32" transform="rotate(-56.25)"/><use xlink:href="#a" id="use33" transform="rotate(-45)"/><use xlink:href="#a" id="use34" transform="rotate(-33.75)"/><use xlink:href="#a" id="use35" transform="rotate(-22.5)"/><use xlink:href="#a" id="use36" transform="rotate(-11.25)"/></g><g id="h" transform="scale(-1 1)"><path id="c" stroke="#000" stroke-linejoin="round" stroke-width="6" d="m0-35 7-7H-7z"/><use xlink:href="#c" id="use37" transform="rotate(72)"/><use xlink:href="#c" id="use38" transform="rotate(144)"/><use xlink:href="#c" id="use39" transform="rotate(-144)"/><use xlink:href="#c" id="use40" transform="rotate(-72)"/></g></g><mask id="mask44"><path id="rect40" fill="#fff" d="M-60-60H60V60H-60z"/><circle id="circle40" cx="0" cy="-40" r="3"/><use xlink:href="#b" id="use41" transform="rotate(72)"/><use xlink:href="#b" id="use42" transform="rotate(144)"/><use xlink:href="#b" id="use43" transform="rotate(-144)"/><use xlink:href="#b" id="use44" transform="rotate(-72)"/></mask></g></g></svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

1
assets/icons/xmpp.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="175" height="175"><linearGradient id="a" x1="-1073.2" x2="-1073.2" y1="126.85" y2="0" gradientTransform="translate(1183.295 20.5) scale(1.00009)" gradientUnits="userSpaceOnUse"><stop offset=".011" stop-color="#1b3967"/><stop offset=".467" stop-color="#13b5ea"/><stop offset=".995" stop-color="#002b5c"/></linearGradient><linearGradient id="b" x1="-1073.2" x2="-1073.2" y1="126.85" y2="0" gradientTransform="matrix(-1.0001 0 0 1.0001 -1008.295 20.499)" gradientUnits="userSpaceOnUse"><stop offset=".011" stop-color="#1b3967"/><stop offset=".467" stop-color="#13b5ea"/><stop offset=".995" stop-color="#002b5c"/></linearGradient><path d="M138.402 34.69c.077 1.313-1.787.968-1.787 2.293 0 38.555-46.563 97.375-91.697 108.74v1.64C104.877 141.842 173.49 79.556 175 20.5l-36.602 14.19z" style="fill:url(#a);stroke-width:1.00009" transform="translate(0 3.385)"/><path d="M120.268 39.434c.076 1.313.12 2.63.12 3.957 0 38.555-30.702 90.505-75.834 101.87v1.638c59.05-2.79 105.82-63.03 105.82-109.21 0-2.375-.128-4.729-.371-7.056l-29.733 8.799z" style="fill:#e96d1f;stroke-width:1.00009" transform="translate(0 3.385)"/><path d="m150.289 30.084-7.618 2.722c.041.962.066 2.254.066 3.225 0 41.223-37.274 98.213-87.28 107.13-3.245 1.088-7.539 2.077-10.933 2.931v1.639c65.26-5.56 111.11-71.873 105.77-117.651Z" style="fill:#d9541e;stroke-width:1.00009" transform="translate(0 3.385)"/><path d="M36.598 34.69c-.077 1.312 1.787.967 1.787 2.292 0 38.555 46.563 97.375 91.697 108.74v1.64C70.123 141.84 1.51 79.555 0 20.5l36.602 14.19z" style="fill:url(#b);stroke-width:1.00009" transform="translate(0 3.385)"/><path d="M54.732 39.433a68.405 68.405 0 0 0-.12 3.957c0 38.555 30.702 90.505 75.834 101.87v1.638c-59.05-2.79-105.82-63.03-105.82-109.21 0-2.375.128-4.729.371-7.056L54.73 39.43z" style="fill:#a0ce67;stroke-width:1.00009" transform="translate(0 3.385)"/><path d="m24.711 30.083 7.618 2.722a84.255 84.255 0 0 0-.066 3.225c0 41.223 37.274 98.213 87.28 107.13 3.245 1.088 7.539 2.077 10.933 2.931v1.639c-65.26-5.56-111.11-71.873-105.77-117.651Z" style="fill:#439639;stroke-width:1.00009" transform="translate(0 3.385)"/></svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="37" height="37" aria-hidden="true" class="h-6"><rect width="35" height="35" x="1" y="1" ry="9.035" style="display:inline;fill:#121418;fill-opacity:1;stroke:#333844;stroke-width:2;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.728" d="M13.043 13.036h10.914m-10.914 5.457h8.185m.682 7.503-3.41 3.41-4.093-4.092h-4.092a4.093 4.093 0 0 1-4.093-4.092V10.308a4.093 4.093 0 0 1 4.093-4.092h16.37a4.093 4.093 0 0 1 4.093 4.092v6.139M28.049 30.77v.013m0-4.106a2.732 2.732 0 0 0 1.247-5.16 2.701 2.701 0 0 0-3.293.66" style="stroke:#efbd58;stroke-opacity:1"/></svg>

After

Width:  |  Height:  |  Size: 741 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="37" height="37" aria-hidden="true" class="h-6"><rect width="35" height="35" x="1" y="1" ry="9.035" style="display:inline;fill:#121418;fill-opacity:1;stroke:#333844;stroke-width:2;stroke-linecap:round;stroke-dasharray:none;stroke-opacity:1"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.706" d="M6.284 15.563a9.279 9.279 0 1 0 18.557 0 9.279 9.279 0 1 0-18.557 0m23.86 14.581-7.954-7.953" style="stroke:#efbd58;stroke-width:3;stroke-dasharray:none;stroke-opacity:1"/></svg>

After

Width:  |  Height:  |  Size: 598 B