From 8a5ecae30eb45a03f8e3615d9c78069a272a94c2 Mon Sep 17 00:00:00 2001 From: Viktoriia Kvapil Date: Thu, 22 Oct 2026 16:51:04 +0000 Subject: [PATCH 01/13] Fix horizontal overflow on mobile and broken images - hero: use Bootstrap 5 gutter (-0.75rem) instead of -15px, removes 3px page overflow - oss-health: period switcher fits narrow screens (Telemetry, DevStats, OSS Insight) - docs/blog: wrap long links inside .td-content - home screenshot carousel: indicators below image on mobile - docs: fix /img/oidc -> /img/OIDC case in Google IdP guide (404 on GitHub Pages) - blog: remove dead Medium image from Talm v0.17 post Co-authored-by: Claude Signed-off-by: Viktoriia Kvapil --- assets/scss/_oss_health.scss | 14 ++++++++++++++ assets/scss/_page.scss | 6 ++++++ assets/scss/blocks/_hero.scss | 6 ++++-- ...-v0-17-built-in-age-encryption-for-secrets.md | 4 ---- .../operations/oidc/identity_providers/google.md | 16 ++++++++-------- .../operations/oidc/identity_providers/google.md | 16 ++++++++-------- .../operations/oidc/identity_providers/google.md | 16 ++++++++-------- .../operations/oidc/identity_providers/google.md | 16 ++++++++-------- .../operations/oidc/identity_providers/google.md | 16 ++++++++-------- .../operations/oidc/identity_providers/google.md | 16 ++++++++-------- .../operations/oidc/identity_providers/google.md | 16 ++++++++-------- .../operations/oidc/identity_providers/google.md | 16 ++++++++-------- .../operations/oidc/identity_providers/google.md | 16 ++++++++-------- layouts/shortcodes/home/screenshot-gallery.html | 16 ++++++++++++++++ 14 files changed, 112 insertions(+), 78 deletions(-) diff --git a/assets/scss/_oss_health.scss b/assets/scss/_oss_health.scss index 4fae99dcb..ad9664a74 100644 --- a/assets/scss/_oss_health.scss +++ b/assets/scss/_oss_health.scss @@ -176,6 +176,20 @@ color: #fff; } } + + // Three 7rem buttons don't fit on phones and push the page sideways. + @include media-breakpoint-down(lg) { + display: flex; + max-width: 100%; + width: 100%; + + &__button { + flex: 1 1 0; + min-width: 0; + padding-left: 0.5rem; + padding-right: 0.5rem; + } + } } .oss-health-grid { diff --git a/assets/scss/_page.scss b/assets/scss/_page.scss index 3ad264318..6a6292568 100644 --- a/assets/scss/_page.scss +++ b/assets/scss/_page.scss @@ -86,3 +86,9 @@ } } } + +// Long URLs and inline-code links in docs and blog posts must wrap, +// otherwise they overflow the viewport on mobile. +.td-content a { + overflow-wrap: anywhere; +} diff --git a/assets/scss/blocks/_hero.scss b/assets/scss/blocks/_hero.scss index 292033c53..639177ee6 100644 --- a/assets/scss/blocks/_hero.scss +++ b/assets/scss/blocks/_hero.scss @@ -3,8 +3,10 @@ @include td-box-height-modifiers(".td-hero-block"); .hero-gitops { - margin-left: -15px; - margin-right: -15px; + // Match Bootstrap 5 gutter (0.75rem). The old -15px was the Bootstrap 4 value + // and made the page 3px wider than the viewport (horizontal scroll). + margin-left: -0.75rem; + margin-right: -0.75rem; @include media-breakpoint-down(md) { padding: 0 15px; diff --git a/content/en/blog/2025-12-17-talm-v0-17-built-in-age-encryption-for-secrets.md b/content/en/blog/2025-12-17-talm-v0-17-built-in-age-encryption-for-secrets.md index 9b39cae12..c4a196aaa 100644 --- a/content/en/blog/2025-12-17-talm-v0-17-built-in-age-encryption-for-secrets.md +++ b/content/en/blog/2025-12-17-talm-v0-17-built-in-age-encryption-for-secrets.md @@ -4,8 +4,6 @@ slug: talm-v0-17-built-in-age-encryption-for-secrets date: 2025-12-17 author: "Andrei Kvapil (Ænix)" description: "Talm v0.17 introduces built-in age encryption for secure secrets management, making it easier to store sensitive configuration files in Git repositories while maintaining security best practices." -images: - - "https://cdn-images-1.medium.com/max/800/0*encryption.png" article_types: - release topics: @@ -18,8 +16,6 @@ topics: The latest release of [Talm](https://github.com/cozystack/talm), the configuration manager for Talos Linux, introduces a powerful new feature: built-in encryption using the [age](https://age-encryption.org/) encryption tool. This enhancement allows you to securely store sensitive configuration files like `secrets.yaml`, `talosconfig`, and `kubeconfig` in Git repositories while following security best practices. -![](https://cdn-images-1.medium.com/max/800/0*encryption.png) - ### Why Age Encryption? Managing secrets in Git repositories has always been a challenge. While storing configuration files in version control is convenient for GitOps workflows, sensitive data like API keys, certificates, and cluster credentials should never be committed in plain text. Traditional solutions like `git-crypt` or external secret management systems add complexity and dependencies. diff --git a/content/en/docs/next/operations/oidc/identity_providers/google.md b/content/en/docs/next/operations/oidc/identity_providers/google.md index 324c1647b..0c091937e 100644 --- a/content/en/docs/next/operations/oidc/identity_providers/google.md +++ b/content/en/docs/next/operations/oidc/identity_providers/google.md @@ -10,19 +10,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -32,16 +32,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/docs/v0/operations/oidc/identity_providers/google.md b/content/en/docs/v0/operations/oidc/identity_providers/google.md index 5251b6e6b..3248c527a 100644 --- a/content/en/docs/v0/operations/oidc/identity_providers/google.md +++ b/content/en/docs/v0/operations/oidc/identity_providers/google.md @@ -12,19 +12,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -34,16 +34,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/docs/v1.0/operations/oidc/identity_providers/google.md b/content/en/docs/v1.0/operations/oidc/identity_providers/google.md index c152f341f..187b0a29b 100644 --- a/content/en/docs/v1.0/operations/oidc/identity_providers/google.md +++ b/content/en/docs/v1.0/operations/oidc/identity_providers/google.md @@ -10,19 +10,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -32,16 +32,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/docs/v1.1/operations/oidc/identity_providers/google.md b/content/en/docs/v1.1/operations/oidc/identity_providers/google.md index 9db96aceb..0c3e014cc 100644 --- a/content/en/docs/v1.1/operations/oidc/identity_providers/google.md +++ b/content/en/docs/v1.1/operations/oidc/identity_providers/google.md @@ -10,19 +10,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -32,16 +32,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/docs/v1.2/operations/oidc/identity_providers/google.md b/content/en/docs/v1.2/operations/oidc/identity_providers/google.md index 4ec804dc0..51f949c65 100644 --- a/content/en/docs/v1.2/operations/oidc/identity_providers/google.md +++ b/content/en/docs/v1.2/operations/oidc/identity_providers/google.md @@ -10,19 +10,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -32,16 +32,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/docs/v1.3/operations/oidc/identity_providers/google.md b/content/en/docs/v1.3/operations/oidc/identity_providers/google.md index 23ee6ff40..6414413ab 100644 --- a/content/en/docs/v1.3/operations/oidc/identity_providers/google.md +++ b/content/en/docs/v1.3/operations/oidc/identity_providers/google.md @@ -10,19 +10,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -32,16 +32,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/docs/v1.4/operations/oidc/identity_providers/google.md b/content/en/docs/v1.4/operations/oidc/identity_providers/google.md index 88a316634..367f9c7ab 100644 --- a/content/en/docs/v1.4/operations/oidc/identity_providers/google.md +++ b/content/en/docs/v1.4/operations/oidc/identity_providers/google.md @@ -10,19 +10,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -32,16 +32,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/docs/v1.5/operations/oidc/identity_providers/google.md b/content/en/docs/v1.5/operations/oidc/identity_providers/google.md index 3fb94effb..774b10545 100644 --- a/content/en/docs/v1.5/operations/oidc/identity_providers/google.md +++ b/content/en/docs/v1.5/operations/oidc/identity_providers/google.md @@ -10,19 +10,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -32,16 +32,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/content/en/docs/v1.6/operations/oidc/identity_providers/google.md b/content/en/docs/v1.6/operations/oidc/identity_providers/google.md index 9b9c135f1..9e64c222b 100644 --- a/content/en/docs/v1.6/operations/oidc/identity_providers/google.md +++ b/content/en/docs/v1.6/operations/oidc/identity_providers/google.md @@ -10,19 +10,19 @@ aliases: ## Configure Google - Head over to [Google Console](https://console.cloud.google.com/apis/dashboard), login in to the console using Google account and you will see Google Developer Console. Once logged in, head over the top left drop-down to create new project. -![1](/img/oidc/identity_providers/google/1.jpeg) +![1](/img/OIDC/identity_providers/google/1.jpeg) - Click on "New Project" to proceed. -![2](/img/oidc/identity_providers/google/2.jpeg) +![2](/img/OIDC/identity_providers/google/2.jpeg) - Enter the project name of your choice and select the Organisation if you have multiple organisations. Once done click on "Create" -![3](/img/oidc/identity_providers/google/3.jpeg) +![3](/img/OIDC/identity_providers/google/3.jpeg) - Once the project is created you will get a pop-up suggesting to configure the consent screen. If not then head over to the Dashboard and head over to "Explore and enable APIs" options. Then Click on "Credentials" > "Configure Consent Screen" and head over to the next step. -![4](/img/oidc/identity_providers/google/4.jpeg) +![4](/img/OIDC/identity_providers/google/4.jpeg) - Click on "External" as we want to allow any Google account to be able to sign in to our application and hit "Create". -![5](/img/oidc/identity_providers/google/5.jpeg) +![5](/img/OIDC/identity_providers/google/5.jpeg) - After this, we will be redirected to pages where we will have to configure different things - Application type: Public @@ -32,16 +32,16 @@ aliases: - Application Privacy Policy link: Your application privacy policy link - Now head over to the Create Credentials option in the navbar and click on "OAuth Client ID". -![6](/img/oidc/identity_providers/google/6.jpeg) +![6](/img/OIDC/identity_providers/google/6.jpeg) - Select Application type as a "Web application" and name the application according to your choice. Next, Add the link provided in the Keycloak tab under "Authorized Redirect URIs" and click "Create". The link should look something like this ```bash https://YOUR_KEYCLOAK_DOMAIN/auth/realms/cozy/broker/google/endpoint ``` -![7](/img/oidc/identity_providers/google/7.jpeg) +![7](/img/OIDC/identity_providers/google/7.jpeg) - As it is done, you will see a pop up with the information required in the next step. You will need to "Client ID" and "Client secret" in next step so make sure you make a safe copy of it. -![8](/img/oidc/identity_providers/google/8.jpeg) +![8](/img/OIDC/identity_providers/google/8.jpeg) ## Configure Keycloak Identity Provider Create a `KeycloakRealmIdentityProvider` resource with the following configuration: diff --git a/layouts/shortcodes/home/screenshot-gallery.html b/layouts/shortcodes/home/screenshot-gallery.html index e3f83ca26..ca5071acc 100644 --- a/layouts/shortcodes/home/screenshot-gallery.html +++ b/layouts/shortcodes/home/screenshot-gallery.html @@ -110,4 +110,20 @@

