sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'cleanup'
All checks were successful
/ build (push) Successful in 4m35s
Details

Browse source
This commit is contained in:
Ruben 2025-10-27 22:48:35 -05:00
commit 7fe9fadc2e
Signed by: sneexy
GPG key ID: 8ECFA045E63BC583
231 changed files with 3616 additions and 4802 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.eleventyignore
View file

@ -1 +1,2 @@
README.md
sneexy/notebook/

8
.forgejo/buttons.sh
View file

@ -6,11 +6,11 @@
BUTTONS_DIR=${GITHUB_WORKSPACE}/assets/buttons/friends
SITE_BUTTONS_DIR=${GITHUB_WORKSPACE}/assets/buttons/sites
printf "downloading 23sonics ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/23sonics.gif" https://me.evilfoundry.net/media/88x31/me.gif && echo
printf "downloading authenyo ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/authen.gif" https://authenyo.xyz/images/button.gif && echo
printf "downloading autumn ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/autumn.webp" http://autumn.town/assets/buttons/mybutton.webp && echo
printf "downloading benjae ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/benjae.png" https://benjae.nekoweb.org/assets/buttons/benjae.png && echo
printf "downloading birdcat ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/birdcat.gif" https://birdcat.online/img/buttons/birdcatonline.gif && echo
printf "downloading bluefox longtail ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/bluefox.png" https://bluefoxlongtail.neocities.org/buttons/myself/bluefox.png && echo
printf "downloading chloe ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/chloe.png" https://chloes.website/button.png && echo
printf "downloading cooper ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/outofshape.gif" https://ottr.uk/img/88x31/outofshape.gif && echo
printf "downloading david ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/david.png" https://david.garden/wp-content/uploads/2024/09/david-site-button.png && echo
printf "downloading doskel ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/doskel.png" https://doskel.net/button.png && echo
@ -19,7 +19,10 @@ printf "downloading drakonic ..." && curl -fsSL -A "synth.download Button Downlo
printf "downloading elixty.world ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/exlitry.world.gif" https://cdn.exlitry.world/media/buttons/exlitry.world.gif && echo
printf "downloading enderman0125 ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/enderman0125.gif" https://egg.l5.ca/assets/buttons/enderman0125.gif && echo
printf "downloading freeplay ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/freeplay.gif" https://freeplay.floof.company/assets/buttons/free.gif && echo
printf "downloading gen ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/gen.png" https://genshibe.ca/images/88x31/button.png && echo
printf "downloading guigui ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/guigui.png" https://guigui.aerocity.site/88x31/guigui.png && echo
printf "downloading hexaitos ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/hexaitos.png" https://hexaitos.com/assets/images/buttons/websites/hexaitos.png && echo
printf "downloading ielenia ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/ielenia.png" https://ielenia.lgbt/88x31.png && echo
printf "downloading keith ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/keith.gif" https://keithhacks.cyou/assets/site_button.gif && echo
printf "downloading kopper ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/wontwork.png" https://w.on-t.work/assets/88x31.png && echo
printf "downloading kraafter ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/kraafter.png" https://kraafter.me/assets/img/button.png && echo
@ -28,7 +31,7 @@ printf "downloading lars ..." && curl -fsSL -A "synth.download Button Downloader
printf "downloading lexi ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/lexi.png" https://softkittypa.ws/assets/buttons/softkittypaws.png && echo
printf "downloading lily ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/lilysthings.png" https://lilysthings.org/buttons/lilysthings.png && echo
printf "downloading lumi ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/lumi.png" https://meowctl.codeberg.page/assets/lumi.png && echo
printf "downloading madz ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/madz.gif" https://madz258.top/assets/buttons/friends/madzbutton.gif && echo
printf "downloading madz ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/madz.gif" https://madz.mov/assets/images/buttons/friends/madzbutton.gif && echo
printf "downloading melontini ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/melontini.png" https://melontini.me/88_31/88_31.png && echo
printf "downloading micro ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/micro.png" https://git.gay/Micro/pages/raw/branch/egui-rewrite/src/assets/buttons/micro.png && echo
printf "downloading millions ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/millions.png" https://ofplayers.net/images/88x31/millions.png && echo
@ -53,7 +56,6 @@ printf "downloading tika ..." && curl -fsSL -A "synth.download Button Downloader
printf "downloading unnick ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/unnick.png" https://unnick.mice.tel/88x31.png && echo
printf "downloading velveteen ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/velveteen.png" https://velveteen.one/images/badges/velbadge.png && echo
printf "downloading velzie ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/velzie.png" https://velzie.rip/88x31.png
printf "downloading winter ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/winter.png" https://winter.entities.org.uk/buttons/self.png && echo
printf "downloading xaselgio ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/xaselgio.gif" https://xaselgio.net/88x31_xaselgio_v2.gif && echo
printf "downloading zvava ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${BUTTONS_DIR}/zvava.png" https://zvava.org/images/buttons/zvava.org.png && echo
printf "downloading besties ..." && curl -fsSL -A "synth.download Button Downloader/1.0" -o "${SITE_BUTTONS_DIR}/besties.gif" https://besties.house/buttons/besties.gif && echo

4
.forgejo/workflows/buttons.yml
View file

@ -19,8 +19,8 @@ jobs:
- name: download buttons
run: |
chmod +x /workspace/sd/site/.forgejo/buttons.sh
bash -c "/workspace/sd/site/.forgejo/buttons.sh"
chmod +x ${GITHUB_WORKSPACE}/.forgejo/buttons.sh
bash -c "${GITHUB_WORKSPACE}/.forgejo/buttons.sh"
- name: push updated buttons
id: github-push

23
_includes/layouts/admins/admins.njk
View file

@ -1,23 +0,0 @@
<!-- synth.download admins -->
<article id="admins" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--user-cog"></span>
</div>
<a href="#Admins">Admins</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h1><a href="#admins">Admins</a></h1>
<p>All known users on Synth.Download who have full access to the Synth.Download servers (also known as "admins") will be listed here.</p>
<p>If any sort of proper contact is required, or if you have any questions, please contact <span style="color:var(--link);">synth@synth.download</span> <small>(email)</small> instead.</p>
<hr class="solid">
{% include "layouts/admins/list.njk" %}
</section>
</article>

23
_includes/layouts/admins/list.njk
View file

@ -1,23 +0,0 @@
<div id="sneexy" class="card sneexy">
<h4><a href="#sneexy">Sneexy <small>(Ruben)</small></a></h4>
<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 class="button-container"><a class="button" href="https://sneexy.synth.download"><span class="icon tabler--arrow-forward"></span> Page</a></p>
<img class="sona" src="/assets/admins/sneexy.svg" alt="" />
</div>
<div id="senil" class="card senil">
<h4><a href="#senil">Senil</a></h4>
<p>Maintainer; Admin.</p>
<p class="button-container"><a class="button" href="https://senil.me"><span class="icon tabler--external-link"></span> Website</a></p>
<img class="sona" src="/assets/admins/senil.png" alt="" />
</div>
<div id="unnick" class="card unnick">
<h4><a href="#unnick">unnick</a></h4>
<p>Maintainer; Admin.</p>
<p class="button-container"><a class="button" href="https://beepi.ng"><span class="icon tabler--external-link"></span> Website</a></p>
<img class="sona" src="/assets/admins/unnick.png" alt="" />
</div>
<div id="melontini" class="card last melontini">
<h4><a href="#melontini">melontini</a></h4>
<p>Maintainer; Admin.</p>
<p class="button-container"><a class="button" href="https://melontini.me"><span class="icon tabler--external-link"></span> Website</a></p>
</div>

23
_includes/layouts/base.njk
View file

@ -1,23 +0,0 @@
---
title: base
---
<!DOCTYPE html>
<html lang="en">
<head>
{% include "layouts/header.njk" %}
</head>
<body>
{% include "layouts/navbar.njk" %}
<main>
{{ content | safe }}
</main>
{% include "layouts/footer.njk" %}
</body>
</html>

33
_includes/layouts/base/base.njk Normal file
View file

@ -0,0 +1,33 @@
---
title: base
---
<!DOCTYPE html>
<html lang="en">
<head>
{% include "layouts/base/header.njk" %}
</head>
<body>
<bg-gradient aria-hidden="true"></bg-gradient>
<bg-image aria-hidden="true"></bg-image>
{% include "layouts/base/navbar.njk" %}
<!-- settings windows model -->
{% include "layouts/base/settings.njk" %}
<!-- main content -->
<content-wrapper>
<main>
{{ content | safe }}
</main>
{% include "layouts/base/footer.njk" %}
</content-wrapper>
<!-- element used for our alt popup -->
<div class="alt-popup" id="alt-popup" aria-hidden="true"></div>
</body>
</html>

33
_includes/layouts/base/footer.njk Normal file
View file

@ -0,0 +1,33 @@
<!-- webrings and credits -->
<footer window id="footer">
<div class="header">
<a href="#footer">Footer</a>
</div>
<window-contents>
<footer-section icon>
<a href="/"><img src="/assets/synth.download/synth_web.svg" alt="Synth.Download" /></a>
</footer-section>
<footer-section webrings>
<h3>Webrings</h3>
<p><a href="https://fediring.net/previous?host=synth.download" aria-label="Previous"><icon-tabler arrow-left></tabler-icon></a> <a href="https://fediring.net">Fediring</a> <a href="https://fediring.net/next?host=synth.download" aria-label="Next"><icon-tabler arrow-right></tabler-icon></a></p>
<p><a href="https://keithhacks.cyou/furryring.php?prev=synth.download" aria-label="Previous"><icon-tabler arrow-left></tabler-icon></a> <a href="https://keithhacks.cyou/furryring.php">furryring</a> <a href="https://keithhacks.cyou/furryring.php?next=synth.download" aria-label="Next"><icon-tabler arrow-right></tabler-icon></a></p>
<p><a href="https://stellophiliac.github.io/roboring/sneexy/previous" aria-label="Previous"><icon-tabler arrow-left></tabler-icon></a> <a href="https://stellophiliac.github.io/roboring">roboring</a> <a href="https://stellophiliac.github.io/roboring/sneexy/next" aria-label="Next"><icon-tabler arrow-right></tabler-icon></a></p>
</footer-section>
<footer-section links>
<h3>~/</h3>
<a href="/privacy">Privacy Policy</a>
<a href="/tos">Terms of Service</a>
<a href="/admins">Administrators</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>
<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>
</window-contents>
</footer>

20
_includes/layouts/header.njk → _includes/layouts/base/header.njk
View file

@ -1,18 +1,20 @@
{% set css %}
{% include "styles/accessibility.css" %}
{% include "styles/animations.css" %}
{% include "styles/base.css" %}
{% include "styles/font.css" %}
{% include "styles/footer.css" %}
{% include "styles/icons.css" %}
{% include "styles/navbar.css" %}
{% include "styles/base/accessibility.css" %}
{% include "styles/base/animations.css" %}
{% include "styles/base/base.css" %}
{% include "styles/base/colors.css" %}
{% include "styles/base/footer.css" %}
{% include "styles/base/icons.css" %}
{% include "styles/base/navbar.css" %}
{% include "styles/base/prism-a11y-dark.css" %}
{% include "styles/base/settings.css" %}
{% include "styles/base/windows.css" %}
{% include "styles/pages/admins.css" %}
{% include "styles/pages/fediverse.css" %}
{% include "styles/pages/home.css" %}
{% include "styles/pages/notebook.css" %}
{% include "styles/pages/services.css" %}
{% include "styles/pages/sneexy.css" %}
{% include "styles/prism-a11y-dark.css" %}
{% include "styles/windows.css" %}
{% endset %}
{% set js %}
{% include "scripts/alt-popup.js" %}

43
_includes/layouts/base/navbar.njk Normal file
View file

@ -0,0 +1,43 @@
<!-- top navbar -->
<header class="navbar">
<navbar-left>
<a class="nav-base nav-baselink nav-desktop" aria-label="Synth.download Homepage" href="/"><img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" /></a>
<div class="nav-mobile-menu">
<input type="checkbox" id="nav-mobile-menu-dropdown" value="" name="nav-mobile-menu-dropdown">
<label class="nav-base nav-baselink" aria-label="Menu" for="nav-mobile-menu-dropdown" data-toggle="nav-mobile-menu">
<img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" />
</label>
<ul>
<li class="nav-home">
<a href="/"><icon-tabler home></icon-tabler> <span class="text">Home</span></a>
</li>
<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>
</li>
<li class="nav-donate">
<a href="/donate"><icon-tabler currency-dollar></icon-tabler> <span class="text">Donate</span></a>
</li>
</ul>
</div>
<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>
<navbar-right>
<div class="nav-settings">
<input type="checkbox" id="nav-settings-menu" value="" name="nav-settings-menu">
<label class="nav-base nav-baselink" aria-label="Settings" for="nav-settings-menu" data-toggle="nav-settings" aria-roledescription="Settings Menu">
<icon-tabler settings></icon-tabler>
</label>
</div>
<div aria-hidden="true" class="nav-base nav-systray">
<icon-tabler bell></icon-tabler>
<icon-tabler volume></icon-tabler>
<icon-tabler wifi></icon-tabler>
<icon-tabler battery-filled></icon-tabler>
</div>
</navbar-right>
</header>

34
_includes/layouts/base/settings.njk Normal file
View file

@ -0,0 +1,34 @@
<settings-area>
<settings-model>
<h2 style="margin-bottom: 0;">Settings</h2>
<p class="caption" style="color: var(--red); margin-top: .4rem;">Settings are saved with JavaScript enabled.</p>
<div class="container">
<settings-section theme>
<h3>Theme</h3>
<radio-button-group aria-label="Theme picker" role="radiogroup">
<label for="theme-auto"><input type="radio" id="theme-auto" name="theme-setting" value="auto" checked>Auto</label>
<label for="theme-light"><input type="radio" id="theme-light" name="theme-setting" value="light">Light</label>
<label for="theme-dark"><input type="radio" id="theme-dark" name="theme-setting" value="dark">Dark</label>
</radio-button-group>
</settings-section>
<settings-section font>
<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>
</settings-section>
<settings-section appearance>
<h3>Appearance</h3>
<checkbox-button-group aria-label="Appearance options" role="group">
<label for="uncapitalization" aria-label="Normalizes text capitalization when enabled."><input type="checkbox" id="uncapitalization" name="uncapitalization">Disable forced uncapitalization</label>
<label for="disable-bg" aria-label="Removes the scrolling site background."><input type="checkbox" id="disable-bg" name="disable-bg">Disable background</label>
<label for="disable-animations" aria-label="Disables all CSS animations site-wide."><input type="checkbox" id="disable-animations" name="disable-animations">Disable animations</label>
<label for="disable-alttext" aria-label="Disables the (this!) custom hoverover pop-up that displays alt text on media and options."><input type="checkbox" id="disable-alttext" name="disable-alttext">Disable alt-text popup</label>
</checkbox-button-group>
</settings-section>
</div>
</settings-model>
</settings-area>

33
_includes/layouts/base/sneexy/base.njk Normal file
View file

@ -0,0 +1,33 @@
---
title: base
---
<!DOCTYPE html>
<html lang="en">
<head>
{% include "layouts/base/header.njk" %}
</head>
<body>
<bg-gradient aria-hidden="true"></bg-gradient>
<bg-image aria-hidden="true"></bg-image>
{% include "layouts/base/sneexy/navbar.njk" %}
<!-- settings windows model -->
{% include "layouts/base/settings.njk" %}
<!-- main content -->
<content-wrapper>
<main>
{{ content | safe }}
</main>
{% include "layouts/base/sneexy/footer.njk" %}
</content-wrapper>
<!-- element used for our alt popup -->
<div class="alt-popup" id="alt-popup" aria-hidden="true"></div>
</body>
</html>

30
_includes/layouts/base/sneexy/footer.njk Normal file
View file

@ -0,0 +1,30 @@
<!-- webrings and credits -->
<footer window id="footer">
<div class="header">
<a href="#footer">Footer</a>
</div>
<window-contents>
<footer-section icon>
<a href="https://synth.download"><img src="/assets/synth.download/synth_web.svg" alt="Synth.Download" /></a>
</footer-section>
<footer-section webrings>
<h3>Webrings</h3>
<p><a href="https://fediring.net/previous?host=synth.download" aria-label="Previous"><icon-tabler arrow-left></tabler-icon></a> <a href="https://fediring.net">Fediring</a> <a href="https://fediring.net/next?host=synth.download" aria-label="Next"><icon-tabler arrow-right></tabler-icon></a></p>
<p><a href="https://keithhacks.cyou/furryring.php?prev=synth.download" aria-label="Previous"><icon-tabler arrow-left></tabler-icon></a> <a href="https://keithhacks.cyou/furryring.php">furryring</a> <a href="https://keithhacks.cyou/furryring.php?next=synth.download" aria-label="Next"><icon-tabler arrow-right></tabler-icon></a></p>
<p><a href="https://stellophiliac.github.io/roboring/sneexy/previous" aria-label="Previous"><icon-tabler arrow-left></tabler-icon></a> <a href="https://stellophiliac.github.io/roboring">roboring</a> <a href="https://stellophiliac.github.io/roboring/sneexy/next" aria-label="Next"><icon-tabler arrow-right></tabler-icon></a></p>
</footer-section>
<footer-section links>
<h3>~/</h3>
<a href="https://synth.download">Return to Synth.Download</a>
<a href="https://synth.download/privacy">Privacy Policy</a>
<a href="https://synth.download/tos">Terms of Service</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>
<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>
</window-contents>
</footer>

20
_includes/layouts/base/sneexy/navbar.njk Normal file
View file

@ -0,0 +1,20 @@
<!-- top navbar -->
<header class="navbar">
<navbar-left>
<a class="nav-base nav-baselink nav-desktop" aria-label="Back to Synth.Download" href="https://synth.download"><img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" /></a>
</navbar-left>
<navbar-right>
<div class="nav-settings">
<input type="checkbox" id="nav-settings-menu" value="" name="nav-settings-menu">
<label class="nav-base nav-baselink" aria-label="Settings" for="nav-settings-menu" data-toggle="nav-settings" aria-roledescription="Settings Menu">
<icon-tabler settings></icon-tabler>
</label>
</div>
<div aria-hidden="true" class="nav-base nav-systray">
<icon-tabler bell></icon-tabler>
<icon-tabler volume></icon-tabler>
<icon-tabler wifi></icon-tabler>
<icon-tabler battery-filled></icon-tabler>
</div>
</navbar-right>
</header>

0
_includes/layouts/nsfw-toggle.njk → _includes/layouts/components/nsfw-toggle.njk
View file

24
_includes/layouts/donate/base.njk
View file

@ -1,24 +0,0 @@
---
title: base
---
<!DOCTYPE html>
<html lang="en">
<head>
{% include "layouts/header.njk" %}
<script async src="https://js.stripe.com/v3/buy-button.js"></script>
</head>
<body>
{% include "layouts/navbar.njk" %}
<main>
{{ content | safe }}
</main>
{% include "layouts/footer.njk" %}
</body>
</html>

22
_includes/layouts/donate/donate.njk
View file

@ -1,22 +0,0 @@
<!-- donation window -->
<article id="donate" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--message-chatbot"></span>
</div>
<a href="#donate">donate</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</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>
</section>
</article>

25
_includes/layouts/error.njk
View file

@ -1,25 +0,0 @@
---
title: whoops.
layout: "layouts/base.njk"
---
<!-- error window -->
<article open id="404" class="window error">
<summary>
<div aria-hidden="true">
<span class="icon tabler--mood-sad-dizzy"></span>
</div>
<a href="#404">Not found!</a>
<div aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</summary>
<section>
<h1 style="color: var(--accent);">404</h1>
<p>Whatever it is, isn't here.</p>
</section>
</article>

7
_includes/layouts/fediverse/buttons.njk
View file

@ -1,7 +0,0 @@
<div class="img-buttons" style="margin-top:1rem;">
<a href="https://synth.download"><img src="/assets/buttons/synth.download.svg" alt="Synth.Download!"></a>
<a href="https://oomfie.city"><img src="/assets/buttons/sites/oomfie.city.png" alt="Oomfie City"></a>
<a href="https://labyrinth.zone"><img src="/assets/buttons/sites/labyrinth.zone.gif" alt="Labyrinth Zone"></a>
<a href="https://akko.wtf"><img src="/assets/buttons/sites/akko.wtf.png" alt="Luna Nova"></a>
<a href="https://java.duke.social"><img src="/assets/buttons/sites/duke.social.webp" alt="Duke Social"></a>
</div>

145
_includes/layouts/fediverse/iceshrimp/bubble.njk
View file

@ -1,145 +0,0 @@
<!-- bubble timeline -->
<article id="bubble" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--info-circle"></span>
</div>
<a href="#bubble">Bubble timeline</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h2><a href="#bubble">Bubble timeline</a></h2>
<p>Our instance is configured with a curated timeline of hand-picked instances that we deem to be a part of community of, or are great friends. Below is the entire list of of all instances configured in our Bubble timeline.</p>
<ul>
<li>
<a href="https://akko.wtf">akko.wtf</a>
</li>
<li>
<a href="https://app.wafrn.net">app.wafrn.net</a>
</li>
<li>
<a href="https://arff.archandle.net">arff.archandle.net</a>
</li>
<li>
<a href="https://booping.synth.download">booping.synth.download</a>
</li>
<li>
<a href="https://cafe.autumn.town">cafe.autumn.town</a>
</li>
<li>
<a href="https://chitter.xyz">chitter.xyz</a>
</li>
<li>
<a href="https://chuckya.remlit.site">chuckya.remlit.site</a>
</li>
<li>
<a href="https://critter.cafe">critter.cafe</a>
</li>
<li>
<a href="https://den.lonewolf.rocks">den.lonewolf.rocks</a>
</li>
<li>
<a href="https://eepy.moe">eepy.moe</a>
</li>
<li>
<a href="https://evilfoundry.net">evilfoundry.net</a>
</li>
<li>
<a href="https://fedi.bungle.online">fedi.bungle.online</a>
</li>
<li>
<a href="https://fedi.chadthundercock.com">chadthundercock.com</a>
</li>
<li>
<a href="https://floofy.tech">floofy.tech</a>
</li>
<li>
<a href="https://fuzzies.wtf">fuzzies.wtf</a>
</li>
<li>
<a href="https://gts.niko.lgbt">gts.niko.lgbt</a>
</li>
<li>
<a href="https://icy.wyvern.rip">icy.wyvern.rip</a>
</li>
<li>
<a href="https://is.notfire.cc">notfire.cc</a>
</li>
<li>
<a href="https://is.potatoe.ca">is.potatoe.ca</a>
</li>
<li>
<a href="https://is.trinkey.com">trinkey.com</a>
</li>
<li>
<a href="https://java.duke.social">duke.social</a>
</li>
<li>
<a href="https://labyrinth.zone">labyrinth.zone</a>
</li>
<li>
<a href="https://lethallava.land">lethallava.land</a>
</li>
<li>
<a href="https://masto.doskel.net">doskel.net</a>
</li>
<li>
<a href="https://mastodon.derg.nz">mastodon.derg.nz</a>
</li>
<li>
<a href="https://mastodon.social.fraudulent.link">mastodon.social.fraudulent.link</a>
</li>
<li>
<a href="https://mice.tel">mice.tel</a>
</li>
<li>
<a href="https://ns.wouldnt.download">wouldnt.download</a>
</li>
<li>
<a href="https://oomfie.city">oomfie.city</a>
</li>
<li>
<a href="https://pounced-on.me">pounced-on.me</a>
</li>
<li>
<a href="https://remlit.site">remlit.site</a>
</li>
<li>
<a href="https://shrimp.meow.company">meow.company</a>
</li>
<li>
<a href="https://shrimp.starlightnet.work">starlightnet.work</a>
</li>
<li>
<a href="https://shrimple.aagaming.me">shrimple.aagaming.me</a>
</li>
<li>
<a href="https://sk.doskel.net">sk.doskel.net</a>
</li>
<li>
<a href="https://social.besties.house">besties.house</a>
</li>
<li>
<a href="https://st.transbus.social">st.transbus.social</a>
</li>
<li>
<a href="https://vixen.zone">vixen.zone</a>
</li>
<li>
<a href="https://wetdry.world">wetdry.world</a>
</li>
<li>
<a href="https://wolfdo.gg">wolfdo.gg</a>
</li>
<li>
<a href="https://yeen.town">yeen.town</a>
</li>
</ul>
</section>
</article>

46
_includes/layouts/fediverse/iceshrimp/fe.njk
View file

@ -1,46 +0,0 @@
<!-- alternative frontends -->
<article id="frontends" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--info-circle"></span>
</div>
<a href="#frontends">Alternative frontends</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h2><a href="#frontends">Alternative frontends</a></h2>
<p>Currently, the built in Iceshrimp.NET frontend is pretty unfinished and not very usable for daily usage. We provide other frontends that give better usage for use with Iceshrimp. Alternatively, Iceshrimp also implements direct Mastodon-API compatibility, so you may bring or use your own Mastodon clients as well!</p>
<ul>
<li>
<a href="https://beeping.synth.download">Iceshrimp.NET</a> • The default frontend, requires to be logged in directly to Iceshrimp before being accessible. Required to be used if you want to change some of your profile settings. <small>For other options, refer to the two last options of this list.</small>
</li>
<li>
<a href="https://masto.beeping.synth.download">Mastodon</a> • The Mastodon frontend based off of the Chuckya fork with extra support for Iceshrimp based features, the most stable/recommended. <small><a href="https://forged.synth.download/synth.download/Chuckya-fe-standalone">Source</a></small>
</li>
<li>
<a href="https://akko.beeping.synth.download">Akkoma</a> • The Akkoma frontend with extra support for Iceshrimp based features. <small><a href="https://forged.synth.download/synth.download/akkoma-fe">Source</a></small>
</li>
<li>
<a href="https://phanpy.beeping.synth.download">Phanpy</a> • Opinionated, minimalist Mastodon client, works well with Iceshrimp. Enable the Akkoma flag for proper support with Emoji reactions. <small><a href="https://github.com/cheeaun/phanpy">Source</a></small>
</li>
<li>
<a href="https://pl-fe.beeping.synth.download">pl-fe</a> • Another Mastodon-compatible client, works well with Iceshrimp. <small><a href="https://github.com/mkljczk/pl-fe">Source</a></small>
</li>
</ul>
<hr class="solid">
<ul>
<li>
<small><a href="https://beeping.synth.download/swagger">Swagger</a> • Special frontend for directly interacting with the Iceshrimp API. Required to enable/modify some settings with your account.</small>
</li>
<li>
<small><a href="https://beeping.synth.download/scalar">scalar</a> • A fancier, more advanced alternative to Swagger.</small>
</li>
</ul>
</section>
</article>

37
_includes/layouts/fediverse/iceshrimp/features.njk
View file

@ -1,37 +0,0 @@
<!-- instance features -->
<article id="features" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--info-circle"></span>
</div>
<a href="#features">Features</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h2><a href="#features">Features</a></h2>
<p>What users receive in terms of differences from, for example here, the average <small>(vanilla)</small> Mastodon instance:</p>
<ul>
<li>
Quote posting
</li>
<li>
Emoji reactions
</li>
<li>
Most Misskey features: cat ears/speaking as a cat, "Drive" management for files, etc.
</li>
<li>
100,000 character limit
</li>
<li>
200 megabyte upload limit, per file
</li>
</ul>
</section>
</article>

28
_includes/layouts/fediverse/iceshrimp/info.njk
View file

@ -1,28 +0,0 @@
<!-- information -->
<article id="information" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--info-circle"></span>
</div>
<a href="#information">Instance information</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h2><a href="#information">Instance information</a></h2>
<p>This is our Iceshrimp.NET instance, managed by <a href="https://booping.synth.download/@sneexy">@sneexy</a>. This is our general information page about our instance, most info here is shared with our other instances. <small>You're most likely here because you've attempted to visit <a href="https://beeping.synth.download">beeping.synth.download</a> without an account/signed out. Try logging in, then go back to access the Iceshrimp frontend!</small></p>
<hr class="solid">
<p>Iceshrimp is a "microblogging"-based social networking software that connects over <a href="https://activitypub.rocks">ActivityPub</a> to federate over the internet with other AP-based software and instances in the world such as <a href="https://joinmastodon.org">Mastodon</a>. Iceshrimp mostly follows the footsteps of <a href="https://misskey-hub.net">Misskey</a>, and supports most features that Misskey and other software chooses to implement - Quote posts, Emoji reactions and all.</p>
<p class="info-box info"><span class="icon tabler--info-circle"></span> If Iceshrimp isn't your type of software, we have a sibiling <a href="/sharkey">Sharkey</a> instance that's directly based off of the upstream Misskey software, providing an advanced UI and set of fun features. Alternatively, we also provide a <a href="/mastodon">Mastodon</a> instance with extra features like support for Emoji reactions baked in, recommended if you prefer a more basic and calmer experience to social media and compatibility with most Fediverse clients and software.</p>
<hr class="solid">
<p>This instance is <i>invite only</i> to ensure that things don't get out of control here, in terms of both becoming a moderation hassle and requiring heavy maintenance, as well as ensuring this instance continues to run smoothly and for the foreseeable future.</p>
<p><b>If you would like to register, and are a well-known creature of, please go beep at <a href="https://booping.synth.download/@sneexy">@sneexy</a>!</b> You may also ask anyone else on this instance to vouch for you. <small>Invite codes/Acceptance is not always guaranteed, but feel free to ask. Please don't let this be discouragement for asking.</small></p>
<hr class="solid">
<p>We have a <a href="https://signal.group/#CjQKIGETy9DaJ_wF3iIun-uBSD4T1ZqrJbnXhkqZZdtUdX5LEhD7RbDqEm2gfLZsCINNwVc2">Signal group chat</a> for general, random discussion as well as having direct contact with instance admins, and to serve as a place for any direct or maintenance announcements.</p>
</section>
</article>

