Also spell out the title. The stylesheet adjustment makes the logo align properly with the longer title text for different display widths. Override the title template to show both the title text and the logo. Signed-off-by: Valentin Gagarin <valentin@gagarin.work> --- Documentation/_config.yml | 3 ++- Documentation/_includes/title.html | 13 +++++++++++++ Documentation/_sass/custom/custom.scss | 23 ++++++++++++++++++++++- 3 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 Documentation/_includes/title.html diff --git a/Documentation/_config.yml b/Documentation/_config.yml index 90018ba..dbc4f7a 100644 --- a/Documentation/_config.yml +++ b/Documentation/_config.yml @@ -1,7 +1,8 @@ # SPDX-License-Identifier: CC0-1.0 # SPDX-FileCopyrightText: 2022 Alyssa Ross <hi@alyssa.is> --- -title: Spectrum Docs +title: Spectrum documentation +logo: "https://spectrum-os.org/logo/logo_html.svg" theme: just-the-docs aux_links: Home: diff --git a/Documentation/_includes/title.html b/Documentation/_includes/title.html new file mode 100644 index 0000000..90ef71b --- /dev/null +++ b/Documentation/_includes/title.html @@ -0,0 +1,13 @@ +{% comment %} +SPDX-License-Identifier: MIT +SPDX-FileCopyrightText: 2016 Patrick Marsceill +SPDX-FileCopyrightText: 2026 Valentin Gagarin <valentin@gagarin.work> + +Override of: https://github.com/just-the-docs/just-the-docs/blob/v0.10.1/_includes/title.... +{% endcomment %} +{% if site.logo %} + <div class="site-logo" role="img" aria-label="{{ site.title }}"></div> +{% endif %} +{% if site.title %} + {{ site.title }} +{% endif %} diff --git a/Documentation/_sass/custom/custom.scss b/Documentation/_sass/custom/custom.scss index fd5a676..48b1d41 100644 --- a/Documentation/_sass/custom/custom.scss +++ b/Documentation/_sass/custom/custom.scss @@ -1,5 +1,6 @@ -// SPDX-FileCopyrightText: 2022 Alyssa Ross <hi@alyssa.is> // SPDX-License-Identifier: MIT +// SPDX-FileCopyrightText: 2022 Alyssa Ross <hi@alyssa.is> +// SPDX-FileCopyrightText: 2026 Valentin Gagarin <valentin@gagarin.work> .main-content { // Just the Docs puts titles next to definitions, rather than on @@ -20,3 +21,23 @@ margin-left: 2ch; } } + +// Make the logo and title fit the site header. +.site-header { + .site-logo { + width: 3rem; + } + + // Just the Docs displays a sidebar at the "medium size" `md` breakpoint and above. + // Use the upstream `mq` media query mixin to target that breakpoint. + // https://just-the-docs.com/docs/utilities/responsive-modifiers/ + // https://github.com/just-the-docs/just-the-docs/blob/v0.10.1/_sass/support/mi... + @include mq(md) { + .site-logo { + width: 5.5rem; + } + .site-title { + font-size: 1.25rem !important; + } + } +} -- 2.51.2