Journal [css] linuxfr-solarized

Posté par  (site web personnel) .
Étiquettes :
19
24
juil.
2012

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  (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  . Évalué à 4.

          Pareil pour moi :/

      • [^] # Re: Oh !

        Posté par  (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  (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  (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  . Évalué à 1.

    Sous Chrome, c'est cassé et sous firefox c'est pas clean

    • [^] # Re: Compatibilitude

      Posté par  (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  (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  (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…)

  • # Sombre / clair

    Posté par  . É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  (site web personnel) . É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.
      mais je regrette l'inverse vidéo

      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  . É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  (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 :

          • fond clair
          • fond clair + code fond sombre
          • fond sombre
          • fond sombre + code fond clair

          • [^] # Re: Sombre / clair

            Posté par  . Évalué à 2.

            Ça sera chic !

            • [^] # Re: Sombre / clair

              Posté par  (site web personnel) . Évalué à 2.

              fait, voir le commentaire en dessous

              • [^] # Re: Sombre / clair

                Posté par  . Évalué à 2.

                À l'usage, je préfère !

                • [^] # Re: Sombre / clair

                  Posté par  (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  . Évalué à 2.

                    Et à la navigation au clavier ! (j'utilise > et < pour lire les commentaires, pas vous ?).

                    • [^] # Re: Sombre / clair

                      Posté par  (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  . Évalué à 3.

                        Oui j'utilise toujours < et > pour lire les commentaires

                        Tu devrais utiliser j et k, 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  (site web personnel) . Évalué à 3.

                          Ha non, surtout pas :)

                          < et > sont vraiment super simples à utiliser :

                          • auriculaire gauche sur MAJ
                          • annulaire sur </>

                          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  . Évalué à 2.

                        Je sais pas, maintenant ça fonctionne. PEBCAK sans doute.

                        • [^] # Re: Sombre / clair

                          Posté par  . É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  (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  . Évalué à 2.

                              Oui, chromium. Rien de grave, cela dit.

                  • [^] # Re: Sombre / clair

                    Posté par  (site web personnel) . Évalué à 2.

                    • prévisu des commentaires
                    • drapeaux des liens
                    • sondages
                    • statistiques
                    • espace collaboratif
                    • tribunes

                    • [^] # Re: Sombre / clair

                      Posté par  (site web personnel) . Évalué à 2.

                      • prévisu des commentaires
                      • drapeaux des liens
                      • sondages
                      • statistiques
                      • espace collaboratif
                      • tribunes

                      avec 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  (site web personnel) . Évalué à 2.

                        • prévisu des commentaires
                        • drapeaux des liens
                        • sondages
                        • statistiques
                        • espace 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  (site web personnel) . Évalué à 3.

    J'ai fait une mise à jour à l'instant :

    • la taille de police pour les blocs de code a été légèrement augmenté
    • les dates, scores, avatars, … sont désormais placés correctement sous firefox.

    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 :

    figure {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  margin: 0;
}

  • # Nouvelles versions

    Posté par  (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  (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  (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  (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  (site web personnel) . Évalué à 3.

      Je continue les modifs :

      • meilleure prévisualisation des commentaires
      • ajout de marge pour la bulle "nouveau commentaire" lorsqu'il n'y en a pas
      • meilleur placement des images

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.