53
_includes/layouts/fediverse/iceshrimp/intro.njk
View file

@ -1,53 +0,0 @@
<!-- iceshrimp introduction -->
<article id="iceshrimp" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--universe"></span>
</div>
<a href="#iceshrimp">Icesynth!</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h1 style="text-align:center;"><a href="https://iceshrimp.net" target="_blank" style="vertical-align:middle;"><img src="/assets/fedi/isnet.png" alt="Iceshrimp.NET source" style="height:2rem;margin-right:.4rem;border-radius:.2rem" /></a>Icesynth!</h1>
<p style="text-align:center;">Beep! A small instance themed around <a href="https://synthspecies.com">synths</a>, but accepts all. <small>Not to be confused with our <a href="/sharkey">Sharkey</a> or <a href="/mastodon">Mastodon</a> instances.</small></p>
<p style="text-align:center;"><a class="button" href="https://beeping.synth.download/login"><span class="icon tabler--login"></span> Log in</a> <a class="button" href="https://beeping.synth.download/register"><span class="icon tabler--user-plus"></span> Register</a></p>
<p style="text-align:center;"><a class="button" href="#tips"><span class="icon tabler--bulb"></span> Tips & Tricks</a></p>
<p style="text-align:center;"><a class="button" href="https://masto.beeping.synth.download"><span class="icon tabler--brand-mastodon"></span> Mastodon-FE</a> <a class="button" href="https://akko.beeping.synth.download"><span class="icon tabler--external-link"></span> Akkoma-FE</a> <a class="button" href="https://phanpy.beeping.synth.download"><span class="icon tabler--external-link"></span> Phanpy</a> <a class="button" href="https://pl-fe.beeping.synth.download"><span class="icon tabler--external-link"></span> pl-fe</a></p>
<hr class="solid">
{% include "layouts/fediverse/buttons.njk" %}
<details class="styled" style="margin-top:2rem;">
<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="#information">Instance information</a>
</li>
<li>
<a href="#features">Features</a>
</li>
<li>
<a href="#rules">Rules</a>
</li>
<li>
<a href="#frontends">Alternative frontends</a>
</li>
<li>
<a href="#tips">Tips & Tricks</a>
</li>
<li>
<a href="#bubble">Bubble timeline</a>
</li>
<li>
<a href="#moderation">Moderation</a>
</li>
</ul>
</section>
</details>
</section>
</article>

54
_includes/layouts/fediverse/iceshrimp/tips.njk
View file

@ -1,54 +0,0 @@
<!-- iceshrimp tips & tricks -->
<article id="tips" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--info-circle"></span>
</div>
<a href="#tips">Tips & Tricks</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h2><a href="#tips">Tips & Tricks</a></h2>
<p>A few notable, useful worth-sharing tips & tricks for Iceshrimp users. You may also suggest any to be added here.</p>
<hr class="solid">
<details class="styled">
<summary>Remove all inaccessible followers-only replies <span class="icon tabler--arrow-autofit-height"></span></summary>
<section>
<p>Iceshrimp.NET, by default, will show <i>all</i> replies, including those that are replies to posts that are inaccessible to you, even if you aren't using the default frontend. For most users, this is <i>unwanted</i> behavior.</p>
<p>To disable it, first:</p>
<ul>
<li>Enter your <a href="https://beeping.synth.download/settings" target="_blank">account settings</a></li>
<li>Click the "Account" tab on the left</li>
<li>Find and enable "Filter replies to inaccessible notes"</li>
</ul>
<p>This should disable them on the official frontend. However, if you use a custom/alternative client, they may still show up via <span style="text-transform: none;">"RE: 🔒"</span> posts. To disable these, we simply put a custom word filter:</p>
<ul>
<li>Enter your <a href="https://beeping.synth.download/settings" target="_blank">account settings</a></li>
<li>Click the "Filters" tab on the left</li>
<li>Create a new filter.</li>
<ul>
<li>The Filter Name is required, but can be whatever. Name it something like "Disable inaccessible replies".</li>
<li>For the keywords, simply type in <span style="text-transform: none;">"RE: 🔒"</span> <i>(without the quotation marks)</i> then press the "Add" button below it.</li>
<li>Set the Filter Action to "Hide".</li>
<li>Add everything from the "Filter Contexts" list.</li>
<li>Set the expiry date to whatever in the future, like 09/09/9999 for example.</li>
</ul>
</ul>
<p>After that, all inaccessible replies shall now vanish.</p>
</section>
</details>
<details class="styled">
<summary>Emoji reactions in Phanpy <span class="icon tabler--arrow-autofit-height"></span></summary>
<section>
<p>The Phanpy frontend has <i>some</i> support for emoji reactions. Specifically though, only showing them in notifications.</p>
<p>To enable support for at least showing them rather than displaying a broken notification for each reaction, simply log into Phanpy again with the "This app is intended for Pleroma or Akkoma" flag enabled.</p>
</section>
</details>
</section>
</article>

31
_includes/layouts/fediverse/mastodon/features.njk
View file

@ -1,31 +0,0 @@
<!-- instance features -->
<article id="features" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--info-circle"></span>
</div>
<a href="#features">Features</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h2><a href="#features">Features</a></h2>
<p>What users receive in terms of differences from, for example here, the average <small>(vanilla)</small> Mastodon instance:</p>
<ul>
<li>
Emoji reactions
</li>
<li>
100,000 character limit
</li>
<li>
200 megabyte upload limit, per file
</li>
</ul>
</section>
</article>

28
_includes/layouts/fediverse/mastodon/info.njk
View file

@ -1,28 +0,0 @@
<!-- information -->
<article id="information" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--info-circle"></span>
</div>
<a href="#information">Instance information</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h2><a href="#information">Instance information</a></h2>
<p>This is our Mastodon instance! While hosted by <a href="https://booping.synth.download/@sneexy">@sneexy</a>, is mainly managed by <a href="https://merping.synth.download/@m">@m</a>. This is our general information page about our instance, most info here is shared with our other instances.</p>
<hr class="solid">
<p>Mastodon is a "microblogging"-based social networking software that connects over <a href="https://activitypub.rocks">ActivityPub</a> to federate over the internet with other AP-based software and instances in the world such as other instance of itself. We maintain our <a href="https://github.com/melontini/mastodon">own minor fork</a> of Mastodon from <a href="https://github.com/TheEssem/mastodon">another fork</a> that implements features such as emoji reactions.</p>
<p class="info-box info"><span class="icon tabler--info-circle"></span> If Mastodon isn't your type of software, we have a sibiling <a href="/iceshrimp">Iceshrimp</a> instance that provides most of the Misskey-like and other advanced features while keeping out the more complex or "non-sense" features, on top of a stable, more Mastodon-compatible base. Alternatively, we also provide a <a href="/sharkey">Sharkey</a> instance that's directly based off of the upstream Misskey software, providing an advanced UI and set of fun features.</p>
<hr class="solid">
<p>This instance is <i>invite only</i> to ensure that things don't get out of control here, in terms of both becoming a moderation hassle and requiring heavy maintenance, as well as ensuring this instance continues to run smoothly and for the foreseeable future.</p>
<p><b>If you would like to register, and are a well-known creature of, please go beep at <a href="https://booping.synth.download/@sneexy">@sneexy</a> or <a href="https://merping.synth.download/@m">@m</a>!</b> You may also ask anyone else on this instance to vouch for you. <small>Invite codes/Acceptance is not always guaranteed, but feel free to ask. Please don't let this be discouragement for asking.</small></p>
<hr class="solid">
<p>We have a <a href="https://signal.group/#CjQKIGETy9DaJ_wF3iIun-uBSD4T1ZqrJbnXhkqZZdtUdX5LEhD7RbDqEm2gfLZsCINNwVc2">Signal group chat</a> for general, random discussion as well as having direct contact with instance admins, and to serve as a place for any direct or maintenance announcements.</p>
</section>
</article>

45
_includes/layouts/fediverse/mastodon/intro.njk
View file

@ -1,45 +0,0 @@
<!-- mastodon introduction -->
<article id="mastodon" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--universe"></span>
</div>
<a href="#mastodon">Merpstodon!</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h1 style="text-align:center;"><a href="https://joinmastodon.org" target="_blank" style="vertical-align:middle;"><img src="/assets/fedi/mastodon.svg" alt="Mastodon's official website" style="height:2rem;margin-right:.4rem;border-radius:.2rem" /></a>Merpstodon!</h1>
<p style="text-align:center;">Merp! A small instance themed around <a href="https://synthspecies.com">synths</a>, but accepts all. <small>Not to be confused with our <a href="/sharkey">Sharkey</a> or <a href="/iceshrimp">Iceshrimp</a> instances.</small></p>
<p style="text-align:center;"><a class="button" href="https://merping.synth.download"><span class="icon tabler--external-link"></span> Visit</a> <a class="button" href="https://merping.synth.download/auth/sign_in"><span class="icon tabler--login"></span> Log in</a></p>
<hr class="solid">
{% include "layouts/fediverse/buttons.njk" %}
<details class="styled" style="margin-top:2rem;">
<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="#information">Instance information</a>
</li>
<li>
<a href="#features">Features</a>
</li>
<li>
<a href="#rules">Rules</a>
</li>
<li>
<a href="#bubble">Bubble timeline</a>
</li>
<li>
<a href="#moderation">Moderation</a>
</li>
</ul>
</section>
</details>
</section>
</article>

51
_includes/layouts/fediverse/moderation.njk
View file

@ -1,51 +0,0 @@
<!-- moderation-->
<article id="moderation" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--info-circle"></span>
</div>
<a href="#moderation">Moderation</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h2><a href="#moderation">Moderation</a></h2>
<p>For all of our Fediverse instances that we manage, we moderate collaboratively along with other friends and closely tied instances. We moderate on a "Trust Nobody" level for remote instances, due to past negative experiences with the Fediverse. Frankly, we're a small place with burned-out moderators that want to provide a safe place for ourselves and friends.</p>
<p>We have little spoons to deal with anything and tend to take action swiftly. We <b>suspend</b> instances that:</p>
<ul>
<li>Consists of having communities/a majority of users who are racist/facists, queerphobic, and anything else crossing those lines <i>or</i> breaks any of our rules.</li>
<li>Known instances or communities/groups that harass others/our own communities and friends.</li>
<li>Heavily radiates "Bad Vibes" to us collectively <small><i>(In ways where an instance may not appear bad on the surface, but consistently points in directions that nudges towards ideas that either harm us or risks our own safety)</i></small>.</li>
<li>Maliciously modifies federation (Ignoring deletes, converting non-public posts to public, Etc.)</li>
</ul>
<p>For anything else, we usually tend to <b><small>media-</small>silence</b>:</p>
<ul>
<li>Instances without rules for tagging content/with users that consistently don't properly tag posts, such as politics and NSFW-related posts.</li>
<li>Instances that mainly to <i>only</i> consists of heavy amounts of "Irony-poisoned" or "racism funny" posting.</li>
<li>Instances that may not be "bad" or break any rules on the surface, but collectively gives us very offputting vibes that we deem it possibly unsafe and limit federation for safety reasons.</li>
<li>Large instances affected by spam attacks.</li>
</ul>
<p><i>By default</i>, we don't block through guilt-by-federation. <i>However</i>, if we find an instance that consistently federates or otherwise associates and notably supports bad actors - more specifically those who have otherwised harmed us or others/close friends and instances before - we may consider the instance for <b>suspension</b> depending on the case. This is entirely for the safety of our own community and the many risk factors of keeping continued federation.</p>
<p>We also may <b>suspend</b>/<i>silence</i> instances if our users are reportedly uncomfortable about them, whether via the users or the content on the instance. Again, we want a safe space for ourselves and friends.</p>
<p>Our actions aren't limited to what is based on interactions from/within our own community. If we find harassment or otherwise any negative behavior towards other users or our close friends/instances, action <i>will</i> still be done. Remember: we moderate <i>collaboratively</i>.</p>
<hr class="solid">
<p>If you're a user, and would like to question any of our moderation decisions or actions, or talk about a specific instance <small>(or for more information on why we block/silence a specific instance)</small>, feel free to bring it up with the moderators/administrators. If it's an instance/user you deem should be up for moderation action, report it instead.</p>
<details class="cw">
<summary><span class="icon tabler--alert-triangle"></span> More sensitive topics about moderation and the wider Fediverse <span class="icon tabler--chevron-down"></span></summary>
<section>
<p>For those who think our moderation is <i>"too strict"</i>, the Fediverse has caused us harm and has shown that it's an untrustworthy network, from time and time again. Our moderation decisions are made through blood and tears, as it is impossible to trust anyone on here.</p>
<p>Being completely honest: The Fediverse is a <i>horrible</i> network filled with <i>terrible</i> people from a moderator standpoint. Harassment, grooming/pedophilia issues and those who align with it, Nazi's crawling from every corner, having to deal with "Your Opinions Suck" and people attempting to force publicize/normalize traumatic experiences... Basically, everything that a normal user doesn't see because we get to it first.</p>
<p>As for why we still bother with the Fediverse and don't go anywhere else, it also happens to be the only platform with the same beings and creatures that we enjoy sharing presense with, along with multitudes of customizations compared to other existing platforms.</p>
<p>And despite everything, we still host our Fediverse instances with pride and care, to provide a safe and curated space, for those who want to be with us. <span class="icon tabler--heart" style="color:var(--green);"></span></p>
<p><small>For any visitors passing by, please thank your admins and moderators. Maybe give them some pocket change, it's the least you can do to help them regain some sanity. <span class="icon tabler--heart" style="color:var(--red);"></span></small></p>
</section>
</details>
<hr class="solid">
<p>If you'd wish to see our moderation lists, such as all of our instance blocks and silences, check if the software that the instance you're housed on allows you to view our moderation policies directly. If that is not the case, ask a moderator/administrator and we'll pass a copy of our current lists over.</p>
</section>
</article>

49
_includes/layouts/fediverse/rules.njk
View file

@ -1,49 +0,0 @@
<!-- instance rules -->
<article id="rules" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--info-circle"></span>
</div>
<a href="#rules">Rules</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h2><a href="#rules">Rules</a></h2>
<p>Our <a href="/tos">Terms of Service</a> applies when using the Fediverse as our instance rules, both for our own community and also as we moderate those remotely. Rules may be a bit lax for our own local community, as we <i>trust</i> you to be here. We recommend reading our Terms of Service to get a baseline that applies as rules, but to summarize:</p>
<ul>
<li>
No nazism, racism, antisemitism, queerphobia of any type, bigotry of any kind or harassment. <b>Any type of hate speech is not allowed.</b>
</li>
<li>
<b>Pedophilia, zoophilia and "radqueers" are not allowed.</b> This also includes any references/usage of fictional counterparts, such as lolicon/shota and cub pornography.
</li>
<li>
<b>No illegal content.</b> Don't post anything that would otherwise get us into legal trouble, as within Canadian laws. <i>This excludes any anti-queer laws that otherwise harm us.</i> If you need a baseline for what is considered "Illegal content", consider if what you're posting would get the police to show up at your door.
</li>
<li>
<b>Properly use content warnings when posting.</b> Be considerate for others, add a properly labeled content warning to your post as needed. Required for content such as NSFW content (also including kinks and such) and world/local politics, or anything that may be depressing to others. Reclaimed slurs may be left without a content warning, as long as you know and respect your own space/"audience".
</li>
<li>
As mentioned in rule #1: <b>Don't harass other individuals.</b> Shaming billionaires and capitalists and whatnot is fine by us, but don't be a dick to others who haven't done anything wrong.
</li>
<li>
<b>Respect your own and others right to privacy, opinions, and boundaries.</b> <i>Especially</i> for boundaries, make an effort to ensure you aren't overstepping someone's comfort zone.
</li>
<li>
<b>We encourage adding alt text onto publicly posted media.</b> Not a required rule, but we recommend it.
</li>
<li>
<i>Basically:</i> <b>Just use common sense</b>.
</li>
<li aria-hidden="true">
<small>beep merp rawr :3</small>
</li>
</ul>
</section>
</article>

37
_includes/layouts/fediverse/sharkey/features.njk
View file

@ -1,37 +0,0 @@
<!-- instance features -->
<article id="features" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--info-circle"></span>
</div>
<a href="#features">Features</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h2><a href="#features">Features</a></h2>
<p>What users receive in terms of differences from, for example here, the average <small>(vanilla)</small> Mastodon instance:</p>
<ul>
<li>
Quote posting
</li>
<li>
Emoji reactions
</li>
<li>
All of the fun/average Misskey features: cat ears/speaking as a cat, "Drive" management for files, etc.
</li>
<li>
100,000 character limit, with a 5,000 content warning character limit
</li>
<li>
20 gigabyte drive space per user <small>(can be increased if needed)</small>
</li>
</ul>
</section>
</article>

29
_includes/layouts/fediverse/sharkey/info.njk
View file

@ -1,29 +0,0 @@
<!-- information -->
<article id="information" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--info-circle"></span>
</div>
<a href="#information">Instance information</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h2><a href="#information">Instance information</a></h2>
<p>This is our Sharkey instance, managed by <a href="https://booping.synth.download/@sneexy">@sneexy</a>. This is our general information page about our instance, most info here is shared with our other instances.</p>
<hr class="solid">
<p>Sharkey is a "microblogging"-based social networking software that connects over <a href="https://activitypub.rocks">ActivityPub</a> to federate over the internet with other AP-based software and instances in the world such as <a href="https://joinmastodon.org">Mastodon</a>. Sharkey itself is a soft-fork of <a href="https://misskey-hub.net">Misskey</a>, so you recieve all of the features Misskey has, such as quote posts and emoji reactions, with extra features and fixes Sharkey puts on top.</p>
<p class="info-box info"><span class="icon tabler--info-circle"></span> If Sharkey isn't your type of software, we have a sibiling <a href="/iceshrimp">Iceshrimp</a> instance that provides most of the Misskey-like and other advanced features while keeping out the more complex or "non-sense" features, on top of a stable, more Mastodon-compatible base. Alternatively, we also provide a <a href="/mastodon">Mastodon</a> instance with extra features like support for Emoji reactions baked in, recommended if you prefer a more basic and calmer experience to social media and compatibility with most Fediverse clients and software.</p>
<hr class="solid">
<p>This instance is <i>invite only</i> to ensure that things don't get out of control here, in terms of both becoming a moderation hassle and requiring heavy maintenance, as well as ensuring this instance continues to run smoothly and for the foreseeable future.</p>
<p><b>If you would like to register, and are a well-known creature of, please go beep at <a href="https://booping.synth.download/@sneexy">@sneexy</a>!</b> You may also ask anyone else on this instance to vouch for you. <small>Invite codes/Acceptance is not always guaranteed, but feel free to ask. Please don't let this be discouragement for asking.</small></p>
<hr class="solid">
<p>We have a <a href="https://signal.group/#CjQKIGETy9DaJ_wF3iIun-uBSD4T1ZqrJbnXhkqZZdtUdX5LEhD7RbDqEm2gfLZsCINNwVc2">Signal group chat</a> for general, random discussion as well as having direct contact with instance admins, and to serve as a place for any direct or maintenance announcements.</p>
<p><small><b>For the record:</b> We are running <i>stock</i>, upstream Sharkey. We are <i>not</i> running/maintaining a fork! Any and all modifications and shenanigans we do on here are either served through our reverse proxy or done via Sharkey's <code>customHtml</code> configuration and <a href="https://forged.synth.download/synth.download/site/src/branch/main/assets/synth.download/sharkey" target="_blank">custom CSS</a>.</small></p>
</section>
</article>

51
_includes/layouts/fediverse/sharkey/intro.njk
View file

@ -1,51 +0,0 @@
<!-- sharkey introduction -->
<article id="sharkey" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--universe"></span>
</div>
<a href="#sharkey">Beepkey!</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h1 style="text-align:center;"><a href="https://joinsharkey.org" target="_blank" style="vertical-align:middle;"><img src="/assets/fedi/sharkey_sh.svg" alt="Sharkey's website" style="height:2rem;margin-right:.4rem;border-radius:.2rem" /></a>Beepkey!</h1>
<p style="text-align:center;">Beep! A small instance themed around <a href="https://synthspecies.com">synths</a>, but accepts all. <small>Not to be confused with our <a href="/iceshrimp">Iceshrimp</a> or <a href="/mastodon">Mastodon</a> instances.</small></p>
<p style="text-align:center;"><a class="button" href="https://booping.synth.download"><span class="icon tabler--external-link"></span> Visit</a></p>
<p style="text-align:center;"><a class="button" href="https://github.com/poppingmoon/aria#aria"><span class="icon tabler--device-mobile"></span> Aria</a> <a class="button" href="#tips"><span class="icon tabler--bulb"></span> Tips & Tricks</a></p>
<p style="text-align:center;margin-bottom:-1rem;opacity:.8;"><small><b>Note:</b> Mastodon-based clients are noted to be unstable with Sharkey.</small></p>
<p style="text-align:center;"><a class="button" href="https://masto.booping.synth.download"><span class="icon tabler--brand-mastodon"></span> Mastodon-FE</a> <a class="button" href="https://phanpy.booping.synth.download"><span class="icon tabler--external-link"></span> Phanpy</a> <a class="button" href="https://pl-fe.booping.synth.download"><span class="icon tabler--external-link"></span> pl-fe</a></p>
<hr class="solid">
{% include "layouts/fediverse/buttons.njk" %}
<details class="styled" style="margin-top:2rem;">
<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="#information">Instance information</a>
</li>
<li>
<a href="#features">Features</a>
</li>
<li>
<a href="#rules">Rules</a>
</li>
<li>
<a href="#tips">Tips & Tricks</a>
</li>
<li>
<a href="#bubble">Bubble timeline</a>
</li>
<li>
<a href="#moderation">Moderation</a>
</li>
</ul>
</section>
</details>
</section>
</article>

64
_includes/layouts/fediverse/sharkey/tips.njk
View file

@ -1,64 +0,0 @@
<!-- iceshrimp tips & tricks -->
<article id="tips" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--info-circle"></span>
</div>
<a href="#tips">Tips & Tricks</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h2><a href="#tips">Tips & Tricks</a></h2>
<p>A few notable, useful worth-sharing tips & tricks for Sharkey users. You may also suggest any to be added here.</p>
<hr class="solid">
<details class="styled">
<summary>Using comfortably on mobile/restricted environments <span class="icon tabler--arrow-autofit-height"></span></summary>
<section>
<p>Sharkey works best via it's web UI frontend. Sometimes, this may be uncomfortable on mobile or generally lower-end devices.</p>
<p>You have a few options to try out:</p>
<ul>
<li>Try using a Chromium based browser to use Sharkey</li>
<ul>
<li>Sharkey performs notably better under a Chromium based environment, and if on Android, may also use less battery in the process.</li>
<ul>
<li>For iOS users, this option may not be helpful/do no change at all.</li>
</ul>
</ul>
<li>Try using the <a href="https://github.com/poppingmoon/aria#aria">Aria</a> client, as we suggest for mobile users.</li>
<ul>
<li>It's a native, basically 1-to-1 compatible Misskey client. While it's focused on supporting Misskey features, it also supports some of the Sharkey features such as editing.</li>
<li>They also provide builds for anything other than mobile devices, including native builds for Windows, Mac and Linux.</li>
</ul>
<li>Disable all effects and animations in the client settings</li>
<ul>
<li>Go to your <a href="https://booping.synth.download/settings/preferences">Preferences</a></li>
<li>Look under the "Accessibility" and "Performance" tab. You can disable UI animations, MFM, and blur effects.</li>
</ul>
<li>Use a Mastodon client</li>
<ul>
<li>As Mastodon is more popular, there a lot of clients for Mastodon that perform better in all cases. However, Sharkey's Masto-API implementation isn't great, and may ultimately be a worse experience over the other methods provided.</li>
</ul>
</ul>
</section>
</details>
<details class="styled">
<summary>Disable the "Widgets" sidebar <span class="icon tabler--arrow-autofit-height"></span></summary>
<section>
<p>In the normal UI view, Sharkey has a permanent sidebar that holds widgets on the right side of the UI, which cannot be disabled. It, however, is not required in any way for normal usage, so we may use custom CSS on the client in order to remove it.</p>
<p>Simply go to your <a href="https://booping.synth.download/settings/custom-css">custom CSS</a> settings and add the below snippet:</p>
{% highlight css %}
[class^="universal-widgets-"] {
display: none;
}
{% endhighlight %}
<p>Once applied and refreshed, the widgets sidebar should now be gone. <small><i>Note that this won't effect the sidebar that appears on mobile (opened through a button on the navbar) so it's safe to use this CSS on mobile as well, in the case of client settings syncing.</i></small></p>
</section>
</details>
</section>
</article>

28
_includes/layouts/footer.njk
View file

@ -1,28 +0,0 @@
<!-- webrings and credits -->
<footer>
<div id="footer" class="window">
<div class="header">
<a href="#footer">Footer</a>
</div>
<section>
<p class="fediring"><b><a href="https://fediring.net/previous?host=synth.download" aria-label="Previous"><span class="icon tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://fediring.net">Fediring</a> <a href="https://fediring.net/next?host=synth.download" aria-label="Next"><span class="icon tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
<p class="fediring"><b><a href="https://keithhacks.cyou/furryring.php?prev=synth.download" aria-label="Previous"><span class="icon tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://keithhacks.cyou/furryring.php">furryring</a> <a href="https://keithhacks.cyou/furryring.php?next=synth.download" aria-label="Next"><span class="icon tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
<p class="fediring"><b><a href="https://stellophiliac.github.io/roboring/sneexy/previous" aria-label="Previous"><span class="icon tabler--arrow-left" style="pointer-events: none;"></span></a> <a href="https://stellophiliac.github.io/roboring">roboring</a> <a href="https://stellophiliac.github.io/roboring/sneexy/next" aria-label="Next"><span class="icon tabler--arrow-right" style="pointer-events: none;"></span></a></b></p>
<hr class="solid">
<section class="inner-footer">
<a href="https://forged.synth.download/synth.download/site" style="background-color: color-mix(in srgb, var(--maroon) 25%, transparent); color: var(--maroon);" aria-label="Website source!"><span class="icon tabler--brand-git" style="pointer-events: none;"></span></a>
<a href="https://github.com/ayu-theme/ayu-colors" style="background-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent);" aria-label="Ayu"><span class="icon tabler--palette" style="pointer-events: none;"></span></svg></a>
<a href="https://tabler.io" style="background-color: color-mix(in srgb, var(--blue) 25%, transparent); color: var(--blue);" aria-label="Tabler"><span class="icon tabler--brand-tabler" style="pointer-events: none;"></span></a>
</section>
<hr class="solid">
<p style="padding-bottom: 14px;"><a href="/privacy">Privacy Policy</a> • <a href="/tos">Terms of Service</a></p>
<p style="padding-bottom: 14px;"><a href="https://synthspecies.com">Synth species</a> created by <a href="https://www.furaffinity.net/user/vader-san">Vader-San</a>, synth.download is not affiliated with the creator in any way, and is simply just a fun little passion site.</p>
<p>Made with love, lack of sleep and procrastination.</p>
<p>♡2025 All wrongs reversed. Please copy and share.</p>
<img src="/assets/dumpysynth.gif" alt="GIF of a synth with a massive butt, shaking it towards the viewer" />
</section>
</div>
</footer>
<!-- element used for our alt popup -->
<div class="alt-popup" id="alt-popup" aria-hidden="true"></div>

26
_includes/layouts/home/intro.njk
View file

@ -1,26 +0,0 @@
<!-- simple site introduction -->
<article id="site" class="window home">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--message-chatbot"></span>
</div>
<a href="#site">Welcome!</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<p>Hey! Welcome to...</p>
<a href="https://forged.synth.download/sneexy/synth"><img id="logo" loading="lazy" src="/assets/synth.download/logo_web.svg" alt="Synth.Download" /></a>
<p>We're a small community of friends, hosting and managing stuff together. Themed around <a target="_blank" href="https://synthspecies.com">synths</a>, most of us are synths, including <small><i>(most)</i></small> of the <a href="/admins">system administrators</a>, but open and accepting of all fellow beings, creatures, toasters and organics.</p>
<p>There are a few public facing services we run here for general public use, although most services are private or require registration as they are meant for members and friends of Synth.Download. Poke at the navigation bar on top to navigate this page and figure out more about what we serve here.</p>
<p>Enjoy your stay! <i>Beep!~</i></p>
<button style="cursor: pointer; background: unset; border-width: 0px; padding: 0px; display: inline-flex;" onclick="copyButtonSynthDownload()">
<img src="/assets/buttons/synth.download.svg" alt="Synth.Download!">
</button>
</section>
</article>

116
_includes/layouts/navbar.njk
View file

