From 778140f582919d809c91b02453253295356144b9 Mon Sep 17 00:00:00 2001 From: MTRNord Date: Thu, 26 Feb 2026 09:16:38 +0100 Subject: [PATCH 01/36] Initial rework of the try-matrix page Signed-off-by: MTRNord --- content/try-matrix.md | 6 +- sass/_hosting.scss | 123 ++++++++++---------- sass/_try-matrix.scss | 231 ++++++++++++++++++++++++++++++++++++++ templates/try-matrix.html | 147 +++++++++++++++++++----- 4 files changed, 420 insertions(+), 87 deletions(-) diff --git a/content/try-matrix.md b/content/try-matrix.md index 12580f38e0..d8e23c8e22 100644 --- a/content/try-matrix.md +++ b/content/try-matrix.md @@ -2,8 +2,10 @@ title = "Try Matrix" template = "try-matrix.html" extra.summary = "Join the Matrix ecosystem!" +# Set to true to show the Free/Premium plan comparison for matrix.org accounts +extra.matrixorg_premium = true extra.meta_description = """ -To try Matrix, pick a client, pick a server, register an account and start -chatting! +Get started with Matrix: choose an app, create a free account on any provider, +and start chatting. Open source, end-to-end encrypted, works on all platforms. """ +++ diff --git a/sass/_hosting.scss b/sass/_hosting.scss index c653dd3a2a..330a7efc9a 100644 --- a/sass/_hosting.scss +++ b/sass/_hosting.scss @@ -1,74 +1,83 @@ -.hosting_page { - margin: 0 auto; - padding: 5.625rem 0 2rem 0; +.hosting_providers { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + gap: 3.125rem; +} + +.provider_card { + display: flex; + flex-direction: column; + justify-content: space-between; + + padding: 24px; + + flex: 1 0 400px; + max-width: 400px; @media (max-width: 767px) { - padding: 5.625rem 32px 2rem 32px; + flex: 1 0 300px; + max-width: 300px; } - h2 { - text-align: center; - font-weight: 700; - font-size: 2.5rem; - margin-bottom: 1rem; - } - .hosting_providers { - display: flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; - gap: 3.125rem; + border: 1px solid #D2D2D2; + border-radius: 16px; - .provider_card { - display: flex; - flex-direction: column; - justify-content: space-between; + .details { + text-align: center; - padding: 24px; + .provider_logo_container { + height: 10rem; + display: flex; + align-items: center; + justify-content: center; - flex: 1 0 400px; - max-width: 400px; - @media (max-width: 767px) { - flex: 1 0 300px; - max-width: 300px; + img { + max-height: 100%; + max-width: 100%; + object-fit: contain; } + } + h3 { + height: 5rem; + margin: 0; + text-align: center; - border: 1px solid #D2D2D2; - border-radius: 16px; - - .details { - text-align: center; - - .provider_logo_container { - height: 10rem; - } + font-style: normal; + font-weight: 700; + font-size: 2rem; + line-height: 120%; + } - h3 { - height: 5rem; - margin: 0; - text-align: center; + .operating_since { + height: 1.5rem; + font-size: .9rem; + } - font-style: normal; - font-weight: 700; - font-size: 2rem; - line-height: 120%; - } + } - .operating_since { - height: 1.5rem; - font-size: .9rem; - } + .call-to-action { + background-color: #000; + color: #fff; + border-radius: 1000px; + padding: .4rem 2rem; + align-self: center; + } +} - } +.hosting_page { + margin: 0 auto; + padding: 5.625rem 0 2rem 0; + @media (max-width: 767px) { + padding: 5.625rem 32px 2rem 32px; + } - .call-to-action { - background-color: #000; - color: #fff; - border-radius: 1000px; - padding: .4rem 2rem; - align-self: center; - } - } + h2 { + text-align: center; + font-weight: 700; + font-size: 2.5rem; + margin-bottom: 1rem; } } diff --git a/sass/_try-matrix.scss b/sass/_try-matrix.scss index 32b368c387..16a2de07e7 100644 --- a/sass/_try-matrix.scss +++ b/sass/_try-matrix.scss @@ -54,10 +54,241 @@ } } + .step.no-image { + grid-template-columns: 1fr; + + .instructions { + max-width: 60rem; + margin-inline: auto; + // Explicit width so child grids have a known container width + width: 100%; + } + } + .cta-wrapper { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; + margin-top: 1.5rem; + } + + // Fix: projects-card-deck collapses in a flex-column context without explicit width. + // Also reduce column size from 17.6rem so cards match the compact feel of the page. + .projects-card-deck { + width: 100%; + margin-inline: 0; + margin-top: 1.5rem; + grid-template-columns: repeat(auto-fill, 12.5rem); + + @media (max-width: 767px) { + grid-template-columns: repeat(auto-fill, 12.5rem); + max-width: 100%; + } + } + + // Strip the client cards down to logo + name + platform pills. + // The full description and CTA text belong on the ecosystem/clients page, + // not here where the user just needs to pick an app quickly. + .project-card.client { + padding: 1rem; + gap: 0.5rem; + + img { + width: 44px; + height: 44px; + } + + h3 { + font-size: 1.2rem; + } + + // Hide the prose description in this compact context + > span { + display: none; + } + + .open-project { + font-size: 0.8rem; + } + + .platform-pill { + font-size: 0.75rem; + padding: 0.15rem 0.45rem; + } + } + + .account-tiers { + display: flex; + flex-direction: column; + gap: 1.25rem; + margin-top: 1.5rem; + } + + .account-tier { + border: 1px solid #d2d2d2; + border-radius: 16px; + padding: 1.5rem 2rem; + + @media (max-width: 767px) { + padding: 1rem; + } + + // Description paragraph + > p { + margin-top: 0.5rem; + margin-bottom: 1rem; + } + + // Direct CTA (when no plan cards shown) + > .call-to-action { + display: inline-block; + } + + .account-tier-header { + display: flex; + align-items: center; + gap: 0.75rem; + + h4 { + margin: 0; + font-size: 1.4rem; + font-weight: 700; + } + } + } + + .tier-badge { + border-radius: 9999px; + padding: 0.15rem 0.7rem; + font-size: 0.85rem; + font-weight: 500; + white-space: nowrap; + + &.foundation { + background-color: #e9e9e9; + border: 1px solid #888; + color: #333; + } + + &.commercial { + background-color: #e9e9e9; + border: 1px solid #888; + color: #333; + } + + &.community { + background-color: #d5e8f6; + border: 1px solid #0c3c5c; + color: #0c3c5c; + } + } + + // ── matrix.org Free / Premium plan cards ───────────────────────────────── + + .matrixorg-plans { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; + + @media (max-width: 767px) { + grid-template-columns: 1fr; + } + + .plan-card { + display: flex; + flex-direction: column; + gap: 0.75rem; + padding: 1.25rem 1.5rem; + border: 1px solid #d2d2d2; + border-radius: 12px; + + &.featured { + border-color: #245c0c; + background-color: #f7fff5; + } + + h5 { + margin: 0; + font-size: 1.1rem; + font-weight: 700; + } + + ul { + margin: 0; + padding-left: 1.25rem; + flex: 1; + + li { + font-size: 1rem; + line-height: 1.7; + } + } + + .call-to-action { + align-self: stretch; + text-align: center; + } + } + } + + // ── Compact provider cards (managed hosting tier) ───────────────────────── + + .providers-compact { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-bottom: 0.25rem; + } + + .provider-compact { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + padding: 1.25rem 1rem; + width: 200px; + + border: 1px solid #d2d2d2; + border-radius: 16px; + + color: var(--color-text); + text-decoration: none; + + @media (max-width: 767px) { + width: calc(50% - 0.5rem); + } + + &:hover { + background-color: #f5f5f5; + } + + img { + height: 3rem; + width: 100%; + object-fit: contain; + } + + .provider-name { + font-size: 1rem; + font-weight: 600; + text-align: center; + line-height: 1.2; + } + + .provider-since { + font-size: 0.8rem; + color: #666; + } + } + + .homeserver-info-link { + margin-top: 1rem; + font-size: 1rem !important; + text-align: right; + + a { + color: var(--color-text-light); + } } } diff --git a/templates/try-matrix.html b/templates/try-matrix.html index c0682cfdf6..814ba563ff 100644 --- a/templates/try-matrix.html +++ b/templates/try-matrix.html @@ -1,5 +1,8 @@ {% extends "page.html" %} +{% import "macros/clients.html" as clients %} {% block content %} +{% set clients_section = get_section(path="ecosystem/clients/_index.md") %} +{% set providers_data = load_data(path="content/ecosystem/hosting/providers.toml") %}