Re: [PATCH v4] Documentation: add logo to site header

[Alyssa Ross <hi@alyssa.is>]

[-- Attachment #1: Type: text/plain, Size: 3050 bytes --]

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/f43d7cfc4b1e18a97e6d6d20b88f1aaeda0e7196/_includes/title.html
>
> 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.

Really this is reinforcing to me that we need a version of the logo that
includes the name.  We need that in other contexts too, and here it
would avoid the need to make changes to Just The Docs.  Up to you
whether it's better to wait for that or to do it this way in the
meantime.  I think it would also be fine if just the homepage of the
documentation included the logo in its content.

> +  .site-logo {
> +    width: 5.5rem;
> +  }
> +  .site-title {
> +    font-size: 1.25rem !important;
> +  }
> +}

[-- Attachment #2: signature.asc --]
[-- Type: application/pgp-signature, Size: 227 bytes --]