De temps en temps, j'ai besoin de me détendre, et je joue un peu avec les tech du web, entre deux déploiements.
J'aime bien HTML5 et CSS, spécialement la version 3 et son lot de nouveautés. J'en ai profité du site de Linuxfr, pour tester et rafraîchir mes connaissances de ce côté.
Voici donc une feuille de style, certainement pas finie, mais en bonne progression, si vous voulez tester un peu.
De temps en temps, je me suis dit qu'il y avait des trucs qui ne servaient à rien, ou en tout cas, qui pouvaient attendre une heure plus raisonnable, et je les ai honteusement cachés (display: none;). Soit dans l'espoir d'y revenir plus tard, soit parce que la structure devrait, AMHA, être revue.
Bien sûr, vu l'historique du site, il y a quelques incohérences dans le code généré, notamment une surcharge de blocs imbriqués ou des tags qui manquent là où il en faudrait. Ce qui fait que parfois, je n'ai pu faire ce que je voulais.
J'ai aussi vu, du code qui utilise des caractères ASCII pour faire des boutons, du style [^], ou [+], etc…À ce stade, CSS ne peut (presque) rien faire, sinon changer la génération de code en elle-même.
Pour l'éditeur de texte pour les journaux, nouvelles, etc, je pense qu'un éditeur WYSIWYG moderne serait bienvenu, et j'avoue que vers la fin, j'étais trop fatigué pour écrire des styles pour une liste de liens de formatage markdown. D'ailleurs, pour l'aide-mémoire, la balise details serait appropriée.
Dans ce qui me manquait des feuilles de styles proposées, le basculement automatique du thème clair ou sombre, selon les préférences du système.
Ensuite, vu que CSS3 supporte les "nested styles", je n'ai pas eu envie d'utiliser les préprocesseurs habituels.
Finalement, pareil pour les "feuilles de styles conditionnelles importées", cela permet de découper ses feuilles de style en plusieurs fichiers. Cela n'a pas d'impact négatif sur les performances, comme j'ai pu entendre précédemment, au contraire :
- les feuilles de styles peuvent être chargés en parallèle,
- le navigateur ne charge que celles qui correspondent à la condition.
- Lorsqu'une feuille de style modifiée, ce sera la seule rechargée du serveur.
Les avatars, j'ai pas encore fini, mais j'y reviendrais quand j'aurai un moment et un peu plus d'inspiration.
Sinon, les images de sections gagneraient à être harmonisées, il y a pêle-mêle des icônes PNG, des gifs 256 couleurs retaillées à l'emporte-pièce, et des images du web en jpeg, ce qui donne à la page section un aspect amateur.
Voilà, on est samedi, j'ai passé assez de temps dessus pour le moment, et j'y reviendrai plus tard. En attendant, on pourrait pousser ces styles sur un dépôt GitHub ou Linuxfr (je ne sais pas où est le dépôt git de Linuxfr).
Voici le lien: https://rodier.me/lfr/css/index.css
# lister ?
Posté par Nicolas Boulay (site web personnel) . Évalué à 6.
Il faudrait lister les modifs suggérés je suis sûr que les codeurs pourrait le faire au fur et à mesure.
"La première sécurité est la liberté"
[^] # Re: lister ?
Posté par Andre Rodier (site web personnel) . Évalué à 2.
Oui, je vais ajouter les entrées sur le système de suivi, sans doute la semaine prochaine.
# Dépôt GitLab
Posté par Andre Rodier (site web personnel) . Évalué à 2.
Voici l'adresse du dépôt sur GitLab: https://gitlab.com/arodier/linuxfr-css
[^] # Re: Dépôt GitLab
Posté par Christophe . Évalué à 6.
Un petit screenshot du résultat serait sympa à avoir dans le README, j'ai un peu la flemme de l'appliquer juste pour voir à quoi ça ressemble…
[^] # Re: Dépôt GitLab
Posté par Andre Rodier (site web personnel) . Évalué à 3.
Ok, dès que j'ai un truc un peu plus stable, je rajoute une image.
[^] # Re: Dépôt GitLab
Posté par Ysabeau 🧶 (site web personnel, Mastodon) . Évalué à 4.
Personnellement je ne saurais pas faire et j'aimerais effectivement voir à quoi ça ressemble.
« Tak ne veut pas quʼon pense à lui, il veut quʼon pense », Terry Pratchett, Déraillé.
[^] # Re: Dépôt GitLab
Posté par Andre Rodier (site web personnel) . Évalué à 2.
Tu peux choisir une feuille de style personnalisée dans tes préférences.
https://rodier.me/lfr/css/index.css
Attention, c'est toujours en cours de développement. Dès que j'aurais quelque chose de complet, je soumettrai une PR.
Un peu d'aide est toujours bienvenue, bien sûr.
[^] # Re: Dépôt GitLab
Posté par Ysabeau 🧶 (site web personnel, Mastodon) . Évalué à 3. Dernière modification le 19 mars 2024 à 13:30.
Alors, j'ai essayé très rapidement, mais la barre de navigation en haut en colonne plutôt qu'en ligne (pas comme dans les captures d'écran ni comme dans la version ronronnement que j'utilise), c'est rédhibitoire. Il y a un truc qui cloche. Pareil pour les boutons en bas d'un contenu : en colonne.
En image :
« Tak ne veut pas quʼon pense à lui, il veut quʼon pense », Terry Pratchett, Déraillé.
[^] # Re: Dépôt GitLab
Posté par Andre Rodier (site web personnel) . Évalué à 2.
Oups, ça fait mal aux yeux…
Comme expliqué plus bas, je vise Firefox 123, j'aurai sans-doute pu ajouter ceci dans le journal, mais j'ai oublié en le postant. En tout cas, c'est un choix que j'assume. Si quelqu'un veut faire une feuille de style compatible avec une version plus ancienne, je ne critiquerai pas.
Cette feuille de style n'a pas pour ambition de devenir celle par défaut. C'est plus pour ceux qui utilisent un navigateur récent, sur le bureau ou le téléphone.
Quand ce sera fini, avec un peu de chance, Firefox 123 sera dans Debian Stable. Si vraiment, vous voulez utiliser une version plus vielle de Firefox, il y a moyen de déplier les feuilles de styles imbriquées, mais ce n'est pas dans le design que j'ai choisi, et j'apprécie la clarté.
En tout cas, ça marche avec mon téléphone Android, et j'apprécie spécialement le fait que le thème bascule automatiquement le thème clair et sombre.
PS: Mozilla propose un dépôt Debian pour les dernières versions de Firefox: https://support.mozilla.org/en-US/kb/install-firefox-linux#w_install-firefox-deb-package-for-debian-based-distributions
[^] # Re: Dépôt GitLab
Posté par Ysabeau 🧶 (site web personnel, Mastodon) . Évalué à 4. Dernière modification le 19 mars 2024 à 14:22.
Alors, effectivement, c'est beaucoup mieux sur mon ordiphone qui, lui, a la dernière version de Firefox.
Mais, sur la version mobile de la css par défaut et de ses frangines, la tribune de modération qu'on a dans la colonne de gauche est moins longue, là j'ai trois réactions avec Ronronnement sur l'ordiphone, alors que ta CSS nous donne le même nombre de réactions que sur la version ordinateur, donc nettement plus et il faut donc bien descendre pour arriver au contenu. Et la gestion des dépêches en rédaction mérite d'être améliorée (j'imagine que cet aspect n'est pas du tout fini).
« Tak ne veut pas quʼon pense à lui, il veut quʼon pense », Terry Pratchett, Déraillé.
# au sujet de balisage
Posté par Gil Cot ✔ (site web personnel, Mastodon) . Évalué à 2.
Tiens, spoil : la balise est suggérée pour une entrée de suivi
Mais pourquoi vois-tu cela comme des boutons ? Ce n’était peut-être pas pensé/imaginé ainsi (i.e. substitut de
<button>…</button>Pourquoi ce ne serait pas juste des ancres ? ou des boutons radios pour rester dans les éléments de formulaires ?)“It is seldom that liberty of any kind is lost all at once.” ― David Hume
[^] # Re: au sujet de balisage
Posté par Andre Rodier (site web personnel) . Évalué à 3.
Je parle de l'aide mémoire markdown, dans le formulaire de création de contenu.
Le principal, c'est que les crochets, on pourrait les remplacer par des jolis emoticons, par exemple : 🔺 🔻 ⚓
[^] # Re: au sujet de balisage
Posté par Gil Cot ✔ (site web personnel, Mastodon) . Évalué à 2.
Oui, j’avais compris que c’était pour l’aide mémoire et je voulais dire qu’il y a plein d’autres contextes où la balise est bienvenue mais que son usage est écarté.
Le premier problème des émojis est qu’il faut avoir la certitude que le plus grand nombre pourra l’afficher… Je lis par exemple que « red triangle pointing up » risque de ne pas s’afficher sur certains de mes appareils car le support a été introduit dans Android 4.3+ ; et je pense que l’interface du site me deviendra moins accessible quand je passe par ici avec Lynx.
Le second problème va être d’en trouver qui ait la même signification pour tout le monde… Le survol indique « Remonter au commentaire parent » (va donc pour le triangle avec la pointe en haut) et « Cacher le fil de discussion » (ça par contre les deux autres n’évoquent aucunement cela…)
Accessoirement il faut que ça puisse s’intégrer avec les autres styles/variantes (pourquoi imposer du rouge ?) et qu’on ne tombe pas dans d’autres problèmes (bah oui, on oublie souvent l’accessibilité pour les personnes ayant divers problèmes de vue, et ici les divers daltonismes vont pas dire merci.)
“It is seldom that liberty of any kind is lost all at once.” ― David Hume
[^] # Re: au sujet de balisage
Posté par Andre Rodier (site web personnel) . Évalué à 5. Dernière modification le 17 mars 2024 à 08:09.
Pour information, Android 4.3 est sorti en 2013, donc ces emojis sont compatibles avec des périphériques de onze ans d'age, cela devrait suffire, je pense, et toi ?
Les triangles rouges, c'était juste un exemple, je n'ai pas cherché plus de dix seconds, c'était pour illustrer mon propos. Il ne faut pas se focaliser dessus, sauf si on aime bien chercher la petite bête ;-). Tiens, en voici d'autres, en tant qu'exemple : ⏫ ⬆️ ↕ ➖ ➕.
Je viens d'essayer avec Lynx, et les emojis sont parfaitement affichés.
[^] # Re: au sujet de balisage
Posté par Gil Cot ✔ (site web personnel, Mastodon) . Évalué à 3.
Je sais, 2013 parait loin pour beaucoup de gens …sauf pour moi qui ai encore du matos bien plus ancien (je sais, c’est pas bien de ne pas renouveler quand ce n’est pas encore cassé et que je ne contribue pas assez au besoin de coltan.)
Je ferai le test bien qu’ayant le souvenir d’avoir déjà vécu la situation.
“It is seldom that liberty of any kind is lost all at once.” ― David Hume
# Cool ça
Posté par Sacha Trémoureux (site web personnel) . Évalué à 2.
Top !
Pile ce que je voulais.
Merci :)
[^] # Re: Cool ça
Posté par Andre Rodier (site web personnel) . Évalué à 2.
Merci du merci, ça fait toujours plaisir. Bonne soirée!
# version de firefox
Posté par Andre Rodier (site web personnel) . Évalué à 2.
Au fait, je visel les récentes versions de firefox. Lorsque j'aurai terminé, je pense qu'elle sera dans Servian stable (123).
# critique
Posté par Nicolas Boulay (site web personnel) . Évalué à 5.
Le look est plus moderne mais je me perd un peu. Les séparations entre élement sont plus flou et j ai l impression qu'il y a beaucoup de texte souligné.
"La première sécurité est la liberté"
[^] # Re: critique
Posté par Andre Rodier (site web personnel) . Évalué à 4. Dernière modification le 17 mars 2024 à 10:37.
Merci du retour d'information, constructif et utile.
Effectivement, je suis d'accord. Je vais essayer de séparer plus clairement les blocs, sans pour autant tomber dans une utilisation abusive des "borders" et autres joyeusetés des années 2000.
Comme mentionné plus haut, c'est un projet en cours, pas encore fini.
[^] # Re: critique
Posté par barmic 🦦 . Évalué à 3.
Je trouve très sympa ta CSS, même si elle est encore pas finie.
Tu préfère qu'on te fasse des retours ici ou sur gitlab ?
En attendant je t'en fais ici :
https://linuxfr.org/users/barmic/journaux/y-en-a-marre-de-ce-gros-troll
[^] # Re: critique
Posté par Andre Rodier (site web personnel) . Évalué à 3.
Je pense que ici, c'est bien pour les remarques, comme ça, tout le monde peut contribuer sans avoir à utiliser un compte GitLab.
Oui, tout cela est valide, je n'ai pas encore eu le temps de peaufiner. Honnêtement, je ne pensais pas y passer autant de temps.
[^] # Re: critique
Posté par barmic 🦦 . Évalué à 3. Dernière modification le 19 mars 2024 à 14:48.
Autre remarque, le bouton pour ajouter des étiquettes qui apparaît au survol fais bouger l'interface, si ça pouvait être évité en le faisant apparaître sur la même ligne, je pense que ça serait parfait.
Ah et le "ajouter" en bleu sur noir dans les étiquettes manque de contrastes aussi à mon avis.
https://linuxfr.org/users/barmic/journaux/y-en-a-marre-de-ce-gros-troll
[^] # Re: critique
Posté par Andre Rodier (site web personnel) . Évalué à 2.
Merci, je changerai tout ça ce soir.
Ça fait partie des choses que j'ai laissées de côté, puis oublié.
[^] # Re: critique
Posté par Nicolas Boulay (site web personnel) . Évalué à 4.
Je trouve que c'est un boulot nécessaire, l'interface de linuxfr n'a pas bougé depuis longtemps et aurait bien besoin d'un lifting.
"La première sécurité est la liberté"
[^] # Re: critique
Posté par fearan . Évalué à 4.
pourquoi casser un truc qui marche ?
Blague à part, je trouve l'interface très correcte, belle et suffisante. Ranafout de la mode.
Il ne faut pas décorner les boeufs avant d'avoir semé le vent
[^] # Re: critique
Posté par Nicolas Boulay (site web personnel) . Évalué à 4.
Je trouve que l'on peut faire mieux. La CSS par défaut actuel est un peu trop "long" pour les téléphones et peu large pour les écrans de bureau.
Et le coté vieillot n'aide pas à recruter de nouveaux lecteurs.
"La première sécurité est la liberté"
[^] # Re: critique
Posté par Ysabeau 🧶 (site web personnel, Mastodon) . Évalué à 4.
L’interface actuelle pose différents problèmes :
Et je ne parle pas du fait que, quand on commente un contenu, on n’a pas accès au dit contenu le plus souvent.
Sur le plan ergonomique, personnellement, je trouve que l’interface a besoin d’être pas mal améliorée. Et je ne parlerai pas de choses qui fâchent, comme la gestion des images, qui nécessitent un développement spécifique.
« Tak ne veut pas quʼon pense à lui, il veut quʼon pense », Terry Pratchett, Déraillé.
[^] # Re: critique
Posté par BAud (site web personnel) . Évalué à 2.
moui, les notes de bas de page ce serait tout de même pratique… => ya des entrées de suivi à faire (je ne l'ai pas retrouvée)
Si, bien sûr, la preuve sur LinuxFr.org : il est généré à partir d'un certain nombre de caractères (2000 sans doute)
moui, ça me dérange aussi, ça faciliterait la navigation « transversale » sur des sujets connexes…
la toolbar permet de naviguer de nouveau commentaire en nouveau commentaire dans un contenu, mais oui ça manque en bas de page…
[^] # Re: critique
Posté par Gil Cot ✔ (site web personnel, Mastodon) . Évalué à 3.
Tous ces problèmes ne sont pas liés à la feuille de style, mais au code. En tout cas pour : les sommaires, les icônes, la prévisualisation.
Pour ce qui en dépend, c’est un choix… Je vois bien les étiquettes et la liste des nouveaux commentaires en utilisant un mobile et un autre style que celui par défaut (par exemple celui de OpenSuse —merci au commentaire par lequel j’ai fait la découverte.)
“It is seldom that liberty of any kind is lost all at once.” ― David Hume
# Screenshot
Posté par Libre (site web personnel, Mastodon) . Évalué à 2.
Une petite PR pour montrer à quoi cela ressemble :) https://gitlab.com/arodier/linuxfr-css/-/merge_requests/1
[^] # Re: Screenshot
Posté par Andre Rodier (site web personnel) . Évalué à 3. Dernière modification le 18 mars 2024 à 17:51.
Merci, je viens de fusionner.
https://gitlab.com/arodier/linuxfr-css
# Édition sur thème sombre
Posté par Andre Rodier (site web personnel) . Évalué à 2.
J'ai fait quelques modifs, en copiant les styles de l'édition.
Je n'ai pas trop le temps de continuer, mais je ferai quelques ajouts de temps en temps.
En attendant, quelques remarques, si vous voulez participer.
background-color: inherit.#7775, le5correspond à la transparence. Cela permet d'avoir une bordure plus éclaircissante lorsque le fond est sombre, et inversement lorsque le thème est clair.Pour le thème de la barre d'outil, les icônes sont sans doute à revoir pour le thème sombre. Il y a sûrement des options CSS pour utiliser clair / sombre aussi. Je n'ai pas creusé. Je pensais qu'un éditeur un peu plus moderne pourrait être intégré.
PS: Mon temps libre est limité, donc si vous voulez aider, bienvenue.
# Captures d'écran
Posté par Andre Rodier (site web personnel) . Évalué à 3.
Bureau
Theme clair
Theme sombre
Telephone
Theme clair
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.