sprite pour les logos des services

01-index.html

@@ -16,7 +16,7 @@ permalink: /
 		{% for service in category.services %}
 		<div class="un-service">
 			<p>
-				<a href="{{service.site}}" title="{{service.name}}"><img src="{{service.logo}}" class="thumbnail" alt="{{service.name}}"></a><br>
+				<a href="{{service.site}}" title="{{service.name}}"><i class="sprite sprite-{{service.logo}}"></i></a><br>
 				<span style="font-size:110%;"><a href="{{service.site}}">{{service.name}}</a></span>
 			</p>
 			<p>{{service.description}}</p>

_data/services.yml

@@ -3,14 +3,14 @@
   description: En production
   services:
   - name: Dates FACiLes
-    logo: /img/octicon-calendar.png
+    logo: octicon-calendar
     description: Plannifier des rendez-vous.
     instancede: <a href="https://framagit.org/framasoft/framadate/framadate/tags/1.1.4">Framadate</a>
     nonlibre: Doodle
     aide: https://gitlab.com/facil/dates-facil/issues
     site: https://date.facil.services
   - name: Ébauche FACiLe
-    logo: /img/fa-files-o.png
+    logo: fa-files-o
     description: Bureautique «légère» en mode collaboratif.
     instancede: <a href="https://github.com/xwiki-labs/cryptpad/releases/tag/2.11.0">Cryptpad</a>
     nonlibre: Google Docs, Office Online
@@ -20,105 +20,105 @@
   description: En préproduction
   services:
   - name: Ébauche FACiLe
-    logo: /img/fa-files-o.png
+    logo: fa-files-o
     description: Bureautique «légère» en mode collaboratif.
     instancede: <a href="https://github.com/xwiki-labs/cryptpad/releases/tag/2.11.0">Cryptpad</a>
     nonlibre: Google Docs, Office Online
     aide: https://gitlab.com/facil/notes-facil/issues
     site: https://cryptpad.facil.services
   - name: Notes FACiLes
-    logo: /img/fi-clipboard-notes.png
+    logo: fi-clipboard-notes
     description: Prendre des notes en mode collaboratif.
     instancede: <a href="https://github.com/ether/etherpad-lite/releases/tag/1.6.5">Etherpad</a>
     nonlibre: Google Docs, Word Online
     aide: https://gitlab.com/facil/notes-facil-etherpad/issues
     site: https://etherpad.facil.services
   - name: Recherche FACiLe
-    logo: /img/icomoon-search.png
+    logo: icomoon-search
     description: Rechercher sans se faire pister et profiler.
     instancede: <a href="https://github.com/asciimoo/searx/releases/tag/v0.14.0">Searx</a>
     nonlibre: Google.ca
     aide: https://gitlab.com/facil/recherche-facil/issues
     site: https://recherche.dev.facil.services
   - name: Extrait FACiLe
-    logo: /img/map-icon-locksmith.png
+    logo: map-icon-locksmith
     description: Chiffrer et partager des messages sur le web.
     instancede: <a href="https://github.com/PrivateBin/PrivateBin/releases/tag/1.1">Privatebin</a>
     nonlibre: Pastebin
     aide: https://gitlab.com/facil/crypto-facil/issues
     site: https://privatebin.dev.facil.services 
   - name: Dates FACiLes
-    logo: /img/octicon-calendar.png
+    logo: octicon-calendar
     description: Plannifier des rendez-vous.
     instancede: <a href="https://framagit.org/framasoft/framadate/framadate/tags/1.1.4">Framadate</a>
     nonlibre: Doodle
     aide: https://gitlab.com/facil/dates-facil/issues
     site: https://date.dev.facil.services
   - name: Minifi.ca (1)
-    logo: /img/icomoon-link.png
+    logo: icomoon-link
     description: Raccourcir («minifier») des liens.
     instancede: <a href="https://github.com/cydrobolt/polr/releases/tag/2.1.1">Polr</a>
     nonlibre: Bit.ly, Goo.gl
     aide: https://gitlab.com/facil/minifica-polr/issues
     site: https://polr.dev.facil.services
   - name: Minifi.ca (2)
-    logo: /img/icomoon-link.png
+    logo: icomoon-link
     description: Raccourcir («minifier») des liens. 
     instancede: <a href="https://framagit.org/luc/lstu/tags/0.08-2">Lstu</a>
     nonlibre: Bit.ly, Goo.gl 
     aide: https://gitlab.com/facil/minifica-lstu/issues
     site: https://lstu.dev.facil.services
   - name: Faux FACiLe
