From c746f1d6699b5cf768276bb8eaa17b499cc35fbe Mon Sep 17 00:00:00 2001 From: Ruben Date: Tue, 28 Oct 2025 23:24:36 -0500 Subject: [PATCH] make services clickthrough for info --- _includes/layouts/pages/index.njk | 1 + _includes/layouts/pages/services/list.njk | 751 ++++++++++++---------- _includes/styles/base/base.css | 45 +- _includes/styles/pages/services.css | 60 +- 4 files changed, 487 insertions(+), 370 deletions(-) diff --git a/_includes/layouts/pages/index.njk b/_includes/layouts/pages/index.njk index 9f1a419..6df98a3 100644 --- a/_includes/layouts/pages/index.njk +++ b/_includes/layouts/pages/index.njk @@ -22,6 +22,7 @@

Be kind to one another.

Who left this jar of RAM here?

The Game? What game?

+

Sorry! Only modern HTML and CSS allowed!

beeeeeeeep

We think Herobrine might have been removed, but we're not so sure.

Sorry for the downtime, we caught a Synth trying to eat the servers in the server room.

diff --git a/_includes/layouts/pages/services/list.njk b/_includes/layouts/pages/services/list.njk index c3f3d50..e9869be 100644 --- a/_includes/layouts/pages/services/list.njk +++ b/_includes/layouts/pages/services/list.njk @@ -1,350 +1,407 @@ - -

- - Redlib - - - - - -

-

A privacy respecting frontend for Reddit.

-

This instance may be nonfunctional from time to time.

- - - - - - - - - - - - - - - - - - - -

- - SafeTwitch - - - - - -

-

A privacy respecting frontend for proxying and watching live Twitch streams.

- - - - - - - - - - - - - - - - - - - -

- - SearxNG - - - - - - -

-

Metasearch engine that retrieves web search results from multiple other search engines, while respecting user privacy.

- - - - - - - - - - - - - - - - - - - -

- - Sharkey - - - - - -

-

Advanced, fun, featureful and federated social media platform for the Fediverse. Based on Misskey.

-

Accounts are located at @booping.synth.download

- - - - - - - - - - - - - - - - - - - - - - -

- - Mastodon - - - - - -

-

Traditional, Calmer, more Twitter-like and federated social media platform for the Fediverse. Runs our own fork with added features.

-

Accounts are located at @merping.synth.download

- - - - - - - - - - - - - - - - - - - - - - -

- - Iceshrimp.NET - - - - - -

-

Lightweight, Misskey-inspired software for the Fediverse.

-

Accounts are located at @synth.download

-

We currently do not suggest using this software. Sharkey and Mastodon provide better and more stable user experiences.

- - +
+ +

+ + Redlib + + + + + +

+ + +

A privacy respecting frontend for Reddit.

+

This instance may be nonfunctional from time to time.

+ + - - - - - - - - - - - - - - - - - - - -

- - PDS - - - - - -

-

Personal Data Server, used to store your profile data and interact with applications in the Atmosphere, such as Bluesky.

- - - - - - - - - -

- - pl-fe - - - - - -

-

General fediverse compatible client, using a baseline of the Mastodon API with extended support for more APIs and features from other softwares.

- - - - - - - - - - -

- - Phanpy - - - - - -

-

Opinionated Mastodon-API compatible fediverse client. Our own fork with improved support for extra features, such as emoji reactions.

- - - - - - - - - - -

- - AskJS - - - - - - -

-

Anonymous asking site to ask users questions.

- - - - - - - - - - -

- - XMPP - - - - - -

-

Our Ejabberd server, for the XMPP chat protocol.

- - - - - XMPP Specifications compliance: 100% - - - -

- - Forgejo - - - - - - -

-

Self-hosted Git forge for storing code repositories.

- - - - - - - - - - -

- - Vaultwarden - - - - - -

-