@ -1,116 +0,0 @@
<!-- top navbar -->
<header class="navbar">
<a class="nav-base nav-left nav-baselink nav-desktop" aria-label="Synth.download Homepage" href="/home"><img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" /></a>
<div class="nav-base nav-left nav-baselink nav-mobile-menu">
<input type="checkbox" id="nav-mobile-menu-dropdown" value="" name="nav-mobile-menu-dropdown">
<label aria-label="Menu" for="nav-mobile-menu-dropdown" data-toggle="nav-mobile-menu">
<img aria-hidden="true" src="/assets/synth.download/synth_web.svg" class="synth-icon" />
</label>
<ul>
<li class="nav-home">
<a href="/home"><span class="icon tabler--home"></span> <span class="text">Home</span></a>
</li>
<li class="nav-services">
<a href="/services"><span class="icon tabler--server-cog"></span> <span class="text">Services</span></a>
</li>
<li class="nav-webmaster">
<a href="/admins"><span class="icon tabler--user"></span> <span class="text">Admins</span></a>
</li>
<li class="nav-donate">
<a href="/donate"><span class="icon tabler--currency-dollar"></span> <span class="text">Donate</span></a>
</li>
</ul>
</div>
<a class="nav-base nav-left nav-links nav-home" href="/home"><span class="icon tabler--home"></span> <span class="text">Home</span></a>
<a class="nav-base nav-left nav-links nav-services" href="/services"><span class="icon tabler--server-cog"></span> <span class="text">Services</span></a>
<a class="nav-base nav-left nav-links nav-webmaster" href="/admins"><span class="icon tabler--user"></span> <span class="text">Admins</span></a>
<a class="nav-base nav-left nav-links nav-donate" href="/donate"><span class="icon tabler--currency-dollar"></span> <span class="text">Donate</span></a>
<div class="nav-base nav-right nav-settings" aria-roledescription="Settings Menu">
<input type="checkbox" id="nav-settings-menu" value="" name="nav-settings-menu">
<label aria-label="Settings" for="nav-settings-menu" data-toggle="nav-settings">
<span class="icon tabler--settings">
</label>
<ul>
<li>
<h2>Settings</h2>
</li>
<li>
<hr class="solid">
<p class="caption section" style="font-size: smaller; opacity: .9;">Theme</p>
<p class="caption" style="color: var(--red);">Only works with JavaScript.</p>
<span>
<input type="radio" id="theme-auto" name="theme-setting" value="auto" checked />
<label for="theme-auto">System (Auto)</label><br>
</span>
<span>
<input type="radio" id="theme-light" name="theme-setting" value="light" />
<label for="theme-light">Light</label><br>
</span>
<span>
<input type="radio" id="theme-dark" name="theme-setting" value="dark" />
<label for="theme-dark">Dark</label><br>
</span>
</li>
<li>
<hr class="solid">
<p class="caption section" style="font-size: smaller; opacity: .9;">Font</p>
<span>
<input type="radio" id="font-jbm" name="font-setting" value="jbm" checked />
<label for="font-jbm" style="font-family: 'JetBrains Mono', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">JetBrains Mono</label><br>
</span>
<span>
<input type="radio" id="font-ahn" name="font-setting" value="ahn" />
<label for="font-ahn" style="font-family: 'Atkinson Hyperlegible Next', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Atkinson Hyperlegible Next</label><br>
</span>
<span>
<input type="radio" id="font-inter" name="font-setting" value="inter" />
<label for="font-inter" style="font-family: 'Inter', system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Inter</label><br>
</span>
<p class="caption" style="padding: .2rem 0px;">Support not guaranteed, but provided as options anyways:</p>
<span>
<input type="radio" id="font-sans-serif" name="font-setting" value="sans-serif" />
<label for="font-sans-serif" style="font-family: sans-serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, serif !important;">Sans Serif</label><br>
</span>
<span>
<input type="radio" id="font-serif" name="font-setting" value="serif" />
<label for="font-serif" style="font-family: serif, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Serif</label><br>
</span>
<span>
<input type="radio" id="font-monospace" name="font-setting" value="monospace" />
<label for="font-monospace" style="font-family: monospace, system-ui, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;">Monospace</label><br>
</span>
</li>
<li>
<hr class="solid">
<span>
<input type="checkbox" id="uncapitalization" name="uncapitalization" />
<label for="uncapitalization">Disable forced uncapitalization</label><br>
</span>
<span>
<input type="checkbox" id="disable-bg" name="disable-bg" />
<label for="disable-bg">Disable background gradient</label><br>
</span>
<span>
<input type="checkbox" id="disable-animations" name="disable-animations" />
<label for="disable-animations">Disable animations</label><br>
</span>
<span>
<input type="checkbox" id="disable-alttext" name="disable-alttext" />
<label for="disable-alttext">Disable alt-text popup</label>
</span>
</li>
<li>
<hr class="solid">
<p class="caption">Disabling the alt-text popup or forced uncapitalization does not affect "normal" accessibility. The alt-text pop-up is custom made in replacement of using the <span class="code">title</span> attribute, and forced uncapitalization is done using CSS's <span class="code">text-transform</span>.</p>
<p class="caption" style="padding: .6rem 0px;">These settings are done entirely with CSS (except the Theme settings), and will be saved into your browser if you have JavaScript enabled. Otherwise, <span style="color: var(--red);">your settings will not be saved.</span></p>
</li>
</ul>
</div>
<p aria-hidden="true" class="nav-base nav-right nav-systray">
<span class="icon tabler--bell"></span>
<span class="icon tabler--volume"></span>
<span class="icon tabler--wifi"></span>
<span class="icon tabler--battery-filled"></span>
</p>
</header>

30
_includes/layouts/pages/about/about.njk Normal file
View file

@ -0,0 +1,30 @@
<!-- about synth.download -->
<article window id="about">
<div class="header">
<titlebar-icon aria-hidden="true">
<icon-tabler info-circle></icon-tabler>
</titlebar-icon>
<a href="#about">About</a>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<window-contents>
<h1><a href="#about">About</a></h1>
<p>Synth.Download is a project managed by serveral synths <small><s>and protogens</s></small> to provide a collection of (some public, some private) privacy respecting frontends and web services. We strive to create a safe community for ourselves and for those who accept us.</p>
<h2 id="contact"><a href="#contact">Contact</a></h2>
<p>Synth.Download is maintained by <a href="/admins">several administrators</a>, although <a href="https://sneexy.synth.download">Sneexy</a> is the one who mainly manages everything. Contact <span link-color>synth@synth.download</span> for reports or suggestions.</p>
<p>We also have a <a href="https://signal.group/#CjQKIGETy9DaJ_wF3iIun-uBSD4T1ZqrJbnXhkqZZdtUdX5LEhD7RbDqEm2gfLZsCINNwVc2">Signal group chat</a> which serves as our general lounge chat. Joins require approval; will be denied if unrecongnized or deemed to be spam.</p>
<h2 id="history"><a href="#history">History</a></h2>
<p><small>This section is written by <a href="https://sneexy.synth.download">Sneexy.</a></small></p>
<p>Synth.Download is a project started in October of 2024 by <a href="https://sneexy.synth.download">Sneexy</a>, buying the domain <code>synth.download</code> as it was available, and as I am a Synth. Initially, the domain was used to only used to serve a <small>much, <i>much</i></small> older iteration of this site that was used to only provide information about myself, and ran about a handful of services only for personal usage.</p>
<p>The very first server used to host services here was a Netcup VPS, and the very first service made available on this domain that wouldn't see the "personal usage" treatment is our very own <a href="https://beeping.synth.download">Iceshrimp.NET</a> instance.</p>
<p>Later on, as time progressed, I started running more services that I figured would be more useful, the next thing run after Iceshrimp would be our own <a href="https://beeping.synth.download">Sharkey</a> instance <small>(I <i>swear</i> we don't only just run Fediverse instances here, Iceshrimp.NET was just <i>too</i> beta for our tastes)</small>, which as far as I can tell is probably our most popular service as of now.</p>
<p>Synth.Download has went through many server migrations between different Netcup VPS'es <small>before <i>finally</i> getting off them</small> along with various site and services improvements, and overall has started to shape into what I am proud to call as a proper community rather than being a silly site on the indie web (although, deep down, we all know it's still that).</p>
<p>Thank you all for being here, both users and administrators. It means a lot to me. 💚</p>
</window-contents>
</article>

23
_includes/layouts/pages/about/servers.njk Normal file
View file

@ -0,0 +1,23 @@
<!-- synth.download servers -->
<article window id="servers">
<div class="header">
<titlebar-icon aria-hidden="true">
<icon-tabler server></icon-tabler>
</titlebar-icon>
<a href="#servers">Servers</a>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<window-contents>
<h2 id="servers"><a href="#servers">Servers</a></h2>
<p>The servers that are responsible for housing Synth.Download are proudly hosted and provided by <a href="https://foxgirl.dev">Lua</a>, and are located in Canada. All services on Synth.Download are containerized within Docker containers.</p>
<p>Services are split between two KVM's on two different servers, namely <code>phosphorus</code>, which has more breathing room and handles running our more advanced and heavier services, such as our Fediverse instances, and <code>neptunium</code>, which handles all web traffic and our more lighter services, such as this site you're looking at right now.</p>
<p>Backups are taken nightly and stored off-site.</p>
<p>For those curious about our server configurations and setups, we publicly provide them <a href="https://forged.synth.download/sd/synth.download">at our Git repository</a>.</p>
</window-contents>
</article>

22
_includes/layouts/pages/admins/admins.njk Normal file
View file

@ -0,0 +1,22 @@
<!-- synth.download admins -->
<article window id="admins">
<div class="header">
<titlebar-icon aria-hidden="true">
<icon-tabler user-cog></icon-tabler>
</titlebar-icon>
<a href="#Admins">Admins</a>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<window-contents>
<h1><a href="#admins">Admins</a></h1>
<p>Listed below is all administrators (those with administrative access to the Synth.Download servers) who currently help and work on Synth.Download.</p>
<p>For any questions, please contact <span link-color>synth@synth.download</span> or <a href="https://sneexy.synth.download">Sneexy</a> directly.</p>
{% include "layouts/pages/admins/list.njk" %}
</window-contents>
</article>

42
_includes/layouts/pages/admins/list.njk Normal file
View file

@ -0,0 +1,42 @@
<card-container>
<card-entry id="sneexy">
<h3><a href="#sneexy">Sneexy <small>(Ruben)</small></a></h3>
<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>
</a>
</buttons-container>
<img sona src="/assets/admins/sneexy.svg" alt="">
</card-entry>
<card-entry id="senil">
<h3><a href="#senil">Senil</a></h3>
<p>Maintainer; Admin.</p>
<buttons-container>
<a button href="https://senil.me" aria-label="Website">
<icon-tabler external-link></icon-tabler>
</a>
</buttons-container>
<img sona src="/assets/admins/senil.png" alt="">
</card-entry>
<card-entry id="unnick">
<h3><a href="#unnick">unnick</a></h3>
<p>Admin.</p>
<buttons-container>
<a button href="https://beepi.ng" aria-label="Website">
<icon-tabler external-link></icon-tabler>
</a>
</buttons-container>
<img sona src="/assets/admins/unnick.png" alt="">
</card-entry>
<card-entry id="zenfyr">
<h3><a href="#zenfyr">zenfyr</a></h3>
<p>Maintainer; Admin.</p>
<buttons-container>
<a button href="https://zenfyr.dev" aria-label="Website">
<icon-tabler external-link></icon-tabler>
</a>
</buttons-container>
<img sona src="/assets/admins/zenfyr.png" alt="">
</card-entry>
</card-container>

42
_includes/layouts/pages/donate/donate.njk Normal file
View file

@ -0,0 +1,42 @@
<!-- donation window -->
<article window id="donate">
<div class="header">
<titlebar-icon aria-hidden="true">
<icon-tabler currency-dollar></icon-tabler>
</titlebar-icon>
<a href="#donate">donate</a>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<window-contents>
{% include "layouts/pages/donate/important.njk" %}
<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>
<script async src="https://js.stripe.com/v3/buy-button.js"></script>
<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>
</window-contents>
</article>

10
_includes/layouts/pages/donate/important.njk Normal file
View file

@ -0,0 +1,10 @@
<section notice-card important>
<h3><icon-tabler alert-triangle></icon-tabler> Important</h3>
<ul>
<li>
Our administrator <a href="https://senil.me">Senil</a> is in dire need of funds in order to afford paying debts and bills.<br>
<iframe src="https://booping.synth.download/embed/notes/aebru88gmln300rd" data-misskey-embed-id="v1_a9d12b16-2efa-4533-b055-a911efc38e3f" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>
<script defer src="https://booping.synth.download/embed.js"></script>
</li>
</ul>
</section>

33
_includes/layouts/fediverse/sharkey/bubble.njk → _includes/layouts/pages/fediverse/bubble.njk
View file

@ -1,22 +1,22 @@
<!-- bubble timeline -->
<article id="bubble" class="window">
<article window id="bubble">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--info-circle"></span>
</div>
<titlebar-icon aria-hidden="true">
<icon-tabler chart-bubble></icon-tabler>
</titlebar-icon>
<a href="#bubble">Bubble timeline</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<section>
<window-contents>
<h2><a href="#bubble">Bubble timeline</a></h2>
<p>Our instance is configured with a curated timeline of hand-picked instances that we deem to be a part of community of, or are great friends. Below is the entire list of of all instances configured in our Bubble timeline.</p>
<ul>
<p>Our instances are configured with a curated timeline of hand-picked instances that we deem to be a part of our community, are great friends, or generally fit our culture and vibes. Below is the entire list of of all instances configured in our Bubble timelines.</p>
<ul bubble>
<li>
<a href="https://akko.wtf">akko.wtf</a>
</li>
@ -26,9 +26,6 @@
<li>
<a href="https://arff.archandle.net">arff.archandle.net</a>
</li>
<li>
<a href="https://booping.synth.download">booping.synth.download</a>
</li>
<li>
<a href="https://cafe.autumn.town">cafe.autumn.town</a>
</li>
@ -141,5 +138,5 @@
<a href="https://yeen.town">yeen.town</a>
</li>
</ul>
</section>
</window-contents>
</article>

81
_includes/layouts/pages/fediverse/instances-list.njk Normal file
View file

@ -0,0 +1,81 @@
<card-container>
<card-entry sharkey>
<h3>
<img icon src="/assets/icons/sharkey.svg" alt="">
Sharkey
<span status>
<span><img src="https://status.synth.download/api/badge/1/status?style=flat-square" alt=""></span>
</span>
</h3>
<p><img emoji src="/assets/synth.download/icons/boopkey.svg"> <b>Boopkey!</b> Our most popular instance, running <a href="https://activitypub.software/TransFem-org/Sharkey">Sharkey</a>, a soft-fork of <a href="https://misskey-hub.net">Misskey</a>.</p>
<p>Sharkey provides a more fun and featureful experience to the Fediverse. It includes neat and useful features such as emoji reactions, blog-like pages, galleries, a file "Drive" feature, and more. We recommend this instance if you're looking for something more advanced, or are perhaps wanting to try something different from Mastodon or other software.</p>
<p info><icon-tabler info-circle aria-label="Information"></icon-tabler> Accounts housed on this instance will be 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 right button i2p href="http://synthn43gye7ymvv7y63ru6lisoephszczlnojqlkz5ltwv66mta.b32.i2p" aria-label="I2P">
<icon-tabler vector></icon-tabler>
</a>
<a button yggdrasil href="http://booping.ygg.synth.download" aria-label="Yggdrasil">
<icon-tabler leaf></icon-tabler>
</a>
<a button tor href="http://booping.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler spiral></icon-tabler>
</a>
</buttons-container>
</card-entry>
<card-entry mastodon>
<h3>
<img icon src="/assets/icons/mastodon.svg" alt="">
Mastodon
<span status>
<span><img src="https://status.synth.download/api/badge/5/status?style=flat-square" alt=""></span>
</span>
</h3>
<p><img emoji src="/assets/synth.download/icons/merpstodon.svg"> <b>Merpstodon!</b> Runs <a href="https://github.com/synth-download/mastodon">our fork</a> of <a href="https://joinmastodon.org">Mastodon</a>, based on <a href="https://github.com/TheEssem/mastodon">another fork</a>.</p>
<p>Traditional, Calmer, and more Microblogging-like. As Mastodon is the more popular software on the fediverse in general, we also provide it as an option for those who are used to it or prefer it. We run our own modified version of Mastodon which provides extra features, such as widely federated lists and support for using emoji reactions. We recommend this instance for something more simpler and straightforward, or if the compatibility with Mastodon apps and platforms is preferred.</p>
<p info><icon-tabler info-circle aria-label="Information"></icon-tabler> Accounts housed on this instance will be 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 right button i2p href="http://synthn43gye7ymvv7y63ru6lisoephszczlnojqlkz5ltwv66mta.b32.i2p" aria-label="I2P">
<icon-tabler vector></icon-tabler>
</a>
<a button yggdrasil href="http://merping.ygg.synth.download" aria-label="Yggdrasil">
<icon-tabler leaf></icon-tabler>
</a>
<a button tor href="http://merping.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler spiral></icon-tabler>
</a>
</buttons-container>
</card-entry>
<card-entry iceshrimp advise-against>
<h3>
<img icon src="/assets/icons/iceshrimp.svg" alt="">
Iceshrimp.NET
<span status>
<span><img src="https://status.synth.download/api/badge/9/status?style=flat-square" alt=""></span>
</span>
</h3>
<p><img emoji src="/assets/synth.download/icons/icesynth.svg"> <b>Icesynth!</b> A lightweight, Misskey-inspired software.</p>
<p>Software still in heavy beta stages of development that plans to be a "Misskey, but balanced just right". Our very first instance that we've been running on Synth.Download!</p>
<p warning><icon-tabler alert-triangle aria-label="Warning"></icon-tabler> Sadly, we currently do not suggest using this software for normal/daily usage. Sharkey and Mastodon provide better and far more stable user experiences. We may lend out invites for this instance if you wish to run, for example, a bot account, but for now, this software requires maturing before we can allow it to be publicly used.</p>
<p info><icon-tabler info-circle aria-label="Information"></icon-tabler> Accounts housed on this instance will be located at <span>@synth.download</span></p>
<buttons-container>
<a button href="https://beeping.synth.download" aria-label="Go">
<icon-tabler arrow-forward></icon-tabler>
</a>
<a right button i2p href="http://synthrfmxti7rfwfh4gg6n5qiwbt6x52qudys4hql6eafb6qexoa.b32.i2p" aria-label="I2P">
<icon-tabler vector></icon-tabler>
</a>
<a button yggdrasil href="http://beeping.ygg.synth.download" aria-label="Yggdrasil">
<icon-tabler leaf></icon-tabler>
</a>
<a button tor href="http://beeping.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler spiral></icon-tabler>
</a>
</buttons-container>
</card-entry>
</card-container>

23
_includes/layouts/pages/fediverse/instances.njk Normal file
View file

@ -0,0 +1,23 @@
<!-- instances -->
<article window id="instances">
<div class="header">
<titlebar-icon aria-hidden="true">
<icon-tabler server></icon-tabler>
</titlebar-icon>
<a href="#instances">Instances</a>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<window-contents>
<h2><a href="#instances">Instances</a></h2>
<p>An Instance is your home server, where your account and posts will live. We provide multiple options as listed on <a href="/services">our services page</a>, all on different domains with different software aimed to suite the needs of different users and preferences.</p>
<p>Common features shared between these instances are a 100,000 character limit on posts, 5,000 character limit for content warnings, and a 100 megabyte upload limit for files.</p>
{% include "layouts/pages/fediverse/instances-list.njk" %}
<p>All sorts of configurations, limits and moderation are synced between each instances whenever possible.</p>
</window-contents>
</article>

33
_includes/layouts/pages/fediverse/intro.njk Normal file
View file

@ -0,0 +1,33 @@
<!-- fediverse introduction -->
<article window id="fediverse">
<div class="header">
<titlebar-icon aria-hidden="true">
<icon-tabler universe></icon-tabler>
</titlebar-icon>
<a href="#fediverse">Fediverse</a>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<window-contents>
<h1><a href="#fediverse">Fediverse</a></h1>
<p>Synth.Download hosts a few opinionated fediverse instances that allows you to connect and explore the wider Fediverse, a network of software that uses <a href="https://activitypub.rocks">ActivityPub</a> to communicate with each other, all running various software for each personals taste. This page is dedicated to detailing our instance options and how we manage them.</p>
<p>All of our instances are under <i>invite only</i> registration. We do this to main a good and healthy experience for our users. If you wish to register, you may:</p>
<ul>
<li>Ask a known, registered member to send an invite.</li>
<li>Ask a known, registered member to vouch for you.</li>
<li>Poke <a href="/admins">an admin</a> for an invite.</li>
</ul>
<imgbtn-grid>
<a href="https://synth.download"><img src="/assets/buttons/synth.download.svg" alt="Synth.Download"></a>
<a href="https://akko.wtf"><img src="/assets/buttons/sites/akko.wtf.png" alt="Luna Nova"></a>
<a href="https://java.duke.social"><img src="/assets/buttons/sites/duke.social.webp" alt="Duke Social"></a>
<a href="https://labyrinth.zone"><img src="/assets/buttons/sites/labyrinth.zone.gif" alt="Labyrinth Zone"></a>
<a href="https://oomfie.city"><img src="/assets/buttons/sites/oomfie.city.png" alt="Oomfie City"></a>
</imgbtn-grid>
</window-contents>
</article>

42
_includes/layouts/pages/fediverse/moderation.njk Normal file
View file

@ -0,0 +1,42 @@
<!-- moderation-->
<article window id="moderation">
<div class="header">
<titlebar-icon aria-hidden="true">
<icon-tabler info-circle></icon-tabler>
</titlebar-icon>
<a href="#moderation">Moderation</a>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<window-contents>
<h2><a href="#moderation">Moderation</a></h2>
<p>Our moderation is opinionated and collaboratively done between local moderators and with moderation friends from other instances. We try to have a good balance between having a safe community with little nuisance while being openly federated with wider communities.</p>
<p>We have little spoons to deal with issues and tend to take action swiftly. We <b>suspend</b> instances that:</p>
<ul>
<li>Consists of having communities/a majority of users who are racist/facists, queerphobic, and anything else crossing those lines <i>or</i> breaks any of our rules.</li>
<li>Known instances or communities/groups that harass others/our own communities and friends.</li>
<li>Heavily radiates "Bad Vibes" to us collectively as a community <small><i>(In ways where an instance may not appear bad on the surface, but consistently points in directions that nudges towards ideas that either harm us or risks our own safety)</i></small>.</li>
<li>Maliciously modifies federation (Ignoring deletes, converting non-public posts to public, Etc.)</li>
</ul>
<p>For anything else, we usually tend to <b><small>media-</small>silence</b>:</p>
<ul>
<li>Instances without rules for tagging content/with users that consistently don't properly tag posts, such as politics and NSFW-related posts.</li>
<li>Instances that mainly to <i>only</i> consists of heavy amounts of "Irony-poisoned" or "racism funny" posting.</li>
<li>Instances that may not be "bad" or break any rules on the surface, but collectively gives us very offputting vibes that we deem it possibly unsafe and limit federation for safety reasons.</li>
<li>Large instances that could be affected by spam attacks.</li>
</ul>
<p><i>By default</i>, we don't block through guilt-by-federation. <i>However</i>, if we find an instance that consistently federates or otherwise associates and notably supports bad actors - more specifically those who have otherwised harmed us or others/close friends and instances before - we may consider the instance for <b>suspension</b> depending on the case. This is entirely for the safety of our own community and the many risk factors of keeping continued federation.</p>
<p>We also may <b>suspend</b>/<i>silence</i> instances if our users are reportedly uncomfortable about them, whether via the users or the content on the instance. Again, we want a safe space for ourselves and friends.</p>
<p>Our actions aren't limited to what is based on interactions from/within our own community. If we find harassment or otherwise any negative behavior towards other users or our close friends/instances, action <i>will</i> still be done. Remember: we moderate <i>collaboratively</i>.</p>
<p>To be frank, we are a small group of burned-out moderators with past negative experiences on the fediverse and therefore choose to moderate how we will to protect ourselves and our community.</p>
<hr solid>
<p>If you're a user, and would like to question any of our moderation decisions or actions, or talk about a specific instance <small>(or for more information on why we block/silence a specific instance)</small>, feel free to bring it up with the moderators/administrators. If it's an instance/user you deem should be up for moderation action, report it instead.</p>
<hr solid>
<p>To see moderation lists, such as silenced and blocked instances, please check the About Instance information on your instance to see if it's made available to you directly. If that is not the case, ask a moderator/administrator and give you a copy of our current list.</p>
</window-contents>
</article>

55
_includes/layouts/pages/fediverse/rules.njk Normal file
View file

@ -0,0 +1,55 @@
<!-- instance rules -->
<article window id="rules">
<div class="header">
<titlebar-icon aria-hidden="true">
<icon-tabler notebook></icon-tabler>
</titlebar-icon>
<a href="#rules">Rules</a>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<window-contents>
<h2><a href="#rules">Rules</a></h2>
<p>Our <a href="/tos">Terms of Service</a> applies when using the Fediverse as our instance rules, both for our own community and also as we moderate those remotely. Rules may be a bit lax for our own local community, as we <i>trust</i> you to be here. We recommend reading our Terms of Service to get a baseline that applies as rules, but to summarize:</p>
<ul>
<li>
No nazism, racism, antisemitism, queerphobia of any type, bigotry of any kind, or harassment. <b>Any type of hate speech is not allowed. We are <i>not</i> a "Free Speech" zone.</b>
</li>
<li>
<b>Pedophilia, zoophilia, "radqueers" and other related communities and labels are not allowed.</b> This also includes any references/usage of fictional counterparts, such as lolicon/shota and cub pornography.
</li>
<li>
Don't post anything that would otherwise get us into legal trouble, as within Canadian laws.
</li>
<li>
No spam. Obviously.
</li>
<li>
<b>Use content warnings.</b> Be considerate for others, add a properly labeled content warnings to your posts as needed, such as:
<ul>
<li>NSFW content as a whole (including kinks, fetishes, etc)</li>
<li>World/local politics</li>
<li>Otherwise content that may possibly be distressing/depressing to others</li>
</ul>
Reclaimed slurs may be left without a content warning, as long as you know and respect your own space/"audience".
</li>
<li>
<b>Respect your own and others right to privacy, opinions, and boundaries.</b> <i>Especially</i> for boundaries, make an effort to ensure you aren't overstepping someone's comfort zone.
</li>
<li>
<b>We encourage adding alt text onto publicly posted media.</b> Not a required rule, but we recommend it.
</li>
<li>
<i>Basically:</i> <b>Just use common sense</b>.
</li>
<li aria-hidden="true">
<small>beep merp rawr :3</small>
</li>
</ul>
</window-contents>
</article>

31
_includes/layouts/pages/index.njk Normal file
View file

@ -0,0 +1,31 @@
<!-- simple site introduction -->
<article window id="home">
<div class="header">
<titlebar-icon aria-hidden="true">
<icon-tabler message-chatbot></icon-tabler>
</titlebar-icon>
<a href="#site">Welcome!</a>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<window-contents>
<p t-center>Hey! Welcome to...</p>
<p t-center><a id="logo" href="https://forged.synth.download/sneexy/synth"><img loading="lazy" src="/assets/synth.download/logo_web.svg" alt="Synth.Download" /></a></p>
<p>We're a project managed by beepers, toasters, and other non-organic and organic creatures alike, hosting and running services together to provide ourselves with a safe community, and for the greater net public. if you like what we do, please consider <a href="/donate">donating</a>!</p>
<p>Synth.Download is, obviously, themed around <a href="https://synthspecies.com">Synths</a>. In general, we're aimed towards furry, therian, otherkin and non-organic-like beings, but accepts all! As long as you're chill with us.</p>
<p>Read our <a href="/about">About</a> for more information related to Synth.Download itself, or head over to our <a href="/services">Services</a> page to see what we provide. <small>By accessing and using this site and its services, you agree to our <a href="/privacy">Privacy Policy</a> and <a href="/tos">Terms of Service</a>.</small></p>
<p t-center>Enjoy your stay! <i>Beep!~</i></p>
<imgbtn-grid>
<button style="cursor: pointer; background: unset; border-width: 0px; padding: 0px; display: inline-flex;" onclick="copyButtonSynthDownload()">
<img src="/assets/buttons/synth.download.svg" alt="Synth.Download!">
</button>
<a href="https://oomfie.city"><img src="/assets/buttons/sites/oomfie.city.png" alt="Oomfie City"></a>
<a href="https://labyrinth.zone"><img src="/assets/buttons/sites/labyrinth.zone.gif" alt="Labyrinth Zone"></a>
</imgbtn-grid>
</window-contents>
</article>

49
_includes/layouts/pages/privacy.njk Normal file
View file

