From a5c7f4221b018efa102b9f73619414475ec0e581 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 27 Sep 2025 16:49:32 +0300
Subject: [PATCH] feat(website): full-width Docker card

---
 apps/website/src/download-helper.ts          | 32 ++++++++++----------
 apps/website/src/pages/Download/download.css |  4 +++
 apps/website/src/pages/Download/download.tsx |  2 +-
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/apps/website/src/download-helper.ts b/apps/website/src/download-helper.ts
index ca7ceb388..37b92c1f8 100644
--- a/apps/website/src/download-helper.ts
+++ b/apps/website/src/download-helper.ts
@@ -115,6 +115,22 @@ export const downloadMatrix: DownloadMatrix = {
         }
     },
     server: {
+        docker: {
+            title: "Self-hosted using Docker",
+            description: "Easily deploy on Windows, Linux or macOS using a Docker container.",
+            helpUrl: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Installation%20%26%20Setup/Server%20Installation/1.%20Installing%20the%20server/Using%20Docker.html",
+            quickStartCode: "docker pull triliumnext/trilium\ndocker run -p 8080:8080 -d ./data:/home/node/trilium-data triliumnext/trilium",
+            downloads: {
+                dockerhub: {
+                    name: "Docker Hub",
+                    url: "https://hub.docker.com/r/triliumnext/trilium"
+                },
+                ghcr: {
+                    name: "ghcr.io",
+                    url: "https://github.com/TriliumNext/Trilium/pkgs/container/trilium"
+                }
+            }
+        },
         linux: {
             title: "Self-hosted on Linux",
             description: "Deploy Trilium Notes on your own server or VPS, compatible with most distributions.",
@@ -136,22 +152,6 @@ export const downloadMatrix: DownloadMatrix = {
                 }
             }
         },
-        docker: {
-            title: "Self-hosted using Docker",
-            description: "Easily deploy on Windows, Linux or macOS using a Docker container.",
-            helpUrl: "https://docs.triliumnotes.org/User%20Guide/User%20Guide/Installation%20%26%20Setup/Server%20Installation/1.%20Installing%20the%20server/Using%20Docker.html",
-            quickStartCode: "docker pull triliumnext/trilium\ndocker run -p 8080:8080 -d ./data:/home/node/trilium-data triliumnext/trilium",
-            downloads: {
-                dockerhub: {
-                    name: "Docker Hub",
-                    url: "https://hub.docker.com/r/triliumnext/trilium"
-                },
-                ghcr: {
-                    name: "ghcr.io",
-                    url: "https://github.com/TriliumNext/Trilium/pkgs/container/trilium"
-                }
-            }
-        },
         pikapod: {
             title: "Paid hosting",
             description: "Trilium Notes hosted on PikaPods, a paid service for easy access and management. Not directly affiliated with the Trilium team.",
diff --git a/apps/website/src/pages/Download/download.css b/apps/website/src/pages/Download/download.css
index a174a2c65..9296ce356 100644
--- a/apps/website/src/pages/Download/download.css
+++ b/apps/website/src/pages/Download/download.css
@@ -2,6 +2,10 @@
     padding: 1em;
 }
 
+.download-server .download-card:first-of-type {
+    grid-column: 1 / 4;
+}
+
 .download-card h3 {
     color: var(--accent-color);
     font-size: 1.5em;
diff --git a/apps/website/src/pages/Download/download.tsx b/apps/website/src/pages/Download/download.tsx
index 9b6dda1dc..484c096e0 100644
--- a/apps/website/src/pages/Download/download.tsx
+++ b/apps/website/src/pages/Download/download.tsx
@@ -35,7 +35,7 @@ export default function DownloadPage() {
             </Section>
 
             <Section title="Set up a server for access on multiple devices">
-                <div className="grid-3-cols download-server">
+                <div className="grid-2-cols download-server">
                     {Object.entries(downloadMatrix.server).map(entry => <DownloadCard app="server" arch={currentArch} entry={entry} />)}
                 </div>
             </Section>