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

[Alyssa Ross <hi@alyssa.is>]

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

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/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.

Ignore this part.  After re-applying the patch and restarting Jekyll I
can't get it to happen again…

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