Hi all
I've committed a change in the English version of the new homepage, changing the
icons to svg files taken from font-fork-awesome and material.io.
See the commit below, and you can see the result in
https://debian-newhomepage.larjona.net/index.en.html
Some comments:
0.- all the icons used are from fork-awesome set of icons (CC-By
3.0/OFL-1.1/Expat), except "security" which is taken from material design icons
from Google ( Apache License Version 2.0. )
https://salsa.debian.org/fonts-team/fonts-fork-awesome
https://material.io/design/iconography/
https://github.com/google/material-design-icons/
1.- fonts-fork-awesome is packaged in Debian and I have installed locally but I
don't know how to make it work. When I install the package in my local computer,
the corresponding CSS is installed in:
/usr/share/fonts-fork-awesome/css/fork-awesome.css
but I don't know how to reference it from the webwml tree. I tried to copy the
css file to /webwml/english and update /english/template/basic.wml to reference
it, but I don't see the icons, just a square with the Unicode code.
Upstream documentation says to put the whole fork-awesome folder in the web
tree, but I don't know if, having the Debian package around, there is a better
way.
So, for now, what I have done is to copy the SVG files (from the salsa
fonts-fork-awesome repo, or the material.io in the /english/Pics folder), and
add them as usual images to the index.wml file.
This is the reason why I didn't sync the translations: if we find out how to use
the CSS and the notation, I think that would be
the best.
2.- When I copied the svg files from the source repos, I found out that the
image was cropped because in some icons, it was bigger the image than the
document size. So I edited all the svg files with Inkscape (in Debian buster)
and set a paper size of 540 px width per 406,3 px height, and resized all
the images to have 400,000 mm height (their proportional width), and aligned it
centering it vertically and horizontally.
3.- I didn't change anything in the CSS so maybe an adjustement of columns/divs
height/width is needed.
4.- I'm not very confident about using the "trophy" icon for "why Debian", nor
the "shield" icon for "security".
On one side, I would like to use all the icons from Fork-Awesome package, but I
couldn't find anything suitable for "why debian" there, only the trophy, and for
"security" (only a wrench, but even less confident).
On the other side, in material.io I like the shield that is used for security
now, and the "loyalty tag" for "why Debian":
https://material.io/resources/icons/?icon=loyalty=baseline
5.- there are two packages for material icons in Debian, but I couldn't find the
svg files in their salsa repos. I installed and I can add icons as "special
characters" in LibreOffice, for example, but I don't know how it would be to
make them work from the web.
https://salsa.debian.org/openstack-team/third-party/fonts-materialdesignicons-webfont
https://salsa.debian.org/hmc-guest/fonts-material-design-icons-iconfont/
In addition to this, I could find the shield icon there, but not the "loyalty"
icon (I guess it's from a new version upstream and thus, not packaged yet).
This is what I've could done for now. Opinions and help welcome.
Kind regards
---- Mensaje reenviado ----
Asunto: [Git][webmaster-team/webwml][new-homepage] add icons from
font-fork-awesome (except security which is from material.io) - WIP Bug #944301
Fecha: Thu, 12 Dec 2019 12:51:11 +
De: Laura Arjona Reina
Responder a:nore...@salsa.debian.org
Para: dispatch+www.debian.org_...@tracker.debian.org
GitLab
Laura Arjona Reina pushed to branch new-homepage at Debian Webmaster Team
/ webwml <https://salsa.debian.org/webmaster-team/webwml>
Commits:
* *41f124fc
<https://salsa.debian.org/webmaster-team/webwml/commit/41f124fc72ae111dcd33b98955393a284b94dcc9>*
by Laura Arjona Reina /at 2019-12-12T12:36:04Z/
add icons from font-fork-awesome (except security which is from material.io)
- WIP Bug #944301
8 changed files:
* + english/Pics/heartbeat.svg <#2019f920a78d4f74e335db2a163a0a1366b08163>
* + english/Pics/life-ring.svg <#3af0908fe718ff70cc0c45fbadaa93871fbf2a45>
* + english/Pics/list.svg <#816dc4a7f6409066cfd85c15b2a06f4eb2b4ce9b>
* + english/Pics/security.svg <#4a8d5b4627f2ff7e7a797c0e71cf78bbba486796>
* + english/Pics/trophy.svg <#bc4bc735b2c032944b5efd4632cb8d8b6eec9d7c>
* + english/Pics/user-plus.svg <#ea1d23980f0ee11b2ee0a1169612b7cab20947fb>
* + english/Pics/users.svg <#c2b355beceddb33571e707fdcc589b708700d632>
* english/index.wml <#dd196063e7cb2523baa15610bbb33e61f8099ad1>
