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+unsubscr...@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