@ -0,0 +1,49 @@
<!-- privacy policy -->
<article window id="privacy">
<div class="header">
<titlebar-icon aria-hidden="true">
<icon-tabler lock></icon-tabler>
</titlebar-icon>
<a href="#privacy">Privacy Policy</a>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<window-contents>
<h1><a href="#privacy">Privacy Policy</a></h1>
<p><small>Updated at <time datetime="2025-10-27 19:29">2025-10-27.</time></small></p>
<h2 id="terms"><a href="#terms">Terms</a></h2>
<p>These terms help clarify what this policy mentions and covers.</p>
<ol>
<li>"We/Us" - Synth.Download's administrators.</li>
<li>"Service/Services" - Any service and frontend provided by Synth.Download.</li>
<li>"User" - Any user accessing Synth.Download and its services.</li>
<li>"Registered User/Member" - Any user who is considered a member, and has an account registered on any Synth.Download service.</li>
</ol>
<h2 id="users"><a href="#users">Users</a></h2>
<p>By default, all services, including this website, log the minimum amount of connection data that is collected by default in our Caddy logs. This includes:</p>
<ul>
<li>The IP address used to connect.</li>
<li>The user-agent of the application used to connect (Your browser/client, operating system, other related system and software information)</li>
<li>The exact date and time a connection was made.</li>
</ul>
<p>We only store these logs for protection of our services in the case of any malicious behavior against our services, and are rolled over <b>every week</b>.</p>
<p>All logs are stored locally. We do <i>not</i> send data to be processed by anyone or anywhere else. We do <i>not</i> user or have any sort of analytics system in place. We do <i>not</i> use any of this data to "collect" or "profile" any individual. We do <i>not</i> try or attempt to store more data than is strictly necessary.</p>
<p>Under Canadian laws, <a href="https://en.wikipedia.org/wiki/Canadian_privacy_law">the PIPEDA</a> applies with how we handle data protection. We also attempt to follow <a href="https://en.wikipedia.org/wiki/General_Data_Protection_Regulation">the GDPR</a>, along with running services with GDPR in mind, for storing and managing personal data, and allow for complete deletion of all personal data (if any is stored ourselves) whenever possible.</p>
<p>This website does not make any external connections <i>except</i> for the <a href="/donate">Donate</a> page, which embeds a <a href="https://stripe.com">Stripe</a> widget, and ocasionally, embedded Sharkey notes and timelines, of which is from <a href="https://booping.synth.download">our instance</a> that we run and manage ourselves. This websites use of technology such as JavaScript is only used to store user preferences and add additional client-side improvements.</p>
<p>We utilize <a href="https://www.backblaze.com">Backblaze</a> to store media, files, and encrypted off-site backups, and <a href="https://bunny.net">Bunny</a> as our CDN to help with media network speeds. Their Privacy Policies and Terms of Service also applies.</p>
<h2 id="registered-users"><a href="#registered-users">Registered Users</a></h2>
<p>Users who have registered accounts of any Synth.Download service are required to provide extra information that is required by said service, or is to be optionally provided by the member. This information usually includes email addresses <small>(for the case or need of verification or password resets)</small> and passwords <small>(securely stored and hashed)</small>.</p>
<p>As a transparency note, all provided data and information on the members end is accessible by <a href="/admins">all administrators</a> of Synth.Download, but will <i>not</i> be mishandled or misused for any purposes and will <i>only</i> be accessed for the cases of:</p>
<ul>
<li>Required moderation/administration actions on our end.</li>
<li>Need of emergency contact.</li>
<li>(By) Any request asked by the member.</li>
</ul>
<p>Depending on the service, we may have easier access to specific information for account management or service moderation/administrative purposes.</p>
</window-contents>
</article>

30
_includes/layouts/pages/services/filters.njk Normal file
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>

350
_includes/layouts/pages/services/list.njk Normal file
View file

@ -0,0 +1,350 @@
<card-container>
<card-entry redlib>
<h3>
<img icon src="/assets/icons/redlib.svg" alt="">
Redlib
<span status>
<span><img src="https://status.synth.download/api/badge/19/status?style=flat-square" alt=""></span>
<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>
<a right button i2p href="http://synthoclokpnsxa2xloi5skskaltlbjjhpvadqrs7swz2vpqui4a.b32.i2p" aria-label="I2P">
<icon-tabler vector></icon-tabler>
</a>
<a button yggdrasil href="http://reddit.ygg.synth.download" aria-label="Yggdrasil">
<icon-tabler leaf></icon-tabler>
</a>
<a button tor href="http://reddit.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler spiral></icon-tabler>
</a>
</buttons-container>
</card-entry>
<card-entry safetwitch>
<h3>
<img icon src="/assets/synth.download/icons/twitch.svg" alt="">
SafeTwitch
<span status>
<span><img src="https://status.synth.download/api/badge/21/status?style=flat-square" alt=""></span>
<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>
<a right button i2p href="http://synthj6e6xw3kjn2ipd3cmcvu5oic4znsvnjfisdd775wbp3xbqa.b32.i2p" aria-label="I2P">
<icon-tabler vector></icon-tabler>
</a>
<a button yggdrasil href="http://twitch.ygg.synth.download" aria-label="Yggdrasil">
<icon-tabler leaf></icon-tabler>
</a>
<a button tor href="http://twitch.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler spiral></icon-tabler>
</a>
</buttons-container>
</card-entry>
<card-entry searxng>
<h3>
<img icon src="/assets/synth.download/icons/search.svg" alt="">
SearxNG
<span status>
<span><img src="https://status.synth.download/api/badge/20/status?style=flat-square" alt=""></span>
<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>
<a right button i2p href="http://synth5agr6rfgw2ff6vx2qnlcee7o2vryeyubgnbflukmaohdyda.b32.i2p" aria-label="I2P">
<icon-tabler vector></icon-tabler>
</a>
<a button yggdrasil href="http://searx.ygg.synth.download" aria-label="Yggdrasil">
<icon-tabler leaf></icon-tabler>
</a>
<a button tor href="http://searx.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler spiral></icon-tabler>
</a>
</buttons-container>
</card-entry>
<card-entry sharkey>
<h3>
<img icon src="/assets/icons/sharkey.svg" alt="">
Sharkey
<span status>
<span><img src="https://status.synth.download/api/badge/1/status?style=flat-square" alt=""></span>
<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>
<a right button i2p href="http://synthn43gye7ymvv7y63ru6lisoephszczlnojqlkz5ltwv66mta.b32.i2p" aria-label="I2P">
<icon-tabler vector></icon-tabler>
</a>
<a button yggdrasil href="http://booping.ygg.synth.download" aria-label="Yggdrasil">
<icon-tabler leaf></icon-tabler>
</a>
<a button tor href="http://booping.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler spiral></icon-tabler>
</a>
</buttons-container>
</card-entry>
<card-entry mastodon>
<h3>
<img icon src="/assets/icons/mastodon.svg" alt="">
Mastodon
<span status>
<span><img src="https://status.synth.download/api/badge/5/status?style=flat-square" alt=""></span>
<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>
<a right button i2p href="http://synthn43gye7ymvv7y63ru6lisoephszczlnojqlkz5ltwv66mta.b32.i2p" aria-label="I2P">
<icon-tabler vector></icon-tabler>
</a>
<a button yggdrasil href="http://merping.ygg.synth.download" aria-label="Yggdrasil">
<icon-tabler leaf></icon-tabler>
</a>
<a button tor href="http://merping.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler spiral></icon-tabler>
</a>
</buttons-container>
</card-entry>
<card-entry iceshrimp advise-against>
<h3>
<img icon src="/assets/icons/iceshrimp.svg" alt="">
Iceshrimp.NET
<span status>
<span><img src="https://status.synth.download/api/badge/9/status?style=flat-square" alt=""></span>
<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>
<a right button i2p href="http://synthrfmxti7rfwfh4gg6n5qiwbt6x52qudys4hql6eafb6qexoa.b32.i2p" aria-label="I2P">
<icon-tabler vector></icon-tabler>
</a>
<a button yggdrasil href="http://beeping.ygg.synth.download" aria-label="Yggdrasil">
<icon-tabler leaf></icon-tabler>
</a>
<a button tor href="http://beeping.synth3ty6s54waoilizkfdgt2ry4fxdaoxgen5yp6ymeeytjbtvlgtyd.onion" aria-label="Tor">
<icon-tabler spiral></icon-tabler>
</a>
</buttons-container>
</card-entry>
<card-entry pds>
<h3>
<img icon src="/assets/synth.download/icons/atproto.svg" alt="">
PDS
<span status>
<span><img src="https://status.synth.download/api/badge/11/status?style=flat-square" alt=""></span>
<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>
</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>
<span><img src="https://status.synth.download/api/badge/16/status?style=flat-square" alt=""></span>
<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>
</buttons-container>
</card-entry>
<card-entry xmpp>
<h3>
<img icon src="/assets/icons/xmpp.svg" alt="">
XMPP
<span status>
<span><img src="https://status.synth.download/api/badge/13/status?style=flat-square" alt=""></span>
<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>
</buttons-container>
</card-entry>
<card-entry forgejo>
<h3>
<img icon src="/assets/icons/forgejo.svg" alt="">
Forgejo
<span status>
<span><img src="https://status.synth.download/api/badge/12/status?style=flat-square" alt=""></span>
<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>
</buttons-container>
</card-entry>
<card-entry vaultwarden>
<h3>
<img icon src="/assets/icons/vaultwarden.svg" alt="">
Vaultwarden
<span status>
<span><img src="https://status.synth.download/api/badge/24/status?style=flat-square" alt=""></span>
<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>
</buttons-container>
</card-entry>
<card-entry freshrss>
<h3>
<img icon src="/assets/icons/freshrss.svg" alt="">
FreshRSS
<span status>
<span><img src="https://status.synth.download/api/badge/15/status?style=flat-square" alt=""></span>
<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>
</buttons-container>
</card-entry>
</card-container>

26
_includes/layouts/pages/services/services.njk Normal file
View file

@ -0,0 +1,26 @@
<!-- publics & private services -->
<article window id="services">
<div class="header">
<titlebar-icon aria-hidden="true">
<icon-tabler server-cog></icon-tabler>
</titlebar-icon>
<a href="#services">Services</a>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<window-contents>
<h1><a href="#services">Services</a></h1>
<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>Some services provide alternative hidden services for <a href="https://geti2p.net/en/">I2P</a>, <a href="https://www.torproject.org/">Tor</a>, and <a href="https://yggdrasil-network.github.io/">Yggdrasil</a>. Services with anonymous input options do not have hidden services due to safety concerns.</p>
<p><small>For those curious on our systems or configurations, refer to <a href="/about">our about page</a>.</small></p>
{% include "layouts/pages/services/filters.njk" %}
{% include "layouts/pages/services/list.njk" %}
</window-contents>
</article>

30
_includes/layouts/pages/sneexy/about.njk Normal file
View file

@ -0,0 +1,30 @@
<!-- about me -->
<article window id="about-me">
<div class="header">
<titlebar-icon aria-hidden="true">
<icon-tabler info-circle></icon-tabler>
</titlebar-icon>
<a href="#about-me">About me</a>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<window-contents>
<h2><a href="#about-me">about me</a></h2>
<p>I'm a <span class="rainbow">gay</span> goo-<a href="https://synthspecies.com">Synth</a> on the internet, <small>a zoomer, established 2006,</small> who likes to store endless amounts of data and pretends to be a computer himself. <small>For information related to my Synth-sona, <a href="https://sneexy.synth.download/ruben">refer to here</a>.</small> I'm autistic and have ADHD, and those two blended together create the mess that I am today.</p>
<p>I consider myself to be a <span style="text-transform: capitalize;">professional computer toucher<span aria-hidden="true">™</span></span>, and try my best to poke at computers or anything related to weird tech that interest me. I would say I've messed enough in a good share of both software and hardware related things.</p>
<p>I'm a nerd with <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software">Free and Open Source</a> stuff and also caring about my privacy whenever possible <small>considering that it doesn't really seem to exist at all in the modern world, anyways</small>. I also like messing around with Linux, trying a bit of <a no-uncap href="https://archlinux.org">Arch</a> and a little bit of <a no-uncap href="https://nixos.org">NixOS</a>, but found comfort with <a no-uncap href="https://fedoraproject.org">Fedora</a>. <small>If you're interested, I'm currently running my own customized varient of <a no-uncap href="https://fedoraproject.org/atomic-desktops/kinoite">Fedora Kinoite</a> made with <a no-uncap href="https://blue-build.org">BlueBuild</a> that <a href="https://github.com/sneexy-boi/bluebuild-custom">you can find here</a>.</small> With all of that out of the way, I will mention that I'm not going to shove these down anyone's throat, and if you're someone who does that, kindly reconsider your own behavior.</p>
<p>Despite what is mentioned above, I'm not really a programmer, <span no-uncap>IT support</span> guy, some professional info-sec person or anything like that. My knowledge is honestly quite limited. At most, I personally mainly know just enough Bash to make jank scripts, HTML and CSS, and a good amount of Linux and Docker/Podman to let me survive. As much as I'd like to learn to expand, I've tried Python before with full intention and motivation of properly learning it to make things and it just didn't stick at all for me, and considering that was with <i>Python</i>, I'm goign to assume my limits in terms of handling things are pretty low.</p>
<p>I also run synth.download! The thing you're looking at! Made with love and containers. <icon-tabler heart style="color: var(--red);"></icon-tabler></p>
<p>I <i>absolutely</i> despise capitalism with every single fiber in my living synthentic body. Although I think everyone in this similar space does as well.</span>
<p>In case it wasn't obvious or clear somehow at this point, I'm a furry. And gay. And weird. I may not be covered in fur or an <i>"animal"</i>, but that doesn't mean I'm not in the same space. <small>Being a human fucking <span no-uncap>SUCKS</span></small>.</p>
<p><span no-uncap>Certified<span aria-hidden="true">™</span> idiot</span> <small>(although I think this one is obvious)</small></p>
<p>For the record, and this is most likely something worth pointing out: My mental health isn't great and I tend to have intense mood swings, and can sometimes randomly break down. Please excuse me in these moments, Thanks. <icon-tabler heart style="color: var(--accent);"></icon-tabler></p>
<p>I'm also usually exhausted. Both mentally and physically, if that wasn't clear.</p>
<p>Sometimes, I do make things, but honestly don't expect much from me. <small>I'll make some type of gallery page soon for the things I <i>do</i> make and the things others do for me, I promise.</small></p>
</window-contents>
</article>

45
_includes/layouts/sneexy/buttons.njk → _includes/layouts/pages/sneexy/buttons.njk
View file

@ -1,30 +1,29 @@
<!-- buttons -->
<article id="buttons" class="window home">
<article window id="buttons" class="window home">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--link"></span>
</div>
<titlebar-icon aria-hidden="true">
<icon-tabler link></icon-tabler>
</titlebar-icon>
<a href="#buttons">Buttons</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<section>
<window-contents>
<span style="color: var(--red);">If any are broken and/or missing, poke me.</span>
<p style="text-align: center;">Friends!</p>
<div class="img-buttons">
<imgbtn-grid>
<a href="https://23sonics.zone"><img src="/assets/buttons/friends/23sonics.gif" alt="23Sonics"></a>
<a href="https://authenyo.xyz"><img src="/assets/buttons/friends/authen.gif" alt="authenyo"></a>
<a href="https://autumn.town"><img src="/assets/buttons/friends/autumn.webp" alt="Autumn Town Café"></a>
<a href="https://av70.neocities.org"><img src="/assets/buttons/friends/av70.gif" alt="av70"></a>
<a href="https://benjae.nekoweb.org"><img src="/assets/buttons/friends/benjae.png" alt="benjae"></a>
<a href="https://birdcat.online"><img src="/assets/buttons/friends/birdcat.gif" alt="birdcat dot online"></a>
<a href="https://blueb.pages.gay"><img src="/assets/buttons/friends/harper.png" alt="harper"></a>
<a href="https://bluefoxlongtail.neocities.org"><img src="/assets/buttons/friends/bluefox.png" alt="Bluefox Longtail"></a>
<a href="https://chloes.website"><img src="/assets/buttons/friends/chloe.png" alt="Chloe"></a>
<a href="https://david.garden"><img src="/assets/buttons/friends/david.png" alt="david wolfpaw"></a>
<a href="https://doskel.net"><img width="88" height="31" src="/assets/buttons/friends/doskel.png" alt="doskel"></a>
<a href="https://dragon-vi.be"><img src="/assets/buttons/friends/sirlan.png" alt="sirlain"></a>
@ -33,9 +32,12 @@
<a href="https://exlitry.world"><img src="/assets/buttons/friends/exlitry.world.gif" alt="exlitry.world"></a>
<a href="https://floof.gay"><img src="/assets/buttons/friends/oli.svg" alt="oli"></a>
<a href="https://freeplay.floof.company"><img src="/assets/buttons/friends/freeplay.gif" alt="Freeplay"></a>
<a href="https://genshibe.ca"><img src="/assets/buttons/friends/gen.png" alt="Gen"></a>
<a href="https://girlthi.ng/~thermia"><img src="/assets/buttons/friends/thermia.gif" alt="~thermia"></a>
<a href="https://guigui.aerocity.site"><img src="/assets/buttons/friends/guigui.png" alt="Guigui"></a>
<a href="https://hexaitos.com"><img src="/assets/buttons/friends/hexaitos.png" alt="Hexaitos"></a>
<a href="https://home.dracol.ing"><img src="/assets/buttons/friends/dracoling.gif" alt="dracoling"></a>
<a href="https://ielenia.lgbt"><img src="/assets/buttons/friends/ielenia.png" alt="Ielenia"></a>
<a href="https://invoxiplaygames.uk"><img src="/assets/buttons/friends/ipg.png" alt="InvoxiPlayGames"></a>
<a href="https://jack.cab"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAAfBAMAAACR5hfTAAAAGFBMVEUAAAB3dnuamZbJuKfAv7zYxbPe1Mre3dqiErpIAAAA2UlEQVQ4y7WTUQqDQAxEFz88Qr/DUNrfglcQe4BeYCvtHKAU9vpNdlVQa9mFmo8YlucwGYhz/6yabLJhKnwpgZsiOFeaPW7Z0uyPzwIYODEbbtud4Pv7eshXfp0LbISwk2cGMB9GyIZrU/aLN/9tTIWVwJ4wzZruYqPxFURBbYjTDNZjo12ctzEKAvqDNlhbwCqokjVrPwg7SKW69sHas8JxjMKVjI6xtD3YYDr+CU425jAnGwn2EyzuBxw964KdbHqmhTBL4yGbaUSbtMXGnDsZchasc/5/fQBe10j9sWqcbgAAAABJRU5ErkJggg==" alt="Jack"></a> <!-- thanks jack -->
<a href="https://keithhacks.cyou"><img src="/assets/buttons/friends/keith.gif" alt="~keith"></a>
@ -76,13 +78,12 @@
<a href="https://volpeon.ink"><img src="/assets/buttons/friends/volpeon.svg" alt="Volpeon"></a>
<a href="https://vore.media"><img src="/assets/buttons/friends/tika.png" alt="Tika"></a>
<a href="https://w.on-t.work"><img src="/assets/buttons/friends/wontwork.png" alt="Won't Work!/kopper"></a>
<a href="https://winter.entities.org.uk"><img src="/assets/buttons/friends/winter.png" alt="winter"></a>
<a href="https://xaselgio.net"><img src="/assets/buttons/friends/xaselgio.gif" alt="Xaselgio/Indigo's den"></a>
<a href="https://yummy.cricket"><img src="/assets/buttons/friends/niss.png" alt="niss"></a>
<a href="https://zvava.org"><img src="/assets/buttons/friends/zvava.png" alt="zvava"></a>
</div>
</imgbtn-grid>
<p style="text-align: center;"><small>Misc.</small></p>
<div class="img-buttons">
<imgbtn-grid>
<!-- software/browsers -->
<a href="https://www.mozilla.org/en-US/firefox/new"><img src="/assets/buttons/software/firefox.png" alt="Get Firefox"></a>
<a href="https://ublockorigin.com"><img src="/assets/buttons/software/ublockoriginnow.png" alt="uBlock Origin Now!"></a>
@ -114,12 +115,12 @@
<img src="/assets/buttons/random/ravenow.gif" alt="Rave Now!">
<img src="/assets/buttons/random/tucows.gif" alt="Tucows">
<img src="/assets/buttons/random/yoshilore.gif" alt="Yoshi Lore">
</div>
</imgbtn-grid>
<p style="text-align: center;"><small><span style="color: var(--green);">Me!</span> (Click to copy HTML)</small></p>
<div class="img-buttons">
<imgbtn-grid>
<button style="cursor: pointer; background: unset; border-width: 0px; padding: 0px; display: inline-flex;" onclick="copyButtonSneexy()">
<img src="/assets/buttons/sneexy.svg" alt="Sneexy">
</button>
</div>
</section>
</imgbtn-grid>
</window-contents>
</article>

28
_includes/layouts/sneexy/funfacts.njk → _includes/layouts/pages/sneexy/funfacts.njk
View file

@ -1,27 +1,27 @@
<!-- "fun" facts -->
<article id="fun-facts" class="window">
<article window id="fun-facts">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--mood-empty"></span>
</div>
<titlebar-icon aria-hidden="true">
<icon-tabler mood-empty></icon-tabler>
</titlebar-icon>
<a href="#fun-facts">"Fun" facts</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<section>
<window-contents>
<h2><a href="#fun-facts">"Fun" facts</a></h2>
<ul>
<li>My profile pictures used to be random characters from different types of media that I would just apply a grayscale onto. Ever since then, I realized that I've very much enjoyed being a <a href="https://synthspecies.com/">Synth</a> instead.</li>
<li>I used to have an inside joke with some old friends where I <i>loved</i> cheese. 🧀</li>
<li>Originally starting going online when I was young and my only method of getting Wi-Fi was by using my netbook in the kitchen, stationed above the stove and connecting to a nearby stores local Wi-Fi connection. <small>apparently, Lowes Wi-Fi goes out VERY far.</small></li>
<li>Joined the <a href="https://fediverse.info">Fediverse</a> around 2020 or so, originally on <a href="https://mas.to">mas.to</a> before moving to <a href="https://types.pl">types.pl</a>, which has quite a nice local community <span style="text-decoration: line-through;">ignoring that I left the account to rot and die</span>, before moving to <a href="https://miruku.cafe">miruku.cafe</a> for a short bit, which introduced me to the <a href="https://misskey-hub.net">Misskey</a> software where I ended up starting to actually enjoy using the Fediverse, then moving to <a href="https://lea.pet">lea.pet</a> after some drama went down, before <i>finally</i> landing on my own self-hosted instance at <a href="https://booping.synth.download">booping.synth.download</a>. <small>Well, originally starting at <a href="https://beeping.synth.download">beeping.synth.download</a>, But I realized that <a href="https://iceshrimp.net">Iceshrimp.NET</a> is a bit <i>too</i> much in beta stage software for me.</small></li>
<li>Joined the <a href="https://fediverse.info">Fediverse</a> around 2020 or so, originally on <a href="https://mas.to">mas.to</a> before moving to <a href="https://types.pl">types.pl</a>, which has quite a nice local community <span style="text-decoration: line-through;">ignoring that I left the account to rot and die</span>, before moving to <a href="https://miruku.cafe">miruku.cafe</a> for a short bit, which introduced me to the <a href="https://misskey-hub.net">Misskey</a> software where I ended up starting to actually enjoy using the Fediverse, then moving to <a href="https://lea.pet">lea.pet</a>, before <i>finally</i> landing on my own self-hosted instance at <a href="https://booping.synth.download">booping.synth.download</a>. <small>Well, originally starting at <a href="https://beeping.synth.download">beeping.synth.download</a>, But I realized that <a href="https://iceshrimp.net">Iceshrimp.NET</a> is a bit <i>too</i> much in beta stage software for me.</small></li>
<li>I prefer lowercase when possible and use spaces before <i>and</i> after punctionation, sometimes maybe a double space here and there, <small>Although I attempt to avoid doing the latter on this website to try and prevent it from making it entirely inaccessible.</small> It just feels more natural for me.</li>
<li>I am <b><i>terrible</i></b> at spelling.</li>
</ul>
</section>
</window-contents>
</article>

69
_includes/layouts/pages/sneexy/intro.njk Normal file
View file

@ -0,0 +1,69 @@
<!-- simple introduction -->
<article window id="sneexy" sneexy-page>
<div class="header">
<titlebar-icon aria-hidden="true">
<icon-tabler user></icon-tabler>
</titlebar-icon>
<a href="#sneexy">Sneexy</a>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<window-contents>
<img id="logo" loading="lazy" src="/assets/sneexy/sneexy.webp" alt="Sneexy" /> <br>
<audio controls loop src="/assets/sneexy/ASimpleMachine.mp3"></audio> <br>
<small>Theme song by <a href="https://yeen.town/@ChalkLlate">ChalkLlate</a>!</small>
<h1><a href="./ruben"><img loading="lazy" id="pfp" src="/assets/sneexy/synth tpose spin.gif" alt="3D Low poly model of my synth character. He's a pretty chubby synth with a belly and chest made entirely out of goo, his frame is mostly made with shades of grey with lime/pastel green accents."></a> Hey, I'm <span class="rainbow">Ruben!</span></h1>
<small>Cheesed to meet ya.</small>
<p style="margin-bottom: -2px;">Big fat gooey synth who is constantly tired.</p>
<small style="font-size: 0.575rem;">...or <i>eepy</i>, but definitely more tired.</small>
<card-container selfinfo>
<card-entry pronouns>
<h3>Pronouns</h3>
<ul>
<li style="color: var(--green);">
<icon-tabler thumb-up aria-label="Preferred!"></icon-tabler>
He/Him
</li>
<li>
<icon-tabler thumb-up aria-label="Acceptable,"></icon-tabler>
They/Them
</li>
<li style="color: var(--red);">
<small>
<icon-tabler thumb-down aria-label="Unacceptable,"></icon-tabler>
Anything else
</small>
</li>
</ul>
</card-entry>
<card-entry names>
<h3>Names</h3>
<ul>
<li style="color: var(--green);">
<icon-tabler thumb-up aria-label="Preferred!"></icon-tabler>
Ruben
</li>
<li>
<icon-tabler thumb-up aria-label="Acceptable,"></icon-tabler>
Sneexy, Sneex*
</li>
<li style="color: var(--yellow);">
<icon-tabler user-heart aria-label="Only if we're close friends!"></icon-tabler>
Rube, Rubie (Ruby)
</li>
<li style="color: var(--red);">
<small>
<icon-tabler thumb-down aria-label="Unacceptable,"></icon-tabler>
Variations/Anything else
</small>
</li>
</ul>
</card-entry>
</card-container>
</window-contents>
</article>

27
_includes/layouts/pages/sneexy/nsfw/intro.njk Normal file
View file

@ -0,0 +1,27 @@
<!-- content warned introduction -->
<article window id="warning" sneexy-page>
<div class="header">
<titlebar-icon aria-hidden="true">
<icon-tabler alert-triangle></icon-tabler>
</titlebar-icon>
<a href="#warning">Warning</a>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<window-contents>
<section notice-card warning>
<h3><icon-tabler alert-triangle></icon-tabler> Welcome to "The Slosh Zone"</h3>
<p>This is a dedicated <span title="Not-safe-for-Work">NSFW</span> page going over my random various kinks and fetishes I like,</b> mainly just for the curious. It should be obvious what type of content will be here, but just to make sure: things about <b>Fat/related, inflation/related, vore and other general/common NSFW topics</b> will be on this page.</p>
<p>A fair warning, I've also turned off my own limiter here. Full-blown sounds and actions and descriptions of things, I'm a fat fuck who needs to be fed pure energy and data. <i aria-hidden="true" style="color:var(--accent);">Breep, slosh~</i></p>
<p>Toggle the checkbox below if you consent to viewing this page's content <small>or are <i>not</i> a minor</small>. Otherwise, just back out.</p>
<checkbox-button-group style="margin-top: 1rem;">
<label for="view-nsfw-page"><input type="checkbox" id="view-nsfw-page" name="view-nsfw-page"> Open the way, and show me your weirdness!</label>
</checkbox-button-group>
</section>
</window-contents>
</article>

26
_includes/layouts/sneexy/nsfw/nsfw.njk → _includes/layouts/pages/sneexy/nsfw/nsfw.njk
View file

@ -1,19 +1,19 @@
<!-- nsfw -->
<article id="nsfw" class="window">
<article window id="nsfw" style="display: none;">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--user"></span>
</div>
<titlebar-icon aria-hidden="true">
<icon-tabler user></icon-tabler>
</titlebar-icon>
<a href="#nsfw">"the slosh zone"</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<section>
<window-contents>
<h2><a href="#nsfw">"the slosh zone"</a></h2>
<p>In the case that it wasn't obvious, I like <i>big</i> things, as a whole, although I'm not very open about the other things I'm into <small>because why would I?</small> But specifically, I'm into:</p>
<ul>
@ -37,5 +37,5 @@
<p>...and a variety of other things. I'm mostly flexible with my kinks/fetishes, and I fuck around with a good amount of things. <small>And yes, the general "NSFW" stuff like sex or whatever is cool by me.</small></p>
<p>In general, I do my best to keep my open/public spaces and interactions clean, and avoid talking or going deep into these types of subjects. If I ever do on those spaces, I do so with a content-warning whenever possible. <small>So basically, only Fedi.</small></p>
<p>I <i>do</i> have NSFW focused spaces/accounts for myself. Feel free to tease or be lewd or roleplay with me if you'd like on those accounts, although only if we know each other a decent amount. <small>In that case though, doing so in our direct messages is also fine. Poke at my belly, rub me... fill me full of zip bombs, <span style="color:var(--accent);">breeeeep~</span></small> Otherwise I'll just ignore or block you, especially if you keep trying to make things horny when <span style="text-transform:none;">I Do Not Know You.</span></p>
</section>
</window-contents>
</article>

26
_includes/layouts/sneexy/ruben/features.njk → _includes/layouts/pages/sneexy/ruben/features.njk
View file

