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 <i class="fa fa-whatever"></i> 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,39999 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&style=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 +0000 De: Laura Arjona Reina <git...@salsa.debian.org> 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>
