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