From e360d7ee48df8d8087f3adf7f5bdd36bc90059de Mon Sep 17 00:00:00 2001 From: Admin9705 <9705@duck.com> Date: Sun, 18 May 2025 18:00:40 -0400 Subject: [PATCH] refactor: implement responsive grid layout for app cards and update styling --- docs/apps/index.html | 158 ++++++++++++++++++++++--------------------- docs/css/main.css | 19 ++++-- 2 files changed, 95 insertions(+), 82 deletions(-) diff --git a/docs/apps/index.html b/docs/apps/index.html index fdd5bb4f..55bee650 100644 --- a/docs/apps/index.html +++ b/docs/apps/index.html @@ -61,93 +61,95 @@

Supported Applications

-
-
-
- Sonarr Logo +
+
+
+
+ Sonarr Logo +
+

Sonarr

-

Sonarr

-
-
-

Manage and automate TV show downloads.

-
-
- View Sonarr Documentation → -
-
- -
-
-
- Radarr Logo +
+

Manage and automate TV show downloads.

-

Radarr

-
-
-

Manage and automate movie downloads.

-
-
- View Radarr Documentation → -
-
- -
-
-
- Lidarr Logo +
+ View Documentation →
-

Lidarr

-
-

Manage and automate music downloads.

-
-
- View Lidarr Documentation → -
-
- -
-
-
- Readarr Logo + +
+
+
+ Radarr Logo +
+

Radarr

-

Readarr

-
-
-

Manage and automate book downloads.

-
-
- View Readarr Documentation → -
-
- -
-
-
- Whisparr Logo +
+

Manage and automate movie downloads.

-

Whisparr V2

-
-
-

Manage and automate adult content downloads.

-
-
- View Whisparr Documentation → -
-
- -
-
-
- Whisparr V3 Logo +
+ View Documentation →
-

Whisparr V3 (Eros)

-
-

Newer version of Whisparr for managing adult content downloads.

+ +
+
+
+ Lidarr Logo +
+

Lidarr

+
+
+

Manage and automate music downloads.

+
+
+ View Documentation → +
-
- View Whisparr V3 Documentation → + +
+
+
+ Readarr Logo +
+

Readarr

+
+
+

Manage and automate book downloads.

+
+
+ View Documentation → +
+
+ +
+
+
+ Whisparr Logo +
+

Whisparr V2

+
+
+

Manage and automate adult content downloads.

+
+
+ View Documentation → +
+
+ +
+
+
+ Whisparr V3 Logo +
+

Whisparr V3 (Eros)

+
+
+

Newer version of Whisparr for managing adult content downloads.

+
+
+ View Documentation → +
diff --git a/docs/css/main.css b/docs/css/main.css index de29ae8f..4bfa9a22 100644 --- a/docs/css/main.css +++ b/docs/css/main.css @@ -708,15 +708,23 @@ footer { } /* Card style for app blocks */ +/* App cards grid container */ +.app-cards-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); + gap: 20px; + margin: 20px 0; +} + .app-card { display: flex; flex-direction: column; border-radius: 8px; background-color: rgba(20, 25, 35, 0.6); - margin: 20px 0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; overflow: hidden; + height: 100%; } .app-card:hover { @@ -725,9 +733,11 @@ footer { } .app-card-header { - padding: 15px; + padding: 12px 15px; display: flex; align-items: center; + background-color: #252a34; + border-bottom: none; } .app-card-icon { @@ -778,14 +788,15 @@ footer { } .app-card-content { - padding: 15px; + padding: 12px 15px; flex: 1; } .app-card-footer { - padding: 10px 15px; + padding: 8px 15px; background-color: rgba(10, 15, 25, 0.3); text-align: right; + border-top: 1px solid rgba(255, 255, 255, 0.05); } /* Card styled for sonarr */