[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [libreoffice-website] Language changer implemented on LibreOffice website


Mike Saunders kirjoitti 10.2.2020 klo 16.41:
Hello everyone,

I've implemented the language changer banner at the top of the
LibreOffice website:

https://www.libreoffice.org

Thanks to Jean Spiteri for his help. The goal here is to make visitors
aware that the website is available in different languages. (We get
emails asking why the site is only in English...)

IMO it looks good, but I've noticed one thing -- it causes a slight
misalignment with some content. For instance:

https://www.libreoffice.org/community/get-involved/#docs

With the language changer, the green LibreOffice banner now slightly
overwrites the "Documentation" header. Does anyone know a way to fix
this, apart from manually updating the padding like so:

<a style="display: block; position: relative; top: -3em;" name="docs">

The root problem is that we use a fixed header. This has always caused problems, for example when linking to mailing list anchors in https://www.libreoffice.org/get-help/mailing-lists/

There is a newish CSS property called scroll-padding. It relates to scroll snapping points. In this case it could be used to style the html element like

html {
scroll-padding-top: 40px;
}

Or a similar value that produces the desired result.

Browser support is not complete, but at least it would help most visitors and it is a very simple change.

https://caniuse.com/#search=scroll-padding

Btw. I would disable the fixed header on mobile as it takes too much space (now even more so).

Ilmari

--
To unsubscribe e-mail to: website+unsubscribe@global.libreoffice.org
Problems? https://www.libreoffice.org/get-help/mailing-lists/how-to-unsubscribe/
Posting guidelines + more: https://wiki.documentfoundation.org/Netiquette
List archive: https://listarchives.libreoffice.org/global/website/
Privacy Policy: https://www.documentfoundation.org/privacy

Follow-Ups:
Re: [libreoffice-website] Language changer implemented on LibreOffice websiteMike Saunders <mike.saunders@documentfoundation.org>
References:
[libreoffice-website] Language changer implemented on LibreOffice websiteMike Saunders <mike.saunders@documentfoundation.org>
Privacy Policy | Impressum (Legal Info) | Copyright information: Unless otherwise specified, all text and images on this website are licensed under the Creative Commons Attribution-Share Alike 3.0 License. This does not include the source code of LibreOffice, which is licensed under the Mozilla Public License (MPLv2). "LibreOffice" and "The Document Foundation" are registered trademarks of their corresponding registered owners or are in actual use as trademarks in one or more countries. Their respective logos and icons are also subject to international copyright laws. Use thereof is explained in our trademark policy.