@ -1,19 +1,19 @@
<!-- features -->
<article id="features" class="window">
<article window id="features">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--notes"></span>
</div>
<titlebar-icon aria-hidden="true">
<icon-tabler notes></icon-tabler>
</titlebar-icon>
<a href="#features">features</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<section>
<window-contents>
<h2>features (general)</h2>
<p>ruben is a Fat, chubby synth. he prefers himself that way.</p>
<p>compared to other common synths, his head mostly consists of the visor on the front of his mouth, with the sort of "jagged mouth" style coming from the visor visor. around the front where the pointy "teeth" parts are emits a sleek glow. that part of the visor can also be manipulated to however he feels, to change shape or pointiness of the "teeth". his nostrils are displayed on the visor on the very front, which are accurately placed to where he can smell. <small>don't ask how. he just can.</small></p>
@ -56,5 +56,5 @@
<p>if he expereinces a mix of different emotions, the reaction of each emotion can mix as a gradient passing from the top of his body to the bottom.</p>
<p>the goo has an activated thin outside layer that prevents itself from dripping or allowing things to simply get sucked into it. it gets lost if he is under intense feelings/emotions or simply starts losing energy to keep it activated.</p>
<p>the goo itself is known to have <i>many</i> more features, although most are experimental and best to leave disabled. a notable one is to be able to use the goo as expandable, dynamic storage, however this is not stable and is prone to easy data loss. <small>although ruben likes to keep it enabled for <i>other</i> reasons. :)</small></p>
</section>
</window-contents>
</article>

26
_includes/layouts/sneexy/ruben/intro.njk → _includes/layouts/pages/sneexy/ruben/intro.njk
View file

@ -1,19 +1,19 @@
<!-- intro -->
<article id="intro" class="window">
<article window id="intro" sneexy-page>
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--robot-face"></span>
</div>
<titlebar-icon aria-hidden="true">
<icon-tabler robot-face></icon-tabler>
</titlebar-icon>
<a href="#intro">ruben's introduction</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<section>
<window-contents>
<h1>ruben</h1>
<h4>gooey synth. known fatass. <small>fact sheet/ref sheet thingy. <b><i>still a wip!!</i></b></small></h4>
<ul>
@ -34,5 +34,5 @@
</li>
</ul>
<p style="text-align: end;">download the <a href="/pub/shared/synth.zip">blockbench model</a> here!</p>
</section>
</window-contents>
</article>

26
_includes/layouts/sneexy/ruben/personality.njk → _includes/layouts/pages/sneexy/ruben/personality.njk
View file

@ -1,19 +1,19 @@
<!-- personality -->
<article id="personality" class="window">
<article window id="personality">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--mood-look-up"></span>
</div>
<titlebar-icon aria-hidden="true">
<icon-tabler mood-look-up></icon-tabler>
</titlebar-icon>
<a href="#personality">personality</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<section>
<window-contents>
<h2>personality</h2>
<p>usually embarassed, quite asocial and only feels comfortable around friends or creatures he thinks are cool. always in a mix of "wanting to meet more creatures and make friends" but also "afraid of being around others, always assumuing others secretly hate him".</p>
<p>known to have random mental episodes of all sorts, but friends around him usually know how to deal with it and help him get out of those states. sometimes tends to stay quiet about it, as he "doesn't know what's causing this".</p>
@ -21,5 +21,5 @@
<p>he tries to always care for friends and be there for them, which ended up shifting his body to be more tuned for comfort of being more like a walking gooey bed that where he can maximize comfort for others.</p>
<p><i>VERY</i> affectionate. all types of (positive) teasing, love, kindness or anything related to that is enough to make him blush and beep. also tends to nuzzle and cuddle friends at random whenever he wants.</p>
<p>mostly lazy. sometimes may try to do something else and is well known for slacking off and doing other things that aren't important and avoiding the things that are important.</p>
</section>
</window-contents>
</article>

37
_includes/layouts/pages/sneexy/socials.njk Normal file
View file

@ -0,0 +1,37 @@
<!-- socials -->
<article window id="links" sneexy-page>
<div class="header">
<titlebar-icon aria-hidden="true">
<icon-tabler link></icon-tabler>
</titlebar-icon>
<a href="#links">links</a>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<window-contents>
<h2><a href="#links">Links</a></h2>
<p>All of my public facing profiles and contacts that are worth checking or if in need of contacting me. <small>I have other contacts that are private for mutuals, I'll share if you ask.</small></p>
<div class="container">
<socials-links>
<a button fedi href="https://booping.synth.download/@sneexy"><icon-tabler social></icon-tabler> Fediverse <small username>@sneexy@booping.synth.download</small></a>
<a button bsky href="https://bsky.app/profile/sneexy.synth.download"><icon-tabler brand-bluesky></icon-tabler> Bluesky <small username>@sneexy.synth.download</small></a>
<a button email href="mailto:&#x73;&#x6e;&#x65;&#x65;&#x78;&#x79;&#x40;&#x73;&#x79;&#x6e;&#x74;&#x68;&#x2e;&#x64;&#x6f;&#x77;&#x6e;&#x6c;&#x6f;&#x61;&#x64;"><icon-tabler mail></icon-tabler> Email <small username>&#x73;&#x6e;&#x65;&#x65;&#x78;&#x79;&#x40;&#x73;&#x79;&#x6e;&#x74;&#x68;&#x2e;&#x64;&#x6f;&#x77;&#x6e;&#x6c;&#x6f;&#x61;&#x64;</small></a>
<a button listenbrainz href="https://listenbrainz.org/user/Sneexy"><icon-tabler brand-metabrainz></icon-tabler> ListenBrainz <small username>Sneexy</small></a>
<a button lastfm href="https://www.last.fm/user/sneexy_is_gay"><icon-tabler brand-lastfm></icon-tabler> Last.fm <small username>sneexy_is_gay</small></a>
<a button git href="https://forged.synth.download/sneexy"><icon-tabler brand-git></icon-tabler> Git <small username>sneexy@forged.synth.download</small></a>
<a button gitgay href="https://git.gay/sneexy"><icon-tabler brand-git></icon-tabler> Git.gay <small username>sneexy@git.gay</small></a>
<a button github href="https://github.com/sneexy-boi"><icon-tabler brand-github></icon-tabler> GitHub <small username>sneexy-boi</small></a>
<a button archive href="https://archive.org/details/@sneexy"><icon-tabler building-bank></icon-tabler> Internet Archive <small username>sneexy</small></a>
</socials-links>
<socials-fedi>
<iframe src="https://booping.synth.download/embed/user-timeline/9zy33jqk7ljg0001?maxHeight=o" data-misskey-embed-id="v1_8a5d48c6-2549-4fd1-b2a9-a37194567beb" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>
<script defer src="https://booping.synth.download/embed.js"></script>
</socials-fedi>
</div>
</window-contents>
</article>

28
_includes/layouts/tos.njk → _includes/layouts/pages/tos.njk
View file

@ -1,23 +1,23 @@
<!-- terms of service -->
<article id="tos" class="window">
<article window id="tos">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--rosette-discount-check"></span>
</div>
<titlebar-icon aria-hidden="true">
<icon-tabler rosette-discount-check></icon-tabler>
</titlebar-icon>
<a href="#tos">Terms of Service</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
<window-controls aria-hidden="true">
<icon-tabler minimize></icon-tabler>
<icon-tabler maximize></icon-tabler>
<close-button aria-hidden="true">
<icon-tabler x></icon-tabler>
</close-button>
</window-controls>
</div>
<section>
<window-contents>
<h2><a href="#tos">Terms of Service</a></h2>
<p><small>Updated at <time datetime="2025-08-18 18:06">2025-08-18.</time></small></p>
<p><i>TL;DR: Be nice to one and another, stay chill, use common sense, don't do (or continue doing) anything that makes others uncomfortable, and if someone else is making you/another person uncomfortable, bring it up with a moderation/administrator.</i></p>
<hr class="solid">
<hr solid>
<p>Our Terms of Service can be treated as our general rulebook, and what we expect from our members and also outsiders/visitors of our services. Note that for our registered members, these aren't exactly <i>hard</i> guidelines, and exceptions can be made depending on the case - for those cases, we usually provide proper <i>rules</i> for other services.</p>
<p>Our guidelines are as followed:</p>
<ul>
@ -40,5 +40,5 @@
<li>The servers for Synth.Download are located in Canada, therefore, Canadian laws apply to our services. Nothing illegal, please. Any illegal activity will be reported to the proper authorities.</li>
</ul>
<p>If we find you breaking these guidelines, or deem you unfit for our services (and therefore, our community) for one reason or another, you will be blocked from interacting with us.</p>
</section>
</window-contents>
</article>

51
_includes/layouts/post.njk
View file

@ -1,51 +0,0 @@
---
title: notebook
layout: "layouts/base.njk"
section: post
permalink: "/notebook/{{ date }}-{{ title | slugify }}/"
---
<!-- the post window -->
<details open id="information" class="window">
<summary>
<div aria-hidden="true">
<span class="icon tabler--info-circle"></span>
</div>
<a href="#information">information</a>
<div aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</summary>
<section class="post-info">
<p aria-hidden="true">---</p>
<p><span>title:</span> {{ title or metadata.title }}</p>
{%- set tagUrl %}/tags/{{ tags | slugify }}/{% endset %}
<p><span>tags:</span> {%- for tag in tags | filterTagList %} {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %} <p class="tags-holder"><a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a>{%- if not loop.last %}, {% endif %}</p>
<p aria-hidden="true">---</p>
</section>
</details>
<!-- the post window -->
<details open id="post" class="window">
<summary>
<div aria-hidden="true">
<span class="icon tabler--article"></span>
</div>
<a href="#post">{{ title or metadata.title }}</a>
<div aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</summary>
<main data-pagefind-body>
<h1>{{ title or metadata.title }}</h1>
{{ content | safe }}
</main>
</details>

41
_includes/layouts/privacy.njk
View file

@ -1,41 +0,0 @@
<!-- privacy policy -->
<article id="privacy" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--lock"></span>
</div>
<a href="#privacy">Privacy Policy</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h1><a href="#privacy">Privacy Policy</a></h1>
<p><small>Updated at <time datetime="2025-08-18 18:03">2025-08-18.</time></small></p>
<hr class="solid">
<p>By default, for both visitors only browsing our site or those using our public services <small>(that normally do not require any sort of registrations)</small> <i>and</i> already registered users of our services, we store the minimum amount of connection data that is by default in our Caddy logs. This includes:</p>
<ul>
<li>The <span style="text-transform: none;">IP address</span> used to connect</li>
<li>The user-agent of the application used to connect (Usually, your browser/client, operating system, etc.)</li>
<li>The exact date and time a connection was made.</li>
</ul>
<p>We only store these logs for protection of our services in the case of any malicious behavior against our services, and are wiped/overwritten <b>every 5 days</b>.</p>
<p>We do <i>not</i> send data to be processed by anyone/anywhere else. We do <i>not</i> use or have any sort of analytics system in place. We do <i>not</i> use any of this data to "collect" or "profile" any individual. We do not try or attempt to store more data than is strictly necessary.</p>
<p>We ourselves and the services we provide follow <a target="_blank" href="https://en.wikipedia.org/wiki/General_Data_Protection_Regulation">the GDPR</a> for storing and managing personal data, and allow for complete deletion of all personal data (if any is stored ourselves) whenever possible.</p>
<p>This website <small>(the Synth.Download homepage, <a target="_blank" href="https://forged.synth.download/sd/site">source available here</a>)</small> does not make use of cookies or related technology. We store settings and preferences changed for our site with the menu available in the top right into your browser's local storage, which is otherwise unavailable/not possible if JavaScript is disabled by the client.</p>
<hr class="solid">
<p>For registered users of any of our services, we will also store any extra information that is required by the service or otherwise optionally provided, such as email addresses <small>(for the case or need of verification or password resets)</small> and passwords <small>(securely stored and hashed)</small>. What information or data is required or otherwise provided varies from service to service.</p>
<p>As a transparency note, all provided data and information is accessible by <a href="/admins">all administrators</a> of Synth.Download, but will <i>not</i> be mishandled/misused for any purposes <i>except</i> for the cases of required moderation/administration actions on our end, for a need of emergency contact, or otherwise for any request asked by the user.</p>
<p>Depending on the service, we may have easier access to specific, possibly personal information for account management or service moderation/administrative purposes.</p>
<p>For some services, we utilize <a target="_blank" href="https://bunny.net">Bunny</a> as our public CDN and <a target="_blank" href="https://www.backblaze.com">Backblaze</a> for files and storing whole, encrypted, off-site system backups. Their privacy policies may also apply with our services.</p>
<hr class="solid">
<p>For our Fediverse instances (which includes <a href="/sharkey">Sharkey</a>, <a href="/iceshrimp">Iceshrimp</a> and <a href="/mastodon">Mastodon</a>), we cannot guarantee 100% privacy. Federation isn't reliable nor private by design, and is a public network where posts made are cloned and stored by other instances with their own administrators.</p>
<p>Direct messages are <i>not</i> completely private or encrypted in any way. Post deletion and edits <i>can</i> be ignored or missed by other instances, although we do attempt to block instances with malicious intents <small>(see <a href="/sharkey/#moderation">moderation</a> for more details)</small>. Other instances may have different privacy policies or different ways of handling data and protection standards.</p>
<p>Note that only any information made public by you (your posts, your bio and profile picture, other related information meant to be viewed by others) is what gets federated. Any other private information related to your account such as your email address and passwords will <i>never</i> be federated.</p>
<p>All media uploaded through our instance get uploaded to <a target="_blank" href="https://www.backblaze.com">Backblaze</a>, which stores files, then forwarded through <a target="_blank" href="https://bunny.net">Bunny</a> as our CDN for faster file delivery and media loading. Some software, like <a href="/mastodon">Mastodon</a>, have tools to help with personal privacy, such as post auto-deletion.</p>
</section>
</article>

15
_includes/layouts/services/chat.njk
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>

15
_includes/layouts/services/frontends.njk
View file

@ -1,15 +0,0 @@
<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>

15
_includes/layouts/services/fun.njk
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>

10
_includes/layouts/services/other.njk
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>

16
_includes/layouts/services/personal.njk
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>

30
_includes/layouts/services/services.njk
View file

@ -1,30 +0,0 @@
<!-- publics & private services -->
<article id="services" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--server-cog"></span>
</div>
<a href="#services">Services</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</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" %}
</section>
</article>

10
_includes/layouts/services/sharing.njk
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>

28
_includes/layouts/services/social.njk
View file

@ -1,28 +0,0 @@
<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>

87
_includes/layouts/services/toc.njk
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>

30
_includes/layouts/sneexy/about.njk
View file

@ -1,30 +0,0 @@
<!-- about me -->
<article id="about-me" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--info-circle"></span>
</div>
<a href="#about-me">About me</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h2><a href="#about-me">about me</a></h2>
<p>I'm a <span class="rainbow">gay</span> goo-<a href="https://synthspecies.com">Synth</a> on the internet, <small>a zoomer, established 2006,</small> who likes to store endless amounts of data and pretends to be a computer himself. <small>For information related to my Synth-sona, <a href="https://sneexy.synth.download/ruben">refer to here</a>.</small> I'm autistic and have ADHD, and those two blended together create the mess that I am today.</p>
<p>I consider myself to be a <span style="text-transform: capitalize;">professional computer toucher<span aria-hidden="true">™</span></span>, and try my best to poke at computers or anything related to weird tech that interest me. I would say I've messed enough in a good share of both software and hardware related things.</p>
<p>I'm a nerd with <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software">Free and Open Source</a> stuff and also caring about my privacy whenever possible <small>considering that it doesn't really seem to exist at all in the modern world, anyways</small>. I also like messing around with Linux, trying a bit of <a style="text-transform: none;" href="https://archlinux.org">Arch</a> and a little bit of <a style="text-transform: none;" href="https://nixos.org">NixOS</a>, but found comfort with <a style="text-transform: none;" href="https://fedoraproject.org">Fedora</a>. <small>If you're interested, I'm currently running my own customized varient of <a style="text-transform: none;" href="https://fedoraproject.org/atomic-desktops/kinoite">Fedora Kinoite</a> made with <a style="text-transform: none;" href="https://blue-build.org">BlueBuild</a> that <a href="https://github.com/sneexy-boi/bluebuild-custom">you can find here</a>.</small> With all of that out of the way, I will mention that I'm not going to shove these down anyone's throat, and if you're someone who does that, kindly reconsider your own behavior.</p>
<p>Despite what is mentioned above, I'm not really a programmer, <span style="text-transform: none;">IT support</span> guy, some professional info-sec person or anything like that. My knowledge is honestly quite limited. At most, I personally mainly know just enough Bash to make jank scripts, HTML and CSS, and a good amount of Linux and Docker/Podman to let me survive. As much as I'd like to learn to expand, I've tried Python before with full intention and motivation of properly learning it to make things and it just didn't stick at all for me, and considering that was with <i>Python</i>, I'm goign to assume my limits in terms of handling things are pretty low.</p>
<p>I also run synth.download! The thing you're looking at! Made with love and containers. <span class="icon tabler--heart" style="background-color: var(--red) !important;"></span></p>
<p>I <i>absolutely</i> despise capitalism with every single fiber in my living synthentic body. Although I think everyone in this similar space does as well.</span>
<p>In case it wasn't obvious or clear somehow at this point, I'm a furry. And gay. And weird. I may not be covered in fur or an <i>"animal"</i>, but that doesn't mean I'm not in the same space. <small>Being a human fucking <span style="text-transform: none;">SUCKS</span></small>.</p>
<p><span style="text-transform: none;">Certified<span aria-hidden="true">™</span> idiot</span> <small>(although I think this one is obvious)</small></p>
<p>For the record, and this is most likely something worth pointing out: My mental health isn't great and I tend to have intense mood swings, and can sometimes randomly break down. Please excuse me in these moments, Thanks. <span class="icon tabler--heart" style="background-color: var(--accent) !important;"></span></p>
<p>I'm also usually exhausted. Both mentally and physically, if that wasn't clear.</p>
<p>Sometimes, I do make things, but honestly don't expect much from me. <small>I'll make some type of gallery page soon for the things I <i>do</i> make and the things others do for me, I promise.</small></p>
</section>
</article>

24
_includes/layouts/sneexy/base.njk
View file

@ -1,24 +0,0 @@
---
title: base
---
<!DOCTYPE html>
<html lang="en" page-is="goopy">
<head>
{% include "layouts/header.njk" %}
<script defer src="https://booping.synth.download/embed.js"></script>
</head>
<body>
{% include "layouts/navbar.njk" %}
<main>
{{ content | safe }}
</main>
{% include "layouts/footer.njk" %}
</body>
</html>

45
_includes/layouts/sneexy/intro.njk
View file

@ -1,45 +0,0 @@
<!-- simple introduction -->
<article id="sneexy" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--user"></span>
</div>
<a href="#sneexy">Sneexy info</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<img id="logo" loading="lazy" src="/assets/sneexy/sneexy.webp" alt="Sneexy" /> <br>
<audio controls loop src="/assets/sneexy/ASimpleMachine.mp3"></audio> <br>
<small>Theme song by <a href="https://yeen.town/@ChalkLlate">ChalkLlate</a>!</small>
<h1><a href="./ruben"><img loading="lazy" id="pfp" src="/assets/sneexy/synth tpose spin.gif" alt="3D Low poly model of my synth character. He's a pretty chubby synth with a belly and chest made entirely out of goo, his frame is mostly made with shades of grey with lime/pastel green accents."></a> Hey, I'm <span class="rainbow">Ruben!</span></h1>
<small>Cheesed to meet ya.</small>
<p style="margin-bottom: -2px;">Big fat gooey synth who is constantly tired.</p>
<small style="font-size: 0.575rem;">...or <i>eepy</i>, but definitely more tired.</small>
<div class="selfinfo">
<div style="grid-area: pronouns;">
<p>Pronouns</p>
<ul>
<li style="color: var(--green);"><span class="icon tabler--thumb-up" alt="Preferred!"></span> He/Him</li>
<li style="color: var(--green);"><span class="icon tabler--thumb-up" alt="Preferred!"></span> It/Its</li>
<li><span class="icon tabler--thumb-up" alt="Acceptable,"></span> They/Them</li>
<li style="color: var(--red);"><small><span class="icon tabler--thumb-down" alt="Unacceptable," style="transform: scale(.9) translateY(.2rem);"></span> Anything else</small></li>
</ul>
</div>
<div style="grid-area: names;">
<p>Names</p>
<ul>
<li style="color: var(--green);"><span class="icon tabler--thumb-up" alt="Preferred!"></span> Ruben</li>
<li><span class="icon tabler--thumb-up" alt="Acceptable,"></span> Sneexy, Sneex*</li>
<li style="color: var(--yellow);"><small><span class="icon tabler--user-heart" alt="Only if we're close friends!" style="transform: scale(.9) translateY(.2rem);"></span> Rube, Rubie (Ruby)</small></li>
<li style="color: var(--red);"><small><span class="icon tabler--thumb-down" alt="Unacceptable," style="transform: scale(.9) translateY(.2rem);"></span> Variations/Anything else</small></li>
</ul>
</div>
</div>
</section>
</article>

63
_includes/layouts/sneexy/notebook.njk
View file

