From dc7cb9666e4095e20e840c53a05f4104e242c73d Mon Sep 17 00:00:00 2001 From: Adeola Adeyemo Date: Wed, 16 Apr 2025 09:06:52 +0100 Subject: [PATCH] update: add example for two column layout width Signed-off-by: Adeola Adeyemo --- docs/journeys/custom-css.md | 11 +++++++++++ docs/ui-design/concorde-design-tokens.md | 14 +++++++------- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/docs/journeys/custom-css.md b/docs/journeys/custom-css.md index 53c6fdb..0a6ee37 100644 --- a/docs/journeys/custom-css.md +++ b/docs/journeys/custom-css.md @@ -448,6 +448,17 @@ The snippet below will change the maximum width of the journey content to 600px } ``` +### Modify the ratio between the content and sidebar of Two Column Layout + +The snippet below will change the ratio between the content and sidebar of Two Column Layout to 1:1. + +```css +:root { + --concorde-two-columns-content-width: 50%; + --concorde-two-columns-sidebar-width: 50%; +} +``` + ### Use multiple fonts on a journey To do this, you can either use a standard font (provided on the Design builder) or a custom font (that has been uploaded). To use a custom font, you can either upload it on the design builder or use a hosted font. diff --git a/docs/ui-design/concorde-design-tokens.md b/docs/ui-design/concorde-design-tokens.md index 983480e..e68b72a 100644 --- a/docs/ui-design/concorde-design-tokens.md +++ b/docs/ui-design/concorde-design-tokens.md @@ -84,13 +84,13 @@ sidebar_position: 3 ### Navbar -| CSS Variable | Default | Description | -| ------------------------------------ | ------------------------------- | ----------------------------------------------------------------------------- | -| `--concorde-custom-layout-max-width` | `1256px` | The maximum width of the journey. | -| `--concorde-two-columns-content-width` | `calc(7 / 12 * 100%)` | For Two column layouts, the percentage of the width assigned to the Content section | -| `--concorde-two-columns-sidebar-width` | `calc(5 / 12 * 100%)` | For Two column layouts, the percentage of the width assigned to the Sidebar section | -| `--concorde-topbar-background` | `var(--concorde-primary-color)` | The background color of the navigation bar. | -| `--concorde-topbar-logo-alignment` | `center` | Changes the alignment of the header logo. Can be `flex-start` and `flex-end`. | +| CSS Variable | Default | Description | +| -------------------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `--concorde-custom-layout-max-width` | `1256px` | The maximum width of the journey. | +| `--concorde-two-columns-content-width` | `calc(7 / 12 * 100%)` | For Two column layouts, the percentage of the width assigned to the Content section. Ensure that together with the `--concorde-two-columns-sidebar-width` variable, the total width of the Two Column Layout is 100%. | +| `--concorde-two-columns-sidebar-width` | `calc(5 / 12 * 100%)` | For Two column layouts, the percentage of the width assigned to the Sidebar section. Ensure that together with the `--concorde-two-columns-content-width` variable, the total width of the Two Column Layout is 100%. | +| `--concorde-topbar-background` | `var(--concorde-primary-color)` | The background color of the navigation bar. | +| `--concorde-topbar-logo-alignment` | `center` | Changes the alignment of the header logo. Can be `flex-start` and `flex-end`. | ---