diff --git a/assets/img/icons/platforms/android.svg b/assets/img/icons/platforms/android.svg new file mode 100644 index 0000000..cb9e532 --- /dev/null +++ b/assets/img/icons/platforms/android.svg @@ -0,0 +1,48 @@ + + + + + + + + + + diff --git a/assets/img/icons/platforms/apple.svg b/assets/img/icons/platforms/apple.svg new file mode 100644 index 0000000..d290264 --- /dev/null +++ b/assets/img/icons/platforms/apple.svg @@ -0,0 +1,58 @@ + + + + + + apple [#173] + Created with Sketch. + + + + + + apple [#173] + + + + diff --git a/assets/img/icons/platforms/linux.svg b/assets/img/icons/platforms/linux.svg new file mode 100644 index 0000000..641439c --- /dev/null +++ b/assets/img/icons/platforms/linux.svg @@ -0,0 +1,57 @@ + + + + + + + linux + + + + + linux + + + + diff --git a/assets/img/icons/platforms/web.svg b/assets/img/icons/platforms/web.svg new file mode 100644 index 0000000..1d7107c --- /dev/null +++ b/assets/img/icons/platforms/web.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + diff --git a/assets/img/icons/platforms/windows.svg b/assets/img/icons/platforms/windows.svg new file mode 100644 index 0000000..d7a72f7 --- /dev/null +++ b/assets/img/icons/platforms/windows.svg @@ -0,0 +1,58 @@ + + + + + + windows [#174] + Created with Sketch. + + + + + + windows [#174] + + + + diff --git a/clients.html b/clients.html index 0543155..670a688 100644 --- a/clients.html +++ b/clients.html @@ -15,15 +15,39 @@

Nextcloud

-

Desktop

-

Visit the Nextcloud website to download the desktop client for your system.

Visit Now > +

Desktop

+
+

Nextcloud Client

+
+ + + +
+

Visit the Nextcloud website to download the desktop client for your system.

+ +

Visit Now

+
+
-

Mobile

-

Android

-

Nextcloud
Official Nextcloud client for Android

F-Droid >Google Play Store > -

iOS

-

Nextcloud
Official Nextcloud client for iOS

App Store > +

Mobile

+
+

Nextcloud App

+
+ + +
+

Official Nextcloud client for mobile devices

+ +

F-Droid

+
+ +

Google Play Store

+
+ +

App Store

+
+
@@ -32,16 +56,68 @@

Mastodon

-

Desktop

-

It is recommended to use your browser to interface with Mastodon on desktop platforms

Visit Now > +

Desktop

+
+

Mastodon

+
+ +
+

It is recommended to use Mastodon through your browser on Desktop platforms

+ +

Visit Now

+
+
-

Mobile

-

Android

-

Fedilab
A multifunctional Android client to access the distributed Fediverse

F-Droid >
Google Play Store > -

Mastodon
Official Mastodon client for Android

F-Droid >Google Play Store > -

iOS

-

Mastodon
Official Mastodon client for iOS

App Store > +

Mobile

+
+

Mastodon App

+
+ + +
+

Official Mastodon client for mobile devices

+ +

F-Droid

+
+ +

Google Play Store

+
+ +

App Store

+
+ +

View Source (Android)

+
+ +

View Source (iOS)

+
+

Fedilab

+
+ +
+

A multifunctional Android client to access the distributed Fediverse

+ +

F-Droid

+
+ +

Google Play Store

+
+ +

View Source

+
+

Ice Cubes

+
+ +
+

Native iOS client for Mastodon built in SwiftUI

+ +

App Store

+
+ +

View Source

+
+
@@ -49,10 +125,68 @@

Pixelfed

-

Desktop

+

Desktop

+
+

Pixelfed

+
+ +
+

It is recommended to use Pixelfed through your browser on Desktop platforms

+ +

Visit Now

+
+
-

Mobile

+

Mobile

+
+

Pixelfed App

+
+ + +
+

Official Pixelfed client for mobile devices

+ +

F-Droid

+
+ +

Google Play Store

+
+ +

App Store

+
+ +

View Source

+
+

Fedilab

+
+ +
+

A multifunctional Android client to access the distributed Fediverse

+ +

F-Droid

+
+ +

Google Play Store

+
+ +

View Source

+
+

Pixelix

+
+ +
+

User-friendly android client for Pixelfed

+ +

F-Droid

+
+ +

Google Play Store

+
+ +

View Source

+
+
@@ -60,13 +194,54 @@

Peertube

-

Desktop

-

It is recommended to use your browser to interface with Mastodon on desktop platforms

Visit Now > +

Desktop

+
+

Peertube

+
+ +
+

It is recommended to use Peertube through your browser on Desktop platforms

+ +

Visit Now

+
+
-

Mobile

-

Android

-

Fedilab
A multifunctional Android client to access the distributed Fediverse
F-Droid >
Google Play Store >

+

Mobile

+
+

Peertube App

+
+ + +
+

Official Peertube application for mobile devices

+ +

F-Droid

+
+ +

Google Play Store

+
+ +

App Store

+
+ +

View Source

+
+

Fedilab

+
+ +
+

A multifunctional Android client to access the distributed Fediverse

+ +

F-Droid

+
+ +

Google Play Store

+
+ +

View Source

+
+
@@ -74,10 +249,22 @@

Element

-

Desktop

+

Desktop

+
+

Element

+
+ +
+

It is recommended to use Element through your browser on Desktop platforms

+ +

Visit Now

+
+
-

Mobile

+

Mobile

+
+
@@ -85,10 +272,63 @@

Jellyfin

-

Desktop

+

Desktop

+
+
-

Mobile

+

Mobile

+ +
+
+

Other

+
+
@@ -96,10 +336,70 @@

Airsonic

-

Desktop

+

Desktop

+
+

Feishin

+
+ + + +
+

Cross-platform client for subsonic-compatible media servers

+ +

Download

+
+ +

View Source

+
+
-

Mobile

+

Mobile

+
+

Ultrasonic

+
+ +
+

Android client for subsonic media servers

+ +

F-Droid

+
+ +

Google Play Store

+
+ +

View Source

+
+

Symfonium

+
+ + +
+

Feature-rich client for subsonic media servers

+ +

Google Play Store

+
+

SubStreamer

+
+ + +
+

Mobile client for subsonic media servers

+ +

Google Play Store

+
+ +

App Store

+
+

play:Sub

+
+ +
+

Feature-rich iOS client for subsonic media servers

+ +

App Store

+
+
@@ -107,21 +407,22 @@

Calibre

-

Desktop

+

Desktop

+
+

Calibre-Web

+
+ +
+

It is recommended to use Calibre through your browser on Desktop platforms

+ +

Visit Now

+
+
-

Mobile

-
-
- -
-

EmulatorJS

-
-
-

Desktop

-
-
-

Mobile

+

Mobile

+
+
@@ -129,14 +430,34 @@

Minecraft

-

Desktop

-

Prism Launcher

-

Linux | MacOS | Windows

-

A fully-featured Minecraft Java Edition Launcher

- Download > +

Desktop

+
+

Prism Launcher

+
+ + + +
+

A fully-featured Minecraft Java Edition Launcher

+ +

Download

+
+

Java Edition

+
+ + + +
+

The official Minecraft Java Edition Launcher

+ +

Download

+
+
-

Mobile

+

Mobile

+
+
diff --git a/index.html b/index.html index 898e478..d5dc46c 100644 --- a/index.html +++ b/index.html @@ -147,9 +147,6 @@ - - -
diff --git a/style/css/style.css b/style/css/style.css index 45f0c8d..0eb853b 100644 --- a/style/css/style.css +++ b/style/css/style.css @@ -15,6 +15,18 @@ h1,h2,h3,p,a{ h1 { font-size: 3em; } +.button { + margin: 1vh 1vw; + transition: 0.5s; + display:block; + > p { + margin: 1vh 0vw; + } +} +.button:hover { + box-shadow: 0px 0px 30px #da75e5dd; + transition: 0.25s; +} .flexrow { margin: 2vmax 0; } @@ -58,18 +70,7 @@ h1 { border-width: 3px; border-radius: 8px; } -.button { - margin: 1vh 1vw; - transition: 0.5s; - display:block; -} -.button:hover { - box-shadow: 0px 0px 30px #da75e5dd; - transition: 0.25s; -} .flexobject { -/* margin: 1vh 1vw; - transition: 0.5s;*/ > a { min-width: 75px; text-decoration: none; @@ -97,6 +98,15 @@ h1 { } } } +.platformicon{ + margin: 0 1vw +} +.icon-inline { + width: 1.5em; + height: 1.5em; + position: relative; + margin: auto 1vw; +} .textsection { padding: 0 2vw 2vh; margin: 2vh 10vw; @@ -104,14 +114,20 @@ h1 { .clientgroup{ flex: 1 1 0px; flex-wrap: wrap; - min-width: 30vh; -/* flex-grow:1;*/ - padding: 0 2vw 2vh; + min-width: 40vh; margin: 2vh 2vw; + > .groupheader { + background-color: #da74e5; + color: #000; + margin-top: 0; + } + > .groupcontent { + padding: 0 2vw 2vh; + } } :target { /* box-shadow: 0px 0px 30px #da75e5dd;*/ - background-color: #da75e533; + background-color: #da75e522; border-radius: 13px; padding: 2vh 0; }