@ -1,63 +0,0 @@
---
title: notebook
layout: "layouts/base.njk"
permalink: "/notebook/"
---
{% set postslist = collections.post %}
<!-- notebook index -->
<article id="notebook" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--article"></span>
</div>
<a href="#notebook">Notebook</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section data-pagefind-body>
<div id="search"></div>
<h1><a href="#notebook">Notebook</a> <a href="./rss.xml"><span class="icon tabler--rss" style="transform: scale(1.5) translateY(.5rem);"></span></a></h1>
<h2><b>NOTE:</b> This page is still heavily a work in progress, nothing on here is functional or what is meant to be.</h2>
<p>A public facing journal for myself, as probably the best way to put it. A blog-ish, writeup-ish, rant-ish place to dump personal thoughts and such into for <a href="/~sneexy">myself</a>.</p>
<span class="seperator"></span>
<details open class="notebook article-category">
<summary><span class="icon tabler--arrow-autofit-height"></span> test</summary>
{%- for knowledgebase in collections.knowledgebase %}
<div class="article-card">
<h2><a href="{{ knowledgebase.url }}">{{ knowledgebase.data.title }}</a></h2>
<p class="tags-holder">
{%- for tag in tags | filterTagList %}
{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
<a href="{{ tagUrl }}" class="post-tag">{{ tag }}</a>{%- if not loop.last %}, {% endif %}
{%- endfor %}
</p>
<p>{{ knowledgebase.data.description }}</p>
<a href="{{ knowledgebase.url }}" class="read">read more</a>
</div>
{%- endfor %}
<div class="article-card">
<h2><a>test</a></h2>
<p class="tags-holder"><a>tag</a> <a>tag-2</a> <a>tag-3</a></p>
<p>description</p>
<a class="read" href="./read">read more</a>
</div>
</details>
</section>
</article>
<!-- pagefind -->
<script>
window.addEventListener('DOMContentLoaded', (event) => {
new PagefindUI({ element: "#search", showSubResults: true });
});
</script>

27
_includes/layouts/sneexy/nsfw/intro.njk
View file

@ -1,27 +0,0 @@
<!-- content warned introduction -->
<article id="warning" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--alert-triangle"></span>
</div>
<a href="#warning">Warning</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<div class="info-box warn">
<p><span class="icon tabler--alert-triangle"></span> <b>Welcome to my <span class="_info" title="Not-safe-for-Work">NSFW</span> page of my random various kinks and fetishes I like,</b> mainly just for the curious. It should be obvious what type of content will be here, but just to make sure: things about <b>Fat/related, inflation/related, vore and other general/common NSFW topics</b> will be on this page.</p>
<p>A fair warning, I've also turned off my own limiter here. Full-blown sounds and actions and descriptions of things, I'm a fat fuck who needs to be fed pure food/energy and data. <i aria-hidden="true" style="color:var(--accent);">Breep, sloosh~</i></p>
<p>Toggle the checkbox below if you consent to viewing this page's content <small>or are <i>not</i> a minor</small>. Otherwise, you can just back out.</p>
<fieldset>
<input type="checkbox" id="view-nsfw-page" name="view-nsfw-page" />
<label for="view-nsfw-page">Open the way, and show me your weirdness!</label>
</fieldset>
</div>
</section>
</article>

32
_includes/layouts/sneexy/socials.njk
View file

@ -1,32 +0,0 @@
<!-- socials -->
<article id="links" class="window">
<div class="header">
<div class="titlebar-icon" aria-hidden="true">
<span class="icon tabler--link"></span>
</div>
<a href="#links">links</a>
<div class="window-buttons" aria-hidden="true">
<span class="icon tabler--minimize"></span>
<span class="icon tabler--maximize"></span>
</div>
<div class="close-button" aria-hidden="true">
<span class="icon tabler--x"></span>
</div>
</div>
<section>
<h2><a href="#links">Links</a></h2>
<p>My links to all of my public facing socials and contacts. If I know you well, you may ask me for anything more private, like Signal or Matrix, etc. <small>The fastest way to get this is by checking my <i>followers only</i> pinned post if you follow me/we're mutuals on the Fediverse.</small></span></p>
<div class="socials-contacts-list">
<a class="fedi-icon" href="https://booping.synth.download/@sneexy" style="background-color: color-mix(in srgb, var(--orange) 25%, transparent); color: var(--orange);" aria-label="Fediverse/Mastodon"><span class="icon tabler--universe" style="pointer-events: none;"></span></a>
<a class="fedi-icon-2" href="https://booping.synth.download/@sneexy" style="background-color: color-mix(in srgb, var(--teal) 25%, transparent); color: var(--teal);" aria-label="Fediverse/Mastodon" aria-hidden="true"><span class="icon tabler--brand-mastodon" style="pointer-events: none;"></span></a>
<a href="mailto:&#x73;&#x6e;&#x65;&#x65;&#x78;&#x79;&#x40;&#x73;&#x79;&#x6e;&#x74;&#x68;&#x2e;&#x64;&#x6f;&#x77;&#x6e;&#x6c;&#x6f;&#x61;&#x64;" style="background-color: color-mix(in srgb, var(--red) 25%, transparent); color: var(--red);" aria-label="Email"><span class="icon tabler--mail" style="pointer-events: none;"></span></a>
<a href="https://listenbrainz.org/user/Sneexy" style="background-color: color-mix(in srgb, var(--sapphire) 25%, transparent); color: var(--sapphire);" aria-label="ListenBraniz"><span class="icon tabler--brand-metabrainz" style="pointer-events: none;"></span></a>
<a href="https://www.last.fm/user/sneexy_is_gay" style="background-color: color-mix(in srgb, var(--red) 25%, transparent); color: var(--red);" aria-label="Last.fm"><span class="icon tabler--brand-lastfm" style="pointer-events: none;"></span></a>
<a href="https://git.gay/sneexy" style="background-color: color-mix(in srgb, var(--maroon) 25%, transparent); color: var(--maroon);" aria-label="Git"><span class="icon tabler--brand-git" style="pointer-events: none;"></span></a>
<a href="https://github.com/sneexy-boi" style="background-color: color-mix(in srgb, var(--lavender) 25%, transparent); color: var(--lavender);" aria-label="GitHub"><span class="icon tabler--brand-github" style="pointer-events: none;"></span></a>
<a href="https://archive.org/details/@sneexy" style="background-color: color-mix(in srgb, var(--foreground) 25%, transparent); color: var(--foreground);" aria-label="Internet Archive"><span class="icon tabler--building-bank" style="pointer-events: none;"></span></a>
</div>
<p><span class="icon tabler--corner-down-right"></span> You may observe my Fediverse activity below:</p>
<iframe aria-hidden="true" src="https://booping.synth.download/embed/user-timeline/9zy33jqk7ljg0001?header=false&maxHeight=800&rounded=false&border=false" data-misskey-embed-id="v1_902c0e81-d9d7-4c03-af0e-a6e71c21e95b" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>
</section>
</article>

0
custard.html → _includes/other/custard.html
View file

6
_includes/scripts/close.js
View file

@ -1,7 +1,7 @@
// unnick asked for this, i provide.
// this provides no usefulness and there is no implementation to respawn windows. but i think it's funny and you can just reload anyways since it doesn't take long to load anyways
// this provides no usefulness and there is no implementation to respawn windows. but i think it's funny and you can just reload
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll(".close-button").forEach(e => {
e.onclick = () => e.parentElement.parentElement.remove();
document.querySelectorAll("close-button").forEach(e => {
e.onclick = () => e.parentElement.parentElement.parentElement.remove();
});
});

18
_includes/scripts/settings.js
View file

@ -9,7 +9,6 @@ document.addEventListener("DOMContentLoaded", function() {
// load saved settings
loadSettings();
applyTheme();
// event listeners on all inputs
fontInputs.forEach(input => {
@ -19,7 +18,6 @@ document.addEventListener("DOMContentLoaded", function() {
themeInputs.forEach(input => {
input.addEventListener('change', function() {
saveSettings();
applyTheme();
});
});
@ -78,20 +76,4 @@ document.addEventListener("DOMContentLoaded", function() {
disableAlttextCheckbox.checked = true;
}
}
// apply the theme based on user preference
function applyTheme() {
const selectedTheme = document.querySelector('input[name="theme-setting"]:checked').value;
// remove any existing theme
document.documentElement.removeAttribute('data-theme');
// apply the selected theme
if (selectedTheme === 'light') {
document.documentElement.setAttribute('data-theme', 'light');
} else if (selectedTheme === 'dark') {
document.documentElement.setAttribute('data-theme', 'dark');
}
// if auto, don't set a data-theme attribute, let the media query handle it
}
});

95
_includes/styles/accessibility.css
View file

@ -1,95 +0,0 @@
/* ╭───────────────────────────────────────────────────────╮
/ │ _ _ _ _ _ _ │
/ │ __ _ ___ ___ ___ ___ ___(_) |__ (_) (_) |_ _ _ │
/ │ / _` |/ __/ __/ _ \/ __/ __| | '_ \| | | | __| | | | │
/ │ | (_| | (_| (_| __/\__ \__ \ | |_) | | | | |_| |_| | │
/ │ \__,_|\___\___\___||___/___/_|_.__/|_|_|_|\__|\__, | │
/ │ |___/ │
/ ╰───────────────────────────────────────────────────────╯
/ accessibility - choosable accessibility settings */
/* - font settings - */
/* jetbrains mono */
:root:has(#font-jbm:checked) {
--font-family: 'JetBrains Mono', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
.navbar .nav-base.nav-right.nav-systray span {
margin: 0px -.1rem;
}
}
/* atkinson hyperlegible next */
:root:has(#font-ahn:checked) {
--font-family: 'Atkinson Hyperlegible Next', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
}
/* inter */
:root:has(#font-inter:checked) {
--font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
}
/* (browser) sans serif */
:root:has(#font-sans-serif:checked) {
--font-family: sans-serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui;
}
/* (browser) serif */
:root:has(#font-serif:checked) {
--font-family: serif, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
}
/* (browser) monospace */
:root:has(#font-monospace:checked) {
--font-family: monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif;
}
/* - misc - */
/* disable forced uncapitalization */
:root:has(#uncapitalization:checked) {
body {
text-transform: none !important;
}
}
/* disable background gradient */
:root:has(#disable-bg:checked) {
body {
background: var(--background) !important;
}
}
/* disable window animations
copy pasted from "@media (prefers-reduced-motion: reduce)" in base.css */
:root:has(#disable-animations:checked) {
body {
background: var(--background) !important;
animation: unset !important;
-moz-animation: unset !important;
-webkit-animation: unset !important;
}
/* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */
* {
transition: none !important;
animation: unset !important;
-moz-animation: unset !important;
-webkit-animation: unset !important;
}
/* fedi icon on /me should keep its animation (temp, find a better solution later) */
.fedi-icon {
animation: opacity-blink 4s infinite !important;
}
.fedi-icon-2 {
animation: opacity-blink-reverse 4s infinite !important;
}
}
/* disable custom alt text popup */
:root:has(#disable-alttext:checked) {
.alt-popup {
display: none !important;
}
}

808
_includes/styles/base.css
View file

@ -1,808 +0,0 @@
/* ╭────────────────────────╮
/ │ _ │
/ │ | |__ __ _ ___ ___ │
/ │ | '_ \ / _` / __|/ _ \ │
/ │ | |_) | (_| \__ \ __/ │
/ │ |_.__/ \__,_|___/\___| │
/ ╰────────────────────────╯
/ base - styling for regular/global html elements as well as the color schemes, and anything else that doesn't fit anywhere else */
:root {
--pagefind-ui-font: var(--font-family);
--pagefind-ui-primary: var(--foreground);
--pagefind-ui-text: var(--foreground);
--pagefind-ui-background: var(--background);
--pagefind-ui-border: var(--accent);
--pagefind-ui-tag: var(--background);
--site-border: .1rem solid var(--border);
}
/*
custom color scheme, based off of both Ayu Light & Dark and Catppuccin Latte & Mocha.
it's basically a mix and mash of the both of them together, and slightly modified.
it doesn't have a name, call it "synth.download color scheme official real"
*/
:root {
/* base colors */
--background: #fafafa;
--foreground: #3d454d;
--selection: #f0eee4;
--comment: #abb0b6;
--accent: #ffaa33;
--link: #9f5e03;
/* original ayu colors */
--orange: #ff9940;
--green: #86b300;
--blue: #4cbf99;
--purple: #a37acc;
--red: #ec3838;
/* extended catppuccin based colors */
--flamingo: #ff7d7d;
--rosewater: #eca69a;
--pink: #ff8adb;
--mauve: #ba8aff;
--maroon: #e06c75;
--peach: #ffac6b;
--yellow: #d29f12;
--teal: #2bbac5;
--sky: #3eacce;
--sapphire: #4db5d0;
--lavender: #7881ce;
/* ui accent colors */
--ui-orange: #fa8d3e;
--ui-green: #91b362;
--ui-blue: #6994bf;
--ui-purple: #7e57c2;
--ui-teal: #56c2c0;
--ui-lavender: #9d8cdb;
/* misc. */
--border: #e4e4e4;
--shadow: rgba(0, 0, 0, 0.1);
--hover: rgba(0, 0, 0, 0.05);
--active: rgba(0, 0, 0, 0.1);
--focus: #86b300;
}
@media (prefers-color-scheme: dark) {
:root {
/* base colors */
--background: #0a0e14;
--foreground: #d8d6d2;
--selection: #253340;
--comment: #5c6773;
--accent: #e6b450;
--link: var(--accent);
/* original ayu colors */
--orange: #ffb454;
--green: #aad94c;
--blue: #59c2ff;
--purple: #d2a6ff;
--red: #f0646b;
/* extended catppuccin based colors */
--flamingo: #f2cdcd;
--rosewater: #f5e0dc;
--pink: #ffc9e3;
--mauve: #cba6f7;
--maroon: #eba0ac;
--peach: #ffcca8;
--yellow: #f9e2af;
--teal: #8ddedc;
--sky: #89dceb;
--sapphire: #74c7ec;
--lavender: #b4befe;
/* ui accent colors */
--ui-orange: #e6b450;
--ui-green: #aad94c;
--ui-blue: #39bae6;
--ui-purple: #a37acc;
--ui-teal: #7adbd3;
--ui-lavender: #ada0f3;
/* misc. */
--border: #1a1f29;
--shadow: rgba(0, 0, 0, 0.4);
--hover: rgba(255, 255, 255, 0.05);
--active: rgba(255, 255, 255, 0.1);
--focus: #ffb454;
}
}
/* theme classes for manual theme selection */
html[data-theme="light"] {
/* base colors */
--background: #fafafa;
--foreground: #3d454d;
--selection: #f0eee4;
--comment: #abb0b6;
--accent: #ffaa33;
--link: #9f5e03;
/* original ayu colors */
--orange: #ff9940;
--green: #86b300;
--blue: #4cbf99;
--purple: #a37acc;
--red: #ec3838;
/* extended catppuccin based colors */
--flamingo: #ff7d7d;
--rosewater: #eca69a;
--pink: #ff8adb;
--mauve: #ba8aff;
--maroon: #e06c75;
--peach: #ffac6b;
--yellow: #d29f12;
--teal: #2bbac5;
--sky: #3eacce;
--sapphire: #4db5d0;
--lavender: #7881ce;
/* ui accent colors */
--ui-orange: #fa8d3e;
--ui-green: #91b362;
--ui-blue: #6994bf;
--ui-purple: #7e57c2;
--ui-teal: #56c2c0;
--ui-lavender: #9d8cdb;
/* misc. */
--border: #e4e4e4;
--shadow: rgba(0, 0, 0, 0.1);
--hover: rgba(0, 0, 0, 0.05);
--active: rgba(0, 0, 0, 0.1);
--focus: #86b300;
}
html[data-theme="dark"] {
/* base colors */
--background: #0a0e14;
--foreground: #d8d6d2;
--selection: #253340;
--comment: #5c6773;
--accent: #e6b450;
--link: var(--accent);
/* original ayu colors */
--orange: #ffb454;
--green: #aad94c;
--blue: #59c2ff;
--purple: #d2a6ff;
--red: #f0646b;
/* extended catppuccin based colors */
--flamingo: #f2cdcd;
--rosewater: #f5e0dc;
--pink: #ffc9e3;
--mauve: #cba6f7;
--maroon: #eba0ac;
--peach: #ffcca8;
--yellow: #f9e2af;
--teal: #8ddedc;
--sky: #89dceb;
--sapphire: #74c7ec;
--lavender: #b4befe;
/* ui accent colors */
--ui-orange: #e6b450;
--ui-green: #aad94c;
--ui-blue: #39bae6;
--ui-purple: #a37acc;
--ui-teal: #7adbd3;
--ui-lavender: #ada0f3;
/* misc. */
--border: #1a1f29;
--shadow: rgba(0, 0, 0, 0.4);
--hover: rgba(255, 255, 255, 0.05);
--active: rgba(255, 255, 255, 0.1);
--focus: #ffb454;
}
/* ----------------------------------
- background wallpaper, global font -
---------------------------------- */
html {
background: var(--background) linear-gradient(var(--background) 50%, color-mix(in srgb, var(--accent) 25%, var(--background)) 50%);
background-attachment: fixed;
}
body {
background: linear-gradient(var(--background), color-mix(in srgb, var(--accent) 25%, var(--background)));
min-height: calc(100vh - 4rem);
font-family: var(--font-family);
font-size: 1.125rem;
text-transform: lowercase;
margin: unset !important;
/* idk why it does that */
}
/* text formatting and config stuff */
/* headings */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: var(--foreground);
margin-top: .5rem;
text-decoration-color: transparent;
transition: .2s;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
text-decoration-color: var(--accent);
text-decoration-thickness: .3rem !important;
text-decoration: underline;
transition: .2s;
}
h1,
h1 a {
font-size: 2rem;
}
h2,
h2 a {
font-size: 1.8rem;
}
h3, h4,
h3 a, h4 a {
font-size: 1.4rem;
}
/* text */
p,
li,
button {
.icon {
transform: scale(1.13);
}
}
/* links should look good i think */
a {
color: var(--foreground);
text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
text-decoration-thickness: 0.1em;
transition: 0.2s;
&:hover {
color: var(--link);
text-decoration-color: var(--accent);
text-decoration-skip-ink: none;
text-decoration-thickness: .3em;
transition: 0.2s;
}
}
/* smol text */
small,
small a {
font-size: 0.875rem;
}
/* lists need some styling */
li {
margin-left: -.7em;
padding-bottom: .5rem;
}
/* text with "title", little hover-over info tibblets */
._info {
cursor: help;
text-decoration-color: color-mix(in srgb, var(--foreground) 40%, transparent);
text-decoration-line: underline;
text-decoration-style: dashed;
text-decoration-thickness: 0.1em;
transition: 0.2s;
&:hover {
text-decoration-color: color-mix(in srgb, var(--foreground) 80%, transparent);
text-decoration-skip-ink: none;
transition: 0.2s;
}
}
/* the tabler icons svgs styling */
.tabler-icon,
.icon .icon-tabler {
width: 1.3rem;
height: 1.3rem;
padding-bottom: .2rem;
vertical-align: middle !important;
color: var(--foreground) !important;
}
/* code (enforced monospace) */
.code {
font-family: 'JetBrains Mono', monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif !important;
}
/* caption styled text */
.caption {
font-size: small;
opacity: .8;
.section {
font-size: smaller;
opacity: .9;
}
}
/* styled details elements */
details.styled {
summary {
span {
padding-right: .6rem;
transform: translateY(.1rem);
vertical-align: middle;
}
.tabler--arrow-autofit-height:last-of-type {
margin-left: auto;
}
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;
}
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;
}
}
/* more minimal "content warning" styled details elements */
details.cw {
summary {
span {
color: var(--yellow);
padding-right: .6rem;
transform: translateY(.1rem);
vertical-align: middle;
}
.tabler--chevron-down:last-of-type {
margin-left: .5rem;
}
background: color-mix(in srgb, var(--yellow) 5%, var(--background));
border-radius: .4rem;
border: .1rem solid var(--yellow);
cursor: pointer;
padding: .3rem;
transform: 0.2s;
width: fit-content;
}
section {
background-color: color-mix(in srgb, var(--background) 95%, white);
border-radius: .4rem;
border: .1rem solid var(--border);
margin-top: .7rem;
padding: .4rem;
text-align: start !important;
ul {
margin: 0 0 0 -.5rem;
}
p:first-of-type {
margin-top: 0 !important;
}
p:last-of-type {
margin-bottom: 0 !important;
}
}
margin-top: 1rem;
margin-bottom: 1rem;
overflow: clip;
}
details.cw[open] {
.tabler--chevron-down:last-of-type {
transform: 0.2s;
transform: rotate(180deg);
}
}
/* badge text styling */
.badge {
border-radius: .2rem;
border: .1rem solid var(--accent);
color: var(--link);
font-size: .8rem;
font-weight: normal;
padding: .15rem;
}
/* card styling */
.card {
background-color: color-mix(in srgb, var(--background) 95%, white);
border-radius: 1rem;
border: .2rem solid var(--border);
gap: .5rem;
margin-bottom: 1.4rem;
padding: 1rem;
h4 {
margin-top: unset !important;
margin-bottom: .4rem !important;
}
}
.card.last {
margin-bottom: unset !important;
}
.card.tilde-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
margin-bottom: unset !important;
}
.card.question {
p {
margin: .6rem !important;
}
}
/* Dashed border */
hr.dashed {
border: .1rem dashed var(--border);
}
/* Dotted border */
hr.dotted {
border: .1rem dotted var(--border);
}
/* Solid border */
hr.solid {
border: .1rem solid var(--border);
}
/* Rounded border */
hr.rounded {
border: .2rem solid var(--border);
border-radius: 5px;
}
/* text formatting, like github kinda */
.info-box {
padding: .5rem;
border: .1rem solid;
border-radius: .4rem;
&.info {
background-color: color-mix(in srgb, var(--blue) 8%, transparent);
border-color: var(--blue);
.icon { color: var(--blue); }
}
&.warn {
background-color: color-mix(in srgb, var(--orange) 8%, transparent);
border-color: var(--orange);
.icon { color: var(--orange); }
}
}
/* audio */
audio {
border-radius: 3rem;
}
/* summary styling */
summary {
display: flex;
}
/* button link styling */
.button {
background-color: color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: 1rem;
color: var(--foreground);
padding: .4rem;
text-decoration: none;
text-shadow: none;
transition: all .2s;
white-space: nowrap;
line-height: 3rem;
.icon {
transform: scale(1.13) translateY(.7rem);
}
}
.button:hover {
background-color: var(--accent);
color: var(--foreground);
transition: all .2s;
}
.button-container {
margin-bottom: unset !important;
}
/* focus styling */
:focus-visible {
outline: .4rem solid var(--ui-purple) !important;
border-radius: .2rem;
z-index: 999999 !important;
}
/* image-button grid */
.img-buttons {
align-items: normal;
display: flex;
flex-wrap: wrap;
font-size: 0 !important;
gap: 5px;
justify-content: center;
margin-inline: auto;
img {
height: 31px;
image-rendering: crisp-edges !important;
margin: unset !important;
transition: transform 0.2s;
width: 88px;
}
.generic {
align-content: center;
background-color: color-mix(in srgb, var(--background) 90%, white);
border: solid .15rem;
box-sizing: border-box;
color: var(--foreground);
font-size: .95rem !important;
height: 31px;
text-align: center;
transition: transform 0.2s;
width: 88px;
}
.generic:hover, img:hover {
transform: scale(2);
}
}
/* spoiler text */
._spoiler {
filter: blur(.4rem) contrast(200%);
transition: 0.2s;
&:hover {
filter: unset !important;
transition: 0.2s;
}
}
/* ------------------
- nsfw toggle group -
------------------ */
.nsfw-toggle-holder {
background-color: color-mix(in srgb, var(--background) 95%, white);
border-radius: 1rem;
border: .2rem solid var(--border);
color: var(--foreground);
padding: .5rem;
position: fixed;
max-width: 30rem;
margin-left: .4rem;
z-index: 30;
right: .4rem;
top: 3rem;
transition: 0.2s;
/* inital "shrunken" state */
opacity: .5;
scale: .75;
transform-origin: top right;
/* hide captions when unhovered */
.caption {
display: none;
}
&:hover {
transition: 0.2s;
/* hovered "full" state */
opacity: 1;
scale: 1;
.caption {
opacity: .9;
display: unset;
}
}
.nsfw-toggle, .spoil-nsfw-toggle {
display: block;
}
/* hide the spoil option if nsfw itself is disabled */
.spoil-nsfw-toggle {
display: none;
margin-top: 1rem;
}
&:has(input[type="checkbox"]#view-nsfw-content:checked) .spoil-nsfw-toggle {
display: inherit !important;
}
/* shrink it even more if on a small display */
@media screen and (max-width: 580px) {
scale: .5;
}
}
/* _is-nsfw class for elements that are "nsfw" - will be hidden and spoiled by default */
._is-nsfw {
display: none;
}
/* inverse to remove elements if they aren't nsfw while the option is toggled */
._is-nsfw-inverse {
display: inherit;
}
/* show if enabled */
html:has(input[type="checkbox"]#view-nsfw-content:checked) {
._is-nsfw {
display: inherit;
}
._is-nsfw-inverse {
display: none;
}
}
/* blue/spoiler if enabled */
html:has(input[type="checkbox"]#spoil-nsfw-content:checked) {
._is-nsfw {
filter: blur(.4rem) contrast(200%);
transition: 0.2s;
&:hover {
filter: unset !important;
transition: 0.2s;
}
}
/* _always-show to ignore the "spoiler" option */
._always-show {
filter: unset !important;
}
}
/* ---------------
- alt text popup -
--------------- */
.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);
padding: .5rem;
border: solid .01rem var(--accent);
border-radius: .5rem;
font-size: 1rem;
max-width: 30rem;
z-index: 1000;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s;
}
/* ╭────────────────────────────────────────╮
/ │ ____ _ _ │
/ │ / __ \ _ __ ___ ___ __| (_) __ _ │
/ │ / / _` | '_ ` _ \ / _ \/ _` | |/ _` | │
/ │ | | (_| | | | | | | __/ (_| | | (_| | │
/ │ \ \__,_|_| |_| |_|\___|\__,_|_|\__,_| │
/ │ \____/ │
/ ╰────────────────────────────────────────╯
/ @media / at-media - styling depending on browser configuration / settings
/ other sorts of "Theming Jank" also goes in here for the sake of uniforming everything */
/* disable certain animations if user has animations disabled on their system */
@media (prefers-reduced-motion: reduce) {
body {
background: var(--background) !important;
animation: unset !important;
-moz-animation: unset !important;
-webkit-animation: unset !important;
}
/* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */
* {
transition: none !important;
animation: unset !important;
-moz-animation: unset !important;
-webkit-animation: unset !important;
}
/* fedi icon on /me should keep its animation (temp, find a better solution later) */
.fedi-icon {
animation: opacity-blink 4s infinite !important;
}
.fedi-icon-2 {
animation: opacity-blink-reverse 4s infinite !important;
}
}
@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);
}
}

112
_includes/styles/base/accessibility.css Normal file
View file

@ -0,0 +1,112 @@
/* ╭───────────────────────────────────────────────────────╮
/ │ _ _ _ _ _ _ │
/ │ __ _ ___ ___ ___ ___ ___(_) |__ (_) (_) |_ _ _ │
/ │ / _` |/ __/ __/ _ \/ __/ __| | '_ \| | | | __| | | | │
/ │ | (_| | (_| (_| __/\__ \__ \ | |_) | | | | |_| |_| | │
/ │ \__,_|\___\___\___||___/___/_|_.__/|_|_|_|\__|\__, | │
/ │ |___/ │
/ ╰───────────────────────────────────────────────────────╯
/ accessibility - choosable accessibility settings */
:root {
color-scheme: light dark; /* by default, automatically use light mode */
/* theme selector */
&:has(#theme-light:checked) {
color-scheme: light !important;
}
&:has(#theme-dark:checked) {
color-scheme: dark !important;
}
/* font selector */
&:has(#font-monospace:checked) { /* monospace */
--font-family: monospace, system-ui, -apple-system, sans-serif;
}
&:has(#font-system:checked) { /* system ui*/
--font-family: system-ui, -apple-system, sans-serif;
}
&:has(#font-sserif:checked) { /* sans seris */
--font-family: sans-serif, 'Segoe UI', system-ui, -apple-system;
}
&:has(#font-serif:checked) { /* serif */
--font-family: serif, sans-serif, system-ui, -apple-system;
}
/* appearance */
&:has(#uncapitalization:checked) { /* disable forced uncapitalization */
body {
text-transform: none !important;
}
}
&:has(#disable-bg:checked) { /* disable background gradient */
body {
background: var(--background);
bg-gradient, bg-image {
display: none !important;
}
}
}
&:has(#disable-animations:checked) { /* disable site animations */
body {
animation: unset !important;
-moz-animation: unset !important;
-webkit-animation: unset !important;
}
/* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */
* {
transition: none !important;
animation: unset !important;
-moz-animation: unset !important;
-webkit-animation: unset !important;
}
/* fedi icon on /me should keep its animation (temp, find a better solution later) */
.fedi-icon {
animation: opacity-blink 4s infinite !important;
}
.fedi-icon-2 {
animation: opacity-blink-reverse 4s infinite !important;
}
}
&:has(#disable-alttext:checked) { /* disable custom alt text popup */
.alt-popup {
display: none !important;
}
}
}
/* reduce animations on browser preference */
@media (prefers-reduced-motion: reduce) { /* copy-pasted from disable animations option */
body {
animation: unset !important;
-moz-animation: unset !important;
-webkit-animation: unset !important;
}
/* animations aren't important for anything so we can simply just disable them on every element then choose which ones not to disable */
* {
transition: none !important;
animation: unset !important;
-moz-animation: unset !important;
-webkit-animation: unset !important;
}
/* fedi icon on /me should keep its animation (temp, find a better solution later) */
.fedi-icon {
animation: opacity-blink 4s infinite !important;
}
.fedi-icon-2 {
animation: opacity-blink-reverse 4s infinite !important;
}
}

25
_includes/styles/animations.css → _includes/styles/base/animations.css
View file