A Bitwarden-compatible password manager, hosted by us.

- - - - - - - - - - -

- - FreshRSS - - - - - -

-

An online RSS reader and news aggregator.

- - - - - - - - - + + + + + + + + + + + + + + + +
+
+ +

+ + SafeTwitch + + + + + +

+ + +

A privacy respecting frontend for proxying and watching live Twitch streams.

+ + + + + + + + + + + + + + + + + + +
+
+ +

+ + SearxNG + + + + + + +

+ + +

Metasearch engine that retrieves web search results from multiple other search engines, while respecting user privacy.

+ + + + + + + + + + + + + + + + + + +
+
+ +

+ + Sharkey + + + + + +

+ + +

Advanced, fun, featureful and federated social media platform for the Fediverse. Based on Misskey.

+

Accounts are located at @booping.synth.download

+ + + + + + + + + + + + + + + + + + + + + +
+
+ +

+ + Mastodon + + + + + +

+ + +

Traditional, Calmer, more Twitter-like and federated social media platform for the Fediverse. Runs our own fork with added features.

+

Accounts are located at @merping.synth.download

+ + + + + + + + + + + + + + + + + + + + + +
+
+ +

+ + Iceshrimp.NET + + + + + +

+ + +

Lightweight, Misskey-inspired software for the Fediverse.

+

Accounts are located at @synth.download

+

We currently do not suggest using this software. Sharkey and Mastodon provide better and more stable user experiences.

+ + + + + + + + + + + + + + + + + + + + + +
+
+ +

+ + PDS + + + + + +

+ + +

Personal Data Server, used to store your profile data and interact with applications in the Atmosphere, such as Bluesky.

+ + + + + + + + + +
+
+ +

+ + pl-fe + + + + + +

+ + +

General fediverse compatible client, using a baseline of the Mastodon API with extended support for more APIs and features from other softwares.

+ + + + + + + + + +
+
+ +

+ + Phanpy + + + + + +

+ + +

Opinionated Mastodon-API compatible fediverse client. Our own fork with improved support for extra features, such as emoji reactions.

+ + + + + + + + + +
+
+ +

+ + AskJS + + + + + + +

+ + +

Anonymous asking site to ask users questions.

+ + + + + + + + + +
+
+ +

+ + XMPP + + + + + +

+ + +

Our Ejabberd server, for the XMPP chat protocol.

+ + + + + XMPP Specifications compliance: 100% + + +
+
+ +

+ + Forgejo + + + + + + +

+ + +

Self-hosted Git forge for storing code repositories.

+ + + + + + + + + +
+
+ +

+ + Vaultwarden + + + + + +

+ + +

A Bitwarden-compatible password manager, hosted by us.

+ + + + + + + + + +
+
+ +

+ + FreshRSS + + + + + +

+ + +

An online RSS reader and news aggregator.