{{ T "home_screenshots" }}

background-color: #1a73e8; transform: scale(1.15); } + +/* On phones the screenshot is short, so 16 dots overlay its content. + Move them below the image and make them smaller. */ +@media (max-width: 767.98px) { + .screenshot-gallery .carousel-indicators { + position: static; + margin-top: 1rem; + gap: 6px; + flex-wrap: wrap; + } + + .screenshot-gallery .carousel-indicators [data-bs-target] { + width: 8px; + height: 8px; + } +} From a4f31cc4c647149e792a96d30470e8ff258c655d Mon Sep 17 00:00:00 2001 From: Viktoriia Kvapil Date: Thu, 22 Oct 2026 16:51:05 +0000 Subject: [PATCH 02/13] support: host the Hidora logo locally instead of hotlinking hikube.cloud The hotlinked image no longer loads. Serve the logo from /img/logos/ in all five languages. Co-authored-by: Claude Signed-off-by: Viktoriia Kvapil --- content/de/support.md | 2 +- content/en/support.md | 2 +- content/hi/support.md | 2 +- content/ru/support.md | 2 +- content/zh-cn/support.md | 2 +- static/img/logos/hidora.svg | 33 +++++++++++++++++++++++++++++++++ 6 files changed, 38 insertions(+), 5 deletions(-) create mode 100644 static/img/logos/hidora.svg diff --git a/content/de/support.md b/content/de/support.md index 48c4705bb..29dc6e675 100644 --- a/content/de/support.md +++ b/content/de/support.md @@ -13,4 +13,4 @@ l10n: mt | Organisation | Kontakt | Leistungsbeschreibung | | ------------ | ------- | ------------------ | | Aenix logo | [Website](https://aenix.io/contact/) [LinkedIn](https://www.linkedin.com/company/aenix-io)| Wir bieten jede Art von Unterstützung: Beratung, Entwicklung fehlender Funktionen, Design sowie Hilfe bei Installation und Integration. | -| Hidora | [Website](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| Wir übernehmen die Installation, bieten laufenden Support und Managed Services rund um die Uhr (24/7). | +| Hidora | [Website](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| Wir übernehmen die Installation, bieten laufenden Support und Managed Services rund um die Uhr (24/7). | diff --git a/content/en/support.md b/content/en/support.md index 579241902..375668f31 100644 --- a/content/en/support.md +++ b/content/en/support.md @@ -10,4 +10,4 @@ weight: 50 | Organization | Contact | Description of Use | | ------------ | ------- | ------------------ | | Aenix logo | [Site](https://aenix.io/contact/) [LinkedIn](https://www.linkedin.com/company/aenix-io)| We provide all types of assistance, including consultations, development of missing features, design, assistance with installation, and integration. | -| Hidora | [Site](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| We handle installation, provide ongoing support, and offer 24/7 managed services. | +| Hidora | [Site](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| We handle installation, provide ongoing support, and offer 24/7 managed services. | diff --git a/content/hi/support.md b/content/hi/support.md index 5b6ff2f8f..b515e07a1 100644 --- a/content/hi/support.md +++ b/content/hi/support.md @@ -13,4 +13,4 @@ l10n: mt | संगठन | संपर्क | सेवा का विवरण | | ------------ | ------- | ------------------ | | Aenix logo | [साइट](https://aenix.io/contact/) [LinkedIn](https://www.linkedin.com/company/aenix-io)| हम हर प्रकार की सहायता प्रदान करते हैं, जिसमें परामर्श, अनुपलब्ध सुविधाओं का विकास, डिज़ाइन, तथा इंस्टॉलेशन और एकीकरण में सहायता शामिल है। | -| Hidora | [साइट](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| हम इंस्टॉलेशन संभालते हैं, निरंतर सहायता देते हैं, और 24/7 मैनेज्ड सेवाएँ प्रदान करते हैं। | +| Hidora | [साइट](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| हम इंस्टॉलेशन संभालते हैं, निरंतर सहायता देते हैं, और 24/7 मैनेज्ड सेवाएँ प्रदान करते हैं। | diff --git a/content/ru/support.md b/content/ru/support.md index 290810ed1..f4f87b18d 100644 --- a/content/ru/support.md +++ b/content/ru/support.md @@ -13,4 +13,4 @@ l10n: mt | Организация | Контакт | Описание услуг | | ------------ | ------- | ------------------ | | Aenix logo | [Сайт](https://aenix.io/contact/) [LinkedIn](https://www.linkedin.com/company/aenix-io)| Мы оказываем все виды помощи: консультации, разработку недостающих функций, проектирование, помощь с установкой и интеграцией. | -| Hidora | [Сайт](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| Мы выполняем установку, обеспечиваем постоянную поддержку и предлагаем managed-сервисы в режиме 24/7. | +| Hidora | [Сайт](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| Мы выполняем установку, обеспечиваем постоянную поддержку и предлагаем managed-сервисы в режиме 24/7. | diff --git a/content/zh-cn/support.md b/content/zh-cn/support.md index ca2ae3cde..1928f6785 100644 --- a/content/zh-cn/support.md +++ b/content/zh-cn/support.md @@ -13,4 +13,4 @@ l10n: mt | 组织 | 联系方式 | 服务说明 | | ------------ | ------- | ------------------ | | Aenix logo | [网站](https://aenix.io/contact/) [LinkedIn](https://www.linkedin.com/company/aenix-io)| 我们提供各类支持，包括咨询、缺失功能的开发、设计，以及安装与集成方面的协助。 | -| Hidora | [网站](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| 我们负责安装、提供持续支持，并提供 7×24 小时托管服务。 | +| Hidora | [网站](https://hidora.io/en/contact/) [LinkedIn](https://www.linkedin.com/company/hidora)| 我们负责安装、提供持续支持，并提供 7×24 小时托管服务。 | diff --git a/static/img/logos/hidora.svg b/static/img/logos/hidora.svg new file mode 100644 index 000000000..6d5216405 --- /dev/null +++ b/static/img/logos/hidora.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 7827e997f67e1037b41c8913bccb0039afaa12c4 Mon Sep 17 00:00:00 2001 From: Viktoriia Kvapil Date: Thu, 22 Oct 2026 16:51:05 +0000 Subject: [PATCH 03/13] i18n: re-stamp support translations after the Hidora logo path change The logo path changed identically in the English page and the four translations, so the translations still match their source. Recorded digests refreshed with hack/check-i18n.sh update-digests. Co-authored-by: Claude Signed-off-by: Viktoriia Kvapil --- content/de/support.md | 2 +- content/hi/support.md | 2 +- content/ru/support.md | 2 +- content/zh-cn/support.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/content/de/support.md b/content/de/support.md index 29dc6e675..f7ec7bd7b 100644 --- a/content/de/support.md +++ b/content/de/support.md @@ -4,7 +4,7 @@ date: 2025-03-02T15:45:07+04:00 draft: false type: "page" weight: 50 -source_digest: "sha256:2cacdfc9855cebb5b4df0c21de9b889985cba9754a72581f10f1cd5ea6a0c286" +source_digest: "sha256:de998fb26d73dc851cf18a0437e5f7d1397e551876c7d8742e14f7816ae57ac8" translation_status: current l10n: mt --- diff --git a/content/hi/support.md b/content/hi/support.md index b515e07a1..095b80161 100644 --- a/content/hi/support.md +++ b/content/hi/support.md @@ -4,7 +4,7 @@ date: 2025-03-02T15:45:07+04:00 draft: false type: "page" weight: 50 -source_digest: "sha256:2cacdfc9855cebb5b4df0c21de9b889985cba9754a72581f10f1cd5ea6a0c286" +source_digest: "sha256:de998fb26d73dc851cf18a0437e5f7d1397e551876c7d8742e14f7816ae57ac8" translation_status: current l10n: mt --- diff --git a/content/ru/support.md b/content/ru/support.md index f4f87b18d..5034ea9d1 100644 --- a/content/ru/support.md +++ b/content/ru/support.md @@ -4,7 +4,7 @@ date: 2025-03-02T15:45:07+04:00 draft: false type: "page" weight: 50 -source_digest: "sha256:2cacdfc9855cebb5b4df0c21de9b889985cba9754a72581f10f1cd5ea6a0c286" +source_digest: "sha256:de998fb26d73dc851cf18a0437e5f7d1397e551876c7d8742e14f7816ae57ac8" translation_status: current l10n: mt --- diff --git a/content/zh-cn/support.md b/content/zh-cn/support.md index 1928f6785..ab386e4a2 100644 --- a/content/zh-cn/support.md +++ b/content/zh-cn/support.md @@ -4,7 +4,7 @@ date: 2025-03-02T15:45:07+04:00 draft: false type: "page" weight: 50 -source_digest: "sha256:2cacdfc9855cebb5b4df0c21de9b889985cba9754a72581f10f1cd5ea6a0c286" +source_digest: "sha256:de998fb26d73dc851cf18a0437e5f7d1397e551876c7d8742e14f7816ae57ac8" translation_status: current l10n: mt --- From 57ebe3b4c0c91fc4f9f6d6cdded38f13266baf5c Mon Sep 17 00:00:00 2001 From: Viktoriia Kvapil Date: Thu, 22 Oct 2026 16:51:05 +0000 Subject: [PATCH 04/13] Redesign: monochrome theme, Nunito Sans, circuit artwork Moves the site to the new design from the Figma "Cozystack website kit": - Self-hosted Nunito Sans (no Google Fonts request); tokens as CSS variables - New home: short hero with circuit artwork, screenshots, introduction with Certified Kubernetes / CNCF badges and positioning row, dark live-demo band, use cases as an accordion (native
), muted Benefits band, Features, dark Community band that now ends with the introductory talk. Same copy, same five languages; the CNCF block is folded into the introduction - White navbar and a new footer (logo, link row, legal lines) - Docs, blog, community, support, compliance and Resources pages restyled: typography, tables, code, alerts, tabs, sidebars, taxonomy chips, Telemetry/DevStats/OpenSSF/OSS Insight cards and switcher - The circuits asset is placed with the same transforms as the Figma instances and anchored to section edges, with mobile variants No content changes other than moving the long description below the screenshots and the video into the Community section (as in the Figma frame). Co-authored-by: Claude Signed-off-by: Viktoriia Kvapil --- assets/scss/_fonts.scss | 47 ++ assets/scss/_index.scss | 474 ------------------ assets/scss/_variables_project.scss | 7 +- assets/scss/blocks/_features.scss | 67 +-- assets/scss/blocks/_hero.scss | 168 +------ assets/scss/main.scss | 8 +- assets/scss/redesign/_base.scss | 145 ++++++ assets/scss/redesign/_chrome.scss | 184 +++++++ assets/scss/redesign/_content.scss | 261 ++++++++++ assets/scss/redesign/_home.scss | 439 ++++++++++++++++ assets/scss/redesign/_oss.scss | 141 ++++++ assets/scss/redesign/_redesign.scss | 8 + content/de/_index.md | 27 +- content/en/_index.md | 27 +- content/hi/_index.md | 27 +- content/ru/_index.md | 27 +- content/zh-cn/_index.md | 27 +- layouts/partials/footer.html | 32 +- layouts/shortcodes/blocks/hero.html | 122 ++--- layouts/shortcodes/home/benefits.html | 34 +- layouts/shortcodes/home/features.html | 31 +- layouts/shortcodes/home/intro.html | 30 ++ .../shortcodes/home/screenshot-gallery.html | 134 +---- layouts/shortcodes/home/use-cases.html | 68 +-- layouts/shortcodes/home/video.html | 7 + ...nunito-sans-cyrillic-ext-wght-normal.woff2 | Bin 0 -> 21752 bytes .../nunito-sans-cyrillic-wght-normal.woff2 | Bin 0 -> 16388 bytes .../nunito-sans-latin-ext-wght-normal.woff2 | Bin 0 -> 27908 bytes .../nunito-sans-latin-wght-italic.woff2 | Bin 0 -> 33080 bytes .../nunito-sans-latin-wght-normal.woff2 | Bin 0 -> 31076 bytes static/img/circuits/circuits-on-dark.svg | 1 + static/img/circuits/circuits-on-light.svg | 1 + static/img/logos/certified-kubernetes.svg | 13 + 33 files changed, 1467 insertions(+), 1090 deletions(-) create mode 100644 assets/scss/_fonts.scss create mode 100644 assets/scss/redesign/_base.scss create mode 100644 assets/scss/redesign/_chrome.scss create mode 100644 assets/scss/redesign/_content.scss create mode 100644 assets/scss/redesign/_home.scss create mode 100644 assets/scss/redesign/_oss.scss create mode 100644 assets/scss/redesign/_redesign.scss create mode 100644 layouts/shortcodes/home/intro.html create mode 100644 layouts/shortcodes/home/video.html create mode 100644 static/fonts/nunito-sans/nunito-sans-cyrillic-ext-wght-normal.woff2 create mode 100644 static/fonts/nunito-sans/nunito-sans-cyrillic-wght-normal.woff2 create mode 100644 static/fonts/nunito-sans/nunito-sans-latin-ext-wght-normal.woff2 create mode 100644 static/fonts/nunito-sans/nunito-sans-latin-wght-italic.woff2 create mode 100644 static/fonts/nunito-sans/nunito-sans-latin-wght-normal.woff2 create mode 100644 static/img/circuits/circuits-on-dark.svg create mode 100644 static/img/circuits/circuits-on-light.svg create mode 100644 static/img/logos/certified-kubernetes.svg diff --git a/assets/scss/_fonts.scss b/assets/scss/_fonts.scss new file mode 100644 index 000000000..80e82f2a9 --- /dev/null +++ b/assets/scss/_fonts.scss @@ -0,0 +1,47 @@ +// Nunito Sans (variable, wght 200-1000), self-hosted. Source: @fontsource-variable/nunito-sans (OFL). +// Served from /fonts/nunito-sans/ so no request goes to Google Fonts. + +@font-face { + font-family: "Nunito Sans"; + font-style: normal; + font-display: swap; + font-weight: 200 1000; + src: url("/fonts/nunito-sans/nunito-sans-cyrillic-ext-wght-normal.woff2") format("woff2"); + unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; +} + +@font-face { + font-family: "Nunito Sans"; + font-style: normal; + font-display: swap; + font-weight: 200 1000; + src: url("/fonts/nunito-sans/nunito-sans-cyrillic-wght-normal.woff2") format("woff2"); + unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; +} + +@font-face { + font-family: "Nunito Sans"; + font-style: normal; + font-display: swap; + font-weight: 200 1000; + src: url("/fonts/nunito-sans/nunito-sans-latin-ext-wght-normal.woff2") format("woff2"); + unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; +} + +@font-face { + font-family: "Nunito Sans"; + font-style: normal; + font-display: swap; + font-weight: 200 1000; + src: url("/fonts/nunito-sans/nunito-sans-latin-wght-normal.woff2") format("woff2"); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} + +@font-face { + font-family: "Nunito Sans"; + font-style: italic; + font-display: swap; + font-weight: 200 1000; + src: url("/fonts/nunito-sans/nunito-sans-latin-wght-italic.woff2") format("woff2"); + unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; +} diff --git a/assets/scss/_index.scss b/assets/scss/_index.scss index d826c1961..3f3381f7c 100644 --- a/assets/scss/_index.scss +++ b/assets/scss/_index.scss @@ -231,188 +231,7 @@ main.td-main { } -// Live-demo band. Docsy's blocks/lead wraps everything it is given in -// `.h4 mb-0`, so without these rules the body copy inherits heading size and -// weight, the call to action sits inline at the end of the paragraph, and the -// band has no vertical rhythm of its own. Every declaration below undoes one -// of those inherited defaults rather than decorating. -.section-live-demo { - .td-box--primary { - // A gradient rather than the flat primary fill: the band sits between two - // white sections and a single flat slab reads as a coloured gap. The - // gradient gives it a top and a bottom, so it reads as its own surface. - background-image: linear-gradient(160deg, $cozy-dark-blue 0%, $cozy-darkest-blue 100%); - padding-top: 5.5rem; - padding-bottom: 5.5rem; - @include media-breakpoint-down(md) { - padding-top: 3.25rem; - padding-bottom: 3.25rem; - } - } - - // The band is a destination, not a step in a sequence: no scroll cue. - .td-arrow-down::before { - display: none; - } - - .section-label { - margin: 0 0 1.125rem 0; - font-size: clamp(1.625rem, 3.2vw, 2.375rem); - font-weight: 600; - line-height: 1.15; - letter-spacing: -0.015em; - text-wrap: balance; - color: $cozy-white; - } - - // Reset the inherited .h4 typography to body copy, and hold the line length - // to something readable -- centred text across a 1280px container is not. - .live-demo-lead { - // ~72 characters at this size; 46rem ran to ~84, past comfortable measure. - max-width: 40rem; - margin: 0 auto; - font-size: 1.0625rem; - font-weight: 400; - line-height: 1.65; - // Flat white, not white-with-alpha: at 0.92 over this band the ratio is - // 4.28:1, under the 4.5:1 AA needs for body copy. Do not dim this text. - color: $cozy-white; - } - - .live-demo-cta { - margin: 2.25rem 0 0 0; - - // Deliberately not @include flat-white-button: that mixin paints the label - // $cozy-mid-gray with !important, which on a saturated blue ground reads as - // a disabled control rather than the one thing on the band to click. - a.btn-primary { - display: inline-flex; - align-items: center; - gap: 0.5rem; - padding: 0.9375rem 2.25rem; - border: none; - border-radius: 6px; - background-color: $cozy-white !important; - color: $cozy-darkest-blue !important; - font-size: 1.0625rem; - font-weight: 600; - letter-spacing: 0.005em; - box-shadow: 0 2px 10px rgba(#000, 0.16) !important; - transition: transform 0.15s ease, box-shadow 0.15s ease; - - &:hover { - background-color: $cozy-white !important; - color: $cozy-darkest-blue !important; - transform: translateY(-1px); - box-shadow: 0 6px 18px rgba(#000, 0.22) !important; - text-shadow: none !important; - } - - &:active { - transform: translateY(0); - box-shadow: 0 2px 8px rgba(#000, 0.2) !important; - } - - // Bootstrap has no other focus affordance on .btn once the box-shadow is - // replaced, so the ring has to be drawn explicitly. - &:focus-visible { - outline: 3px solid $cozy-white; - outline-offset: 3px; - } - - @media (prefers-reduced-motion: reduce) { - transition: none; - - &:hover, - &:active { - transform: none; - } - } - } - } -} - -.section-community { - @include gray-background-a; - background-color: $cozy-gray; - - .td-box--dark { - background-color: $cozy-gray; - padding-top: 4rem; - - @include media-breakpoint-down(md) { - padding-top: 2rem; - } - } - - a { - text-decoration: underline; - } - - .section-label { - margin: 0 0 2rem 0; - color: $cozy-white !important; - } - - section.row.td-box { - padding-bottom: 1rem !important; - - .td-arrow-down::before { - display: none; - } - } - - .h3 { - font-weight: 600; - } - - .subsection-community-row { - section.row.td-box { - padding-bottom: 1rem; - } - - .community-row { - display: flex; - flex-wrap: wrap; - padding: 0 0 4rem 0; - margin: 0; - justify-content: center !important; - - @include media-breakpoint-down(md) { - padding-bottom: 2rem; - } - - .community-item { - flex: none; - - border: 1px solid $cozy-white; - padding: 0.5rem 1rem; - margin: 1rem; - width: 320px; - - .community-item-header { - display: flex; - justify-content: center; - - margin: 1rem 0; - - .h3 { - // flex-grow: 1; - font-size: 1.3rem; - margin-left: 1rem; - padding-top: 9px; - } - } - - a { - font-size: 1rem; - font-weight: 600; - } - } - } - } -} .container.contributors { padding-top: 1rem; @@ -425,14 +244,6 @@ main.td-main { } } -.cncf-footer { - @include white-background-a; - padding: 4rem 0; - - @include media-breakpoint-down(md) { - padding: 2rem 0; - } -} .td-navbar { @include media-breakpoint-down(md) { @@ -554,290 +365,5 @@ label.date { margin-top: 40px; } -.navbar-brand__name { - display: none; -} - -// Use-cases: who runs Cozystack and what it solves for them. -// -// One case per slide. Six cards side by side made every case a column of -// narrow text that gets skimmed; a case only works if it is read, so it gets -// the full width and the reader moves between them deliberately. -.use-cases { - padding: 4.5rem 0 5rem; - @include media-breakpoint-down(md) { - padding: 2.75rem 0 3rem; - } - &__heading { - margin: 0 0 0.75rem; - text-align: center; - } - - &__lead { - max-width: 40rem; - margin: 0 auto 3rem; - text-align: center; - color: $cozy-mid-gray; - } - - &__carousel { - position: relative; - // Not the full container width: a single case stretched across 1280px - // gives lines nobody wants to track back across. The cap also pulls the - // controls in to hug the panel instead of floating at the screen edges. - max-width: 62rem; - margin: 0 auto; - // Room for the controls either side of the case, so the arrows never sit - // on top of the text. - padding: 0 3.5rem; - - @include media-breakpoint-down(lg) { - padding: 0 2.5rem; - } - - @include media-breakpoint-down(md) { - padding: 0; - } - } - - // Slides are different lengths. Without a floor the whole section jumps - // height on every change, which reads as the page breaking. - // Bootstrap shows one slide and hides the rest with display:none, so the - // carousel sizes to whatever case is showing and the whole section jogs on - // every change -- by 44px between the shortest and longest English case, - // and more as the column narrows and the text wraps further. A fixed - // min-height only fixes that at one width and one locale. - // - // Stacking every slide in a single grid cell makes the container size to the - // tallest case instead, at any width and in any language. Hidden slides keep - // their box but leave the accessibility tree, so their links are not - // reachable by keyboard while off-screen. - .carousel-inner { - display: grid; - } - - .carousel-item { - grid-area: 1 / 1; - display: block; - float: none; - margin-right: 0; - visibility: hidden; - opacity: 0; - transition: opacity 0.35s ease, visibility 0s linear 0.35s; - } - - .carousel-item.active { - visibility: visible; - opacity: 1; - transition: opacity 0.35s ease, visibility 0s; - } - - &__case { - display: flex; - flex-direction: column; - // A floor for the short cases, so the panel keeps its presence instead of - // shrink-wrapping the text. The height of the tallest case is handled - // structurally -- see the grid stack on .carousel-inner below. - min-height: 19rem; - padding: 3rem 3.5rem; - border: 1px solid rgba($cozy-black, 0.1); - border-radius: 12px; - background: $cozy-white; - - @include media-breakpoint-down(md) { - min-height: 0; - padding: 2rem 1.5rem; - } - } - - // The audience names the whole case, so it heads the panel rather than - // sitting on top of one of the two columns. - &__title { - margin: 0 0 2rem; - text-align: center; - font-size: clamp(1.375rem, 2.2vw, 1.75rem); - font-weight: 600; - line-height: 1.2; - letter-spacing: -0.01em; - text-wrap: balance; - - @include media-breakpoint-down(md) { - margin-bottom: 1.25rem; - } - } - - &__body { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 2rem 4rem; - align-items: start; - // Centre the pair in whatever height the panel floor leaves over. - flex: 1; - align-content: center; - - @include media-breakpoint-down(md) { - grid-template-columns: 1fr; - gap: 1.25rem; - } - } - - &__col { - display: flex; - flex-direction: column; - } - - // The situation is the reader recognising themselves; the outcome is the - // answer. Different colour and weight so the pair reads as a question and - // its reply rather than as two paragraphs. - &__situation { - margin: 0; - font-size: 1.0625rem; - line-height: 1.65; - color: $cozy-mid-gray; - } - - &__outcome { - margin: 0; - font-size: 1.0625rem; - line-height: 1.65; - color: $cozy-black; - } - - &__link { - margin-top: 1.25rem; - align-self: flex-start; - font-size: 1rem; - font-weight: 600; - - &::after { - // Non-breaking space: the arrow stays with the last word, while the link - // text itself is still free to wrap. - content: "\00a0\2192"; - } - } - - // Bootstrap's default control icons and indicator bars are white, meant for - // a carousel over a photograph. On this white ground they are invisible. - .carousel-control-prev, - .carousel-control-next { - width: 3rem; - opacity: 1; - color: $cozy-mid-gray; - - @include media-breakpoint-down(md) { - display: none; - } - - &:hover .carousel-control-prev-icon, - &:hover .carousel-control-next-icon { - border-color: $primary; - color: $primary; - } - - &:focus-visible { - outline: 2px solid $primary; - outline-offset: 2px; - border-radius: 8px; - } - } - - .carousel-control-prev-icon, - .carousel-control-next-icon { - width: 2.5rem; - height: 2.5rem; - border: 1px solid rgba($cozy-black, 0.18); - border-radius: 50%; - background-color: $cozy-white; - // Bootstrap supplies a white chevron as a background image; recolour it by - // masking instead, so the arrow follows `color`. - background-image: none; - position: relative; - transition: border-color 0.15s ease, color 0.15s ease; - - &::before { - content: ""; - position: absolute; - inset: 0; - margin: auto; - width: 0.625rem; - height: 0.625rem; - border-top: 2px solid currentColor; - border-right: 2px solid currentColor; - } - } - - .carousel-control-prev-icon::before { - transform: translateX(2px) rotate(-135deg); - } - - .carousel-control-next-icon::before { - transform: translateX(-2px) rotate(45deg); - } - - .carousel-indicators { - position: static; - margin: 1.75rem 0 0; - - button { - width: 8px; - height: 8px; - border: none; - border-radius: 50%; - background-color: rgba($cozy-black, 0.22); - opacity: 1; - transition: background-color 0.15s ease; - - &.active { - background-color: $primary; - } - - &:focus-visible { - outline: 2px solid $primary; - outline-offset: 3px; - } - } - } - - @media (prefers-reduced-motion: reduce) { - .carousel-item, - .carousel-item.active { - transition: none; - } - - .carousel-control-prev-icon, - .carousel-control-next-icon, - .carousel-indicators button { - transition: none; - } - } -} - -// Same defence as .oss-card: Docsy can be put into dark mode, and this case -// panel would otherwise stay white on a dark page. -[data-bs-theme="dark"] .use-cases { - .use-cases__lead, - .use-cases__situation { - color: var(--bs-gray-400, #ced4da); - } - - .use-cases__case { - border-color: var(--bs-gray-700, #495057); - background: var(--bs-gray-900, #212529); - } - - .use-cases__outcome { - color: var(--bs-gray-100, #f8f9fa); - } - - .carousel-control-prev-icon, - .carousel-control-next-icon { - background-color: var(--bs-gray-900, #212529); - border-color: var(--bs-gray-700, #495057); - } - - .carousel-indicators button { - background-color: var(--bs-gray-600, #6c757d); - } -} diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss index 4f2d4908f..06c103f6a 100644 --- a/assets/scss/_variables_project.scss +++ b/assets/scss/_variables_project.scss @@ -37,8 +37,11 @@ $info : #428bca; $warning: #ffa630; $danger: #d9534f; -$google_font_name: "Montserrat"; -$google_font_family: "Montserrat:300,300i,400,400i,600,600i,700,700i"; +// Self-hosted Nunito Sans (see _fonts.scss). No Google Fonts request. +$google_font_name: "Nunito Sans"; +$font-family-sans-serif: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; +$font-family-base: $font-family-sans-serif; +$headings-font-family: $font-family-sans-serif; $navbar-dark-color: rgba($cozy-white, 0.75) !default; $navbar-dark-hover-color: rgba($cozy-white, 0.5) !default; diff --git a/assets/scss/blocks/_features.scss b/assets/scss/blocks/_features.scss index 575c6be8d..6e4b7805a 100644 --- a/assets/scss/blocks/_features.scss +++ b/assets/scss/blocks/_features.scss @@ -1,66 +1 @@ -.features, .benefits { - .fas, .fab, .fa { - color: $cozy-dark-blue; - } -} - - -.features { - .feature-card { - padding: 20px; - border-radius: 0; - height: 100%; - border: 1px solid #E8E8E8; - background-color: #FFFFFF; - - p.section-text { - font-size: 15px; - } - - p:last-child { - margin-bottom: 0; - } - } - - .card-header-custom { - display: flex; - flex-direction: row; - align-items:center; - min-height: 58px; - - h4 { - font-size: 18px; - color: #3b3c4c; - } - - i { - margin-right: 16px; - } - } - - .card .section-text { - font-size: 14px; - color: #5a5b75; - } -} - - -.benefits { - .card-shadow { - padding: 35px 30px 30px; - border-radius: 6px; - box-shadow: 0 5px 10px rgba(41,26,204,.12); - border: none; - height: 100%; - text-align: center; - - i { - margin: 2px auto; - } - - h4 { - font-weight: 600; - line-height: 1.2; - } - } -} +// Home benefits/features now live in redesign/_home.scss (.cz-benefits, .cz-features). diff --git a/assets/scss/blocks/_hero.scss b/assets/scss/blocks/_hero.scss index 639177ee6..214613cb9 100644 --- a/assets/scss/blocks/_hero.scss +++ b/assets/scss/blocks/_hero.scss @@ -1,167 +1 @@ -// A cover block is a full size cover with a fixed background for smaller screens. - -@include td-box-height-modifiers(".td-hero-block"); - -.hero-gitops { - // Match Bootstrap 5 gutter (0.75rem). The old -15px was the Bootstrap 4 value - // and made the page 3px wider than the viewport (horizontal scroll). - margin-left: -0.75rem; - margin-right: -0.75rem; - - @include media-breakpoint-down(md) { - padding: 0 15px; - } - - background: #2f2f2f; - - .td-hero-block { - padding-bottom: 4rem; - background-color: #2f2f2f !important; - } - - // Remove overlay from td-overlay--dark - .td-overlay--dark::after { - background-color: transparent !important; - } - - section.row { - margin-left: 0; - margin-right: 0; - } - - .hero-details { - margin-top: 1.5rem; - - p { - color: $cozy-white; - font-weight: 500; - font-size: 1.2rem; - } - - p:first-child { - margin-bottom: 1.5rem; - } - - } - - p { - color: $cozy-white; - } - - h1 { - color: rgba($cozy-white, 0.95); - font-size: 2.8em; - padding-top: 50px; - - @include media-breakpoint-up(sm) { - font-size: 2.6em; - } - } - - .hero-taglines { - list-style: none; - padding: 0; - margin: 1rem 0 0; - display: flex; - flex-wrap: wrap; - gap: 0.6rem; - } - - .hero-tagline { - display: inline-block; - padding: 0.4rem 0.9rem; - border: 1px solid rgba($cozy-light-blue, 0.55); - border-radius: 999px; - color: $cozy-white; - background: rgba($cozy-dark-blue, 0.18); - font-size: 0.95rem; - font-weight: 600; - line-height: 1.2; - letter-spacing: 0.01em; - white-space: nowrap; - - @include media-breakpoint-down(sm) { - white-space: normal; - font-size: 0.9rem; - } - } - - // Align Kubernetes Certified logo with the title top - .row.align-items-start { - img[alt="Certified Kubernetes"] { - margin-top: 50px; - } - } - - h2 { - color: rgba($cozy-white, 0.95); - font-weight: 600; - font-size: 1.4em; - } - - a { - color: $cozy-light-blue !important; - font-weight: 400; - font-style: italic; - text-decoration: underline; - - &:hover { - color: $cozy-darkest-blue !important; - text-shadow: -1px 1px $cozy-lighter-blue; - } - } - - a.btn { - @include flat-white-button; - border: none; - text-decoration: none; - - margin-top: 1.5rem; - - font-style: normal; - font-weight: 600; - font-size: 1.5rem; - - .fa-arrow-right { - font-size: 1rem; - display: block; - float: right; - margin: 11px 0 0 14px; - } - } - - // Mobile video styles - .hero-video-mobile { - width: 100%; - margin-top: 2rem; - - .ratio { - border-radius: 8px; - overflow: hidden; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); - } - - iframe { - width: 100%; - height: 100%; - } - } -} - -.lead-flux section { - padding: 0rem 0 1rem 0 !important; - background: none; - - - a[aria-hidden="true"] { - display: none; - } - - .td-arrow-down { - &::before { - border: { - color: #{$cozy-gray} transparent transparent transparent; - } - } - } -} +// The home hero now lives in redesign/_home.scss (.cz-hero). diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 89999676f..a0791c84b 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -126,10 +126,9 @@ // Import Docsy styles_project (allows further customization) @import "docsy/styles_project"; -// Import Google Fonts (Montserrat) -@import url($web-font-path); +// Self-hosted Nunito Sans +@import "fonts"; -// Ensure Montserrat font is applied to body body { font-family: $font-family-base; } @@ -163,3 +162,6 @@ a { @import "tabs_alerts"; @import "override-docsy-tabs"; @import "telemetry"; + +// Site redesign (must stay last) +@import "redesign/redesign"; diff --git a/assets/scss/redesign/_base.scss b/assets/scss/redesign/_base.scss new file mode 100644 index 000000000..bdf34b8c9 --- /dev/null +++ b/assets/scss/redesign/_base.scss @@ -0,0 +1,145 @@ +// ---------- Tokens ---------- +:root { + --cz-ink: #111111; + --cz-text: #414750; + --cz-muted: #6b7280; + --cz-line: #e0e3e7; + --cz-surface: #f8f9fa; + --cz-surface-2: #f1f2f3; + --cz-dark: #171717; + --cz-dark-2: #111111; + --cz-radius: 6px; + --cz-container: 1240px; +} + +// ---------- Base ---------- +html { -webkit-text-size-adjust: 100%; } + +body { + font-family: $font-family-base; + color: var(--cz-text); + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; +} + +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + font-family: $font-family-base; + color: var(--cz-ink); +} + +a { + color: var(--cz-ink); + text-decoration: none; + + &:hover { color: #000; text-decoration: none; } +} + +::selection { background: #111; color: #fff; } + +// ---------- Buttons ---------- +.cz-btn, +.btn.cz-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 14px; + height: 50px; + padding: 0 26px; + border: 1px solid transparent; + border-radius: var(--cz-radius); + font-size: 17px; + font-weight: 700; + line-height: 1; + white-space: nowrap; + cursor: pointer; + transition: background-color .15s, color .15s, border-color .15s; + + &--dark { background: var(--cz-ink); color: #fff; &:hover { background: #000; color: #fff; } } + &--light { background: #fff; border-color: var(--cz-line); color: var(--cz-ink); &:hover { background: var(--cz-surface); color: var(--cz-ink); } } + &--white { background: #fff; color: var(--cz-ink); &:hover { background: #eee; color: var(--cz-ink); } } +} + +.cz-iconbtn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + padding: 0; + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background: #fff; + color: var(--cz-ink); + cursor: pointer; + transition: background-color .15s; + + &:hover { background: var(--cz-surface); } +} + +// Bootstrap buttons used across docs, support and resources follow the same look. +.btn { + border-radius: var(--cz-radius); + font-weight: 700; +} + +.btn-primary, +.btn-info { + background: var(--cz-ink); + border-color: var(--cz-ink); + color: #fff; + + &:hover, &:focus, &:active { background: #000 !important; border-color: #000 !important; color: #fff !important; } +} + +.btn-outline-primary, +.btn-secondary, +.btn-light { + background: #fff; + border-color: var(--cz-line); + color: var(--cz-ink); + + &:hover, &:focus, &:active { background: var(--cz-surface) !important; border-color: var(--cz-line) !important; color: var(--cz-ink) !important; } +} + +.cz-link { + font-weight: 700; + color: var(--cz-ink); + text-decoration: none; + + &:hover { text-decoration: underline; text-underline-offset: 3px; } +} + +// ---------- Shared section headings ---------- +.cz-section-title { + margin: 0; + font-size: clamp(30px, 3.2vw, 40px); + font-weight: 800; + line-height: 1.18; + letter-spacing: -0.035em; + color: var(--cz-ink); +} + +.cz-section-lead { + margin: 14px 0 36px; + font-size: 16px; + line-height: 1.7; + color: var(--cz-text); +} + +// ---------- Circuit artwork ---------- +// The artwork is a single asset ("circuits" in Figma), placed per section with +// the same transforms as the Figma instances. Right/bottom-anchored pieces +// start at left:100% / top:100% so they stay attached to the edge of a section +// that is wider or taller than the Figma frame. Always behind the content. +@mixin cz-art($img, $w, $h, $op) { + content: ""; + position: absolute; + z-index: 0; + width: #{$w}px; + height: #{$h}px; + background: url("/img/circuits/#{$img}") no-repeat 0 0 / 100% 100%; + transform-origin: 0 0; + opacity: $op; + pointer-events: none; +} diff --git a/assets/scss/redesign/_chrome.scss b/assets/scss/redesign/_chrome.scss new file mode 100644 index 000000000..6dea2e4c2 --- /dev/null +++ b/assets/scss/redesign/_chrome.scss @@ -0,0 +1,184 @@ +// ---------- Navbar ---------- +nav.navbar.td-navbar, +nav.navbar.td-navbar.navbar-bg-onscroll, +nav.navbar.td-navbar.td-navbar-cover { + background: #fff !important; + min-height: 70px; + padding: 0 32px; + border-bottom: 1px solid var(--cz-line); + box-shadow: none; + + @include media-breakpoint-down(md) { padding: 8px 16px; } + + .navbar-brand { + padding: 0; + margin-right: 24px; + + svg { + height: 28.8px; // 24px in the kit + 20% + width: auto; + margin: 0; + + path { fill: var(--cz-ink); } + } + } + + .navbar-nav { align-items: center; gap: 2px; } + + .nav-link, + .nav-link span { + color: var(--cz-ink) !important; + font-size: 14px; + font-weight: 600; + padding: .5rem .75rem; + opacity: 1; + } + + .nav-link:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } + + .nav-link.active, + .nav-link .active { + font-weight: 800; + text-decoration: underline; + text-underline-offset: 6px; + text-decoration-thickness: 2px; + } + + .dropdown-toggle::after { + margin-left: .4em; + vertical-align: .15em; + border-top-width: .28em; + border-left-width: .28em; + border-right-width: .28em; + } + + .dropdown-menu { + margin-top: 6px; + padding: 6px; + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background: #fff; + box-shadow: 0 12px 32px rgba(17, 17, 17, .08); + } + + .dropdown-item { + padding: 8px 12px; + border-radius: 4px; + color: var(--cz-ink); + font-size: 14px; + font-weight: 600; + + &:hover, &:focus { background: var(--cz-surface); color: var(--cz-ink); } + } + + .navbar-toggler { + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + color: var(--cz-ink); + + .navbar-toggler-icon { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23111111' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); + } + } + + @include media-breakpoint-down(sm) { + .navbar-collapse { background: #fff; } + .dropdown-menu { border-color: var(--cz-line) !important; } + } +} + +// Algolia DocSearch: the kit's "Search Ctrl K" field. +:root { + --docsearch-primary-color: #111111; + --docsearch-text-color: #111111; + --docsearch-muted-color: #6b7280; + --docsearch-highlight-color: #111111; + --docsearch-searchbox-background: #ffffff; + --docsearch-searchbox-focus-background: #ffffff; + --docsearch-key-gradient: none; + --docsearch-key-shadow: none; +} + +nav.navbar.td-navbar .nav-search-item #docsearch { + height: 40px; + max-width: none; + margin: 0; + padding: 0; + + .DocSearch-Button { + height: 40px; + min-width: 200px; + margin: 0; + padding: 0 10px 0 12px; + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background: #fff; + color: var(--cz-muted); + box-shadow: none; + font-family: $font-family-base; + + &:hover { background: var(--cz-surface); box-shadow: none; color: var(--cz-muted); } + } + + .DocSearch-Button-Placeholder { font-size: 14px; font-weight: 400; color: var(--cz-muted); padding-left: 10px; } + .DocSearch-Search-Icon { color: var(--cz-muted); stroke-width: 2; } + + .DocSearch-Button-Key { + width: auto; + height: 20px; + padding: 0 6px; + border: 1px solid var(--cz-line); + border-radius: 4px; + background: #fff; + box-shadow: none; + color: var(--cz-muted); + font-size: 11px; + font-weight: 400; + } +} + +// ---------- Footer ---------- +.cz-footer { + border-top: 1px solid var(--cz-line); + background: #fff; + color: var(--cz-muted); + padding: 48px 32px 32px; + margin-top: 0; + + &__inner { max-width: 1376px; margin: 0 auto; } + + &__top { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 20px 32px; + padding-bottom: 28px; + border-bottom: 1px solid var(--cz-line); + } + + &__brand svg { height: 24px; width: auto; display: block; path { fill: var(--cz-ink); } } + + &__links { + display: flex; + flex-wrap: wrap; + gap: 8px 24px; + + a { font-size: 14px; font-weight: 600; color: var(--cz-text); &:hover { color: var(--cz-ink); text-decoration: underline; text-underline-offset: 3px; } } + } + + &__legal { + padding-top: 24px; + text-align: left !important; + font-size: 13px; + line-height: 1.7; + color: var(--cz-muted); + + a { color: var(--cz-text); text-decoration: underline; text-underline-offset: 3px; } + .td-footer__badge { margin-left: 12px !important; vertical-align: middle; text-decoration: none; } + .td-footer__policies { margin-top: 6px !important; } + } +} + +// Docsy's own footer styles must not leak into the new one. +.td-footer { display: none; } diff --git a/assets/scss/redesign/_content.scss b/assets/scss/redesign/_content.scss new file mode 100644 index 000000000..1c5e58680 --- /dev/null +++ b/assets/scss/redesign/_content.scss @@ -0,0 +1,261 @@ +// ---------- Content pages: docs, blog, community, support, compliance ---------- + +// Page layout. The sidebars stay Docsy's; they only change colour and weight. +.td-main main { background: transparent; } + +.td-content { + font-size: 16px; + line-height: 1.7; + color: var(--cz-text); + + h1 { + margin: 0 0 .6em; + font-size: clamp(32px, 3.4vw, 48px); + font-weight: 900; + line-height: 1.08; + letter-spacing: -0.04em; + color: var(--cz-ink); + } + + h2 { margin: 2.2rem 0 .8rem; font-size: 28px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; color: var(--cz-ink); } + h3 { margin: 1.8rem 0 .6rem; font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--cz-ink); } + h4, h5 { margin: 1.5rem 0 .5rem; font-size: 18px; font-weight: 700; color: var(--cz-ink); } + + p, li { color: var(--cz-text); } + strong, b { color: var(--cz-ink); } + + a:not(.btn):not(.cz-link):not(.taxonomy-term) { + color: var(--cz-ink); + text-decoration: underline; + text-decoration-color: #b9bec6; + text-underline-offset: 3px; + + &:hover { text-decoration-color: var(--cz-ink); } + } + + hr { border-color: var(--cz-line); opacity: 1; } + + blockquote { + margin: 1.5rem 0; + padding: .25rem 0 .25rem 1.25rem; + border-left: 3px solid var(--cz-line); + color: var(--cz-text); + } + + img { max-width: 100%; height: auto; border-radius: var(--cz-radius); } +} + +// Breadcrumbs +.td-breadcrumbs, .breadcrumb { + font-size: 13px; + background: transparent; + padding-left: 0; + + .breadcrumb-item, .breadcrumb-item a { color: var(--cz-muted); text-decoration: none; } + .breadcrumb-item.active, .breadcrumb-item.active a { color: var(--cz-ink); font-weight: 600; } + .breadcrumb-item + .breadcrumb-item::before { color: #b9bec6; content: "/"; } +} + +// Tables +.td-content table:not(.lntable):not(.highlight) { + width: 100%; + margin: 1.5rem 0; + border-collapse: separate; + border-spacing: 0; + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + font-size: 15px; + line-height: 1.55; + overflow: hidden; + + thead th, thead td { + padding: 12px 14px; + border: 0; + border-bottom: 1px solid var(--cz-line); + background: var(--cz-surface); + color: var(--cz-ink); + font-weight: 700; + text-align: left; + } + + tbody td, tbody th { + padding: 12px 14px; + border: 0; + border-top: 1px solid var(--cz-line); + background: #fff; + color: var(--cz-text); + vertical-align: top; + } + + tbody tr:first-child td, tbody tr:first-child th { border-top: 0; } + tbody tr td, tbody tr th { background: #fff !important; box-shadow: none; } + tbody tr { background: #fff !important; } + tbody td:first-child { color: var(--cz-ink); font-weight: 600; } + + // Docsy makes tables display:block so they can scroll; keep them full width on + // desktop and scrollable on small screens. + display: table !important; + @include media-breakpoint-down(md) { display: block !important; overflow-x: auto; } +} + +// Plain pages (community, support, compliance, resources): a readable column. +.page.td-content.container { max-width: 960px; } + +// Code +.td-content code, code { + padding: 1px 5px; + border: 1px solid var(--cz-line); + border-radius: 4px; + background: #f1f3f5; + color: var(--cz-ink); + font-size: .875em; +} + +.td-content pre, .highlight pre, pre.chroma { + padding: 16px 18px; + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background: var(--cz-surface) !important; + color: var(--cz-ink); + font-size: 14px; + line-height: 1.65; + + code { padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; } +} + +// Alerts and notes +.td-content .alert, .alert { + border: 1px solid var(--cz-line); + border-left: 3px solid var(--cz-ink); + border-radius: var(--cz-radius); + background: var(--cz-surface); + color: var(--cz-text); + + .alert-heading, h4 { color: var(--cz-ink); } +} + +// Tabs +.nav-tabs { + border-bottom: 1px solid var(--cz-line); + + .nav-link { + padding: .6rem 1rem; + border: 0; + border-bottom: 2px solid transparent; + background: transparent; + color: var(--cz-muted); + font-weight: 600; + + &:hover { color: var(--cz-ink); } + &.active { border-bottom-color: var(--cz-ink); background: transparent; color: var(--cz-ink); font-weight: 700; } + } +} + +// Docs sidebar +.td-sidebar { + background: transparent !important; + border-right: 1px solid var(--cz-line); +} + +.td-sidebar-nav { + .td-sidebar-link { + color: var(--cz-text); + font-size: 14px; + font-weight: 600; + + &:hover { color: var(--cz-ink); text-decoration: underline; text-underline-offset: 3px; } + &.tree-root { color: var(--cz-ink); font-weight: 800; } + } + + .active, .td-sidebar-nav-active-item { color: var(--cz-ink) !important; font-weight: 800; } + .td-sidebar-link__page { font-weight: 500; } +} + +.version-switcher__toggle { + border: 1px solid var(--cz-line) !important; + border-radius: var(--cz-radius) !important; + background: #fff !important; + color: var(--cz-ink) !important; + font-weight: 600; +} + +.version-switcher__menu { + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + box-shadow: 0 12px 32px rgba(17, 17, 17, .08); +} + +// Right column: page links and table of contents +.td-sidebar-toc { + .td-page-meta a, .td-page-meta { color: var(--cz-text); font-size: 13px; font-weight: 600; text-decoration: none; } + a { color: var(--cz-text); } + a.active, a:hover { color: var(--cz-ink); } + border-left: 1px solid var(--cz-line); +} + +#TableOfContents a { font-size: 13px; } +#TableOfContents a.active, #TableOfContents li.active > a { color: var(--cz-ink); font-weight: 700; } + +.td-page-meta a { color: var(--cz-text); } + +// Blog +.td-blog, .td-content .blog-post-card { + .blog-post-card h5 { margin: 0 0 .25rem; font-size: 24px; font-weight: 800; line-height: 1.25; letter-spacing: -0.025em; } +} + +.blog-post-card { + padding-bottom: 8px; + border-bottom: 1px solid var(--cz-line); + + h5 a { color: var(--cz-ink); text-decoration: none !important; &:hover { text-decoration: underline !important; text-underline-offset: 3px; } } + .media-body > p:last-child a, .media-body a.read-more { font-weight: 700; } +} + +.taxonomy-title, .td-content h5.taxonomy-title { display: inline; margin: 0 8px 0 0; font-size: 13px; font-weight: 700; color: var(--cz-muted); letter-spacing: .02em; } +.td-sidebar-toc h5, .td-sidebar-toc .taxonomy-title { color: var(--cz-ink); font-size: 14px; font-weight: 800; } + +.taxonomy-term, +.td-sidebar-toc .taxonomy-term, +a.taxonomy-term { + display: inline-block; + padding: 2px 10px; + border: 1px solid var(--cz-line); + border-radius: 4px; + background: #fff; + color: var(--cz-text) !important; + font-size: 13px; + font-weight: 600; + text-decoration: none !important; + + &::before, &::after { display: none !important; } + &:hover { background: var(--cz-surface); color: var(--cz-ink) !important; } +} + +.blog-filter, .filter-container { + border-radius: var(--cz-radius); + + select, .form-select { + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background-color: #fff; + color: var(--cz-ink); + font-weight: 600; + } +} + +// Support, community and resource pages use plain tables and lists inside .td-content, +// so they pick up the table and link styles above. + +// Pagination +.pagination .page-link { + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + color: var(--cz-ink); + margin: 0 2px; + + &:hover { background: var(--cz-surface); } +} +.pagination .page-item.active .page-link { background: var(--cz-ink); border-color: var(--cz-ink); color: #fff; } + +// Page meta footer +.td-page-meta, .td-content .lastmod, .td-content > footer { color: var(--cz-muted); font-size: 13px; } diff --git a/assets/scss/redesign/_home.scss b/assets/scss/redesign/_home.scss new file mode 100644 index 000000000..0796d8c71 --- /dev/null +++ b/assets/scss/redesign/_home.scss @@ -0,0 +1,439 @@ +// ---------- Home ---------- +// Block order and sizes follow the Figma frame "Desktop / Homepage — Contrast & circuits". + +// The navbar is fixed (70px), and the home sections run edge to edge. +body.td-home .td-outer { padding-left: 0; padding-right: 0; } +body.td-home .td-main { margin-top: 0; } + +// Hero ------------------------------------------------------------------ +.cz-hero { + position: relative; + overflow: hidden; + background: #fff; + text-align: center; + + // Left and right artwork (light surface, gradient fade). + &::before { @include cz-art("circuits-on-light.svg", 660, 343.18, .25); left: 0; top: 0; transform: matrix(0, -1, 1, 0, -140, 660); } + &::after { @include cz-art("circuits-on-light.svg", 660, 343.18, .25); left: 100%; top: 0; transform: matrix(0, 1, -1, 0, 140.18, 0); } + + @include media-breakpoint-down(md) { + min-height: 0; + &::before { @include cz-art("circuits-on-light.svg", 530, 275.58, .13); left: 0; top: 0; transform: matrix(0, -1, 1, 0, -220, 560); } + &::after { @include cz-art("circuits-on-light.svg", 530, 275.58, .13); left: 100%; top: 0; transform: matrix(0, 1, -1, 0, 185.58, 30); } + } + + &__inner { + position: relative; + z-index: 1; + max-width: 1000px; + padding: 142px 32px 72px; // 70px fixed navbar + 72px + display: flex; + flex-direction: column; + align-items: center; + + @include media-breakpoint-down(md) { padding: 118px 20px 40px; } + } + + &__title { + margin: 14px 0 0; + font-size: clamp(48px, 7vw, 98px); + font-weight: 900; + line-height: 1.01; + letter-spacing: -0.055em; + color: var(--cz-ink); + + @include media-breakpoint-down(md) { font-size: clamp(38px, 11vw, 52px); letter-spacing: -0.045em; } + } + + &__lead { + max-width: 720px; + margin-top: 28px; + font-size: 21px; + line-height: 1.5; + letter-spacing: -0.015em; + color: var(--cz-text); + + p { margin: 0; } + @include media-breakpoint-down(md) { margin-top: 20px; font-size: 18px; } + } + + &__actions { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 18px; + margin-top: 32px; + + @include media-breakpoint-down(md) { gap: 12px; margin-top: 26px; } + } + + &__note { + margin: 32px 0 0; + font-size: 13px; + color: var(--cz-muted); + + a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } + } +} + +// Screenshots ----------------------------------------------------------- +.cz-shots { + padding: 0 0 64px; + background: #fff; + + .container { max-width: var(--cz-container); } + + &__frame { + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + overflow: hidden; + background: var(--cz-surface); + + .screenshot-img { display: block; width: 100%; height: auto; } + } + + &__bar { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + margin-top: 22px; + + .carousel-indicators { + position: static; + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + gap: 6px; + margin: 0; + + [data-bs-target] { + flex: none; + box-sizing: content-box; + width: 10px; + height: 4px; + margin: 0; + padding: 0; + border: 0; + border-radius: 2px; + background: #d3d7dc; + opacity: 1; + text-indent: 0; + transition: width .15s, background-color .15s; + + &.active { width: 22px; background: var(--cz-ink); } + } + } + } + + &__nav { display: flex; gap: 8px; } +} + +// Introduction: description, badges, positioning ------------------------ +.cz-intro { + padding: 0 0 56px; + background: #fff; + + .container { max-width: var(--cz-container); } + + &__main { display: flex; flex-wrap: wrap; align-items: center; padding: 8px 0 36px; } + + &__text { + flex: 1 1 520px; + min-width: 0; + padding-right: 48px; + font-size: 19px; + line-height: 1.6; + letter-spacing: -0.01em; + color: var(--cz-text); + + p { margin: 0; } + } + + &__badges { + flex: 0 1 460px; + align-self: stretch; + display: flex; + align-items: center; + justify-content: center; + gap: 36px; + padding-left: 32px; + border-left: 1px solid var(--cz-line); + + img { display: block; width: auto; } + .cz-intro__k8s { height: 84px; } + .cz-intro__cncf { height: 34px; } + } + + &__taglines { + display: grid; + grid-template-columns: repeat(3, 1fr); + margin: 0; + padding: 0; + list-style: none; + border-top: 1px solid var(--cz-line); + border-bottom: 1px solid var(--cz-line); + font-size: 16px; + color: var(--cz-text); + + li { padding: 22px 0; } + li:nth-child(2) { text-align: center; border-left: 1px solid var(--cz-line); } + li:nth-child(3) { text-align: right; border-left: 1px solid var(--cz-line); } + } + + @include media-breakpoint-down(lg) { + &__text { flex-basis: 100%; padding-right: 0; } + &__badges { flex-basis: 100%; justify-content: flex-start; margin-top: 28px; padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--cz-line); } + } + + @include media-breakpoint-down(md) { + &__text { font-size: 17px; } + &__taglines { grid-template-columns: 1fr; li, li:nth-child(2), li:nth-child(3) { padding: 16px 0; text-align: left; border-left: 0; } li + li { border-top: 1px solid var(--cz-line); } } + } +} + +// Dark call to action (live demo) --------------------------------------- +.section-live-demo { + position: relative; + overflow: hidden; + background: var(--cz-dark); + color: #fff; + text-align: center; + + &::before { @include cz-art("circuits-on-dark.svg", 600, 311.98, .14); left: 0; top: 0; transform: matrix(1, 0, 0, 1, -350, -60); } + &::after { @include cz-art("circuits-on-dark.svg", 600, 311.98, .14); left: 100%; top: 100%; transform: matrix(-1, 0, 0, -1, 300, 61.98); } + + @include media-breakpoint-down(md) { + &::before { display: none; } + &::after { @include cz-art("circuits-on-dark.svg", 560, 291.18, .08); left: 100%; top: 100%; transform: matrix(-1, 0, 0, -1, 450, 81.18); } + } + + .td-box, + .td-box--primary { + position: relative; + z-index: 1; + margin: 0; + padding: 96px 0 90px; + background: transparent !important; + background-image: none !important; + color: #fff; + + @include media-breakpoint-down(md) { padding: 56px 0 52px; } + } + + .td-arrow-down::before { display: none; } + .container { max-width: 880px; } + + .section-label { + margin: 0; + font-size: clamp(30px, 3.2vw, 40px); + font-weight: 800; + line-height: 1.18; + letter-spacing: -0.035em; + color: #fff; + } + + .live-demo-lead { + max-width: 780px; + margin: 20px auto 0; + font-size: 16px; + line-height: 1.7; + color: #e0e0e0; + } + + .live-demo-cta { margin-top: 28px; } + + .live-demo-cta .btn { + display: inline-flex; + align-items: center; + height: 50px; + padding: 0 26px; + border: 0; + border-radius: var(--cz-radius); + background: #fff !important; + color: var(--cz-ink) !important; + font-size: 17px; + font-weight: 700; + + &:hover { background: #eee !important; } + } +} + +// Use cases accordion --------------------------------------------------- +.cz-usecases { + padding: 90px 0 80px; + background: #fff; + + .container { max-width: var(--cz-container); } + .cz-section-lead { max-width: 760px; } + + @include media-breakpoint-down(md) { padding: 56px 0 48px; } +} + +.cz-accordion { + border-top: 1px solid var(--cz-line); + + &__item { border-bottom: 1px solid var(--cz-line); } + + &__summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + padding: 22px 0; + list-style: none; + cursor: pointer; + + &::-webkit-details-marker { display: none; } + &:focus-visible { outline: 2px solid var(--cz-ink); outline-offset: 2px; } + } + + &__title { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--cz-ink); } + &__chev { flex: none; color: var(--cz-ink); transition: transform .15s; } + &__item[open] &__chev { transform: rotate(180deg); } + + &__body { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px 48px; + padding: 0 0 28px; + + p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--cz-text); } + @include media-breakpoint-down(md) { grid-template-columns: 1fr; gap: 14px; } + } + + &__outcome .cz-link { display: inline-block; margin-top: 14px; } +} + +// Benefits and features ------------------------------------------------- +.cz-benefits, +.cz-features { + padding: 90px 0 80px; + + .container { max-width: var(--cz-container); } + + @include media-breakpoint-down(md) { padding: 56px 0 48px; } +} + +.cz-benefits { background: var(--cz-surface-2); } +.cz-features { background: #fff; } + +.cz-cols { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 48px; + margin-top: 36px; + + @include media-breakpoint-down(lg) { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; } + @include media-breakpoint-down(md) { grid-template-columns: 1fr; gap: 32px; } +} + +.cz-col { + &__icon { display: block; margin-bottom: 14px; font-size: 22px; line-height: 1; color: var(--cz-ink); } + &__title { margin: 0 0 12px; font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--cz-ink); } + &__text { font-size: 15px; line-height: 1.7; color: var(--cz-text); p { margin: 0; } a { color: var(--cz-ink); text-decoration: underline; text-underline-offset: 3px; } } +} + +// Community (dark) and the talk ------------------------------------------ +.section-community { + position: relative; + overflow: hidden; + background: var(--cz-dark-2); + color: #fff; + + &::before { @include cz-art("circuits-on-dark.svg", 660, 343.18, .10); left: 0; top: 100%; transform: matrix(0, -1, 1, 0, -111.59, 131.71); } + &::after { @include cz-art("circuits-on-dark.svg", 660, 343.18, .12); left: 100%; top: 100%; transform: matrix(-.5, .866, -.866, -.5, 313.6, -418.28); } + + @include media-breakpoint-down(md) { + &::before { display: none; } + &::after { @include cz-art("circuits-on-dark.svg", 560, 291.18, .08); left: 0; top: 100%; transform: matrix(1, 0, 0, 1, 260, -250.12); } + } + + .td-box, + .td-box--dark { + position: relative; + z-index: 1; + margin: 0; + padding: 0; + background: transparent !important; + color: #fff; + } + + .td-arrow-down::before { display: none; } + + // Heading block + > .td-box:first-of-type { padding-top: 90px; } + > .td-box:first-of-type .container { max-width: var(--cz-container); text-align: left !important; padding-bottom: 40px; } + + .section-label { + margin: 0; + font-size: clamp(30px, 3.2vw, 40px); + font-weight: 800; + line-height: 1.18; + letter-spacing: -0.035em; + color: #fff; + } + + p { color: #d4d4d4; } + > .td-box:first-of-type p { max-width: 760px; margin: 14px 0 0; font-size: 16px; line-height: 1.7; } + + // Three columns + .subsection-community-row { + position: relative; + z-index: 1; + max-width: var(--cz-container); + margin: 0 auto; + padding: 0 12px; + + .td-box { padding: 0; } + .td-box > .col { padding: 0; } + } + + .community-row { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 40px 48px; + + @include media-breakpoint-down(md) { grid-template-columns: 1fr; gap: 32px; } + } + + .community-item { + text-align: left !important; + + .h1 { margin: 0 0 12px; font-size: 24px; line-height: 1; color: #fff; } + .h3, h4 { margin: 0 0 12px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: #fff; } + p { margin: 0; font-size: 15px; line-height: 1.7; color: #d4d4d4; } + a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } + i { color: #fff; } + } + + @include media-breakpoint-down(md) { + > .td-box:first-of-type { padding-top: 56px; } + > .td-box:first-of-type .container { padding-bottom: 28px; } + } +} + +.cz-video { + position: relative; + z-index: 1; + max-width: 850px; + margin: 56px auto 0; + padding: 0 12px 90px; + + .ratio { overflow: hidden; border-radius: var(--cz-radius); background: #000; } + + @include media-breakpoint-down(md) { margin-top: 36px; padding-bottom: 56px; } +} + +// Longer translations of the headline need a smaller cap than the English one. +html[lang="ru"] .cz-hero__title { font-size: clamp(40px, 5.2vw, 76px); } +html[lang="de"] .cz-hero__title, +html[lang="hi"] .cz-hero__title { font-size: clamp(42px, 6.2vw, 88px); } +html[lang="zh-cn"] .cz-hero__title { font-size: clamp(40px, 5.6vw, 80px); } + +// Inline code on the dark Community band must not use the light chip. +.section-community code { + border-color: rgba(255, 255, 255, .25); + background: rgba(255, 255, 255, .1); + color: #fff; +} diff --git a/assets/scss/redesign/_oss.scss b/assets/scss/redesign/_oss.scss new file mode 100644 index 000000000..bd50d78b0 --- /dev/null +++ b/assets/scss/redesign/_oss.scss @@ -0,0 +1,141 @@ +// ---------- Resources: Telemetry, DevStats, OpenSSF, OSS Insight ---------- +// Same data and markup as before (rendered by oss-health-app.html); only the look moves +// to the kit: flat white page, hairline borders, 6px corners, dark segmented switcher. + +.oss-health-shell { + margin-top: 70px; // fixed navbar + padding-bottom: 5rem; + background: #fff; + + &__hero { padding: 3rem 0 1rem; } + + &__eyebrow { + margin-bottom: 18px; + color: var(--cz-muted); + font-size: 13px; + font-weight: 700; + letter-spacing: .1em; + } + + h1 { + margin: 0 0 18px; + font-size: clamp(44px, 6vw, 72px); + font-weight: 900; + line-height: 1.04; + letter-spacing: -0.045em; + color: var(--cz-ink); + } + + &__lede { max-width: 680px; margin: 0; font-size: 21px; line-height: 1.5; letter-spacing: -0.015em; color: var(--cz-text); } + + &__meta-item, &__meta-link { + padding: 0; + border: 0; + border-radius: 0; + background: none; + box-shadow: none; + color: var(--cz-muted); + font-size: 14px; + font-weight: 400; + } + + &__meta-link { color: var(--cz-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } + + &__aside { + padding: 20px 22px; + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background: var(--cz-surface); + box-shadow: none; + color: var(--cz-text); + + p { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--cz-text); } + } + + &__pulse { padding: 0; background: none; box-shadow: none; color: var(--cz-ink); font-size: 14px; font-weight: 700; } + &__pulse-dot { background: #44cc11; box-shadow: none; } +} + +.oss-health-app { padding-top: 1rem; } + +.oss-health-stage { + padding: 40px 0 0; + border: 0; + border-top: 1px solid var(--cz-line); + border-radius: 0; + background: transparent; + box-shadow: none; + + h2 { font-size: 36px; font-weight: 800; letter-spacing: -0.035em; color: var(--cz-ink); } + &__kicker { color: var(--cz-muted); font-size: 13px; font-weight: 700; letter-spacing: .1em; } +} + +.oss-health-switcher { + padding: 3px; + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background: #fff; + box-shadow: none; + + &__button { + border-radius: 4px; + background: transparent; + color: var(--cz-ink); + font-weight: 700; + + &.is-active { background: var(--cz-ink); color: #fff; box-shadow: none; } + } +} + +.oss-health-stat, +.oss-health-panel, +.oss-health-mini__item, +.oss-health-state__panel, +.oss-health-state__badge { + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background: #fff; + box-shadow: none; +} + +.oss-health-mini__item { background: var(--cz-surface); } + +.oss-health-stat { + &__label { color: var(--cz-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; } + &__value { color: var(--cz-ink); font-size: 44px; font-weight: 900; letter-spacing: -0.04em; } + &__hint { color: var(--cz-muted); } +} + +.oss-health-panel__header h2 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; color: var(--cz-ink); } + +.oss-health-table { + th { color: var(--cz-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; } + td { color: var(--cz-text); font-size: 15px; } + td:last-child { color: var(--cz-ink); font-weight: 700; font-variant-numeric: tabular-nums; } + td a { color: var(--cz-ink); text-decoration: underline; text-decoration-color: #b9bec6; text-underline-offset: 3px; } +} + +.oss-health-language-pill { + border: 1px solid var(--cz-line); + border-radius: var(--cz-radius); + background: #fff; + box-shadow: none; + color: var(--cz-text); +} + +.oss-health-note { border-left: 3px solid var(--cz-line); color: var(--cz-muted); } + +.oss-health-state { + &__badge { background: var(--cz-surface); } + &__pill, &__pill.is-passing, &__pill.is-in-progress, &__pill.is-unknown { border-radius: var(--cz-radius); background: var(--cz-ink); color: #fff; box-shadow: none; } +} + +.oss-health-actions .btn { border-radius: var(--cz-radius); } + +// Neutral text colours (the earlier palette used navy). +.oss-health-mini__item strong, +.oss-health-table td, +.oss-health-table td:first-child { color: var(--cz-text); } +.oss-health-mini__item strong { color: var(--cz-ink); } +.oss-health-table td:last-child { color: var(--cz-ink); } +.oss-health-mini__item span { color: var(--cz-muted); } diff --git a/assets/scss/redesign/_redesign.scss b/assets/scss/redesign/_redesign.scss new file mode 100644 index 000000000..b4017fb84 --- /dev/null +++ b/assets/scss/redesign/_redesign.scss @@ -0,0 +1,8 @@ +// Cozystack site redesign (monochrome, Nunito Sans, circuit artwork). +// Imported last from main.scss so it overrides Docsy and the older partials. +// Tokens and component names follow the "Cozystack website kit" in Figma. +@import "base"; +@import "chrome"; +@import "home"; +@import "content"; +@import "oss"; diff --git a/content/de/_index.md b/content/de/_index.md index fd2089fbe..7f457b210 100644 --- a/content/de/_index.md +++ b/content/de/_index.md @@ -121,24 +121,18 @@ features: Die Web-UI erleichtert den schnellen Einstieg in die Plattform und demonstriert ihre Möglichkeiten anschaulich. --- -
- {{% blocks/hero title="Cozystack: Kostenlose Cloud-Plattform auf Basis von Kubernetes" color="primary" - height="auto" link_title="Erste Schritte" link_url="/de/docs/v1.4/getting-started/" %}} - Verwandeln Sie eine Reihe von Bare-Metal-Servern in ein intelligentes System mit einer einfachen REST API zum Bereitstellen von Kubernetes-Clustern, Databases-as-a-Service, virtuellen Maschinen, Load Balancern, HTTP-Caching-Diensten und weiteren Diensten. - - Nutzen Sie Cozystack, um Ihre eigene Cloud aufzubauen oder kosteneffiziente Entwicklungsumgebungen bereitzustellen. - - {{% /blocks/hero %}} - -
- {{< blocks/lead >}} - {{< /blocks/lead >}} -
-
+{{< blocks/hero title="Cozystack: Kostenlose Cloud-Plattform auf Basis von Kubernetes" link_title="Erste Schritte" link_url="/de/docs/v1.4/getting-started/" >}} +Nutzen Sie Cozystack, um Ihre eigene Cloud aufzubauen oder kosteneffiziente Entwicklungsumgebungen bereitzustellen. +{{< /blocks/hero >}} {{< home/screenshot-gallery >}} + +{{< home/intro >}} +Verwandeln Sie eine Reihe von Bare-Metal-Servern in ein intelligentes System mit einer einfachen REST API zum Bereitstellen von Kubernetes-Clustern, Databases-as-a-Service, virtuellen Maschinen, Load Balancern, HTTP-Caching-Diensten und weiteren Diensten. +{{< /home/intro >}} +
{{< blocks/lead color="primary" >}} @@ -191,6 +185,7 @@ features: {{< /blocks/section >}}
- + + {{< home/video >}} -{{< home/cncf >}} + diff --git a/content/en/_index.md b/content/en/_index.md index 057c89043..b8d68e642 100644 --- a/content/en/_index.md +++ b/content/en/_index.md @@ -112,24 +112,18 @@ features: The Web UI facilitates a quick dive into the platform and provides a visual demonstration of its capabilities. --- -
- {{% blocks/hero title="Cozystack: Free Cloud Platform based on Kubernetes" color="primary" - height="auto" link_title="Get started" link_url="/docs/get-started/" %}} - Transform a set of bare metal servers into an intelligent system with a simple REST API for spawning Kubernetes clusters, Databases-as-a-Service, virtual machines, load balancers, HTTP caching services, and other services with ease. - - Use Cozystack to build your own cloud or provide cost-effective development environments. - - {{% /blocks/hero %}} - -
- {{< blocks/lead >}} - {{< /blocks/lead >}} -
-
+{{< blocks/hero title="Cozystack: Free Cloud Platform based on Kubernetes" link_title="Get started" link_url="/docs/get-started/" >}} +Use Cozystack to build your own cloud or provide cost-effective development environments. +{{< /blocks/hero >}} {{< home/screenshot-gallery >}} + +{{< home/intro >}} +Transform a set of bare metal servers into an intelligent system with a simple REST API for spawning Kubernetes clusters, Databases-as-a-Service, virtual machines, load balancers, HTTP caching services, and other services with ease. +{{< /home/intro >}} +
{{< blocks/lead color="primary" >}} @@ -184,6 +178,7 @@ features: {{< /blocks/section >}}
- + + {{< home/video >}} -{{< home/cncf >}} + diff --git a/content/hi/_index.md b/content/hi/_index.md index 2b805d792..295aed84d 100644 --- a/content/hi/_index.md +++ b/content/hi/_index.md @@ -120,24 +120,18 @@ features: यह वेब UI प्लेटफ़ॉर्म में तेज़ी से उतरने में मदद करता है और इसकी क्षमताओं का दृश्य प्रदर्शन करता है। --- -
- {{% blocks/hero title="Cozystack: Kubernetes पर आधारित मुफ़्त क्लाउड प्लेटफ़ॉर्म" color="primary" - height="auto" link_title="शुरुआत करें" link_url="/hi/docs/v1.4/getting-started/" %}} - bare-metal सर्वरों के एक समूह को एक बुद्धिमान सिस्टम में बदलें, जिसमें Kubernetes क्लस्टर, Databases-as-a-Service, वर्चुअल मशीनें, लोड बैलेंसर, HTTP कैशिंग सेवाएँ और अन्य सेवाएँ आसानी से बनाने के लिए एक सरल REST API हो। - - अपना खुद का क्लाउड बनाने या किफ़ायती डेवलपमेंट एनवायरनमेंट उपलब्ध कराने के लिए Cozystack का उपयोग करें। - - {{% /blocks/hero %}} - -
- {{< blocks/lead >}} - {{< /blocks/lead >}} -
-
+{{< blocks/hero title="Cozystack: Kubernetes पर आधारित मुफ़्त क्लाउड प्लेटफ़ॉर्म" link_title="शुरुआत करें" link_url="/hi/docs/v1.4/getting-started/" >}} +अपना खुद का क्लाउड बनाने या किफ़ायती डेवलपमेंट एनवायरनमेंट उपलब्ध कराने के लिए Cozystack का उपयोग करें। +{{< /blocks/hero >}} {{< home/screenshot-gallery >}} + +{{< home/intro >}} +bare-metal सर्वरों के एक समूह को एक बुद्धिमान सिस्टम में बदलें, जिसमें Kubernetes क्लस्टर, Databases-as-a-Service, वर्चुअल मशीनें, लोड बैलेंसर, HTTP कैशिंग सेवाएँ और अन्य सेवाएँ आसानी से बनाने के लिए एक सरल REST API हो। +{{< /home/intro >}} +
{{< blocks/lead color="primary" >}} @@ -190,6 +184,7 @@ features: {{< /blocks/section >}}
- + + {{< home/video >}} -{{< home/cncf >}} + diff --git a/content/ru/_index.md b/content/ru/_index.md index b3e10e94a..50aa0520b 100644 --- a/content/ru/_index.md +++ b/content/ru/_index.md @@ -115,24 +115,18 @@ features: Веб-интерфейс облегчает быстрое погружение в платформу и наглядно демонстрирует её возможности. --- -
- {{% blocks/hero title="Cozystack: бесплатная облачная платформа на базе Kubernetes" color="primary" - height="auto" link_title="Начать" link_url="/ru/docs/v1.4/getting-started/" %}} - Превратите набор bare-metal серверов в интеллектуальную систему с простым REST API для создания кластеров Kubernetes, баз данных как сервиса, виртуальных машин, балансировщиков нагрузки, сервисов HTTP-кэширования и других сервисов. - - Используйте Cozystack, чтобы построить собственное облако или предоставлять экономичные среды разработки. - - {{% /blocks/hero %}} - -
- {{< blocks/lead >}} - {{< /blocks/lead >}} -
-
+{{< blocks/hero title="Cozystack: бесплатная облачная платформа на базе Kubernetes" link_title="Начать" link_url="/ru/docs/v1.4/getting-started/" >}} +Используйте Cozystack, чтобы построить собственное облако или предоставлять экономичные среды разработки. +{{< /blocks/hero >}} {{< home/screenshot-gallery >}} + +{{< home/intro >}} +Превратите набор bare-metal серверов в интеллектуальную систему с простым REST API для создания кластеров Kubernetes, баз данных как сервиса, виртуальных машин, балансировщиков нагрузки, сервисов HTTP-кэширования и других сервисов. +{{< /home/intro >}} +
{{< blocks/lead color="primary" >}} @@ -185,6 +179,7 @@ features: {{< /blocks/section >}}
- + + {{< home/video >}} -{{< home/cncf >}} + diff --git a/content/zh-cn/_index.md b/content/zh-cn/_index.md index 52cb932c9..5e01c4406 100644 --- a/content/zh-cn/_index.md +++ b/content/zh-cn/_index.md @@ -91,24 +91,18 @@ features: 该 Web UI 便于快速上手平台，并直观展示其能力。 --- -
- {{% blocks/hero title="Cozystack：基于 Kubernetes 的免费云平台" color="primary" - height="auto" link_title="开始使用" link_url="/zh-cn/docs/v1.4/getting-started/" %}} - 将一组裸金属服务器变成智能系统，通过简单的 REST API 轻松创建 Kubernetes 集群、数据库即服务、虚拟机、负载均衡器、HTTP 缓存服务以及其他服务。 - - 使用 Cozystack 构建你自己的云，或提供高性价比的开发环境。 - - {{% /blocks/hero %}} - -
- {{< blocks/lead >}} - {{< /blocks/lead >}} -
-
+{{< blocks/hero title="Cozystack：基于 Kubernetes 的免费云平台" link_title="开始使用" link_url="/zh-cn/docs/v1.4/getting-started/" >}} +使用 Cozystack 构建你自己的云，或提供高性价比的开发环境。 +{{< /blocks/hero >}} {{< home/screenshot-gallery >}} + +{{< home/intro >}} +将一组裸金属服务器变成智能系统，通过简单的 REST API 轻松创建 Kubernetes 集群、数据库即服务、虚拟机、负载均衡器、HTTP 缓存服务以及其他服务。 +{{< /home/intro >}} +
{{< blocks/lead color="primary" >}} @@ -161,6 +155,7 @@ features: {{< /blocks/section >}}
- + + {{< home/video >}} -{{< home/cncf >}} + diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 94c2d1e08..fe2aa3571 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,15 +1,23 @@ -