[Design-devel] Homepage banner, translatable? (was: Re: Now in master! new homepage of www.debian.org (publish date today))

[Laura Arjona Reina]

Hi Baptiste

CC'ing debian-www and design-devel mailing lists, for the case somebody
has better ideas than mine.

El 18/12/20 a las 14:39, Baptiste Jammet escribió:
> Hi all, 
> 
> Dixit Laura Arjona Reina, le 17/12/2020 :
>> Thanks for all the reviews and translations!
> 
> Thanks for your work.
> Is the banner translatable ? Could we make it translatable ? (or
> this means serve as many images as alvailable languages).
> 
> Sorry if this has been already asked somewhere else.
> 
> Baptiste
> 

Currently the banner is shown using 2 images, usually one for the
background, and another for the "Debian - The universal operating
system" (motto):

https://www.debian.org/Pics/futureprototype-bg.png
https://www.debian.org/Pics/futureprototype.png

We split like this because there is some CSS "magic" (I say magic
because I don't understand it well, but it works), that make the
background use all the width, and "Debian" and the motto to be shown
centred no matter the size of the screen:

#splash {
	background-image: url('Pics/futureprototype-bg.png');
	background-position:top center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-top: 0;
	margin-bottom: 1.5em;
	text-align: center;
	overflow: hidden;
	height: 120px;
}
#splash h1 {
	background-image: url('Pics/futureprototype.png');
	background-position:top center;
	padding-top:130px;
	overflow:hidden;
	text-align:center;
	background-repeat:no-repeat;
	display:block;
	margin:0;
	height:0;

Source code for the CSS is here:

https://salsa.debian.org/webmaster-team/webwml/-/blob/master/english/debhome.css

We "create" these two images using the SVG provided by the theme creator
(editing it with Inkscape to split the two images and exporting them to
png). We probably should find the way to do it better (maybe to just
keep the "Debian" from the banner provided by the designer, and place
ourselves the translatable motto with CSS in the correct place over the
2 images) but somebody should step ahead to do the work.

Another way is, as you say, that each language team provides the .png
for the front, already translated (the work would consist on taking the
SVG from the wiki, editing it with Inkscape to split the two images, and
translate the text in Inkscape, and then export to png). We could place
the corresponding CSS in the debian-xx.css file for the languages that
provide such images.

Kind regards,
-- 
Laura Arjona Reina
https://wiki.debian.org/LauraArjona