jpg to webp, fix styles and max image width

assets/fonts.css

@@ -1,3 +1,8 @@
+.nuxt-content img {
+  max-width: min(100%, 400px);
+  height: auto;
+}
+
 .lecture-title,
 .nuxt-content h1,
 .nuxt-content h2,
@@ -38,6 +43,11 @@
   font-size: 15px !important;
 }
 
+.nuxt-content ul {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
 .nuxt-content p,
 .lecture-text {
   text-align: justify;

components/BCard.vue

@@ -74,7 +74,6 @@ export default {
   margin-bottom: 3px;
 }
 .b-card p {
-  margin: 0;
   color: var(--v-text-base);
 }
 .b-card .v-card__actions button {

content/blog-posts/accord-entre-maps-et-blablacar.md

@@ -1,7 +1,7 @@
 ---
 title: "Google Maps affiche désormais les trajets BlaBlaCar"
 description: "Google Maps affiche désormais les trajets BlaBlaCar"
-banner: /img/articles/accord-entre-maps-et-blablacar/accord-entre-maps-et-blablacar.jpg
+banner: /img/articles/accord-entre-maps-et-blablacar/accord-entre-maps-et-blablacar.webp
 type: flash
 authorId: theovld
 category: software

content/blog-posts/android-o.md

@@ -1,7 +1,7 @@
 ---
 title: "Android O : OS prometteur ?"
 description: "Google a dévoilé un nouvel OS en Developer Preview : vaut-il le coup ?"
-banner: /img/articles/android-o/android-o.jpg
+banner: /img/articles/android-o/android-o.webp
 type: article
 authorId: theovld
 category: android

content/blog-posts/android-oreo.md

@@ -15,6 +15,6 @@ timestamp: 1503341729
 
  Pour rappel, un **Oreo** est un biscuit chocolaté se composant de 2 plaquettes rondes avec au centre de la crème, et qui existe en version Chocolat blanc, Caramel et d'autres.
 
- ![](/img/articles/android-oreo/oreo.jpg)
+ ![](/img/articles/android-oreo/oreo.webp)
 
  Un petit rappel, pour connaître les nouvelles fonctionnalités d’Android Oreo, **nous vous invitons à [lire cet article](https://becauseofprog.fr/blog/android-o-8) disponible sur la BecauseOfProg, par Exybore.**

content/blog-posts/brave-open-source.md

@@ -1,7 +1,7 @@
 ---
 title: "Brave, un navigateur rapide basé sur Chromium !"
 description: "Rapide, sécurisé, bloqueur de pub intégré, open source et disponible sur tous vos appareils !"
-banner: /img/articles/brave-open-source/brave.jpg
+banner: /img/articles/brave-open-source/brave.webp
 type: article
 authorId: kernoeb
 category: software
@@ -31,7 +31,7 @@ Interface épurée, simple, **ergonomique**. Pas d'outils parasites *inutiles*.
 Un **bloqueur de pub** intégré modifiable, des options intéressantes (*pas comme mon histoire du début*)...  
 Et pour cela, pas besoin de chercher bien loin, une seule icône en haut à droite, tout simplement l'icône officielle de **Brave** : 
 
-![](/img/articles/brave-open-source/photo.jpg)
+![](/img/articles/brave-open-source/photo.webp)
 
 Très **rapide**, il dispose d'options intéressantes, jamais testées pour ma part, comme **Brave Payments** et **Brave Sync**.  
 
@@ -53,7 +53,7 @@ C'est "possible", mais compliqué. Je ne vous expliquerai pas la méthode ici.
 **Sur Android.**  
 C'est mon navigateur **par défaut**. Il ressemble comme deux gouttes d'eau à Chrome, mais avec le bloqueur de pub intégré. Je vous le conseille, il est très rapide, pas d'options encore une fois inutiles comme certains navigateurs (pas de météo, actualités, etc.)  
 
-![](/img/articles/brave-open-source/1493914011810146067519.jpg)
+![](/img/articles/brave-open-source/1493914011810146067519.webp)
 
 
 > *Tout simplement.*

content/blog-posts/chrome-android-change-de-design.md

@@ -1,7 +1,7 @@
 ---
 title: "Chrome Android change de design : vers du iOS chez Google ?"
 description: "Chrome Dev sur Android change de design : il s'inspire beaucoup du style de iOS."
-banner: /img/articles/chrome-android-change-de-design/chrome-dev-banner.jpg
+banner: /img/articles/chrome-android-change-de-design/chrome-dev-banner.webp
 type: flash
 authorId: theovld
 category: android

content/blog-posts/chrome-ou-firefox.md

@@ -1,7 +1,7 @@
 ---
 title: "Navigateur web : Chrome ou Firefox ?"
 description: "Le grand comparatif des deux plus gros navigateurs web"
-banner: /img/articles/chrome-ou-firefox/chrome-ou-firefox.jpg
+banner: /img/articles/chrome-ou-firefox/chrome-ou-firefox.webp
 type: article
 authorId: theovld
 category: software
@@ -13,7 +13,7 @@ timestamp: 1491413339
  Chacun des deux présentent ses avantages et inconvénients qui peuvent plaire ou non à certains types d'usagers.  
  Nous allons donc étudier ensemble ces deux navigateurs assez intéressants.
 
- ![KRAUME VErSSUSSE FAÏREFAUXE](/img/articles/chrome-ou-firefox/chrome-vs-firefox-2016-994x400.jpg?187d39)
+ ![KRAUME VErSSUSSE FAÏREFAUXE](/img/articles/chrome-ou-firefox/chrome-vs-firefox-2016-994x400.webp?187d39)
 
  [*(voir source image)*](http://www.makeuseof.com/tag/chrome-vs-firefox-in-2016-which-browser-is-right-for-you/)
 

content/blog-posts/debloquer-partage-connexion-android.md

@@ -1,7 +1,7 @@
 ---
 title: "Débloquer le partage de connexion sur Android"
 description: "Depuis Android 4.4, votre opérateur peut détecter si vous utilisez un partage de connexion, et le bloquer. Nous allons voir comment revenir aux réglages d'avant."
-banner: /img/articles/debloquer-partage-connexion-android/rawpixel-660359-unsplash.jpg
+banner: /img/articles/debloquer-partage-connexion-android/rawpixel-660359-unsplash.webp
 type: tutorial
 authorId: gildasgh
 category: android

content/blog-posts/decompiler-un-apk-android.md

@@ -1,7 +1,7 @@
 ---
 title: "Décompiler un apk, impossible ?"
 description: "Vous vous demandez si l'on peut explorer une application Android... Voici comment faire !"
-banner: /img/articles/decompiler-un-apk-android/decompiler-un-apk.jpg
+banner: /img/articles/decompiler-un-apk-android/decompiler-un-apk.webp
 type: tutorial
 authorId: kernoeb
 category: android

content/blog-posts/decouverte-html5up.md

@@ -1,7 +1,7 @@
 ---
 title: "HTML5 UP : des templates prêts à l'emploi"
 description: "HTML5UP, site de templates pour des sites webs responsive en HTML et CSS"
-banner: /img/articles/decouverte-html5up/html5up.jpg
+banner: /img/articles/decouverte-html5up/html5up.webp
 type: article
 authorId: stengarlis
 category: web
@@ -31,4 +31,4 @@ Attention ce sont des templates HTML5 uniquement et non des CMS !
   *  **<https://html5up.net/>**
 
 
-
+

content/blog-posts/firefox-54-ram.md

@@ -1,7 +1,7 @@
 ---
 title: "Firefox 54 adopte une meilleure gestion de la RAM"
 description: "Firefox 54 adopte un mode multi-processus moins gourmand en RAM."
-banner: /img/articles/firefox-54-ram/mozilla-firefox.jpg
+banner: /img/articles/firefox-54-ram/mozilla-firefox.webp
 type: article
 authorId: gildasgh
 category: software
@@ -18,7 +18,7 @@ Désormais, Firefox s'appuie sur quatre processus pour exécuter les onglets du
 
 > En traitant chaque onglet par un processus distinct, nous optimisons l’usage du hardware de l’ordinateur, en conséquence de quoi Firefox est capable de naviguer sur le Web de manière encore plus fluide - Nick Nguyen, chef de produit Firefox. Il affirme que Firefox 54 est « la version la plus aboutie » jamais produite par Mozilla !
 > 
-> ![Comparaison de la gestion des processus sur Firefox et sur Chrome](/img/articles/firefox-54-ram/mozilla-firefox.jpg)  
+> ![Comparaison de la gestion des processus sur Firefox et sur Chrome](/img/articles/firefox-54-ram/mozilla-firefox.webp)  
 Gestion des prossecus de Chrome et de Firefox (Crédit : Mozilla)
 
 Depuis son lancement en 2008, Chrome a adopté le mode multi-processus, et consomme globalement beaucoup plus de mémoire que les autres navigateurs.

content/blog-posts/material-design-web.md

@@ -1,7 +1,7 @@
 ---
 title: "Le Material Design sur vos sites web"
 description: "Le Material Design, créé par Google, est célèbre grâce à son interface moderne et épurée. Voici un tutoriel pour que vous puissiez y intégrer sur vos sites webs."
-banner: /img/articles/material-design-web/md-example.jpg
+banner: /img/articles/material-design-web/md-example.webp
 type: tutorial
 authorId: theovld
 category: web
@@ -11,7 +11,7 @@ timestamp: 1494162497
 
 Le Material Design est un type de design créé par Google et qui a la particularité d'être très moderne et épuré. On le voit de plus en plus dans les applications Android et sur les sites web. Aujourd'hui, nous allons voir comment faire notre propre site avec des frameworks basés sur le Material Design.
 
- ![](/img/articles/material-design-web/freebie___weather_app_ui_design_by_graphberry-d8m33wj.webp)![ups](/img/articles/material-design-web/md-example.jpg)
+ ![](/img/articles/material-design-web/freebie___weather_app_ui_design_by_graphberry-d8m33wj.webp)![ups](/img/articles/material-design-web/md-example.webp)
 
  *Exemples d'applications en Material Design et principe général*
 

content/blog-posts/microsoft-onenote.md

@@ -1,7 +1,7 @@
 ---
 title: "Microsoft OneNote : Des notes rapides et riches"
 description: "OneNote, application par excellence pour vos prises de notes et vos checklists."
-banner: /img/articles/microsoft-onenote/onenote-1.jpg
+banner: /img/articles/microsoft-onenote/onenote-1.webp
 type: article
 authorId: theovld
 category: software
@@ -11,7 +11,7 @@ timestamp: 1494424843
 
 Vous connaissez peut-être des applications qui vous permettent de prendre des notes rapidement, d'organiser vos choses à faire ou simplement d'inventer les dessins les plus fous. Aujourd'hui je vais vous présenter l'application OneNote, qui nous parvient directement de chez Microsoft, qui a la particularité d'être extrêmement riche en fonctionnalités mais aussi... en portabilité.
 
- ![](/img/articles/microsoft-onenote/onenote-1.jpg)
+ ![](/img/articles/microsoft-onenote/onenote-1.webp)
 
 ### Performance et ergonomie
 

content/blog-posts/molotov-television.md

@@ -1,7 +1,7 @@
 ---
 title: "Molotov : La TV de partout sauf sur une télévision"
 description: "Molotov, une façon radicalement nouvelle de regarder la télévision. Gratuitement."
-banner: /img/articles/molotov-television/molotov.jpg
+banner: /img/articles/molotov-television/molotov.webp
 type: article
 authorId: gildasgh
 category: software

content/blog-posts/ne-donnez-plus-votre-mail.md

@@ -5,69 +5,71 @@ banner: /img/articles/ne-donnez-plus-votre-mail/donnez-plus.webp
 type: article
 authorId: kernoeb
 category: security
-labels: ["spam", "mail", "sms"]
+labels: [ "spam", "mail", "sms" ]
 timestamp: 1530694885
 ---
 
 **Premier cas de figure:**  
- Vous surfez sur un site de "*jeux-concours*".  
- L'inscription sur le site est obligatoire. Vous donnez votre vraie adresse e-mail.  
- Et là, c'est le drame. Pas plus tard que le lendemain, une dizaine de mails type spam reçus dans la boîte de réception et le dossier "*Courriers Indésirables*" est plein à craquer.
+Vous surfez sur un site de "*jeux-concours*".  
+L'inscription sur le site est obligatoire. Vous donnez votre vraie adresse e-mail.  
+Et là, c'est le drame. Pas plus tard que le lendemain, une dizaine de mails type spam reçus dans la boîte de réception
+et le dossier "*Courriers Indésirables*" est plein à craquer.
 
- **Deuxième cas de figure:**  
- Vous êtes sur le site de Mark Zuckerberg, **Facebook**.  
- Et là, Facebook vous demande votre "*numéro de téléphone*" pour améliorer la sécurité de votre compte...  
- Mais vous n'avez pas envie de le donner, surtout à Facebook.  
- Surtout que vos **contacts** (*amis, famille, collègues, patron*) pourraient vous retrouver avec votre numéro de téléphone, alors pas question de le donner!
+**Deuxième cas de figure:**  
+Vous êtes sur le site de Mark Zuckerberg, **Facebook**.  
+Et là, Facebook vous demande votre "*numéro de téléphone*" pour améliorer la sécurité de votre compte...  
+Mais vous n'avez pas envie de le donner, surtout à Facebook.  
+Surtout que vos **contacts** (*amis, famille, collègues, patron*) pourraient vous retrouver avec votre numéro de
+téléphone, alors pas question de le donner !
 
 #### 1) MAILS
 
- Plusieurs sites permettent de créer des adresse e-mail "**jetables**" ou "**temporaires**".  
- Le problème, c'est que la plupart des sites ont bloqué ce genre de noms de domaines mails.  
- Heureusement, il y a des **survivants**.
+Plusieurs sites permettent de créer des adresse e-mail "**jetables**" ou "**temporaires**".  
+Le problème, c'est que la plupart des sites ont bloqué ce genre de noms de domaines mails.  
+Heureusement, il y a des **survivants**.
 
- Liste des meilleurs services web:  
+Liste des meilleurs services web:
 
-##### - **GetNada**:
+##### GetNada
 
- ![](/img/articles/ne-donnez-plus-votre-mail/Screenshot-2018-7-4%20Nada%20-%20temporary%20email.webp)  
- *Avantages:  
- - **Rapidité** de création et d'ouverture  
- - Interface **simple**  
- - Pas de **limites**  
- - **Gratuit***  
- <https://getnada.com>
+![](/img/articles/ne-donnez-plus-votre-mail/temporary-email.webp)
 
-
-##### - **Anonbox**:
+- **Rapidité** de création et d'ouverture
+- Interface **simple**
+- Pas de **limites**
+- **Gratuit***
 
- ![](/img/articles/ne-donnez-plus-votre-mail/Screenshot-2018-7-4%20anonbox%20Chaos%20Computer%20Club.webp)  
- *Avantages:  
- - Disponible avec le proxy **Tor**  
- - Très **rapide**  
- - À l'heure actuelle, les sites n'ont pas l'air de repérer le service (sous-domaine aléatoire?)*  
- <https://www.anonbox.net/fr/>  
-
-##### - **Temp-Mail**:
+https://getnada.com
 
- ![](/img/articles/ne-donnez-plus-votre-mail/Screenshot-2018-7-4%20Email%20temporaire%20%E2%80%93%20Email%20%C3%A0%20usage%20unique%20-%20Email%20anonyme.webp)  
- <https://temp-mail.org/fr/>
+##### Anonbox
 
-
+![](/img/articles/ne-donnez-plus-votre-mail/anonbox.webp)
+
+- Disponible avec le proxy **Tor**
+- Très **rapide**
+- À l'heure actuelle, les sites n'ont pas l'air de repérer le service (sous-domaine aléatoire?)*
+
+https://www.anonbox.net/fr/
+
+##### Temp-Mail
+
+![](/img/articles/ne-donnez-plus-votre-mail/tempmail.webp)
+
+https://temp-mail.org/fr/
 
 #### 2) SMS
 
- Il existe multitude de sites qui permettent de recevoir gratuitement des SMS.  
- Ces sites paraissent "**faux**", mais fonctionnent *(sinon je n'en parlerais pas lol).*  
- Liste de **services** fonctionnels:  
- - <https://www.receive-sms-online.info/>  
- [![](/img/articles/ne-donnez-plus-votre-mail/Screenshot-2018-7-4%20Receive%20SMS%20Online%20for%20FREE%20NO%20Registration%20UK,Romania,USA,Spain,France,Germany,Russia.webp)](https://www.receive-sms-online.info/)  
- - <https://getfreesmsnumber.com/>  
- - <https://smsreceivefree.com/>  
- - et bien d'autres...  
-   
- Certains risquent d'être **repérés**.  
- Si vous connaissez d'autres services de **SMS** qui fonctionnent et qui ne sont pas repérés,  
- n'hésitez pas à les mettre en **commentaire** ! ;)
+Il existe multitude de sites qui permettent de recevoir gratuitement des SMS.  
+Ces sites paraissent "**faux**", mais fonctionnent *(sinon je n'en parlerais pas lol).*  
+Liste de **services** fonctionnels:
+
+- <https://www.receive-sms-online.info/>  
+- <https://getfreesmsnumber.com/>
+- <https://smsreceivefree.com/>
+
+Certains risquent d'être **repérés**.
+
+Si vous connaissez d'autres services de **SMS** qui fonctionnent et qui ne sont pas repérés,  
+n'hésitez pas à les mettre en **commentaire** ! ;)
 
 

content/blog-posts/personnaliser-son-appareil.md

@@ -1,7 +1,7 @@
 ---
 title: "Personnaliser son appareil Android : 7 applications pratiques "
 description: "Le système Android est riche en applications qui permettent de personnaliser comme vous voulez votre téléphone. Voici-en 7."
-banner: /img/articles/personnaliser-son-appareil/personnaliser-son-appareil.jpg
+banner: /img/articles/personnaliser-son-appareil/personnaliser-son-appareil.webp
 type: tutorial
 authorId: theovld
 category: android

content/blog-posts/photos-nocturnes-smarthpone.md

@@ -1,7 +1,7 @@
 ---
 title: "Des photos nocturnes avec un smartphone!?"
 description: "Un ingénieur Google tente actuellement de prendre des photos de nuit avec son smartphone d'aussi bonne qualité qu'avec un appareil photo numérique !"
-banner: /img/articles/photos-nocturnes-smarthpone/phare-woaw.jpg
+banner: /img/articles/photos-nocturnes-smarthpone/phare-woaw.webp
 type: article
 authorId: gildasgh
 category: hardware
@@ -20,15 +20,15 @@ L'histoire
 
 L'année derniere, Florian Kainz a pris une photo nocturne du Golden Gate Bridge avec un DSLR. L’image était réussie, et un collègue lui a mis au défi de prendre la même photo avec un smartphone.
 
-[![](/img/articles/photos-nocturnes-smarthpone/Golden-Gate-SF-Google.jpg)](/img/articles/photos-nocturnes-smarthpone/Golden-Gate-SF-Google.jpg)
+[![](/img/articles/photos-nocturnes-smarthpone/Golden-Gate-SF-Google.webp)](/img/articles/photos-nocturnes-smarthpone/Golden-Gate-SF-Google.webp)
 
 *Canon 1DX, Zeiss Otus 28mm f/1.4 ZE*En acceptant celui-ci, l’employé de Google a peut-être trouvé le moyen d’améliorer significativement la qualité des photos prises la nuit avec les smartphones.
 
-[![](/img/articles/photos-nocturnes-smarthpone/Golden-Gate-SF-Google-1.jpg)](/img/articles/photos-nocturnes-smarthpone/Golden-Gate-SF-Google-1.jpg)
+[![](/img/articles/photos-nocturnes-smarthpone/Golden-Gate-SF-Google-1.webp)](/img/articles/photos-nocturnes-smarthpone/Golden-Gate-SF-Google-1.webp)
 
 *Photo prise avec un Nexus 6P en appliquant la nouvelle technique de Florian Kainz* 
 
-[![](/img/articles/photos-nocturnes-smarthpone/Golden-Gate-SF-Google-3.jpg)](/img/articles/photos-nocturnes-smarthpone/Golden-Gate-SF-Google-3.jpg)
+[![](/img/articles/photos-nocturnes-smarthpone/Golden-Gate-SF-Google-3.webp)](/img/articles/photos-nocturnes-smarthpone/Golden-Gate-SF-Google-3.webp)
 
 *Google Nexus 6P*Cette technique révolutionnaire n'est tout de même pas optimisée, elle demande un long traitement sur ordinateur de bureau, et une procédure très lourde. Il pense qu'avec « le bon logiciel, un téléphone devrait être en mesure de traiter les images en interne, et si des étapes telles que des masques de peinture à la main peuvent être éliminées, il peut être possible de faire des photographies point-et-shoot dans des conditions de lumière très faible ».
 

content/blog-posts/plex-presentation.md

@@ -24,7 +24,7 @@ C'est les vacances et c'est le moment ou l'on regarde le plus de films et série
 
 >  Voici une vidéo vous expliquant comment installer Plex:
 > 
->  [![](/img/articles/plex-presentation/hqdefault.jpg?sqp=-oaymwEXCPYBEIoBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCg2fJDR0ZGTM8pWyJcTX9Nl0k2wQ)](https://www.youtube.com/watch?v=u9w_VPuyA-8)
+>  [![](/img/articles/plex-presentation/hqdefault.webp?sqp=-oaymwEXCPYBEIoBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCg2fJDR0ZGTM8pWyJcTX9Nl0k2wQ)](https://www.youtube.com/watch?v=u9w_VPuyA-8)
 > 
 >   Sachez aussi que l'interface de Plex est moderne et facile à prendre en main.  
 

content/blog-posts/pwned-passwords.md

@@ -1,7 +1,7 @@
 ---
 title: "Pwned Passwords: une liste de 501 millions de mots de passes leakés"
 description: "Troy Hunt met en ligne la version 2 de 'Pwned Passwords', une liste des mots de passes publiés lors de différents hacks"
-banner: /img/articles/pwned-passwords/Searching-for-a-Pwned-Password.jpg
+banner: /img/articles/pwned-passwords/Searching-for-a-Pwned-Password.webp
 type: flash
 authorId: gildasgh
 category: security

content/blog-posts/qt-5-8.md

@@ -1,7 +1,7 @@
 ---
 title: "Qt 5.8 : Toutes les infos"
 description: "La nouvelle version de Qt est sortie : retour sur les nouveautés et changements"
-banner: /img/articles/qt-5-8/qt-5-8.jpg
+banner: /img/articles/qt-5-8/qt-5-8.webp
 type: article
 authorId: theovld
 category: programming

content/blog-posts/rachat-yahoo.md

@@ -17,7 +17,9 @@ La finalisation du rachat de Yahoo par le géant américain de la télécommunic
 
 
 
- ![Verizon](/img/articles/rachat-yahoo/rachat-yahoo-verizon.webp)Suite au rachat, Verizon va fusionner Yahoo! et le portail AOL pour donner naissance à Oath. C'est aussi la fin du pionnier d'internet Yahoo créé en 1994 par David Filo & Jerry Yang puis racheter en 2009 par Microsoft.
+![Verizon](/img/articles/rachat-yahoo/rachat-yahoo-verizon.webp)
+
+Suite au rachat, Verizon va fusionner Yahoo! et le portail AOL pour donner naissance à Oath. C'est aussi la fin du pionnier d'internet Yahoo créé en 1994 par David Filo & Jerry Yang puis racheter en 2009 par Microsoft.