Broken page layout in German

[pyrog]

Hi,

The layout is broken in German DE and DE-AT:

Also, the translation don't seem up to date 🤔

[loleg]

Need help?

[StephenAbbott]

@loleg If you would be able to submit a shorter translation of the text here, that would be greatly appreciated

[loleg]

I've looked at the broken layout issues in several of the languages. The optimal length of text changes between screen-size breakpoints, and I would suggest that we consider adding a vertical overflow rule to the left-hand paragraph:

#what .about {
    overflow-y: auto;
    overflow-x: hidden;
}

Which would look like this:

Not quite optimal from a usability point of view, but again the text fits fine on my full-screen browser or mobile view, and I think it's a better solution than trying to hammer down the content across several languages.

An alternative design fix would be to remove the fixed height in this part of the page, letting both left and right columns take up as much space as they need.

Speaking of the right-hand side: here the design blocks us from any scrolling. It is problematic that in German you have three lines of text for the thematic areas. In my screenshot I've greatly reduced the amount of text, and will submit a PR with this suggestion.

[loleg]

One more thing a native German speaker commented on is the capitalization of the very top text of the page ("You Are Invited!" / "Du Bist Eingeladen!"), which is problematic in languages like this one which take offense at false capitalization. It would be best if this was controlled by the translator, however this line in _home.scss forces it in every language:

& > a { ... h1 {
 text-transform: capitalize;

[pyrog]

One more thing a native German speaker commented on is the capitalization of the very top text of the page

👍 This is problematic too in french 😉

[chris48s]

Hi. Thanks for the feedback on these. I've just pushed a couple of changes.

Firstly I've removed the text-transform: capitalize; so this can now be handled in an appropriately language-sensitive way by translators.

Secondly I've increased the height of this so it is tall enough to accommodate the longest text we've got (currently Russian):

this leaves us with a lot of vertical space for terser languages though.

Tbh I'm not 100% convinced this fixed-height/diagonal layout is buying us that much. Given one of the characteristics of the site is that it needs to accomodate text of dramtically varying heights here maybe it would be better to drop this design and use a layout which responds better to the size of text e.g:

Lets quickly catch up on this next time we speak @StephenAbbott

[StephenAbbott]

Thanks @chris48s. Let's chat about this

[StephenAbbott]

@chris48s' changes are now live which has fixed this issue