+ + + + + + + + + +
\ No newline at end of file diff --git a/_includes/styles/base/base.css b/_includes/styles/base/base.css index 19bcf2b..82f4772 100644 --- a/_includes/styles/base/base.css +++ b/_includes/styles/base/base.css @@ -357,7 +357,9 @@ card-container { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); + grid-template-rows: masonry; + /* regular card entries */ card-entry { background-color: var(--background-secondary); border-radius: 1rem; @@ -367,16 +369,54 @@ card-container { height: auto; padding: .6rem; width: auto; + } + /* detail elements */ + details { + background-color: var(--background-secondary); + border-radius: 1rem; + border: .15rem solid var(--border); + height: fit-content; + min-width: 19rem; + transition: .2s; + width: auto; + + details-content { + display: block; + padding: .6rem; + } + + summary { + border-radius: 1rem; + cursor: pointer; + outline: 0 solid var(--accent); + padding: .6rem; + transition: .3s; + &:hover { outline: .2rem solid var(--accent); } + &::marker { content: ""; } + h3 { margin: 0; padding-bottom: 0; } + } + + &[open] { + border-color: color-mix(in srgb, var(--warning) 50%, transparent); + summary { + border-bottom: .15rem solid var(--border); + } + } + } + + card-entry, details { h3 { border-bottom: unset; + display: inline; margin-bottom: 1rem; margin-top: 0; + vertical-align: top; [icon] { height: 1.4rem; transition: .3s; - vertical-align: top; + vertical-align: inherit; } span[status] { @@ -398,7 +438,6 @@ card-container { align-self: center; border-radius: 10rem; height: 1.2rem; - vertical-align: middle; width: auto; } } @@ -407,7 +446,7 @@ card-container { &:hover { h3 { [icon] { - margin-right: .4rem; + margin-right: .6rem; transform: rotate(15deg) scale(2.5) translateX(-.1rem) translateY(-.2rem); } } diff --git a/_includes/styles/pages/services.css b/_includes/styles/pages/services.css index cee93ac..5c9d9ae 100644 --- a/_includes/styles/pages/services.css +++ b/_includes/styles/pages/services.css @@ -22,71 +22,91 @@ article#services { /* frontends */ &:not(:has(input#service-frontend:checked)) { - card-container card-entry:has(h3 span[status] icon-tabler[cloud-network]) { - display: none; + card-container card-entry, card-container details { + &:has(h3 span[status] icon-tabler[cloud-network]) { + display: none; + } } } /* search */ &:not(:has(input#service-search:checked)) { - card-container card-entry:has(h3 span[status] icon-tabler[search]) { - display: none; + card-container card-entry, card-container details { + &:has(h3 span[status] icon-tabler[search]) { + display: none; + } } } /* social */ &:not(:has(input#service-social:checked)) { - card-container card-entry:has(h3 span[status] icon-tabler[social]) { - display: none; + card-container card-entry, card-container details { + &:has(h3 span[status] icon-tabler[social]) { + display: none; + } } } /* fun */ &:not(:has(input#service-fun:checked)) { - card-container card-entry:has(h3 span[status] icon-tabler[mood-smile]) { - display: none; + card-container card-entry, card-container details { + &:has(h3 span[status] icon-tabler[mood-smile]) { + display: none; + } } } /* chat */ &:not(:has(input#service-chat:checked)) { - card-container card-entry:has(h3 span[status] icon-tabler[message]) { - display: none; + card-container card-entry, card-container details { + &:has(h3 span[status] icon-tabler[message]) { + display: none; + } } } /* sharing */ &:not(:has(input#service-sharing:checked)) { - card-container card-entry:has(h3 span[status] icon-tabler[database-share]) { - display: none; + card-container card-entry, card-container details { + &:has(h3 span[status] icon-tabler[database-share]) { + display: none; + } } } /* git */ &:not(:has(input#service-git:checked)) { - card-container card-entry:has(h3 span[status] icon-tabler[brand-git]) { - display: none; + card-container card-entry, card-container details { + &:has(h3 span[status] icon-tabler[brand-git]) { + display: none; + } } } /* personal */ &:not(:has(input#service-personal:checked)) { - card-container card-entry:has(h3 span[status] icon-tabler[user]) { - display: none; + card-container card-entry, card-container details { + &:has(h3 span[status] icon-tabler[user]) { + display: none; + } } } /* public */ &:not(:has(input#service-public:checked)) { - card-container card-entry:has(h3 span[status] icon-tabler[planet]) { - display: none !important; + card-container card-entry, card-container details { + &:has(h3 span[status] icon-tabler[planet]) { + display: none !important; + } } } /* private */ &:not(:has(input#service-private:checked)) { - card-container card-entry:has(h3 span[status] icon-tabler[lock]) { - display: none !important; + card-container card-entry, card-container details { + &:has(h3 span[status] icon-tabler[lock]) { + display: none !important; + } } } } \ No newline at end of file