Alyssa Ross <hi@alyssa.is> writes:
Valentin Gagarin <valentin@gagarin.work> writes:
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.
[title template]: https://github.com/just-the-docs/just-the-docs/blob/f43d7cfc4b1e18a97e6d6d20...
Signed-off-by: Valentin Gagarin <valentin@gagarin.work> --- Documentation/_config.yml | 3 ++- Documentation/_includes/title.html | 11 +++++++++++ Documentation/_sass/custom/custom.scss | 13 +++++++++++++ 3 files changed, 26 insertions(+), 1 deletion(-) 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..0b36987 --- /dev/null +++ b/Documentation/_includes/title.html @@ -0,0 +1,11 @@ +{% comment %} +SPDX-License-Identifier: MIT +SPDX-FileCopyrightText: 2016 Patrick Marsceill +SPDX-FileCopyrightText: 2026 Valentin Gagarin <valentin@gagarin.work> +{% 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..75e3f16 100644 --- a/Documentation/_sass/custom/custom.scss +++ b/Documentation/_sass/custom/custom.scss @@ -20,3 +20,16 @@ margin-left: 2ch; } } + +.site-logo { + width: 3rem; +} + +@media (min-width: 50rem) {
Took me a while to understand what was significant about 50rem here. We have access to the same SCSS mixins just-the-docs itself uses, so we could use them rather than hardcoding a magic number that might get out of sync:
@include mq(md) {
I also noticed that if I hover over the .site-title in a viewport wider than 50rem, its background becomes opaque and reveals that it's overflowing the sidebar.
Ignore this part. After re-applying the patch and restarting Jekyll I can't get it to happen again…