@ -7,18 +7,6 @@
/ ╰───────────────────────────────────────────────────────╯
/ animations - reusable css animations */
@keyframes window-appear {
0% {
opacity: 0;
transform: scale(0.5, 0.5);
}
100% {
opacity: 1;
transform: scale(1, 1);
}
}
@keyframes rainbow {
0% {
filter: hue-rotate(0deg) contrast(150%) saturate(150%);
@ -29,17 +17,12 @@
}
}
@keyframes bg-gradient {
@keyframes bg-move {
0% {
background-position: 0% 27%
background-position:0 0
}
50% {
background-position: 100% 74%
}
100% {
background-position: 0% 27%
to {
background-position:-960px -960px
}
}

820
_includes/styles/base/base.css Normal file
View file

@ -0,0 +1,820 @@
/* ╭────────────────────────╮
/ │ _ │
/ │ | |__ __ _ ___ ___ │
/ │ | '_ \ / _` / __|/ _ \ │
/ │ | |_) | (_| \__ \ __/ │
/ │ |_.__/ \__,_|___/\___| │
/ ╰────────────────────────╯
/ base - styling for regular/global html elements as well as the color schemes, and anything else that doesn't fit anywhere else */
/* ----------------------------------
- background wallpaper, global font -
---------------------------------- */
html {
background: var(--background);
background-repeat: repeat;
background-size: auto;
}
body {
font-family: var(--font-family);
font-size: 1.05rem;
line-height: 1.45rem;
text-transform: lowercase;
margin: unset !important;
}
bg-gradient {
background: linear-gradient(color-mix(in srgb, var(--accent) 10%, var(--background)), color-mix(in srgb, var(--accent) 50%, var(--background)));
background-repeat: repeat;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
position: fixed;
z-index: -10001;
}
bg-image {
display: block;
position: fixed;
animation: 80s linear infinite bg-move;
opacity: .6;
background-repeat: repeat;
background-size: auto;
background-image: url(/assets/bg.svg);
inset: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: -10000;
}
content-wrapper {
display: flex;
flex-direction: column;
gap: 3rem;
margin-bottom: 4rem;
margin-left: auto;
margin-right: auto;
margin-top: 5rem;
max-width: 60rem;
transition: opacity .5s, translate .5s;
opacity: 1;
translate: 0 0;
@starting-style {
opacity: 0;
translate: 0 1rem;
}
main {
display: flex;
flex-direction: column;
gap: 2rem;
}
@media screen and (max-width: 60rem) {
& {
gap: 2rem !important;
margin-bottom: 1rem;
margin-top: 3.4rem;
}
main {
gap: 1.5rem !important;
}
}
}
/* text formatting and config stuff */
/* headings */
h1, h2, h3, h4, h5, h6 {
border-bottom: .15rem solid var(--border);
color: var(--foreground);
margin-bottom: .8rem;
margin-top: 1.5rem;
padding-bottom: .4rem;
transition: .2s;
& a {
text-decoration-color: transparent;
&:hover {
text-decoration-color: var(--accent);
}
}
}
h1, h1 a {
font-size: 2rem;
}
h2, h2 a {
font-size: 1.8rem;
}
h3, h3 a {
font-size: 1.4rem;
}
h4, h4 a {
font-size: 1.2rem;
}
[accent] {
color: var(--accent);
}
[link-color] {
color: var(--link);
}
/* information colors */
[info] {
color: var(--blue);
}
[warning] {
color: var(--warning);
}
/* utility classes or whatever they call them */
[t-center] {
text-align: center;
}
/* links should look good i think */
a {
color: var(--foreground);
text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
text-decoration-thickness: 0.1em;
transition: 0.2s;
&:hover {
color: var(--link);
text-decoration-color: var(--accent);
text-decoration-skip-ink: none;
text-decoration-thickness: .3em;
transition: 0.2s;
}
}
/* smol text */
small,
small a {
font-size: 0.875rem;
}
/* emoji */
[emoji] {
height: 1.5rem;
vertical-align: bottom;
}
/* lists need some styling */
ul, ol {
margin-left: -1.3rem;
ul { margin-top: .5rem; margin-bottom: .5rem; }
li {
margin-bottom: .5rem;
&:last-child { margin-bottom: 0; }
&::marker {
color: var(--accent);
}
}
}
ul { list-style-type: square; }
ol { margin-left: -.5rem; }
/* text with "title", little hover-over info tibblets */
span[title] {
cursor: help;
text-decoration-color: color-mix(in srgb, var(--foreground) 40%, transparent);
text-decoration-line: underline;
text-decoration-style: dashed;
text-decoration-thickness: 0.1em;
transition: 0.2s;
&:hover {
text-decoration-color: color-mix(in srgb, var(--foreground) 80%, transparent);
text-decoration-skip-ink: none;
transition: 0.2s;
}
}
/* code (enforced monospace) */
.code {
font-family: 'JetBrains Mono', monospace, 'Segoe UI', Tahoma, Geneva, Verdana, system-ui, sans-serif !important;
}
/* caption styled text */
.caption {
font-size: small;
opacity: .8;
.section {
font-size: smaller;
opacity: .9;
}
}
/* styled details elements */
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: "";
}
}
details-content {
display: block;
padding: .8rem;
p:first-of-type { margin-top: 0; }
p:last-of-type { margin-bottom: 0; }
}
&[open] {
summary {
border-bottom: .1rem solid var(--accent);
}
}
}
}
/* more minimal "content warning" styled details elements */
details.cw {
summary {
span {
color: var(--yellow);
padding-right: .6rem;
transform: translateY(.1rem);
vertical-align: middle;
}
.tabler--chevron-down:last-of-type {
margin-left: .5rem;
}
background: color-mix(in srgb, var(--yellow) 5%, var(--background));
border-radius: .4rem;
border: .1rem solid var(--yellow);
cursor: pointer;
padding: .3rem;
transform: 0.2s;
width: fit-content;
}
section {
background-color: color-mix(in srgb, var(--background) 95%, white);
border-radius: .4rem;
border: .1rem solid var(--border);
margin-top: .7rem;
padding: .4rem;
text-align: start !important;
ul {
margin: 0 0 0 -.5rem;
}
p:first-of-type {
margin-top: 0 !important;
}
p:last-of-type {
margin-bottom: 0 !important;
}
}
margin-top: 1rem;
margin-bottom: 1rem;
overflow: clip;
}
details.cw[open] {
.tabler--chevron-down:last-of-type {
transform: 0.2s;
transform: rotate(180deg);
}
}
/* badge text styling */
.badge {
border-radius: .2rem;
border: .1rem solid var(--accent);
color: var(--link);
font-size: .8rem;
font-weight: normal;
padding: .15rem;
}
/* card styling */
card-container {
display: grid;
gap: 1.2rem;
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
card-entry {
background-color: var(--background-secondary);
border-radius: 1rem;
border: .15rem solid var(--border);
display: flex;
flex-flow: column;
height: auto;
padding: .6rem;
width: auto;
h3 {
border-bottom: unset;
margin-bottom: 1rem;
margin-top: 0;
[icon] {
height: 1.4rem;
transition: .3s;
vertical-align: top;
}
span[status] {
display: flex;
flex-direction: row;
float: right;
icon-tabler {
margin-left: .3rem;
&[lock] {
color: var(--link);
}
&[device-desktop-cog] {
color: var(--blue);
}
}
img {
align-self: center;
border-radius: 10rem;
height: 1.2rem;
vertical-align: middle;
width: auto;
}
}
}
&:hover {
h3 {
[icon] {
margin-right: .4rem;
transform: rotate(15deg) scale(2.5) translateX(-.1rem) translateY(-.2rem);
}
}
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
&[advise-against] {
opacity: .7;
transition: 1s;
border-color: color-mix(in srgb, var(--warning) 30%, transparent);
&:hover {
opacity: 1;
}
}
buttons-container {
margin-top: auto;
a {
&:has(img[src^="https://compliance"]) {
align-self: center;
font-size: 0;
}
}
}
}
}
/* notice/section cards */
[notice-card] {
--n-bg: var(--accent);
border-radius: 1rem;
border: .15rem solid color-mix(in srgb, var(--yellow) 20%, transparent);
color: var(--foreground);
margin-bottom: .8rem;
padding: .5rem;
h3 {
color: var(--link);
margin-top: 0;
}
p, ul { &:last-of-type { margin-bottom: 0; } }
&[important], &[warning] {
--n-bg: var(--yellow);
background-color: color-mix(in srgb, var(--n-bg) 15%, transparent);
h3 { color: var(--yellow); }
}
}
/* Dashed border */
hr[dashed] {
border: .1rem dashed var(--border);
}
/* Dotted border */
hr[dotted] {
border: .1rem dotted var(--border);
}
/* Solid border */
hr[solid] {
border: .1rem solid var(--border);
}
/* Rounded border */
hr[rounded] {
border: .2rem solid var(--border);
border-radius: 5px;
}
/* text formatting, like github kinda */
.info-box {
padding: .5rem;
border: .1rem solid;
border-radius: .4rem;
&.info {
background-color: color-mix(in srgb, var(--blue) 8%, transparent);
border-color: var(--blue);
.icon { color: var(--blue); }
}
&.warn {
background-color: color-mix(in srgb, var(--orange) 8%, transparent);
border-color: var(--orange);
.icon { color: var(--orange); }
}
}
/* audio */
audio {
border-radius: 3rem;
}
/* button link styling */
.button {
background-color: color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: 1rem;
color: var(--foreground);
padding: .4rem;
text-decoration: none;
text-shadow: none;
transition: all .2s;
white-space: nowrap;
line-height: 3rem;
.icon {
transform: scale(1.13) translateY(.7rem);
}
}
.button:hover {
background-color: var(--accent);
color: var(--foreground);
transition: all .2s;
}
.button-container {
margin-bottom: unset !important;
}
/* focus styling */
*:focus-visible {
outline: .4rem solid var(--ui-purple) !important;
border-radius: .2rem;
z-index: 999999 !important;
}
/* image-button grid */
imgbtn-grid {
align-items: normal;
display: flex;
flex-flow: row wrap;
font-size: 0 !important;
gap: 5px;
justify-content: center;
line-height: 0;
margin-inline: auto;
&:last-child {
margin-bottom: .8rem;
}
img {
height: 31px;
image-rendering: crisp-edges !important;
margin: unset !important;
transition: transform 0.2s;
width: 88px;
}
.generic {
align-content: center;
background-color: color-mix(in srgb, var(--background) 90%, white);
border: solid .15rem;
box-sizing: border-box;
color: var(--foreground);
font-size: .95rem !important;
height: 31px;
text-align: center;
transition: transform 0.2s;
width: 88px;
}
.generic:hover, img:hover {
transform: scale(2);
}
}
/* no forced uncapitalization */
[no-uncap] {
text-transform: none !important;
}
/* spoiler text */
spoiler {
filter: blur(.4rem) contrast(200%);
transition: 0.2s;
&:hover {
filter: unset !important;
transition: 0.2s;
}
}
/* ------------------
- nsfw toggle group -
------------------ */
.nsfw-toggle-holder {
background-color: color-mix(in srgb, var(--background) 95%, white);
border-radius: 1rem;
border: .2rem solid var(--border);
color: var(--foreground);
padding: .5rem;
position: fixed;
max-width: 30rem;
margin-left: .4rem;
z-index: 30;
right: .4rem;
top: 3rem;
transition: 0.2s;
/* inital "shrunken" state */
opacity: .5;
scale: .75;
transform-origin: top right;
/* hide captions when unhovered */
.caption {
display: none;
}
&:hover {
transition: 0.2s;
/* hovered "full" state */
opacity: 1;
scale: 1;
.caption {
opacity: .9;
display: unset;
}
}
.nsfw-toggle, .spoil-nsfw-toggle {
display: block;
}
/* hide the spoil option if nsfw itself is disabled */
.spoil-nsfw-toggle {
display: none;
margin-top: 1rem;
}
&:has(input[type="checkbox"]#view-nsfw-content:checked) .spoil-nsfw-toggle {
display: inherit !important;
}
/* shrink it even more if on a small display */
@media screen and (max-width: 580px) {
scale: .5;
}
}
/* _is-nsfw class for elements that are "nsfw" - will be hidden and spoiled by default */
._is-nsfw {
display: none;
}
/* inverse to remove elements if they aren't nsfw while the option is toggled */
._is-nsfw-inverse {
display: inherit;
}
/* show if enabled */
html:has(input[type="checkbox"]#view-nsfw-content:checked) {
._is-nsfw {
display: inherit;
}
._is-nsfw-inverse {
display: none;
}
}
/* blue/spoiler if enabled */
html:has(input[type="checkbox"]#spoil-nsfw-content:checked) {
._is-nsfw {
filter: blur(.4rem) contrast(200%);
transition: 0.2s;
&:hover {
filter: unset !important;
transition: 0.2s;
}
}
/* _always-show to ignore the "spoiler" option */
._always-show {
filter: unset !important;
}
}
/* alt text popup */
.alt-popup {
position: fixed;
background-color: color-mix(in srgb, var(--background) 85%, transparent);
backdrop-filter: blur(.5rem);
color: var(--foreground);
padding: .5rem;
border: solid .01rem var(--accent);
border-radius: .5rem;
font-size: 1rem;
max-width: 30rem;
z-index: 1000;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s;
}
/* widgets */
buttons-container {
display: flex;
flex-flow: row wrap;
gap: .4rem;
img {
align-self: center;
border-radius: 10rem;
height: 1.2rem;
vertical-align: middle;
width: auto;
}
a {
icon-tabler { pointer-events: none; }
}
[right] {
margin-left: auto;
}
}
[button] {
background: light-dark(color-mix(in srgb,var(--accent)40%,transparent), color-mix(in srgb,var(--accent)25%,transparent));
border-radius: 10rem;
padding: .2rem .5rem;
text-decoration: none !important;
transition: .2s;
&:hover {
background: var(--accent);
color: light-dark(var(--foreground), var(--background));
}
&[tor] {
--accent: #9743be;
&:hover { color: light-dark(var(--background), var(--foreground)); }
}
&[yggdrasil] {
--accent: #26bb8c;
}
}
radio-button-group {
display: flex;
flex-flow: row wrap;
gap: .4rem;
label {
border-radius: .4rem;
border: .13rem solid var(--border);
cursor: pointer;
padding: .2rem;
width: fit-content;
word-break: break-word;
&:has(input:checked) {
border-color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 15%, var(--background));
}
&:hover, &:focus-visible {
background: var(--hover);
}
}
input {
/* allows screen readers to still access these - see https://lyra.horse/blog/2025/08/you-dont-need-js */
opacity: 0;
position: absolute;
pointer-events: none;
}
}
checkbox-button-group {
display: flex;
flex-flow: column;
gap: .5rem;
label {
border-radius: .4rem;
border: .13rem solid var(--border);
cursor: pointer;
margin-right: .3rem;
padding: .2rem;
width: fit-content;
word-break: break-word;
&::before {
background: var(--border);
border-radius: 10rem;
content: '';
display: inline-flex;
height: 1rem;
margin-bottom: -.15rem;
margin-left: .2rem;
margin-right: .3rem;
position: relative;
transition: .2s;
width: 1rem;
}
&:has(input:checked) {
border-color: var(--accent);
background-color: color-mix(in srgb, var(--accent) 15%, var(--background));
&::before {
background: var(--accent);
}
}
&:hover, &:focus-visible {
background: var(--hover);
}
}
input {
/* allows screen readers to still access these - see https://lyra.horse/blog/2025/08/you-dont-need-js */
opacity: 0;
position: absolute;
pointer-events: none;
}
}

50
_includes/styles/base/colors.css Normal file
View file

