<div dir="ltr"><div>Debian  Det universella operativsystemet for Swedish<br></div><div><br></div><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Fri, Dec 18, 2020 at 8:41 PM Laura Arjona Reina <<a href="mailto:larjona@debian.org">larjona@debian.org</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">Hi Baptiste<br>
<br>
CC'ing debian-www and design-devel mailing lists, for the case somebody<br>
has better ideas than mine.<br>
<br>
El 18/12/20 a las 14:39, Baptiste Jammet escribió:<br>
> Hi all, <br>
> <br>
> Dixit Laura Arjona Reina, le 17/12/2020 :<br>
>> Thanks for all the reviews and translations!<br>
> <br>
> Thanks for your work.<br>
> Is the banner translatable ? Could we make it translatable ? (or<br>
> this means serve as many images as alvailable languages).<br>
> <br>
> Sorry if this has been already asked somewhere else.<br>
> <br>
> Baptiste<br>
> <br>
<br>
Currently the banner is shown using 2 images, usually one for the<br>
background, and another for the "Debian - The universal operating<br>
system" (motto):<br>
<br>
<a href="https://www.debian.org/Pics/futureprototype-bg.png" rel="noreferrer" target="_blank">https://www.debian.org/Pics/futureprototype-bg.png</a><br>
<a href="https://www.debian.org/Pics/futureprototype.png" rel="noreferrer" target="_blank">https://www.debian.org/Pics/futureprototype.png</a><br>
<br>
We split like this because there is some CSS "magic" (I say magic<br>
because I don't understand it well, but it works), that make the<br>
background use all the width, and "Debian" and the motto to be shown<br>
centred no matter the size of the screen:<br>
<br>
#splash {<br>
        background-image: url('Pics/futureprototype-bg.png');<br>
        background-position:top center;<br>
        background-repeat: no-repeat;<br>
        background-size: cover;<br>
        margin-top: 0;<br>
        margin-bottom: 1.5em;<br>
        text-align: center;<br>
        overflow: hidden;<br>
        height: 120px;<br>
}<br>
#splash h1 {<br>
        background-image: url('Pics/futureprototype.png');<br>
        background-position:top center;<br>
        padding-top:130px;<br>
        overflow:hidden;<br>
        text-align:center;<br>
        background-repeat:no-repeat;<br>
        display:block;<br>
        margin:0;<br>
        height:0;<br>
<br>
Source code for the CSS is here:<br>
<br>
<a href="https://salsa.debian.org/webmaster-team/webwml/-/blob/master/english/debhome.css" rel="noreferrer" target="_blank">https://salsa.debian.org/webmaster-team/webwml/-/blob/master/english/debhome.css</a><br>
<br>
We "create" these two images using the SVG provided by the theme creator<br>
(editing it with Inkscape to split the two images and exporting them to<br>
png). We probably should find the way to do it better (maybe to just<br>
keep the "Debian" from the banner provided by the designer, and place<br>
ourselves the translatable motto with CSS in the correct place over the<br>
2 images) but somebody should step ahead to do the work.<br>
<br>
Another way is, as you say, that each language team provides the .png<br>
for the front, already translated (the work would consist on taking the<br>
SVG from the wiki, editing it with Inkscape to split the two images, and<br>
translate the text in Inkscape, and then export to png). We could place<br>
the corresponding CSS in the debian-xx.css file for the languages that<br>
provide such images.<br>
<br>
Kind regards,<br>
-- <br>
Laura Arjona Reina<br>
<a href="https://wiki.debian.org/LauraArjona" rel="noreferrer" target="_blank">https://wiki.debian.org/LauraArjona</a><br>
<br>
</blockquote></div></div>