-    logo: /img/fi-alert.png
+    logo: fi-alert
     description: Fausser facilement
     instancede: <a href="https://gitlab.com/facil/faux-facil">Faux</a>
     nonlibre: Vrai
     aide: https://gitlab.com/facil/faux-facil/issues
     site: https://faux.facil.services
   - name: Lectures FACiLes
-    logo: /img/zocial-pocket.png
+    logo: zocial-pocket
     description: Sauvegarder et classer des articles pour lecture ultérieure.
     instancede: <a href="https://github.com/wallabag/wallabag/releases/tag/2.2.3">Wallabag</a>
     nonlibre: Pocket
     aide: https://gitlab.com/facil/lecture-facil/issues
     site: https://lectures.dev.facil.services
   - name: Radio FACiLe
-    logo: /img/octicon-radio-tower.png
+    logo: octicon-radio-tower
     description: Écouter la radio du libre de FACiL.
     instancede: <a href="https://github.com/ampache/ampache/releases/tag/3.8.2">Ampache</a>
     nonlibre: Spotify, Last.fm
     aide: https://gitlab.com/facil/radio-facil/issues
     site: https://ampache.dev.facil.services
   - name: Parlote FACiLe
-    logo: /img/owi-diaspora.png
+    logo: owi-diaspora
     description: Échanger sur une réseau social dont vous n'êtes pas le produit.
     instancede: <a href="https://github.com/diaspora/diaspora/releases/tag/v0.7.2.1">Diaspora</a>
     nonlibre: Facebook, Google+, Twitter
     aide: https://gitlab.com/facil/diaspora/issues
     site: https://diaspora.dev.facil.services
   - name: Jasette FACiLe
-    logo: /img/mastodon.png
+    logo: mastodon
     description: Échanger sur un réseau social dont vous n'êtes pas le produit.
     instancede: <a href="https://github.com/tootsuite/mastodon/releases/tag/v2.2.0">Mastodon</a>
     nonlibre: Twitter
     aide: https://gitlab.com/facil/rezo-facil/issues
     site: https://rezo.dev.facil.services
   - name: Cartes FACiLes
-    logo: /img/fa-globe.png
+    logo: fa-globe
     description: Monter et partager des cartes géographiques.
     instancede: <a href="https://github.com/umap-project/umap/releases/tag/0.8.2">Umap</a>
     nonlibre: Google My Maps, Bing Maps, Apple Maps
     aide: https://gitlab.com/facil/cartes-facil/issues
     site: https://umap.dev.facil.services
   - name: Transferts FACiLes (1)
-    logo: /img/oi-transfer.png
+    logo: oi-transfer
     description: Transférer des fichiers trop gros pour être simplement joints à vos courriels. 
     instancede: <a href="https://github.com/ldidry/lufi/releases/tag/0.02.2">Lufi</a>
     nonlibre: WeTransfer, DropBox 
     aide: https://gitlab.com/facil/transferts-facil/issues
     site: https://lufi.dev.facil.services
   - name: Projets FACiLes
-    logo: /img/mi-developer-board.png
+    logo: mi-developer-board
     description: Gérer vos projets selon la méthode Kanban.
     instancede: <a href="https://github.com/kanboard/kanboard/releases/tag/v1.0.46">Kanboard</a>
     nonlibre: Trello
@@ -128,77 +128,77 @@
   description: En développement
   services:
   - name: Appels FACiLes
-    logo: /img/mfizz-phone-alt.png
+    logo: mfizz-phone-alt
     description: Tenir des séances de visioconférence avec messagerie texte, édition collaborative et partage d'écran.
     instancede: <a href="https://github.com/jitsi/jitsi-meet/releases/tag/jitsi-meet_2467">Jitsi Meet</a>
     nonlibre: Hangout, Skype, FaceTime, WhatsApp
     aide: https://gitlab.com/facil/appels-facil/issues
     site: https://appels.dev.facil.services
   - name: Crypto FACiLe
-    logo: /img/zocial-email.png
+    logo: zocial-email
     description: Envoyer des messages chiffrés via PGP.
     instancede: <a href="https://github.com/encrypt-to/encrypt.to/releases/tag/v1.0">Encryptto</a>
     nonlibre:
     aide:
     site: https://encryptto.dev.facil.services
   - name: Boutique du libre du Québec
