Cette semaine, point de bookmarks (à moins que je trouve subitement un peu plus de temps libre…). Mais pour me faire pardonner j'ai prévu de vous offrir tout autre chose : une nouvelle css !
Ca faisait un moment que je voulais en faire une et finalement, ben voilà, c'est fait. Il faudrait encore corriger / améliore / ajouter certains points mais j'ai décidé de passer totalement dessus désormais. Elle est à un stade utilisable en lecture, d'où la publication.
Pourquoi une nouvelle css ?
Je voulais simplement une css assez simple, lisible mais un peu colorée (mais pas trop). Entre autre pour pouvoir visualiser plus facilement les nouveaux contenus / nouveaux messages / contenus avec nouveaux messages.
Visuellement j'ai aussi rajouté quelques petites choses, comme des badges dont la couleur change en fonction de la note (5 niveaux : looser, vil trolleur, neutre+, intéressant, parfait pour rentrer dans l'histoire des moules), des blockquote dont la bordure change en fonction du niveau d'imbrication.
Je voulais aussi une css avec une taille en largeur plutôt limitée (oui je pourrais redimensioner mon navigateur mais les marges participent au confort de lecture) pour des questions de lisibilité. Par contre, l'effet de bord est que certains contenus sont complexes à afficher :
- les commentaires lorsqu'ils sont trop profonds
- les tableaux, comme le suivi
Ha oui, je navigue en -42 donc j'ai pas vraiment vérifié si les commentaires repliés étaient ok.
J'ai rapidement fait la partie tribune mais elle n'est probablement pas optimale (quelqu'un utilise ce truc non référencé d'ailleurs ?)
Il reste encore pas mal de boulot (notamment les parties de rédaction, que ce soit commentaire / journal / dépêche ou l'interface de rédaction collaborative). Mais cela viendra progressivement.
Petit point de détail également : il existe deux versions de la css, l'une sur fond clair et l'autre sur fond sombre (j'utilise les couleurs de solarized).
Parlons un peu technique :
La CSS est initialement basée sur knacss. Il en reste un peu mais au final pas grand chose. Je m'en suis servi en fait comme une feuille de reset un peu évoluée.
J'utilise également sass car c'est mieux (enfin les préprocesseurs css saybien) et c'est, si je ne me trompe, celui qui est utilisé dans le code de linuxfr (comment ça je vise, au final, l'inclusion dans les sources ?)
Les sources sont disponibles sur un dépôt github et, pour ceux qui veulent du plus rapide, sur un dépôt baregit.
Et les nimages ?!
J'ai fait deux aperçus rapides, les voici (je n'inclus pas directement à cause de la taille des images) :
Et les css dans tout ça ?
Ha oui, désolé j'avais oublié :
Et la suite ?
Je vais continuer à l'améliorer progressivement, notamment en ce qui concerne les fonctionnalités d'édition. Si vous avez des remarques ou des idées n'hésitez surtout pas.
Et un petit mot concernant le support des navigateurs : de mon côté il n'est pas prévu de supporter autre chose qu'un navigateur récent. Pour une demande dans un autre sens va falloir argumenter… (et pour le coup oui il y a quelques problèmes de placement sous firefox, la correction viendra)
# Oh !
Posté par ナイコ (site web personnel) . Évalué à 9.
Je viens de jeter un œil à tes screenshots; honnêtement, je trouve ça moche, c'est un avis purement personnel, les goûts, les couleurs, toussa… Mais alors, diantre, je vais aller lire le code, parce que bordel, mais comment tu as fait ça ?
Bravo et merci en tout cas de te décarcasser pour proposer une nouvelle CSS :) !
[^] # Re: Oh !
Posté par CrEv (site web personnel) . Évalué à 3.
?
Qu'est ce que tu trouves moche ? Les screenshot ? C'est un mélange des deux et oui ils sont moches (pas très net quoi)
Les couleurs ? Solarized, j'ai rien inventé et je trouve ça plutôt pas mal, assez reposant
La disposition ?
Autre chose ?
Que t'aime pas ça ne va pas me changer grand chose, mais par contre que tu pointes ce que tu n'aimes pas je suis pas forcément contre…
[^] # Re: Oh !
Posté par ナイコ (site web personnel) . Évalué à 8.
Désolé, je suis en train de tester vraiment tes CSS et je n'avais pas compris les screenshots : je te jure que j'avais cru que tu étais parvenu à faire changer la couleur des polices en fonction de ce fond de page arrondi. Je vais aller de ce pas faire l'acquisition de quelques neurones.
Je ne crois pas qu'on puisse faire ça en CSS, d'ailleurs, d'où mon excitation… ;)
Donc non, ce n'est pas si moche ! Toujours pas à mon goût, cela dit, mais encore une fois ça n'engage que moi :)
[^] # Re: Oh !
Posté par Xaapyks . Évalué à 4.
Pareil pour moi :/
[^] # Re: Oh !
Posté par dj_ (site web personnel) . Évalué à 2.
L'inversion des couleurs quand la courbe du fond rencontre un bloc de code sur la 2eme screenshot fait très bizarre (une partie du bloc code est en blanc l'autre en bleu)
[^] # Re: Oh !
Posté par CrEv (site web personnel) . Évalué à 3.
nan mais il n'y a pas d'inversions, c'était juste pour montrer qu'il y a deux feuilles de styles quasi identiques avec juste variation des couleurs !
Allez voir le lien sur solarized pour comprendre (par exemple) : http://ethanschoonover.com/solarized
[^] # Re: Oh !
Posté par ナイコ (site web personnel) . Évalué à 3.
Les avatars dans les commentaires ne sont pas très bien placés, probablement "hors grille" : on dirait qu'ils flottent là un peu au hasard.
Le triangle pour la date du journal (quand on visualise ledit journal) est sympa mais est mal positionné et mord un peu sur le texte.
Le badge contenant la note du journal/article est mal positionné et mord aussi sur le texte de l'article; il est de plus mal aliasé et donne une impression d'être trop fin et un peu vide; il mériterait d'être plus riche.
Voilà, à chaud, comme ça.
Concernant les couleurs, donc, je n'aime pas, mais là ce n'est pas un bug, c'est (encore) moi, mes goûts. Je préfère néanmoins le thème light et pas du tout le dark.
[^] # Re: Oh !
Posté par CrEv (site web personnel) . Évalué à 1.
Toi t'es sous firefox, non ?
Le placement des avatars, badge et triangle est foiré sous firefox, ok sous chrome. Par contre, pour aliaser le badge à mon avis ça dépend des navigateurs et je ne pourrai pas y faire grand chose (c'est du CSS pur)
Après les couleurs, comme tu dis :) Pour ma part il m'a fallu quelques jours pour m'habituer à ces couleurs, mais après un peu de temps passé je les apprécie plutôt bien car elles sont relativement reposantes. C'est pas le choix que j'aurais fait initialement mais c'est agréable et plutôt cohérent (sans parler de goût pour cette dernière partie, elles sont réellement choisies dans un objectif de cohérence)
# Compatibilitude
Posté par Enzo Bricolo 🛠⚙🛠 . Évalué à 1.
Sous Chrome, c'est cassé et sous firefox c'est pas clean
[^] # Re: Compatibilitude
Posté par CrEv (site web personnel) . Évalué à 2.
Qu'est ce qui est cassé ? (étant donné que je l'utilise sous chrome je trouve ça plutôt étrange…)
Et sous firefox j'ai indiqué qu'il y avait un problème pour l'instant
# Sympa :)
Posté par Bruno Michel (site web personnel) . Évalué à 5.
Félicitations pour cette feuille de style. Je la trouve très sympathique, avec une petite préférence pour la version sombre.
Pour la partie technique, je confirme que c'est bien du sass. D'ailleurs, n'hésite pas à réutiliser des styles déjà présent et tout particulièrement ceux présents dans le répertoire common. C'est fait pour ça. On y retrouve des styles pour l'autocomplete, les drapeaux, l'éditeur de texte markitup, les statistiques et des styles génériques.
Du coup, n'hésite pas à me pinger dès que tu veux que j'en fasse une feuille de style officielle.
[^] # Re: Sympa :)
Posté par CrEv (site web personnel) . Évalué à 3.
Merci !
'ra j'avais pas vu tout ça :)
J'étais déjà allé repiquer la feuille de pygments (je crois) pour dégrossir le boulot sur la partie code.
Mais markitup risque de me sauver la vie :)
Pour ma part je pensais préférer la sombre et finalement j'utilise tout le temps la claire ;)
Je te préviendrais dès que j'aurai un truc complet (stats, sondages et surtout édition / saisie)
L'autocomplete c'est pour quelle partie du site ? (désolé mais je ne me souviens pas vraiment en avoir vu…)
[^] # Re: Sympa :)
Posté par Bruno Michel (site web personnel) . Évalué à 4.
Il est bien caché : c'est juste pour tagger des contenus.
[^] # Re: Sympa :)
Posté par CrEv (site web personnel) . Évalué à 2.
OKi, c'est vrai que je ne l'utilise pas souvent…
# Sombre / clair
Posté par feth . Évalué à 2.
Pour l'écriture, notamment de code, je préfère le blanc sur noir, en gros. Pour la lecture, le noir sur blanc en plus petit.
Cette CSS est sympa, et je choisirais bien la version claire, mais je regrette l'inverse vidéo et la taille de police de caractère trop petite pour le code.
[^] # Re: Sombre / clair
Posté par CrEv (site web personnel) . Évalué à 2.
hum… "l'inverse" comme tu dis permet justement d'avoir le texte sur fond clair pour la lecture des textes et fond sombre pour le code. donc assez proche de ce que tu préfère, non ?
pour la taille de police du code je vais regarder ce que ça donne si je laisse la même taille que le contenu
[^] # Re: Sombre / clair
Posté par feth . Évalué à 2.
Assez proche de ce que je préfère… dans mon terminal :-)
Dans un document, je préfère noir sur blanc. Mais les goûts et les couleurs.
[^] # Re: Sombre / clair
Posté par CrEv (site web personnel) . Évalué à 2.
En fait c'est pas bien compliqué à changer puisque c'est du sass derrière
Je pense que je vais séparer un peu plus les fichiers pour pouvoir avoir des css différentes plus facilement :
[^] # Re: Sombre / clair
Posté par feth . Évalué à 2.
Ça sera chic !
[^] # Re: Sombre / clair
Posté par CrEv (site web personnel) . Évalué à 2.
fait, voir le commentaire en dessous
[^] # Re: Sombre / clair
Posté par feth . Évalué à 2.
À l'usage, je préfère !
[^] # Re: Sombre / clair
Posté par CrEv (site web personnel) . Évalué à 2.
Cool :) Surtout que c'était franchement pas grand chose pour avoir les 4.
D'ailleurs, nouvelle mise à jour avec les boutons dans l'interface d'édition (commentaires entre autre), style pour les notifications (basé sur le fichier pointé par Bruno un peu plus haut, fichier de base de linuxfr)
Pour la suite prévisu des commentaires, drapeaux des liens, sondages, stats. Et ensuite je m'attaquerai aux tribunes (dans l'espace collaboratif et peut-être même board)
[^] # Re: Sombre / clair
Posté par feth . Évalué à 2.
Et à la navigation au clavier ! (j'utilise > et < pour lire les commentaires, pas vous ?).
[^] # Re: Sombre / clair
Posté par CrEv (site web personnel) . Évalué à 2.
Comment ça ? Quel est le problème ?
Oui j'utilise toujours < et > pour lire les commentaires
[^] # Re: Sombre / clair
Posté par claudex . Évalué à 3.
Tu devrais utiliser
j
etk
, c'est plus facile.« Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche
[^] # Re: Sombre / clair
Posté par CrEv (site web personnel) . Évalué à 3.
Ha non, surtout pas :)
< et > sont vraiment super simples à utiliser :
L'avantage est que ma main ne bouge quasiment pas quelque soit l'action, la page, le logiciel que j'utilise.
Et la droite peut aller chercher la souris n'importe quand.
Si je faisais j/k avec la main gauche ce serait idiot, et avec la droite je ne pourrais pas en même temps choper la souris
[^] # Re: Sombre / clair
Posté par feth . Évalué à 2.
Je sais pas, maintenant ça fonctionne. PEBCAK sans doute.
[^] # Re: Sombre / clair
Posté par feth . Évalué à 2.
J'ai compris : quand je charge une page de linuxfr, en https, mon navigateur me prévient qu'il y a des éléments en clair dedans (la CSS). Si je consens à les charger, il recharge toute la page.
[^] # Re: Sombre / clair
Posté par CrEv (site web personnel) . Évalué à 2.
Ha oui, ça c'est parce que tu es sous chrome, non ?
Dans ce cas, et tant que la css n'est pas intégrée il vaut mieux soit naviguer dans un seul onglet/page soit naviguer en http.
A moins que quelqu'un sache comment autoriser les contenus non sécurisés, juste pour une url, mais je n'ai pas trouvé.
Encore un peu de boulot, notamment question poids de la CSS et je verrai avec Bruno si on peut l'intégrer et si c'est le cas il n'y aura plus ce genre de problème.
[^] # Re: Sombre / clair
Posté par feth . Évalué à 2.
Oui, chromium. Rien de grave, cela dit.
[^] # Re: Sombre / clair
Posté par CrEv (site web personnel) . Évalué à 2.
prévisu des commentairesdrapeaux des liensstatistiques[^] # Re: Sombre / clair
Posté par CrEv (site web personnel) . Évalué à 2.
prévisu des commentairesdrapeaux des lienssondagesstatistiquesavec un bonus sur les stats (utilisant ce qui est fait pour les sondages) Pour le moment c'est mieux avec la feuille claire que la sombre, mais je pense que je vais pouvoir améliorer ça prochainement.
[^] # Re: Sombre / clair
Posté par CrEv (site web personnel) . Évalué à 2.
prévisu des commentairesdrapeaux des lienssondagesstatistiquesespace collaboratif(taille de la tribune intégrée)tribunes(marges et highlight des norloges)Encore un peu de taff sur d'autres points, notamment sur l'utilisation des feuilles sombres (saisie) et je ferai un nouveau journal avec des vrai belles captures
# Maj (pour firefox)
Posté par CrEv (site web personnel) . Évalué à 3.
J'ai fait une mise à jour à l'instant :
La feuille est donc bien mieux sous firefox, et elle correspond à la version chrome / chromium / safari
Le problème firefox était juste le style par défaut des
figure
. Et encore, la correction pour les moteurs webkits était pire :# Nouvelles versions
Posté par CrEv (site web personnel) . Évalué à 4.
Comme prévu ici j'ai fait quelques nouvelles versions :
La version précédente light pointe vers light_dark et la version sombre vers dark_light.
Si vous avez d'autres suggestions je suis preneur
[^] # Re: Nouvelles versions
Posté par Psychofox (Mastodon) . Évalué à 2.
petit souçis avec tes css, lorsqu'on est dans l'outil de rédaction d'une dépêche, les messages de la tribune ne s'affichent pas de façon très agréable du fait de la largeur trop limitée.
[^] # Re: Nouvelles versions
Posté par CrEv (site web personnel) . Évalué à 2.
Oué c'est connu (et indiqué dans le journal même si c'est moins précis)
Pour le moment je n'ai pas vraiment travaillé l'édition collaborative car je ne l'utilise pas et je voulais déjà axer le travail sur la consultation.
Mais ça va venir petit à petit (les release se font un peu en continu)
[^] # Re: Nouvelles versions
Posté par CrEv (site web personnel) . Évalué à 2.
Normalement le problème de la tribune dans l'espace de rédaction devrait être corrigé.
[^] # Re: Nouvelles versions
Posté par CrEv (site web personnel) . Évalué à 3.
Je continue les modifs :
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.