@ -0,0 +1,50 @@
/*
/ colors
/ ======
/ default colors and extra colors specified here
/ colors yoinked as is from https://gogh-co.github.io/Gogh/
/ maybe some modifications here and there, but otherwise what is named is what is used
*/
:root {
--background: light-dark(#fafafa, #121418);
--background-secondary: light-dark(hsl(from var(--background) h s calc(l - 6)), hsl(from var(--background) h s calc(l + 4)));
--foreground: light-dark(#393e42, #caccd3);
--accent: light-dark(#f2ae49, #efbd58);
--link: light-dark(hsl(from var(--accent) h s calc(l - 30)), var(--accent));
/* light theme is Ayu Light, dark theme is modified Astrodark */
--black: light-dark(#8A9199, #576176);
--red: light-dark(#F51818, #FAA5AB);
--green: light-dark(#86B300, #A5CD84);
--yellow: light-dark(#F2AE49, #EFBD58);
--blue: light-dark(#399EE6, #8DC3F1);
--purple: light-dark(#A37ACC, #DEAEED);
--cyan: light-dark(#4CBF99, #27FFDF);
--white: light-dark(#FAFAFA, #CACCD3);
--dark-black: light-dark(#575F66, #111317);
--dark-red: light-dark(#F51818, #F8747E);
--dark-green: light-dark(#86B300, #75AD47);
--dark-yellow: light-dark(#F2AE49, #D09214);
--dark-blue: light-dark(#399EE6, #50A4E9);
--dark-purple: light-dark(#A37ACC, #CC83E3);
--dark-cyan: light-dark(#4CBF99, #00B298);
--dark-white: light-dark(#FAFAFA, #ADB0BB);
--warning: light-dark(hsl(from var(--yellow) h s calc(l - 25)), var(--yellow));
--border: light-dark(hsl(from var(--foreground) h s calc(l + 45)), hsl(from var(--background) h s calc(l + 15)));
--hover: light-dark(hsl(from var(--background) h s calc(l - 20)), hsl(from var(--background) h s calc(l + 10)));
--shadow: light-dark(rgba(from var(--foreground) r g b / .8), rgba(from var(--background) r g b / .8));
--focused: light-dark(var(--dark-purple), var(--dark-purple));
--pagefind-ui-font: var(--font-family);
--pagefind-ui-primary: var(--foreground);
--pagefind-ui-text: var(--foreground);
--pagefind-ui-background: var(--background);
--pagefind-ui-border: var(--accent);
--pagefind-ui-tag: var(--background);
--site-border: .1rem solid var(--border);
}

137
_includes/styles/base/footer.css Normal file
View file

@ -0,0 +1,137 @@
/* ╭────────────────────────────────╮
/ │ __ _ │
/ │ / _| ___ ___ | |_ ___ _ __ │
/ │ | |_ / _ \ / _ \| __/ _ \ '__| │
/ │ | _| (_) | (_) | || __/ | │
/ │ |_| \___/ \___/ \__\___|_| │
/ ╰────────────────────────────────╯
/ footer - related styling for the footer window on all pages */
footer {
width: fit-content;
margin-left: auto;
margin-right: auto;
width: 50rem;
.header {
padding: .25rem !important;
a {
margin-left: .5rem;
font-size: .9rem;
}
}
window-contents {
display: flex !important;
flex-flow: row wrap;
gap: 2rem;
padding: 1rem !important;
footer-section {
display: flex;
flex-flow: column wrap;
p {
margin-top: 0;
margin-bottom: .6rem;
}
p:last-child { margin-bottom: 0; }
h3 {
border-bottom: unset;
font-size: 1.5rem;
margin-bottom: .8rem;
margin-top: 0;
}
}
footer-section[icon] {
margin-right: 1rem;
img {
width: 3rem;
height: 3rem;
}
}
footer-section[webrings] {
width: 13rem;
p {
margin-bottom: .8rem;
margin-top: 0;
}
a {
border-radius: .5rem;
padding: 0.25rem .06rem;
text-decoration-color: transparent;
icon-tabler {
pointer-events: none;
}
&:hover {
text-decoration-color: inherit;
}
}
a[aria-label="Previous"] {
color: var(--yellow);
background: light-dark(color-mix(in srgb, var(--yellow) 30%, transparent), color-mix(in srgb, var(--yellow) 25%, transparent));
}
a[aria-label="Next"] {
color: var(--green);
background: light-dark(color-mix(in srgb, var(--green) 30%, transparent), color-mix(in srgb, var(--green) 25%, transparent));
}
a[href="https://fediring.net"] {
padding: 0.25rem .3rem;
color: var(--purple);
background: light-dark(color-mix(in srgb, var(--purple) 25%, transparent), color-mix(in srgb, var(--purple) 15%, transparent));
}
a[href="https://keithhacks.cyou/furryring.php"] {
padding: 0.25rem .3rem;
color: var(--blue);
background: light-dark(color-mix(in srgb, var(--blue) 20%, transparent), color-mix(in srgb, var(--blue) 15%, transparent));
}
a[href="https://stellophiliac.github.io/roboring"] {
padding: 0.25rem .3rem;
color: var(--foreground);
background: light-dark(color-mix(in srgb, var(--foreground) 20%, var(--background)), color-mix(in srgb, var(--foreground) 15%, var(--background)));
}
}
footer-section[links] {
a {
margin-bottom: .2rem;
margin-top: 0;
width: fit-content;
}
span:last-of-type {
margin-top: .5rem;
}
}
}
@media screen and (max-width: 50rem) {
& {
width: unset !important;
border-radius: 0 !important;
margin-top: 1rem;
section {
footer-section[icon] {
margin-right: auto;
}
footer-section[webrings] {
width: unset;
}
}
}
}
}

97
_includes/styles/base/icons.css Normal file
View file

@ -0,0 +1,97 @@
/* ╭─────────────────────────╮
/ │ _ │
/ │ (_) ___ ___ _ __ ___ │
/ │ | |/ __/ _ \| '_ \/ __| │
/ │ | | (_| (_) | | | \__ \ │
/ │ |_|\___\___/|_| |_|___/ │
/ ╰─────────────────────────╯
/ icons - tabler icons done through css, generate via https://icon-sets.iconify.design/tabler */
icon-tabler {
-webkit-mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
background-color: currentColor;
display: inline-flex;
height: 1.5rem;
mask-image: var(--svg);
mask-repeat: no-repeat;
mask-size: 100% 100%;
vertical-align: bottom;
width: 1.5rem;
&[accessible] { --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 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='m10 16.5l2-3l2 3m-2-3v-2l3-1m-6 0l3 1'/%3E%3Ccircle cx='12' cy='7.5' r='.5' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"); }
&[alert-triangle] { --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 9v4m-1.637-9.409L2.257 17.125a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87L13.637 3.59a1.914 1.914 0 0 0-3.274 0zM12 16h.01'/%3E%3C/svg%3E"); }
&[arrow-autofit-height] { --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 20H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6m6 10v7m0-18v7m-3 8l3 3l3-3M15 6l3-3l3 3'/%3E%3C/svg%3E"); }
&[arrow-forward] { --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 11l4 4l-4 4m4-4H8a4 4 0 0 1 0-8h1'/%3E%3C/svg%3E"); }
&[arrow-left] { --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='M5 12h14M5 12l6 6m-6-6l6-6'/%3E%3C/svg%3E"); }
&[arrow-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='M5 12h14m-6 6l6-6m-6-6l6 6'/%3E%3C/svg%3E"); }
&[article] { --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 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm4 2h10M7 12h10M7 16h10'/%3E%3C/svg%3E"); }
&[battery-filled] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 6a3 3 0 0 1 2.995 2.824L20 9v.086l.052.019a1.5 1.5 0 0 1 .941 1.25L21 10.5v3a1.5 1.5 0 0 1-.948 1.395l-.052.018V15a3 3 0 0 1-2.824 2.995L17 18H6a3 3 0 0 1-2.995-2.824L3 15V9a3 3 0 0 1 2.824-2.995L6 6z'/%3E%3C/svg%3E"); }
&[bell] { --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 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1'/%3E%3C/svg%3E"); }
&[brand-bluesky] { --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.335 5.144C4.681 3.945 2 3.017 2 5.97c0 .59.35 4.953.556 5.661C3.269 14.094 5.686 14.381 8 14c-4.045.665-4.889 3.208-2.667 5.41C6.363 20.428 7.246 21 8 21c2 0 3.134-2.769 3.5-3.5q.5-1 .5-1.5q0 .5.5 1.5c.366.731 1.5 3.5 3.5 3.5c.754 0 1.637-.571 2.667-1.59C20.889 17.207 20.045 14.664 16 14c2.314.38 4.73.094 5.444-2.369c.206-.708.556-5.072.556-5.661c0-2.953-2.68-2.025-4.335-.826C15.372 6.806 12.905 10.192 12 12c-.905-1.808-3.372-5.194-5.665-6.856'/%3E%3C/svg%3E"); }
&[brand-git] { --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='M15 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-4-4a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 8a1 1 0 1 0 2 0a1 1 0 1 0-2 0m1-1V9m3 2l-2-2m-2-2L9.1 5.1'/%3E%3Cpath d='m13.446 2.6l7.955 7.954a2.045 2.045 0 0 1 0 2.892l-7.955 7.955a2.045 2.045 0 0 1-2.892 0l-7.955-7.955a2.045 2.045 0 0 1 0-2.892l7.955-7.955a2.045 2.045 0 0 1 2.892 0z'/%3E%3C/g%3E%3C/svg%3E"); }
&[brand-github] { --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='M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2V21'/%3E%3C/svg%3E"); }
&[brand-lastfm] { --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='M20 8c-.83-1-1.388-1-2-1s-2 .271-2 2s1.384 2.233 3 3s2.125 1.812 2 3s-1 2-3 2s-3-1-3.5-2s-1.585-4.78-2.497-6a5 5 0 1 0-1 7'/%3E%3C/svg%3E"); }
&[brand-mastodon] { --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.648 15.254C16.832 17.017 12 16.88 12 16.88a18.3 18.3 0 0 1-3.288-.256q1.69 2.977 8.982 2.475c-1.945 2.013-13.598 5.257-13.668-7.636L4 10.309c0-3.036.023-4.115 1.352-5.633C7.023 2.766 12 3.01 12 3.01s4.977-.243 6.648 1.667C19.977 6.195 20 7.274 20 10.31s-.456 4.074-1.352 4.944'/%3E%3Cpath d='M12 11.204V8.278C12 7.02 11.105 6 10 6S8 7.02 8 8.278V13m4-4.722C12 7.02 12.895 6 14 6s2 1.02 2 2.278V13'/%3E%3C/g%3E%3C/svg%3E"); }
&[brand-metabrainz] { --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 7v10l7 4V3zm18 0v10l-7 4V3z'/%3E%3C/svg%3E"); }
&[brand-tabler] { --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='m8 9l3 3l-3 3m5 0h3'/%3E%3Cpath d='M3 7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3C/g%3E%3C/svg%3E"); }
&[building-bank] { --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 21h18M3 10h18M5 6l7-3l7 3M4 10v11m16-11v11M8 14v3m4-3v3m4-3v3'/%3E%3C/svg%3E"); }
&[bulb] { --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 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7l-.7.7M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0-1 3a2 2 0 0 1-4 0a3.5 3.5 0 0 0-1-3m.7 1h4.6'/%3E%3C/svg%3E"); }
&[chart-bubble] { --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 16a3 3 0 1 0 6 0a3 3 0 1 0-6 0m11 3a2 2 0 1 0 4 0a2 2 0 1 0-4 0M10 7.5a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0-9 0'/%3E%3C/svg%3E"); }
&[chevron-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='m6 9l6 6l6-6'/%3E%3C/svg%3E"); }
&[cloud-network] { --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 20h7m4 0h7m-11 0a2 2 0 1 0 4 0a2 2 0 0 0-4 0m2-4v2m-4-1.996H6.657C4.085 16 2 13.993 2 11.517s2.085-4.482 4.657-4.482c.393-1.762 1.794-3.2 3.675-3.773c1.88-.572 3.956-.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486s-1.551 3.487-3.465 3.487H16'/%3E%3C/svg%3E"); }
&[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"); }
&[grid-dots] { --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 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/svg%3E"); }
&[heart] { --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='M19.5 12.572L12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572'/%3E%3C/svg%3E"); }
&[help] { --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 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m9 5v.01'/%3E%3Cpath d='M12 13.5a1.5 1.5 0 0 1 1-1.5a2.6 2.6 0 1 0-3-4'/%3E%3C/g%3E%3C/svg%3E"); }
&[home] { --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 12H3l9-9l9 9h-2M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6'/%3E%3C/g%3E%3C/svg%3E"); }
&[info-circle] { --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 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9-3h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/g%3E%3C/svg%3E"); }
&[leaf] { --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 21c.5-4.5 2.5-8 7-10'/%3E%3Cpath d='M9 18c6.218 0 10.5-3.288 11-12V4h-4.014c-9 0-11.986 4-12 9c0 1 0 3 2 5h3z'/%3E%3C/g%3E%3C/svg%3E"); }
&[letter-case] { --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='M14 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 19V8.5a3.5 3.5 0 0 1 7 0V19m-7-6h7m11-1v7'/%3E%3C/svg%3E"); }
&[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='m9 15l6-6m-4-3l.463-.536a5 5 0 0 1 7.071 7.072L18 13m-5 5l-.397.534a5.07 5.07 0 0 1-7.127 0a4.97 4.97 0 0 1 0-7.071L6 11'/%3E%3C/svg%3E"); }
&[list-tree] { --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='M9 6h11m-8 6h8m-5 6h5M5 6v.01M8 12v.01M11 18v.01'/%3E%3C/svg%3E"); }
&[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='M5 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M11 16a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3-5V7a4 4 0 1 1 8 0v4'/%3E%3C/g%3E%3C/svg%3E"); }
&[login] { --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='M15 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M21 12H8l3-3m0 6l-3-3'/%3E%3C/g%3E%3C/svg%3E");}
&[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"); }
&[mood-sad-dizzy] { --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 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='M14.5 16.05a3.5 3.5 0 0 0-5 0M8 9l2 2m0-2l-2 2m6-2l2 2m0-2l-2 2'/%3E%3C/g%3E%3C/svg%3E"); }
&[mood-smile] { --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 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m6-2h.01M15 10h.01'/%3E%3Cpath d='M9.5 15a3.5 3.5 0 0 0 5 0'/%3E%3C/g%3E%3C/svg%3E"); }
&[notebook] { --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 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1m3 0v18m4-14h2m-2 4h2'/%3E%3C/svg%3E"); }
&[notes] { --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='M5 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2zm4 2h6m-6 4h6m-6 4h4'/%3E%3C/svg%3E"); }
&[palette] { --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 21a9 9 0 0 1 0-18c4.97 0 9 3.582 9 8c0 1.06-.474 2.078-1.318 2.828S17.693 15 16.5 15H14a2 2 0 0 0-1 3.75A1.3 1.3 0 0 1 12 21'/%3E%3Cpath d='M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m4-3a1 1 0 1 0 2 0a1 1 0 1 0-2 0m4 3a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/g%3E%3C/svg%3E"); }
&[planet] { --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.816 13.58c2.292 2.138 3.546 4 3.092 4.9c-.745 1.46-5.783-.259-11.255-3.838c-5.47-3.579-9.304-7.664-8.56-9.123c.464-.91 2.926-.444 5.803.805'/%3E%3Cpath d='M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0'/%3E%3C/g%3E%3C/svg%3E"); }
&[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"); }
&[spiral] { --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 12.057a1.9 1.9 0 0 0 .614.743c1.06.713 2.472.112 3.043-.919c.839-1.513-.022-3.368-1.525-4.08c-2-.95-4.371.154-5.24 2.086c-1.095 2.432.29 5.248 2.71 6.246c2.931 1.208 6.283-.418 7.438-3.255c1.36-3.343-.557-7.134-3.896-8.41c-3.855-1.474-8.2.68-9.636 4.422c-1.63 4.253.823 9.024 5.082 10.576c4.778 1.74 10.118-.941 11.833-5.59A9.4 9.4 0 0 0 21 11.063'/%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"); }
&[universe] { --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='M7.027 11.477a5 5 0 1 0 5.496-4.45a4.95 4.95 0 0 0-3.088.681'/%3E%3Cpath d='M5.636 5.636a9 9 0 1 0 3.555-2.188'/%3E%3Cpath d='M17 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-6 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-3 4a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/g%3E%3C/svg%3E"); }
&[user-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='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h2.5m4.501 4a2 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"); }
&[user-heart] { --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 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h.5m7.5 7l3.35-3.284a2.143 2.143 0 0 0 .005-3.071a2.24 2.24 0 0 0-3.129-.006l-.224.22l-.223-.22a2.24 2.24 0 0 0-3.128-.006a2.143 2.143 0 0 0-.006 3.071z'/%3E%3C/svg%3E"); }
&[user-plus] { --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 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0m8 12h6m-3-3v6M6 21v-2a4 4 0 0 1 4-4h4'/%3E%3C/svg%3E"); }
&[user] { --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 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E"); }
&[vector] { --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 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zm14 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zm0 14a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1zM3 18a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1zM5 7v10M19 7v10M7 5h10M7 19h10'/%3E%3C/svg%3E"); }
&[volume] { --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 8a5 5 0 0 1 0 8m2.7-11a9 9 0 0 1 0 14M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z'/%3E%3C/svg%3E"); }
&[wifi] { --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 18h.01m-2.838-2.828a4 4 0 0 1 5.656 0m-8.485-2.829a8 8 0 0 1 11.314 0'/%3E%3Cpath d='M3.515 9.515c4.686-4.687 12.284-4.687 17 0'/%3E%3C/g%3E%3C/svg%3E"); }
&[x] { --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='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); }
}

318
_includes/styles/base/navbar.css Normal file
View file

@ -0,0 +1,318 @@
/* ╭──────────────────────────────────────╮
/ │ _ │
/ │ _ __ __ ___ _| |__ __ _ _ __ │
/ │ | '_ \ / _` \ \ / / '_ \ / _` | '__| │
/ │ | | | | (_| |\ V /| |_) | (_| | | │
/ │ |_| |_|\__,_| \_/ |_.__/ \__,_|_| │
/ ╰──────────────────────────────────────╯
/ navbar - styling the navigation bar / panel that sits on the top of the page at all times */
.navbar {
align-content: center;
color: var(--foreground);
display: flex;
flex-direction: row;
inset: 0 !important;
width: 100% !important;
height: 1.8rem;
max-height: 1.8rem !important;
padding: .4rem .6rem .4rem .6rem;
position: fixed;
transition: .2s background-color;
vertical-align: middle;
z-index: 100;
navbar-left {
display: inline-flex;
flex-direction: row;
gap: .5rem;
}
navbar-right {
display: inline-flex;
flex-direction: row;
gap: .5rem;
margin-left: auto;
margin-right: .7rem;
}
.nav-base {
align-content: center;
border-radius: 1rem;
display: inline-flex;
flex-direction: row;
height: 1.9rem;
outline: .13rem solid var(--border);
overflow: hidden;
padding: 0px .2em !important;
text-decoration: unset !important;
}
.nav-baselink {
background-color: var(--accent);
color: var(--background);
outline-color: color-mix(in srgb, var(--accent) 60%, transparent);
.synth-icon {
height: 2rem;
margin-right: 1rem;
pointer-events: none;
transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.1rem);
transition: .2s ease-out;
width: 2rem;
}
&:hover, &:focus-visible {
.synth-icon {
transition: .2s ease-out;
transform: scaleX(-1) scale(1.5) translateX(-.2rem) translateY(.2rem) rotate(10deg);
}
}
}
.nav-links {
align-items: center;
background-color: var(--background);
color: var(--foreground);
overflow: clip;
padding: 0 .4rem !important;
text-shadow: none;
transition: all .3s;
span {
opacity: 0;
position: absolute;
transition: all .3s;
pointer-events: none;
white-space: nowrap;
}
icon-tabler {
transition: all .3s;
}
}
.nav-links {
&:hover, &:focus-visible {
color: light-dark(var(--foreground), var(--background));
padding-bottom: 7rem !important;
padding-right: 9rem !important;
transition: .3s;
span {
opacity: 1;
transform: scale(1.5) translateX(.7rem) translateY(.1rem);
transition: .3s;
}
icon-tabler {
transform: scale(5) translateY(.85rem) translateX(.5rem) rotate(10deg);
transition: .3s;
}
}
}
.nav-about {
&: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-services {
&:hover, &:focus-visible {
background-color: light-dark(color-mix(in srgb, var(--blue) 25%, var(--background)), var(--blue));
outline-color: color-mix(in srgb, var(--blue) 60%, transparent);
}
}
.nav-donate {
&:hover, &:focus-visible {
background-color: light-dark(color-mix(in srgb, var(--purple) 25%, var(--background)), var(--purple));
outline-color: color-mix(in srgb, var(--purple) 60%, transparent);
}
}
.nav-mobile-menu {
display: none;
position: relative;
input[type="checkbox"] {
left: -100vw;
position: absolute;
}
label {
cursor: pointer;
}
ul {
background-color: var(--background);
border-radius: 1rem;
border: var(--accent) solid .15rem;
height: max-content;
left: 0;
margin-left: unset;
margin-top: 2.2rem !important;
position: absolute;
visibility: hidden;
width: max-content;
/* inital "hidden" state, used for providing animation when activated */
opacity: 0;
scale: .5;
transform-origin: top left;
transition: opacity .3s, scale .3s, visibility .3s;
li {
border-radius: 1rem;
list-style-type: none;
margin: .5rem .5rem .5rem -1.9rem;
overflow: clip;
padding: .7rem;
transition: .2s all;
a {
color: var(--foreground);
text-decoration: none;
text-shadow: unset;
}
icon-tabler {
transition: .2s;
}
}
li:hover {
transition: .2s;
icon-tabler {
transform: scale(2.5) translateX(-.1rem) translateY(.1rem) rotate(15deg);
}
a {
color: light-dark(var(--foreground), var(--background));
}
}
.nav-home {
&:hover, &:focus-visible {
background-color: light-dark(color-mix(in srgb, var(--accent) 25%, var(--background)), var(--accent));
}
}
.nav-about {
&:hover, &:focus-visible {
background-color: light-dark(color-mix(in srgb, var(--green) 25%, var(--background)), var(--green));
}
}
.nav-services {
&:hover, &:focus-visible {
background-color: light-dark(color-mix(in srgb, var(--blue) 25%, var(--background)), var(--blue));
}
}
.nav-donate {
&:hover, &:focus-visible {
background-color: light-dark(color-mix(in srgb, var(--purple) 25%, var(--background)), var(--purple));
}
}
}
input[type="checkbox"]:checked~ul {
/* makes the menu visibile when activated and makes it appear from the top right */
opacity: 1;
scale: 1;
transition: opacity .3s, scale .3s, visibility .3s;
visibility: visible;
}
}
.nav-settings {
input[type="checkbox"]#nav-settings-menu {
left: -100vw;
position: absolute;
}
input[type="checkbox"]#nav-settings-menu:focus-visible {
left: unset !important;
}
label[data-toggle="nav-settings"] {
cursor: pointer;
align-items: center;
icon-tabler {
padding: 0 .4rem !important;
pointer-events: none;
transform: scale(1.3);
transition: 1.3s;
}
&:hover, &:focus-visible {
icon-tabler {
transform: scale(1.3) rotate(360deg);
}
}
}
&:has(input[type="checkbox"]#nav-settings-menu:checked) {
label[data-toggle="nav-settings"] {
background-color: var(--red);
outline-color: color-mix(in srgb, var(--red) 70%, transparent);
icon-tabler[settings] {
--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='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}
}
}
}
.nav-systray {
align-items: center;
background-color: var(--background);
color: var(--foreground);
display: inline-flex;
flex-direction: row;
gap: .2rem;
margin-right: .4rem !important;
padding: 0 .4rem !important;
}
small {
opacity: .7;
}
svg {
color: var(--foreground) !important;
}
}
.navbar:hover {
transition: .2s all;
background-color: color-mix(in srgb, var(--accent) 40%, transparent);
border-bottom: solid .2rem var(--accent);
}
/* modify widths and spacing depending on the size of the display */
@media screen and (max-width: 35rem) {
.navbar {
.nav-desktop {
display: none !important;
}
.nav-mobile-menu {
display: inline-flex !important;
}
.nav-links {
display: none !important;
}
.nav-settings {
span {
padding: 0 .4rem !important;
}
}
}
}

0
_includes/styles/prism-a11y-dark.css → _includes/styles/base/prism-a11y-dark.css
View file

75
_includes/styles/base/settings.css Normal file
View file

@ -0,0 +1,75 @@
:root:has(input[type="checkbox"]#nav-settings-menu:checked) {
settings-area {
opacity: 1;
transition: opacity .3s, scale .3s, visibility .3s;
visibility: visible;
settings-model {
scale: 1;
}
}
}
settings-area {
/* inital state for animations */
opacity: 0;
transform-origin: center;
transition: opacity .3s, scale .3s, visibility .3s;
visibility: hidden;
align-items: center;
background: #00000050;
display: flex;
inset: 0;
justify-content: center;
overflow-x: hidden;
overflow-y: scroll;
position: fixed;
z-index: 90;
settings-model {
background: var(--background);
border-radius: .4rem;
outline: .13rem solid var(--border);
padding: .6rem;
position: static;
scale: .5;
transition: .2s;
width: 40rem;
&:hover {
outline-color: var(--accent);
}
h2, h3 {
margin-top: 0;
&:not(h2:first-child) {
border-bottom: unset !important;
}
}
.container {
display: flex;
flex-flow: row wrap;
gap: 1.5rem;
settings-section {
margin-right: auto;
}
}
}
@media screen and (max-width: 40rem) {
settings-model {
border-radius: 0;
}
}
@media screen and (max-width: 28.8rem) {
settings-model {
margin-top: 10rem;
width: 100%;
}
}
}

119
_includes/styles/base/windows.css Normal file
View file

@ -0,0 +1,119 @@
/* ╭────────────────────────────────────────────╮
/ │ _ _ │
/ │ __ _(_)_ __ __| | _____ _____ │
/ │ \ \ /\ / / | '_ \ / _` |/ _ \ \ /\ / / __| │
/ │ \ V V /| | | | | (_| | (_) \ V V /\__ \ │
/ │ \_/\_/ |_|_| |_|\__,_|\___/ \_/\_/ |___/ │
/ ╰────────────────────────────────────────────╯
/ windows - related styling for the windows on pages */
[window] {
background-color: var(--background);
border-radius: 2rem .6rem 2rem .6rem;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
color: var(--foreground);
outline: var(--accent) solid .15rem;
overflow: clip;
transition: .2s;
&:hover {
outline: var(--accent) solid .5rem;
transition: .2s;
}
.header {
background-color: color-mix(in srgb, var(--accent) 20%, var(--background));
border-bottom: .1rem solid var(--accent);
display: inline-flex;
min-width: 100%;
overflow: clip;
text-align: center;
vertical-align: middle;
titlebar-icon {
background: color-mix(in srgb, var(--accent) 30%, transparent);
border-bottom-right-radius: 1rem;
border-bottom: .2rem solid var(--accent);
border-right: .2rem solid var(--accent);
margin-bottom: -.2rem;
padding: .4rem .3rem .4rem 1rem;
}
a {
align-self: center;
padding-left: .5rem;
text-decoration: none;
color: var(--foreground);
}
a:hover {
text-decoration: underline;
}
window-controls {
display: flex;
flex-direction: row;
margin: auto 0 auto auto;
align-items: center;
gap: .4rem;
icon-tabler[minimize], icon-tabler[maximize] {
cursor: not-allowed;
}
}
close-button {
background: color-mix(in srgb, var(--accent) 30%, transparent);
border-bottom-left-radius: 1rem;
border-bottom: .2rem solid var(--accent);
border-left: .2rem solid var(--accent);
cursor: pointer;
margin-bottom: -.2rem;
padding: .5rem .3rem .4rem .4rem;
transition: .2s;
&:hover {
background: var(--red);
icon-tabler { background-color: var(--background); }
}
}
}
window-contents {
display: block;
padding: .8rem;
p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { &:first-child { margin-top: 0; } }
}
@media screen and (max-width: 60rem) {
&:not(#footer) {
.header {
titlebar-icon {
padding: .3rem .4rem .3rem .4rem;
}
window-controls {
icon-tabler[minimize], icon-tabler[maximize] {
display: none !important;
}
close-button {
padding: .4rem .3rem .3rem .4rem;
}
}
}
main, section, article {
padding: .5rem;
}
border-bottom: var(--accent) solid .15rem;
border-left: unset !important;
border-radius: unset !important;
border-right: unset !important;
border-top: var(--accent) solid .15rem;
}
}
}

523
_includes/styles/font.css
View file

@ -1,523 +0,0 @@
/* ╭───────────────────────╮
/ │ __ _ │
/ │ / _| ___ _ __ | |_ │
/ │ | |_ / _ \| '_ \| __| │
/ │ | _| (_) | | | | |_ │
/ │ |_| \___/|_| |_|\__| │
/ ╰───────────────────────╯
/ font - font configuration, stuff, whatever */
/* - JetBrains Mono - */
@font-face {
font-family: "JetBrains Mono";
src: local("JetBrains Mono"),
url("/assets/fonts/JetBrainsMono/JetBrainsMono-Regular.woff2")
format("woff"),
local("JetBrainsMono Nerd Font");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "JetBrains Mono";
src: local("JetBrains Mono"),
url("/assets/fonts/JetBrainsMono/JetBrainsMono-Bold.woff2")
format("woff"),
local("JetBrainsMono Nerd Font");
font-weight: bold;
font-style: bold;
}
@font-face {
font-family: "JetBrains Mono";
src: local("JetBrains Mono"),
url("/assets/fonts/JetBrainsMono/JetBrainsMono-Italic.woff2")
format("woff"),
local("JetBrainsMono Nerd Font");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "JetBrains Mono";
src: local("JetBrains Mono"),
url("/assets/fonts/JetBrainsMono/JetBrainsMono-BoldItalic.woff2")
format("woff"),
local("JetBrainsMono Nerd Font");
font-weight: bold;
font-style: italic;
}
/* font config, Atkinson Hyperlegible Next */
@font-face {
font-family: "Atkinson Hyperlegible Next";
src: local("Atkinson Hyperlegible Next"),
url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Regular.woff2")
format("woff"),
local("JetBrainsMono Nerd Font");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Atkinson Hyperlegible Next";
src: local("Atkinson Hyperlegible Next"),
url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Bold.woff2")
format("woff"),
local("Atkinson Hyperlegible");
font-weight: bold;
font-style: bold;
}
@font-face {
font-family: "Atkinson Hyperlegible Next";
src: local("Atkinson Hyperlegible Next"),
url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-Italic.woff2")
format("woff"),
local("Atkinson Hyperlegible");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Atkinson Hyperlegible Next";
src: local("Atkinson Hyperlegible Next"),
url("/assets/fonts/AtkinsonHyperlegibleNext/AtkinsonHyperlegibleNext-BoldItalic.woff2")
format("woff"),
local("Atkinson Hyperlegible");
font-weight: bold;
font-style: italic;
}
/* font config, Inter
original css by Inter, modified by Sneexy */
/* Variable fonts usage:
:root { font-family: "Inter", sans-serif; }
@supports (font-variation-settings: normal) {
:root { font-family: "InterVariable", sans-serif; font-optical-sizing: auto; }
} */
@font-face {
font-family: InterVariable;
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("InterVariable.woff2") format("woff2");
}
@font-face {
font-family: InterVariable;
font-style: italic;
font-weight: 100 900;
font-display: swap;
src: url("InterVariable-Italic.woff2") format("woff2");
}
/* static fonts */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 100;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-Thin.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 100;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-ThinItalic.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-ExtraLight.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-ExtraLightItalic.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-Light.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-LightItalic.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-Regular.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-Italic.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-Medium.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-MediumItalic.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-SemiBoldItalic.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-Bold.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-BoldItalic.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-ExtraBold.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-ExtraBoldItalic.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-Black.woff2") format("woff2");
}
@font-face {
font-family: "Inter";
font-style: italic;
font-weight: 900;
font-display: swap;
src: url("/assets/fonts/Inter/Inter-BlackItalic.woff2") format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: normal;
font-weight: 100;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-Thin.woff2") format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: italic;
font-weight: 100;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-ThinItalic.woff2")
format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: normal;
font-weight: 200;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-ExtraLight.woff2")
format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: italic;
font-weight: 200;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-ExtraLightItalic.woff2")
format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-Light.woff2") format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-LightItalic.woff2")
format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-Regular.woff2") format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-Italic.woff2") format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-Medium.woff2") format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-MediumItalic.woff2")
format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-SemiBold.woff2") format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: italic;
font-weight: 600;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-SemiBoldItalic.woff2")
format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-Bold.woff2") format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: italic;
font-weight: 700;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-BoldItalic.woff2")
format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: normal;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-ExtraBold.woff2") format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: italic;
font-weight: 800;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-ExtraBoldItalic.woff2")
format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-Black.woff2") format("woff2");
}
@font-face {
font-family: "InterDisplay";
font-style: italic;
font-weight: 900;
font-display: swap;
src: url("/assets/fonts/Inter/InterDisplay-BlackItalic.woff2")
format("woff2");
}
@font-feature-values InterVariable {
@character-variant {
cv01: 1;
cv02: 2;
cv03: 3;
cv04: 4;
cv05: 5;
cv06: 6;
cv07: 7;
cv08: 8;
cv09: 9;
cv10: 10;
cv11: 11;
cv12: 12;
cv13: 13;
alt-1: 1; /* Alternate one */
alt-3: 9; /* Flat-top three */
open-4: 2; /* Open four */
open-6: 3; /* Open six */
open-9: 4; /* Open nine */
lc-l-with-tail: 5; /* Lower-case L with tail */
simplified-u: 6; /* Simplified u */
alt-double-s: 7; /* Alternate German double s */
uc-i-with-serif: 8; /* Upper-case i with serif */
uc-g-with-spur: 10; /* Capital G with spur */
single-story-a: 11; /* Single-story a */
compact-lc-f: 12; /* Compact f */
compact-lc-t: 13; /* Compact t */
}
@styleset {
ss01: 1;
ss02: 2;
ss03: 3;
ss04: 4;
ss05: 5;
ss06: 6;
ss07: 7;
ss08: 8;
open-digits: 1; /* Open digits */
disambiguation: 2; /* Disambiguation (with zero) */
disambiguation-except-zero: 4; /* Disambiguation (no zero) */
round-quotes-and-commas: 3; /* Round quotes &amp; commas */
square-punctuation: 7; /* Square punctuation */
square-quotes: 8; /* Square quotes */
circled-characters: 5; /* Circled characters */
squared-characters: 6; /* Squared characters */
}
}
@font-feature-values Inter {
@character-variant {
cv01: 1;
cv02: 2;
cv03: 3;
cv04: 4;
cv05: 5;
cv06: 6;
cv07: 7;
cv08: 8;
cv09: 9;
cv10: 10;
cv11: 11;
cv12: 12;
cv13: 13;
alt-1: 1; /* Alternate one */
alt-3: 9; /* Flat-top three */
open-4: 2; /* Open four */
open-6: 3; /* Open six */
open-9: 4; /* Open nine */
lc-l-with-tail: 5; /* Lower-case L with tail */
simplified-u: 6; /* Simplified u */
alt-double-s: 7; /* Alternate German double s */
uc-i-with-serif: 8; /* Upper-case i with serif */
uc-g-with-spur: 10; /* Capital G with spur */
single-story-a: 11; /* Single-story a */
compact-lc-f: 12; /* Compact f */
compact-lc-t: 13; /* Compact t */
}
@styleset {
ss01: 1;
ss02: 2;
ss03: 3;
ss04: 4;
ss05: 5;
ss06: 6;
ss07: 7;
ss08: 8;
open-digits: 1; /* Open digits */
disambiguation: 2; /* Disambiguation (with zero) */
disambiguation-except-zero: 4; /* Disambiguation (no zero) */
round-quotes-and-commas: 3; /* Round quotes &amp; commas */
square-punctuation: 7; /* Square punctuation */
square-quotes: 8; /* Square quotes */
circled-characters: 5; /* Circled characters */
squared-characters: 6; /* Squared characters */
}
}
@font-feature-values InterDisplay {
@character-variant {
cv01: 1;
cv02: 2;
cv03: 3;
cv04: 4;
cv05: 5;
cv06: 6;
cv07: 7;
cv08: 8;
cv09: 9;
cv10: 10;
cv11: 11;
cv12: 12;
cv13: 13;
alt-1: 1; /* Alternate one */
alt-3: 9; /* Flat-top three */
open-4: 2; /* Open four */
open-6: 3; /* Open six */
open-9: 4; /* Open nine */
lc-l-with-tail: 5; /* Lower-case L with tail */
simplified-u: 6; /* Simplified u */
alt-double-s: 7; /* Alternate German double s */
uc-i-with-serif: 8; /* Upper-case i with serif */
uc-g-with-spur: 10; /* Capital G with spur */
single-story-a: 11; /* Single-story a */
compact-lc-f: 12; /* Compact f */
compact-lc-t: 13; /* Compact t */
}
@styleset {
ss01: 1;
ss02: 2;
ss03: 3;
ss04: 4;
ss05: 5;
ss06: 6;
ss07: 7;
ss08: 8;
open-digits: 1; /* Open digits */
disambiguation: 2; /* Disambiguation (with zero) */
disambiguation-except-zero: 4; /* Disambiguation (no zero) */
round-quotes-and-commas: 3; /* Round quotes &amp; commas */
square-punctuation: 7; /* Square punctuation */
square-quotes: 8; /* Square quotes */
circled-characters: 5; /* Circled characters */
squared-characters: 6; /* Squared characters */
}
}

123
_includes/styles/footer.css
View file

@ -1,123 +0,0 @@
/* ╭────────────────────────────────╮
/ │ __ _ │
/ │ / _| ___ ___ | |_ ___ _ __ │
/ │ | |_ / _ \ / _ \| __/ _ \ '__| │
/ │ | _| (_) | (_) | || __/ | │
/ │ |_| \___/ \___/ \__\___|_| │
/ ╰────────────────────────────────╯
/ footer - related styling for the footer window on all pages */
footer {
max-width: 30em;
margin-left: auto;
margin-right: auto;
.header > a {
padding: .3rem 0rem .3rem 1rem !important;
}
main, section, article {
padding: 1rem !important;
}
.fediring {
a {
color: var(--green);
display: inline-grid;
font-size: 1.5rem;
margin-bottom: .5em;
text-decoration: none !important;
vertical-align: bottom;
}
[href="https://fediring.net"] {
color: var(--foreground);
background: color-mix(in srgb, var(--purple) 25%, transparent);
padding: 0px 10px 0px 10px;
border-radius: 5px;
}
[href="https://keithhacks.cyou/furryring.php"] {
color: var(--foreground);
background: color-mix(in srgb, var(--sapphire) 25%, transparent);
padding: 0px 10px 0px 10px;
border-radius: 5px;
}
[href="https://stellophiliac.github.io/roboring"] {
color: var(--foreground);
background: color-mix(in srgb, var(--comment) 25%, transparent);
padding: 0px 10px 0px 10px;
border-radius: 5px;
}
[href*="prev"] {
background: color-mix(in srgb, var(--orange) 25%, transparent);
padding: 5px 6px;
border-radius: 5px;
span {
background-color: var(--orange) !important;
}
}
[href*="next"] {
background: color-mix(in srgb, var(--green) 25%, transparent);
padding: 5px 6px;
border-radius: 5px;
span {
background-color: var(--green) !important;
}
}
}
p, a {
text-align: center;
font-size: 0.938rem;
margin: .2em 0px .2em;
}
img {
padding-top: 18px;
max-width: 30%;
display: flex;
margin-left: auto;
margin-right: auto;
transition: 1s animation;
}
img:hover {
animation: spin 5s infinite linear;
}
.inner-footer {
text-align: center;
margin-top: -.7rem;
margin-bottom: -.7rem;
a {
width: 3rem;
height: 3rem;
display: inline-block;
vertical-align: middle;
align-content: center;
border-radius: .5rem;
span {
transform: scale(1.58);
}
}
}
}
@media screen and (max-width: 540px) {
#footer {
border-top: var(--accent) solid .15rem;
border-bottom: var(--accent) solid .15rem;
border-left: unset !important;
border-right: unset !important;
border-radius: unset !important;
margin-bottom: .8em;
}
}

86
_includes/styles/icons.css
View file

@ -1,86 +0,0 @@
/* ╭─────────────────────────╮
/ │ _ │
/ │ (_) ___ ___ _ __ ___ │
/ │ | |/ __/ _ \| '_ \/ __| │
/ │ | | (_| (_) | | | \__ \ │
/ │ |_|\___\___/|_| |_|___/ │
/ ╰─────────────────────────╯
/ icons - tabler icons done through css, generate via https://icon-sets.iconify.design/tabler */
.icon {
display: inline-block;
width: 1.3rem;
height: 1.3rem;
vertical-align: top;
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.tabler--accessible { --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 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='m10 16.5l2-3l2 3m-2-3v-2l3-1m-6 0l3 1'/%3E%3Ccircle cx='12' cy='7.5' r='.5' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--alert-triangle { --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 9v4m-1.637-9.409L2.257 17.125a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636-2.87L13.637 3.59a1.914 1.914 0 0 0-3.274 0zM12 16h.01'/%3E%3C/svg%3E"); }
.tabler--arrow-autofit-height { --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 20H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6m6 10v7m0-18v7m-3 8l3 3l3-3M15 6l3-3l3 3'/%3E%3C/svg%3E"); }
.tabler--arrow-forward { --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 11l4 4l-4 4m4-4H8a4 4 0 0 1 0-8h1'/%3E%3C/svg%3E"); }
.tabler--arrow-left { --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='M5 12h14M5 12l6 6m-6-6l6-6'/%3E%3C/svg%3E"); }
.tabler--arrow-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='M5 12h14m-6 6l6-6m-6-6l6 6'/%3E%3C/svg%3E"); }
.tabler--article { --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 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2zm4 2h10M7 12h10M7 16h10'/%3E%3C/svg%3E"); }
.tabler--battery-filled { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17 6a3 3 0 0 1 2.995 2.824L20 9v.086l.052.019a1.5 1.5 0 0 1 .941 1.25L21 10.5v3a1.5 1.5 0 0 1-.948 1.395l-.052.018V15a3 3 0 0 1-2.824 2.995L17 18H6a3 3 0 0 1-2.995-2.824L3 15V9a3 3 0 0 1 2.824-2.995L6 6z'/%3E%3C/svg%3E"); }
.tabler--bell { --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 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1'/%3E%3C/svg%3E"); }
.tabler--brand-git { --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='M15 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-4-4a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 8a1 1 0 1 0 2 0a1 1 0 1 0-2 0m1-1V9m3 2l-2-2m-2-2L9.1 5.1'/%3E%3Cpath d='m13.446 2.6l7.955 7.954a2.045 2.045 0 0 1 0 2.892l-7.955 7.955a2.045 2.045 0 0 1-2.892 0l-7.955-7.955a2.045 2.045 0 0 1 0-2.892l7.955-7.955a2.045 2.045 0 0 1 2.892 0z'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--brand-github { --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='M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2a4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6c-.6.6-.6 1.2-.5 2V21'/%3E%3C/svg%3E"); }
.tabler--brand-lastfm { --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='M20 8c-.83-1-1.388-1-2-1s-2 .271-2 2s1.384 2.233 3 3s2.125 1.812 2 3s-1 2-3 2s-3-1-3.5-2s-1.585-4.78-2.497-6a5 5 0 1 0-1 7'/%3E%3C/svg%3E"); }
.tabler--brand-mastodon { --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.648 15.254C16.832 17.017 12 16.88 12 16.88a18.3 18.3 0 0 1-3.288-.256q1.69 2.977 8.982 2.475c-1.945 2.013-13.598 5.257-13.668-7.636L4 10.309c0-3.036.023-4.115 1.352-5.633C7.023 2.766 12 3.01 12 3.01s4.977-.243 6.648 1.667C19.977 6.195 20 7.274 20 10.31s-.456 4.074-1.352 4.944'/%3E%3Cpath d='M12 11.204V8.278C12 7.02 11.105 6 10 6S8 7.02 8 8.278V13m4-4.722C12 7.02 12.895 6 14 6s2 1.02 2 2.278V13'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--brand-metabrainz { --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 7v10l7 4V3zm18 0v10l-7 4V3z'/%3E%3C/svg%3E"); }
.tabler--brand-tabler { --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='m8 9l3 3l-3 3m5 0h3'/%3E%3Cpath d='M3 7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4z'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--building-bank { --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 21h18M3 10h18M5 6l7-3l7 3M4 10v11m16-11v11M8 14v3m4-3v3m4-3v3'/%3E%3C/svg%3E"); }
.tabler--bulb { --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 12h1m8-9v1m8 8h1M5.6 5.6l.7.7m12.1-.7l-.7.7M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0-1 3a2 2 0 0 1-4 0a3.5 3.5 0 0 0-1-3m.7 1h4.6'/%3E%3C/svg%3E"); }
.tabler--chevron-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='m6 9l6 6l6-6'/%3E%3C/svg%3E"); }
.tabler--cloud-network { --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 20h7m4 0h7m-11 0a2 2 0 1 0 4 0a2 2 0 0 0-4 0m2-4v2m-4-1.996H6.657C4.085 16 2 13.993 2 11.517s2.085-4.482 4.657-4.482c.393-1.762 1.794-3.2 3.675-3.773c1.88-.572 3.956-.193 5.444 1c1.488 1.19 2.162 3.007 1.77 4.769h.99c1.913 0 3.464 1.56 3.464 3.486s-1.551 3.487-3.465 3.487H16'/%3E%3C/svg%3E"); }
.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"); }
.tabler--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"); }
.tabler--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"); }
.tabler--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"); }
.tabler--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"); }
.tabler--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"); }
.tabler--grid-dots { --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 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/svg%3E"); }
.tabler--heart { --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='M19.5 12.572L12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572'/%3E%3C/svg%3E"); }
.tabler--help { --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 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m9 5v.01'/%3E%3Cpath d='M12 13.5a1.5 1.5 0 0 1 1-1.5a2.6 2.6 0 1 0-3-4'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--home { --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 12H3l9-9l9 9h-2M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--info-circle { --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 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9-3h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--letter-case { --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='M14 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 19V8.5a3.5 3.5 0 0 1 7 0V19m-7-6h7m11-1v7'/%3E%3C/svg%3E"); }
.tabler--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='m9 15l6-6m-4-3l.463-.536a5 5 0 0 1 7.071 7.072L18 13m-5 5l-.397.534a5.07 5.07 0 0 1-7.127 0a4.97 4.97 0 0 1 0-7.071L6 11'/%3E%3C/svg%3E"); }
.tabler--list-tree { --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='M9 6h11m-8 6h8m-5 6h5M5 6v.01M8 12v.01M11 18v.01'/%3E%3C/svg%3E"); }
.tabler--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='M5 13a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z'/%3E%3Cpath d='M11 16a1 1 0 1 0 2 0a1 1 0 0 0-2 0m-3-5V7a4 4 0 1 1 8 0v4'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--login { --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='M15 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2'/%3E%3Cpath d='M21 12H8l3-3m0 6l-3-3'/%3E%3C/g%3E%3C/svg%3E");}
.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"); }
.tabler--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"); }
.tabler--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"); }
.tabler--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"); }
.tabler--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"); }
.tabler--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"); }
.tabler--mood-sad-dizzy { --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 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0'/%3E%3Cpath d='M14.5 16.05a3.5 3.5 0 0 0-5 0M8 9l2 2m0-2l-2 2m6-2l2 2m0-2l-2 2'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--mood-smile { --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 12a9 9 0 1 0 18 0a9 9 0 1 0-18 0m6-2h.01M15 10h.01'/%3E%3Cpath d='M9.5 15a3.5 3.5 0 0 0 5 0'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--notebook { --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 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1m3 0v18m4-14h2m-2 4h2'/%3E%3C/svg%3E"); }
.tabler--notes { --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='M5 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2zm4 2h6m-6 4h6m-6 4h4'/%3E%3C/svg%3E"); }
.tabler--palette { --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 21a9 9 0 0 1 0-18c4.97 0 9 3.582 9 8c0 1.06-.474 2.078-1.318 2.828S17.693 15 16.5 15H14a2 2 0 0 0-1 3.75A1.3 1.3 0 0 1 12 21'/%3E%3Cpath d='M7.5 10.5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m4-3a1 1 0 1 0 2 0a1 1 0 1 0-2 0m4 3a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--planet { --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.816 13.58c2.292 2.138 3.546 4 3.092 4.9c-.745 1.46-5.783-.259-11.255-3.838c-5.47-3.579-9.304-7.664-8.56-9.123c.464-.91 2.926-.444 5.803.805'/%3E%3Cpath d='M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0'/%3E%3C/g%3E%3C/svg%3E"); }
.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"); }
.tabler--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"); }
.tabler--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"); }
.tabler--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"); }
.tabler--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"); }
.tabler--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"); }
.tabler--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"); }
.tabler--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"); }
.tabler--universe { --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='M7.027 11.477a5 5 0 1 0 5.496-4.45a4.95 4.95 0 0 0-3.088.681'/%3E%3Cpath d='M5.636 5.636a9 9 0 1 0 3.555-2.188'/%3E%3Cpath d='M17 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-6 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0m-3 4a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--user { --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 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E"); }
.tabler--user-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='M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h2.5m4.501 4a2 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"); }
.tabler--user-heart { --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 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h.5m7.5 7l3.35-3.284a2.143 2.143 0 0 0 .005-3.071a2.24 2.24 0 0 0-3.129-.006l-.224.22l-.223-.22a2.24 2.24 0 0 0-3.128-.006a2.143 2.143 0 0 0-.006 3.071z'/%3E%3C/svg%3E"); }
.tabler--user-plus { --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 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0m8 12h6m-3-3v6M6 21v-2a4 4 0 0 1 4-4h4'/%3E%3C/svg%3E"); }
.tabler--volume { --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 8a5 5 0 0 1 0 8m2.7-11a9 9 0 0 1 0 14M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z'/%3E%3C/svg%3E"); }
.tabler--wifi { --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 18h.01m-2.838-2.828a4 4 0 0 1 5.656 0m-8.485-2.829a8 8 0 0 1 11.314 0'/%3E%3Cpath d='M3.515 9.515c4.686-4.687 12.284-4.687 17 0'/%3E%3C/g%3E%3C/svg%3E"); }
.tabler--x { --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='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); }

Some files were not shown because too many files have changed in this diff Show more