-    logo: /img/fa-shopping-bag.png
+    logo: fa-shopping-bag
     description: Magasiner dans la boutique commune de FACiL, LinuQ, etc.
     instancede: <a href="https://github.com/PrestaShop/PrestaShop/releases/tag/1.6.1.12">Prestashop</a>
     nonlibre:
     aide:
     site: https://prestashop.dev.facil.services
   - name: Forums du libre du Québec
-    logo: /img/forumdulibreqc.png
+    logo: forumdulibreqc
     description: Discuter du libre de manière civilisée.
     instancede: <a href="https://github.com/discourse/discourse/releases/tag/v2.0.0.beta1">Discourse</a>
     nonlibre: Groupes Facebook ou Google
     aide: 
     site: https://forumsdulibre.quebec
   - name: Actus FACiLes
-    logo: /img/fa-newspaper-o.png
+    logo: fa-newspaper-o
     description: Rassembler tous vos fils d'actualité au même endroit.
     instancede: <a href="https://github.com/miniflux/miniflux/releases/tag/v1.2.3">Miniflux</a>
     nonlibre:
     aide:
     site: https://miniflux.dev.facil.services 
   - name: Médias FACiLes
-    logo: /img/icomoon-images.png
+    logo: icomoon-images
     description: Partager des médias.
     instancede: <a href="https://git.savannah.gnu.org/cgit/mediagoblin.git/tag/?h=v0.9.0">Media Goblin</a>
     nonlibre: Instagram, Flick, Youtube
     aide:
     site: https://mediagoblin.dev.facil.services
   - name: Vitesse FACiLe
-    logo: /img/ion-speedometer.png
+    logo: ion-speedometer
     description: Mesurer la performance de votre site web.
     instancede: <a href="https://github.com/gmetais/YellowLabTools/releases/tag/v1.12.0">Yellow Lab Tools</a>
     nonlibre:
     aide:
     site: https://vitesse.dev.facil.services
   - name: Installation FACiLe
-    logo: /img/octicon-package.png
+    logo: octicon-package
     description: Installer des logiciels libres pour Windows de manière sécurisée et efficace.
     instancede: <a href="https://framagit.org/framasoft/framapack/">Framapack</a>
     nonlibre: 
     aide:
     site: https://installation.dev.facil.services
   - name: Transferts FACiLes (2)
-    logo: /img/oi-transfer.png
+    logo: oi-transfer
     description: Transférer des fichiers trop gros pour être simplement joints à vos courriels.
     instancede: <a href="https://github.com/webtorrent/instant.io">Instant.io</a>
     nonlibre: WeTransfer, DropBox
     aide:
     site: https://reepio.dev.facil.services
   - name: Albums FACiLes
-    logo: /img/mi-photo-camera.png
+    logo: mi-photo-camera
     description: Gérer facilement vos albums photos.
     instancede: <a href="https://github.com/Piwigo/Piwigo/releases/tag/2.9.2">Piwigo</a>
     nonlibre: Flickr, Instagram, Google Photos 
     aide:
     site: https://albums.dev.facil.services
   - name: Tube FACiLe
-    logo: /img/mi-ondemand-video.png
+    logo: mi-ondemand-video
     description: Partage de vidéos
     instancede: <a href="https://github.com/Chocobozzz/PeerTube/releases/tag/v1.0.0-beta.3">PeerTube</a>
     nonlibre: YouTube
@@ -208,21 +208,21 @@
   description: Pour l'administration
   services:
   - name: Stats FACiLes
-    logo: /img/icomoon-stats-dots.png
+    logo: icomoon-stats-dots
     description: Analyser le trafic de vos sites en respectant la vie privée des visiteurs.
     instancede: <a href="https://github.com/matomo-org/matomo/releases/tag/3.7.0">Matomo</a>
     nonlibre: Google Analytics
     aide:
     site: https://stats.facil.services
   - name: Pouls FACiLe
-    logo: /img/fa-heartbeat.png
+    logo: fa-heartbeat
     description: Suivre l'état des systèmes qui fournissent les Services FACiLes.
     instancede: <a href="https://github.com/CachetHQ/Cachet/releases/tag/v2.3.13">Cachet</a>
     nonlibre: Statuspage
     aide:
     site: https://poulx.dev.facil.services
   - name: Nuage FACiLe
