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

2020-12-20 Thread Luna Jernberg
Debian Det universella operativsystemet for Swedish

On Fri, Dec 18, 2020 at 8:41 PM Laura Arjona Reina 
wrote:

> 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
>
>


Re: Homepage banner, translatable?

2020-12-18 Thread victory
On Fri, 18 Dec 2020 20:40:57 +0100
Laura Arjona Reina wrote:

> El 18/12/20 a las 14:39, Baptiste Jammet escribió:
> > Is the banner translatable ? Could we make it translatable ? (or
> > this means serve as many images as alvailable languages).

> 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.

tested using firefox 84 (win10/64bit);
erase the phrase from the image and tweak css like:

#splash h1:{
  padding-top:85px;
  color: white;
}
#splash h1::after{
  content: " - The universal operating system";
}

then, translators can use debian-.css:
html[lang=] #splash h1::after{
  content: " - ";
}

I don't understand at all why the h1 have "Debian" only, though,
this way (using :after pseudo class) selecting the content area doesn't grab 
the 
" - The universal operating system" stanza as the current 
(I don't care which font to use)

-- 
victory
no need to CC me :-)