From 16a4ce637d32adc6c1d7cf8fe18c5b0f774286fa Mon Sep 17 00:00:00 2001 From: Samarth Jaiswal Date: Thu, 12 Nov 2026 22:58:46 +0530 Subject: [PATCH] Centre the solana about image when the layout stacks --- news/changelog-1.12.md | 1 + .../projects/website/about/about.scss | 5 ++-- .../2026/11/12/issue-15178/.gitignore | 2 ++ .../2026/11/12/issue-15178/_quarto.yml | 2 ++ .../2026/11/12/issue-15178/index.qmd | 23 +++++++++++++++++++ 5 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 tests/docs/smoke-all/2026/11/12/issue-15178/.gitignore create mode 100644 tests/docs/smoke-all/2026/11/12/issue-15178/_quarto.yml create mode 100644 tests/docs/smoke-all/2026/11/12/issue-15178/index.qmd diff --git a/news/changelog-1.12.md b/news/changelog-1.12.md index bfc6660377a..93a81d29885 100644 --- a/news/changelog-1.12.md +++ b/news/changelog-1.12.md @@ -63,6 +63,7 @@ All changes included in 1.12: ### `website` +- ([#15178](https://github.com/quarto-dev/quarto-cli/issues/15178)): Fix the `solana` about page template keeping the image at the left edge instead of centring it when the layout stacks on narrow screens. (author: @SAMARTHJAISWAL) - ([#15269](https://github.com/quarto-dev/quarto-cli/pull/15269)): Fix listing `image-alt` values containing quotes or `&` rendering broken or double-escaped alt text. (author: @mcanouil) - ([#15269](https://github.com/quarto-dev/quarto-cli/pull/15269)): Add `target` and `rel` options to listings and listing items, with the listing value as the default for its items. (author: @mcanouil) diff --git a/src/resources/projects/website/about/about.scss b/src/resources/projects/website/about/about.scss index 388481bb7b9..758c0b0c216 100644 --- a/src/resources/projects/website/about/about.scss +++ b/src/resources/projects/website/about/about.scss @@ -109,6 +109,8 @@ div.quarto-about-solana { .about-entity { display: flex !important; + align-items: start; + justify-content: space-between; @include media-breakpoint-up(lg) { flex-direction: row; @@ -119,9 +121,6 @@ div.quarto-about-solana { text-align: center; } - align-items: start; - justify-content: space-between; - .entity-contents { display: flex; flex-direction: column; diff --git a/tests/docs/smoke-all/2026/11/12/issue-15178/.gitignore b/tests/docs/smoke-all/2026/11/12/issue-15178/.gitignore new file mode 100644 index 00000000000..ad293093b07 --- /dev/null +++ b/tests/docs/smoke-all/2026/11/12/issue-15178/.gitignore @@ -0,0 +1,2 @@ +/.quarto/ +**/*.quarto_ipynb diff --git a/tests/docs/smoke-all/2026/11/12/issue-15178/_quarto.yml b/tests/docs/smoke-all/2026/11/12/issue-15178/_quarto.yml new file mode 100644 index 00000000000..e82461507d8 --- /dev/null +++ b/tests/docs/smoke-all/2026/11/12/issue-15178/_quarto.yml @@ -0,0 +1,2 @@ +project: + type: website diff --git a/tests/docs/smoke-all/2026/11/12/issue-15178/index.qmd b/tests/docs/smoke-all/2026/11/12/issue-15178/index.qmd new file mode 100644 index 00000000000..9fcf926c856 --- /dev/null +++ b/tests/docs/smoke-all/2026/11/12/issue-15178/index.qmd @@ -0,0 +1,23 @@ +--- +title: "Solana about page centres the image when stacked" +image: https://quarto.org/quarto.png +about: + id: about-15178 + template: solana +_quarto: + tests: + html: + ensureHtmlElements: + - ['div.quarto-about-solana img.about-image'] + ensureCssRegexMatches: + - ['div\.quarto-about-solana \.about-entity\s*\{[^}]*align-items:\s*start'] + - ['div\.quarto-about-solana \.about-entity\s*\{[^}]*align-items:\s*center[\s\S]*div\.quarto-about-solana \.about-entity\s*\{[^}]*align-items:\s*start'] +--- + +::: {#about-15178} + +Below the `lg` breakpoint the layout stacks, and the image must be centred +like the text. The base `align-items: start` must come before the +breakpoint rule, so it can't override it. + +:::