-    logo: /img/icomoon-cloud.png
+    logo: icomoon-cloud
     description: Partager des fichiers, des calendriers, des contacts, etc.
     instancede: <a href="https://nextcloud.com/changelog/">NextCloud</a>
     nonlibre:

css/style.css

-*************** Couleurs ****************/
+/*************** Couleurs ****************/
 /*
 Bleu FACiLe : #49c4ed; - hover : #38b7e0;
 Rouge FACiLe : #e22537; - hover : #dc1e30;
@@ -40,6 +40,181 @@ Rouge FACiLe : #e22537; - hover : #dc1e30;
       font-weight: normal;
       font-style: normal;
 }
+/**************** Sprite *****************/
+/* Généré avec Stiches (https://github.com/draeton/stitches) */
+.sprite {
+    background-image: url(../img/spritesheet.png);
+    background-repeat: no-repeat;
+    display: block;
+}
+
+.sprite-100x100 {
+    width: 100px;
+    height: 100px;
+    background-position: -5px -5px;
+}
+
+.sprite-fa-files-o {
+    width: 100px;
+    height: 100px;
+    background-position: -115px -5px;
+}
+
+.sprite-fa-globe {
+    width: 100px;
+    height: 100px;
+    background-position: -225px -5px;
+}
+
+.sprite-fa-heartbeat {
+    width: 100px;
+    height: 100px;
+    background-position: -335px -5px;
+}
+
+.sprite-fa-newspaper-o {
+    width: 100px;
+    height: 100px;
+    background-position: -445px -5px;
+}
+
+.sprite-fa-shopping-bag {
+    width: 100px;
+    height: 100px;
+    background-position: -5px -115px;
+}
+
+.sprite-fi-alert {
+    width: 100px;
+    height: 100px;
+    background-position: -115px -115px;
+}
+
+.sprite-fi-clipboard-notes {
+    width: 100px;
+    height: 100px;
+    background-position: -225px -115px;
+}
+
+.sprite-forumdulibreqc {
+    width: 100px;
+    height: 100px;
+    background-position: -335px -115px;
+}
+
+.sprite-icomoon-cloud {
+    width: 100px;
+    height: 100px;
+    background-position: -445px -115px;
+}
+
+.sprite-icomoon-images {
+    width: 100px;
+    height: 100px;
+    background-position: -5px -225px;
+}
+
+.sprite-icomoon-link {
+    width: 100px;
+    height: 100px;
+    background-position: -115px -225px;
+}
+
+.sprite-icomoon-search {
+    width: 100px;
+    height: 100px;
+    background-position: -225px -225px;
+}
+
+.sprite-icomoon-stats-dots {
+    width: 100px;
+    height: 100px;
+    background-position: -335px -225px;
+}
+
+.sprite-ion-speedometer {
+    width: 100px;
+    height: 100px;
+    background-position: -445px -225px;
+}
+
+.sprite-map-icon-locksmith {
+    width: 100px;
+    height: 100px;
+    background-position: -5px -335px;
+}
+
+.sprite-mastodon {
+    width: 100px;
+    height: 100px;
+    background-position: -115px -335px;
+}
+
+.sprite-mfizz-phone-alt {
+    width: 100px;
+    height: 100px;
+    background-position: -225px -335px;
+}
+
+.sprite-mi-developer-board {
+    width: 100px;
+    height: 100px;
+    background-position: -335px -335px;
+}
+
+.sprite-mi-ondemand-video {
+    width: 100px;
+    height: 100px;
+    background-position: -445px -335px;
+}
+
+.sprite-mi-photo-camera {
+    width: 100px;
+    height: 100px;
+    background-position: -5px -445px;
+}
+
+.sprite-octicon-calendar {
+    width: 100px;
+    height: 100px;
+    background-position: -115px -445px;
+}
+
+.sprite-octicon-package {
+    width: 100px;
+    height: 100px;
+    background-position: -225px -445px;
+}
+
+.sprite-octicon-radio-tower {
+    width: 100px;
+    height: 100px;
+    background-position: -335px -445px;
+}
+
+.sprite-oi-transfer {
+    width: 100px;
+    height: 100px;
+    background-position: -445px -445px;
+}
+
+.sprite-owi-diaspora {
+    width: 100px;
+    height: 100px;
+    background-position: -555px -5px;
+}
+
+.sprite-zocial-email {
+    width: 100px;
+    height: 100px;
+    background-position: -555px -115px;
+}
+
+.sprite-zocial-pocket {
+    width: 100px;
+    height: 100px;
+    background-position: -555px -225px;
+}
 /**************** Global *****************/
 body {
   margin: 0;

css/style.n.css

@@ -40,6 +40,181 @@ Rouge FACiLe : #e22537; - hover : #dc1e30;
       font-weight: normal;
       font-style: normal;
 }
+/**************** Sprite *****************/
+/* Généré avec Stiches (https://github.com/draeton/stitches) */
+.sprite {
+    background-image: url(../img/spritesheet.png);
+    background-repeat: no-repeat;
+    display: block;
+}
+
+.sprite-100x100 {
+    width: 100px;
+    height: 100px;
+    background-position: -5px -5px;
+}
+
+.sprite-fa-files-o {
+    width: 100px;
+    height: 100px;
+    background-position: -115px -5px;
+}
+
+.sprite-fa-globe {
+    width: 100px;
+    height: 100px;
+    background-position: -225px -5px;
+}
+
+.sprite-fa-heartbeat {
+    width: 100px;
+    height: 100px;
+    background-position: -335px -5px;
+}
+
+.sprite-fa-newspaper-o {
+    width: 100px;
+    height: 100px;
+    background-position: -445px -5px;
+}
+
+.sprite-fa-shopping-bag {
+    width: 100px;
+    height: 100px;
+    background-position: -5px -115px;
+}
+
+.sprite-fi-alert {
+    width: 100px;
+    height: 100px;
+    background-position: -115px -115px;
+}
+
+.sprite-fi-clipboard-notes {
+    width: 100px;
+    height: 100px;
+    background-position: -225px -115px;
+}
+
+.sprite-forumdulibreqc {
+    width: 100px;
+    height: 100px;
+    background-position: -335px -115px;
+}
+
+.sprite-icomoon-cloud {
+    width: 100px;
+    height: 100px;
+    background-position: -445px -115px;
+}
+
+.sprite-icomoon-images {
+    width: 100px;
+    height: 100px;
+    background-position: -5px -225px;
+}
+
+.sprite-icomoon-link {
+    width: 100px;
+    height: 100px;
+    background-position: -115px -225px;
+}
+
+.sprite-icomoon-search {
+    width: 100px;
+    height: 100px;
+    background-position: -225px -225px;
+}
+
+.sprite-icomoon-stats-dots {
+    width: 100px;
+    height: 100px;
+    background-position: -335px -225px;
+}
+
+.sprite-ion-speedometer {
+    width: 100px;
+    height: 100px;
+    background-position: -445px -225px;
+}
+
+.sprite-map-icon-locksmith {
+    width: 100px;
+    height: 100px;
+    background-position: -5px -335px;
+}
+
+.sprite-mastodon {
+    width: 100px;
+    height: 100px;
+    background-position: -115px -335px;
+}
+
+.sprite-mfizz-phone-alt {
+    width: 100px;
+    height: 100px;
+    background-position: -225px -335px;
+}
+
+.sprite-mi-developer-board {
+    width: 100px;
+    height: 100px;
+    background-position: -335px -335px;
+}
+
+.sprite-mi-ondemand-video {
+    width: 100px;
+    height: 100px;
+    background-position: -445px -335px;
+}
+
+.sprite-mi-photo-camera {
+    width: 100px;
+    height: 100px;
+    background-position: -5px -445px;
+}
+
+.sprite-octicon-calendar {
+    width: 100px;
+    height: 100px;
+    background-position: -115px -445px;
+}
+
+.sprite-octicon-package {
+    width: 100px;
+    height: 100px;
+    background-position: -225px -445px;
+}
+
+.sprite-octicon-radio-tower {
+    width: 100px;
+    height: 100px;
+    background-position: -335px -445px;
+}
+
+.sprite-oi-transfer {
+    width: 100px;
+    height: 100px;
+    background-position: -445px -445px;
+}
+
+.sprite-owi-diaspora {
+    width: 100px;
+    height: 100px;
+    background-position: -555px -5px;
+}
+
+.sprite-zocial-email {
+    width: 100px;
+    height: 100px;
+    background-position: -555px -115px;
+}
+
+.sprite-zocial-pocket {
+    width: 100px;
+    height: 100px;
+    background-position: -555px -225px;
+}
 /**************** Global *****************/
 body {
   background-color:#222;