Journal linuxfr-solarized : nouvelle version

Posté par  (site Web personnel) . Licence CC By‑SA.
Étiquettes :
21
26
juil.
2012

Sommaire

Bonjour tous,

Je vous faisais part il y a peu de la CSS que j'ai créé pour LinuxFr.org.

J'ai fais ce premier journal pour avoir des retours assez rapide sur son utilisation et pour voir un peu ce qu'il manquait. Je note toute de même que d'après les stats un peu plus de 15 personnes utilisent une version ou une autre, c'est déjà plus que je ne pensais.

Description :

J'ai donc pris pas mal de remarques en compte, et j'ai une version qui me satisfait suffisamment pour refaire un journal.

Comme pas mal de choses ont évoluées voici un résumé des CSSs :

Il y a en effet 2 grands types de CSS : fond clair ou fond sombre. Dans les deux cas il y a une sous catégorie concernant les extraits de code : comme le texte ou inversé.

La CSS est volontairement assez colorée, notamment au niveau des badges représentant les notes des contenus (journaux, dépêches, forums). Ils sont classés suivant plusieurs catégories, du - au + :

  • rouge (looser)
  • orange (vil trolleur)
  • couleur secondaire (dépend de la CSS) (neutre+, + car il faut une note positive ou nulle)
  • bleu (intéressant)
  • vert (parfait pour rentrer dans l'histoire des moules)

La CSS est en largeur fixe (le classique 960px).

Les tribunes, y compris dans l'espace de rédaction collaboratives ont étés réalisées (très simplement, mais avec survol des norloges).

L'édition est l'endroit où il resterait encore un peu de boulot, je ne suis pas pleinement satisfait mais ça me permet quand même de naviguer, commenter et publier convenablement donc ça devrait aller pour l'instant).

Les statistiques et sondages sont plutôt cools je trouve (ben quoi, j'ai le droit d'être satisfait non ? ;-) )

Les contenus nouveaux et non visités ont droit à une mise en évidence un peu criarde mais ça correspond à ma façon (en partie visuelle et pas uniquement avec la toolbar) de naviguer dans le site.

Les citations dans les commentaires voient la couleur de la bordure varier avec la profondeur, plus agréable je trouve.

Scrineshout (cliquables pour de plus grandes versions) :

Page des journaux fond clair :

light background

Page des journaux fond sombre :

dark background

Commentaires, quote et code clair sur fond clair :

light light

Idem mais code sombre :

light dark

Commentaires, quote et code sombre sur fond sombre :

dark dark

Idem mais code clair :

dark light

Pour la technique :

  • basée sur le thème de couleur Solarized qui permet d'avoir deux ensembles de couleurs (sombre ou clair) plutôt cohérent
  • basée sur Knacss pour la base de la base
  • utilisation de sass comme préprocesseur CSS, afin entre autre d'être compatible avec les sources de LinuxFR

Le poids total de la CSS est un peu élevé à mon goût (environ 50ko, 6ko en gzip). C'est pas non plus énorme mais pour le moment j'ai du mal à descendre en dessous (en tout cas avec sass), la faute en partie aux codes de compatibilité pour les dégradés par exemple.

Les sources sont disponibles dans deux dépôts :

Pourquoi deux, sachant qu'en plus ils sont pour le moment synchrones ? en fait j'aime bien Baregit, c'est beaucoup plus rapide que github, son créateur est dans les parages, c'est hébergé en Europe. Pourquoi github alors ? Fonctionnellement la plateforme est sympa, wiki, etc. Donc pour le moment j'ai les deux, et ça ne coûte pas grand chose de faire 2 push. Je verrai par la suite si je n'en garde qu'un ou pas.

Les liens vers les CSS :

Note pour finir :

N'hésitez surtout pas à me signaler si vous voulez des modifications, améliorations, etc.

  • # Retour

    Posté par  . Évalué à 2.

    Je fais partie des utilisateurs de la CSS claire et je l'apprécie beaucoup, merci pour ton travail.

    Pour l'instant, j'ai deux remarques qui me viennent à l'esprit. Tout d'abord, je ne suis pas fan de la taille des titres des dépêches ou des journaux et de leur soulignage automatique. Deuxième point, j'aimerais bien me rapprocher des polices que tu as utilisées dans ta capture d'écran, mais je n'ai pas Century Gothic ni Helvetica (je crois que c'est celles-ci que tu utilises).

    Voilà, encore merci pour ton aide :)

    • [^] # Re: Retour

      Posté par  (site Web personnel) . Évalué à 4.

      Merci :)

      Ha oui, je note pour virer le soulignement des titres. Pour la taille, faut que je regarde justement avec les différentes polices et aussi que je vois dans quelle mesure ça peut être changé de façon suffisamment harmonieuse avec les autres tailles (mais pas trop car en fait j'aime bien la taille, mais je dois bien pouvoir la baisser un poil)

      Pour la police heu… disons que j'ai fais mes captures sur un poste windows (patapai) Je vais voir par contre ce que je peux trouver comme police sympa et approchante. Les captures sont faites avec Century Gothic (et elle est plutôt sympa, notamment le '?')

      • [^] # Re: Retour

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

        voici et voici

        Pour ce qui est de la police je vais surtout essayer d'en trouver une avec le même gris typographique. C'est ce qui permettra d'avoir un rendu assez similaire et agréable à l'oeil mais avec une police différente.

        • [^] # Re: Retour

          Posté par  (site Web personnel) . Évalué à 2. Dernière modification le 29/07/12 à 16:18.

          Je reviens sur l'histoire de la police.
          J'ai fais quelques tests, à vous me de dire ce qu'il vous semble intéressant comme police (bon c'est pas dit que je reteste pas d'autres polices, mais en voici déjà quelques unes :)

          J'oubliais, il y a aussi quicksand qui me plait pas mal mais j'ai un problème de capture d'écran étrange avec… mais à évaluer aussi

          • [^] # Re: Retour

            Posté par  (site Web personnel) . Évalué à 1. Dernière modification le 29/07/12 à 16:55.

            tu vois, je réponds toujours hein (j'ai toujours rêvé faire parti du fameux panel représentatifs, c'est donc pour moi une première petite victoire).
            Donc, pour moi les deux dernières sont bien plus lisibles, sans préférences entre elles.

            Ceci n'est pas une signature

            • [^] # Re: Retour

              Posté par  . Évalué à 1.

              Pareil, mais j'ajouterais que j'aime bien la première pour les titres.

              • [^] # Re: Retour

                Posté par  (site Web personnel) . Évalué à 2. Dernière modification le 30/07/12 à 12:02.

                OK, merci de ces retours.

                J'ai donc fait un petit mix pour le moment :

                • numans pour le corps
                • Josefin Sans pour les titres
                • Josefin Slab pour les titres dans les contenus (par ex sommaires) car Josefin Sans s'affiche alors plutôt mal (par contre c'est une police Serif, mais je trouve que ça passe quand même)

                J'ai aussi viré certaines bordures pour alléger un peu le style.

                Le tout devrait être dispo demain au plus tard (si tout se passe bien comme prévu ;-) )

                Ha oui, à noter que sous chrome windows l'affichage est plutôt crade (pas d'anti aliasing) alors que sous firefox, firefox linux c'est beaucoup mieux

    • [^] # Re: Retour

      Posté par  . Évalué à 5.

      J'utilise aussi la CSS dark-dark, et ca me repose les yeux, merci!

      Par contre, je trouve dommage qu'un clic sur le logo "LinuxFR" (en haut à gauche) ne ramène pas à la page d'accueil. J'ai pris l'habitude de cliquer dessus, et ca me manque :-)

      Merci pour ta contribution!

    • [^] # Re: Retour

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

      Hello !

      Je teste également et je pense que ça serait bien d'avoir une marge plus grande entre les informations de publications et le contenu des articles (c.f. le troisième article dans les captures d'écran où le sommaire est collé à la date de publication et au nom de l'auteur).

      Merci !

    • [^] # Re: Retour

      Posté par  . Évalué à 2. Dernière modification le 26/07/12 à 17:16.

      Est-ce possible de faire en sorte que les liens vers dépêches, journaux, etc. soient plus espacées les uns des autres ?

      Autrement j'aime bien la version claire de ta feuille de style.

      Édition : Serait-il possible d'enlever le soulignement des [] et [-] pour aller au commentaire parent ou déplier un commentaire ?

      • [^] # Re: Retour

        Posté par  (site Web personnel) . Évalué à 3.

        Je pense que je vais enlever le soulignement de quasiment tous les liens en tant que titre (leur couleur suffit déjà à les repérer). Ca devrait alléger un peu le style.

        Pour l'espacement, c'est noté

  • # sympa

    Posté par  . Évalué à 7.

    C'est très sympa comme CSS et ça fait plaisir de voir qu'il y a des gens motivés pour développer des CSS pour le site.

    « 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: sympa

      Posté par  (site Web personnel) . Évalué à 6.

      Merci :)

      Il m'a fallu pas mal de temps pour trouver assez de motivation. Non pour en faire une, car je dois avoir 3 ou 4 tentatives de CSS, mais pour en finir une (enfin suffisamment avancer quoi).

      Faire une CSS de base c'est pas super compliqué, mais la fignoler c'est déjà beaucoup plus long. Et lorsque je fais des CSS tous les jours pour le boulot, pas forcément toujours la motivation pour refaire exactement la même chose à côté… mais c'est valable pour beaucoup de monde je pense.

  • # Bravo

    Posté par  . Évalué à 4.

    C'est du bon boulot !!! J'aime bien la dark / light qui repose les yeux !

  • # URL dépréciées

    Posté par  (site Web personnel) . Évalué à 6.

    J'ai oublié de mentionner un point pas négligeable : les urls précédentes (http://ybr.phpnet.org/linuxfr/dark/dark.css et http://ybr.phpnet.org/linuxfr/light/light.css) ne seront probablement pas mises à jour dorénavant.
    Que ceux qui les utilisent migrent sur, respectivement, http://ybr.phpnet.org/linuxfr/dark_light_code.css et http://ybr.phpnet.org/linuxfr/light_dark_code.css.

    Je sais c'est un peu embêtant mais bon, c'est pas grand chose et ça me permet de ne maintenir que 4 urls et non 6 (à moins que quelqu'un me sorte un .htaccess qui va bien, j'ai juste la flemme là…)

  • # menu du haut

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

    Je plussoie la remarque sur le soulignement des titres, et j’en rajouterais une autre :
    Il faudrait arranger un peu la présentation du menu en haut (avec Accueil, Dépêches, Journaux…), l’aspect me paraît un peu tassé en pas très lisible. Peut-être en espaçant les titres, ou en faisant des boutons, ou juste en insérant un pipe ou autres entre chaque titre…

    À part ce chipotage, merci pour ces beaux CSS, que j’utilise désormais (light-light).

    La lumière pense voyager plus vite que quoi que ce soit d'autre, mais c'est faux. Peu importe à quelle vitesse voyage la lumière, l'obscurité arrive toujours la première, et elle l'attend.

  • # je fais partis de ces quinze

    Posté par  (site Web personnel) . Évalué à 3. Dernière modification le 26/07/12 à 21:45.

    mais je viens de remarquer que, chez moi en tout cas (chrome 20 sous linux), les commentaires notés en négatifs ne sont pas repliés, même si j'ai un seuil d'affichage à 1. Sinon : bravo la css est super.
    Question subsidiaire : y a-t-il un moyen de spécifier une css par navigateur : genre une qui vas bien sur mon bureau linux, une autre sous IE10 à mon travail (où la ta CSS est complètement inopérante sois dit en passant) et une autre lorsque je moule de façon smart sur mon smartphone ?

    Ceci n'est pas une signature

    • [^] # Re: je fais partis de ces quinze

      Posté par  (site Web personnel) . Évalué à 5.

      Question subsidiaire : y a-t-il un moyen de spécifier une css par navigateur ?

      Non, ce n'est pas possible pour le moment. Il y a des entrées dans le suivi à ce sujet, mais j'avoue ne pas trop savoir par quel bout prendre ça (est-ce qu'il vaut mieux proposer par User-Agent ou en fonction de la résolution ? comment faire pour les utilisateurs non authentifiés ?). Ça fait parti des choses que je pense traiter bientôt, mais je ne refuse pas d'avoir quelques avis supplémentaires sur la question.

      • [^] # Re: je fais partis de ces quinze

        Posté par  (site Web personnel) . Évalué à 1. Dernière modification le 26/07/12 à 22:40.

        Mon avis perso : par session c'est amha ce qui nous laisse le plus libre de décider selon la station de moulage. Merci pour l'info en tout cas.

        Ceci n'est pas une signature

      • [^] # Re: je fais partis de ces quinze

        Posté par  . Évalué à 3.

        Il me semble qu'avant c'était implémenté par un cookie (le nom de la CSS dans le cookie). Ça me semble le plus simple.

        « 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: je fais partis de ces quinze

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

          Le problème d'une solution pas cookie ou par session, c'est qu'il faut le reconfigurer sur chaque poste.
          Il faudrait pouvoir définir une CSS globale par utilisateur et pouvoir la surcharger sur un critère de session/cookie si souhaité, mais en laissant la css configurée dans les autres cas.

          Je sais pas si c'est très clair…

          • [^] # Re: je fais partis de ces quinze

            Posté par  . Évalué à 3.

            C'est sûr que c'est mieux mais les cookies offres un moyen simple pour que les anonymes puissent choisir leur CSS et pour avoir une feuille différente pour les smartphones. Après, on peut évidemment faire plus compliqué.

            « 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: je fais partis de ces quinze

        Posté par  . Évalué à 1.

        Solution supplémentaire: se baser sur les media queries pour avoir une CSS tout terrain.

        • [^] # Re: je fais partis de ces quinze

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

          le problème est que ca nécessite l'ajout de la balise meta viewport, ce qui a été fait puis défait car cela cassait les styles qui ne sont pas prévus pour. Une solution serait peut-être d'avoir une case à cocher dans les préfèrences pour ajouter cette balise si on utilise une css compatible ?

          • [^] # Re: je fais partis de ces quinze

            Posté par  . Évalué à 1.

            Ce n'est pas obligatoire. Tu peux utiliser des CSS réactives sans cette balise sur le bureau, et firefox réagira comme il le doit. Après, le comportement des téléphones est un autre problème.

            De toute façon on pourrait sans doute avoir une convention du genre:

            • on rajoute la balise si la CSS le demande
            • une CSS peut demander à avoir la balise en proposant un lien CSS avec une query string quelconque (genre ?metaviewport=true)
          • [^] # Re: je fais partis de ces quinze

            Posté par  (site Web personnel) . Évalué à 4.

            le problème est que ca nécessite l'ajout de la balise meta viewport, ce qui a été fait puis défait

            C'est maintenant refait et la CSS par défaut a été adaptée pour s'afficher pas trop mal sur mobile (mieux qu'avant en tout cas). Cf https://github.com/nono/linuxfr.org/commit/12620667089ac5d63a1621d65daa52aa9d0700eb.

            • [^] # Re: je fais partis de ces quinze

              Posté par  (site Web personnel) . Évalué à 1.

              cool, merci ! bon maintenant il faut que je m'attaque à faire une version responsive de ma css (j'en avais fait mais un coup de rsync malheureux …).

            • [^] # Re: je fais partis de ces quinze

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

              Super !

              J'ai donc pu tester la nouvelle version de ma css sur mon smartphone.
              J'ai donc plusieurs versions selon la largeur, entre autre la version "mobile" est légèrement différente entre portrait et paysage.

              Juste deux questions à ceux qui pourraient me lire et qui sont intéressés par le sujet :

              • vous pensez que la toolbar est importante sur mobile ? le problème est que la position fixed c'est pas génial (c'est mal synchronisé, en tout cas sous firefox android)
              • que pensez-vous de masquer les boites autres que login ? (genre sondage, rédaction, etc) en mobile portrait (la version la plus étroite quoi)
              • [^] # Re: je fais partis de ces quinze

                Posté par  (site Web personnel) . Évalué à 1.

                Mon grain de sel:
                pour le point 1, ne se prononce pas
                pour le point 2 non plus

                bon d'accord pour le point 2 je vote oui des quatre mains (j'ai pas un galaxy note, juste un galaxy 1 tout vieux avec un écran vraiment petit donc moi je vote oui)

                Ceci n'est pas une signature

              • [^] # Re: je fais partis de ces quinze

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

                vous pensez que la toolbar est importante sur mobile ? le problème est que la position fixed c'est pas génial (c'est mal synchronisé, en tout cas sous firefox android)

                la toolbar, pas forcément, en tt cas pas forcément sous la même forme, mais les boutons qui permettent de naviguer entre les nouveaux commentaires, oui! c'est aujourd'hui ce que je trouve le plus galère sur smartphone

                \Ö<

                • [^] # Re: je fais partis de ces quinze

                  Posté par  . Évalué à 1.

                  Gros +1. Sur smartphone ou tablette, on n'a pas les raccourcis clavier pour passer au commentaire non-lu suivant, et la toolbar est tellement petite qu'elle est inutilisable (en tout cas, avec mes gros doigts, j'ai beaucoup de mal)

                  Juste garder les boutons précédent/suivant en leur donnant une bonne taille, ça serait génial.

                  • [^] # Re: je fais partis de ces quinze

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

                    Je verrai pour voir les boutons < > alors.
                    Par contre ça arrivera un peu plus tard, je pense que je vais revoir la CSS pour avoir réellement plusieurs affichages : mode mobile portrait, mobile paysage, faible largeur, largeur normale et wide

                    Mais ça fait quand même du boulot, donc ce sera pas dans la prochaine release

            • [^] # Re: je fais partis de ces quinze

              Posté par  (site Web personnel) . Évalué à 1.

              super! j'essaye ça tout de suite… en tout cas merci de prendre en compte nos remarques (qu'est-ce que je suis fleur bleu en ce moment, ça passera ne vous inquiétez pas)

              Ceci n'est pas une signature

      • [^] # Re: je fais partis de ces quinze

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

        est-ce qu'il vaut mieux proposer par User-Agent ou en fonction de la résolution ?

        les media-queries c'est quand même plus souple (ca s'adapte à n'importe quelle résolution, mobile, tablette, …) que le match de User-Agent. Le problème c'est cette balise meta viewport (cf ci-dessus).
        pour les utilisateurs non authentifiés, il suffirait que le thème par défaut soit responsive (avec à ce moment là la balise meta viewport par défaut et qu'on puisse la désactiver dans les préférences si on utilise une css incompatible.

    • [^] # Re: je fais partis de ces quinze

      Posté par  (site Web personnel) . Évalué à 4.

      En effet pour les commentaires repliés il manquait la classe .fold

      C'est normalement maintenant ok.

  • # Merci

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

    Merci beaucoup pour ce beaux travail, cela ira très bien avec mon Emacs qui utilise Solarized Dark !

    Thème que j'apprécie il me rappelle un vieux thème Emacs très sympathique qui s'appelait Gnome2.

  • # Avant-Garde

    Posté par  . Évalué à 2.

    Je crois avoir reconnu Adobe Avant-Garde… ou une cousine, j'ai bon? En tout cas j'aime bien la police.

  • # Update

    Posté par  (site Web personnel) . Évalué à 5.

    Déjà, merci pour les messages.

    Ensuite, une petite mise à jour a été faite, notamment :

    • amélioration du lien "proposer un contenu"
    • mise en évidence http/https
    • placement des titres dans la sidebar
    • réduction de la police dans la sidebar
    • espacement, séparateur et mise en évidence du lien courant dans les liens de navigation
    • meilleur placement du sommaire dans les articles (journaux et autres)
    • suppression du soulignement des titres et des liens en fait
    • logo cliquable
  • # Petit bug

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

    En cas de largeur limitée de la fenêtre, on se retrouve avec une page blanche ne contenant que la sidebar, et l'ensemble du contenu est « poussé » en dessous.

    Voici une capture d'écran pour aider à comprendre.

    • [^] # Re: Petit bug

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

      Vi, c'est pas vraiment fait pour être utilisé en dessous de 960px…

      Je le note et je verrai si je peux y faire quelque chose (genre du "responsive design") dans une prochaine version.

      • [^] # Re: Petit bug

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

        Vi, c'est pas vraiment fait pour être utilisé en dessous de 960px…

        Le problème avec les écrans larges, c'est qu'ils sont trop larges pour utiliser les fenêtres en plein écran, et quand on divise l'écran en deux, on se retrouve avec une surface qui n'a pas pas été prévue par l'application…

        • [^] # Re: Petit bug

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

          Ha, ce doit être parce que je suis sur un écran large (mais pas trop, 1440px) et en dual screen (donc 2 x 1440) et j'ai donc mon navigateur en plein écran.
          Et sur mon autre, j'ai que 1280px de large donc c'est fenêtré mais pas plein écran, ni moitié, et ça passe très bien.

          Mais c'est noté, je pense que je vais m'en occuper plus rapidement que prévu.

          Bon, vu que c'est toi qui le demande initialement (enfin je sais plus si quelqu'un en avait parlé avant ou pas), une petite question : tu préférerais avoir d'abord les contenus (journaux, etc) et les boites (utilisateurs, sondage, rédaction) en dessous ou le contraire ? Dans les deux cas il y aura les liens pour aller directement à l'un ou l'autre (ils sont juste masqués pour le moment)

          Par contre, rédaction collaborative et tribune risque de souffrir avec une zone moins large. Mais ça permettrait peut-être d'avoir un affichage smartphone ok.

      • [^] # Re: Petit bug

        Posté par  . Évalué à 2.

        j'ai remarqué ça également. Je pense que c'est pas très pratique pour l'utilisateur de prévoir ça pour 960px. C'est pas mal pour du plein écran en par exemple 1280x1024, mais si on veut réduire la taille de la fenêtre, qu'on a un netbook ou un téléphone, c'est un peu juste.

        La tribune de modération est trop décalée également (espace vide entre le nom et le commentaire, d'environ la moitié de la boîte, en gros ça fait un mot par ligne)

        Je trouve aussi que dans la version light, le texte est trop clair (bleu clair sur fond ocre), le manque de contraste rend le texte moins lisible.

        Only wimps use tape backup: real men just upload their important stuff on megaupload, and let the rest of the world ~~mirror~~ link to it

        • [^] # Re: Petit bug

          Posté par  . Évalué à 2. Dernière modification le 27/07/12 à 11:00.

          par exemple 404E53 au lieu de 657B83

          Je vois sur le site de solarized qu'ils n'utilisent qu'une seule couleur pour le contenu, que le fond soit clair ou foncé. Ça me semble un peu extrême pour la lisibilité, en tout cas quand on doit lire une grande quantité de texte.

          Only wimps use tape backup: real men just upload their important stuff on megaupload, and let the rest of the world ~~mirror~~ link to it

          • [^] # Re: Petit bug

            Posté par  (site Web personnel) . Évalué à 3.

            Je vois sur le site de solarized qu'ils n'utilisent qu'une seule couleur pour le contenu, que le fond soit clair ou foncé.

            Non, pas exactement : lorsque le fond est clair la couleur de texte est base00 (#657b83), lorsque le fond est foncé la couleur de texte est base0 (#839496)

            Ensuite il y a deux autres couleurs (enfin 4) pour moins contrasté (typiquement les commentaires, c'est visible dans la barre latérale) et pour plus contrasté (titres par exemple, mots clés dans le code, etc)

            J'ai essayé avec 404E53 mais j'aime pas trop, justement trop contrasté et pas assez reposant je trouve.
            Après il est vrai que ça dépend beaucoup des écrans et de la luminosité (sur mon dual screen entre l'écran externe et l'écran du portable j'ai une sacré différence)

            Mais je vais voir si je peux pas tout de même y faire quelque chose (pourquoi pas encore une déclinaison avec un contraste plus prononcé)

        • [^] # Re: Petit bug

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

          (je répond pour les deux commentaires)

          si on veut réduire la taille de la fenêtre, qu'on a un netbook ou un téléphone, c'est un peu juste

          J'ai commencé à travaillé sur ce point. Je pense que ce sera bon pour la prochaine release, d'ici quelques jours au plus.
          J'ai quelque chose qui fonctionne plutôt pas mal sur une petite largeur, mais il faut que j'arrive à améliorer l'entre deux (pour une fenêtre juste un peu plus petite quoi)

          • [^] # Re: Petit bug

            Posté par  (site Web personnel) . Évalué à 3.

            J'ai commité ce qu'il faut pour qu'elle soit utilisable avec une fenêtre plus petite.
            Il y a plusieurs "versions" (utilisant des media queries du genres @media screen and (min-width: 601px) and (max-width: 959px)) :

            • très petit : affichage tout vertical, les blocs les uns en dessous des autres, réduction de certaines marges (commentaires, tribune)
            • petit : idem mais la sidebar est en table-cell (c'est pas mal lorsqu'on charge la page dedans, pas génial si on redimensionne, je ne sais pas pourquoi)
            • moyen (600 à 960px en gros) : la même chose que le style par défaut mais avec des tailles de bloc (barre latérale et contenu) en pourcentage. Les proportions sont les mêmes, mais ça permet de se dégrader progressivement
            • normal (>= 960px) ce que vous avez actuellement

            Le tout n'est pas encore parfait mais ça vient petit à petit.

            Pour les tailles supérieures ça viendra plus tard

            Il ne me reste plus que deux choses (à moins que d'autres en ajoutent) et je ferai une nouvelle release pour que vous puissiez voir.

            (par contre je suis un peu degouté, mon bel historique git est un peu foiré. j'ai voulu utiliser le client github sous windows, en utilisant aussi gitflow donc j'ai sorti mon cygwin, pis ça a un peu merdé, bla bla bla… j'aurais mieux fait de tout réaliser à la main ça aurait été plus simple…)

  • # Tribune des modéros

    Posté par  (site Web personnel) . Évalué à 3.

    Un problème avec cette css c'est que cela compresse la tribune des modéros au point que ça en devient presque illisible.
    Voir cet exemple :

    Titre de l'image

    Avec la css par défaut j'ai ça :

    Titre de l'image

    • [^] # Re: Tribune des modéros

      Posté par  (site Web personnel) . Évalué à 3.

      Ha ok…
      Faut dire que j'ai pas ça moi dans mon interface :)

      Faut pas hésiter si vous avez des cas comme ça, et non accessible aux mortels, de me fournir image (et html ou extrait) et je corrigerai.

      Pour le moment je l'ai noté ici et ça fera partie de la prochaine version.

      • [^] # Re: Tribune des modéros

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

        Hello,

        Pour accéder à toutes ces parties réservées, on doit pouvoir te fournir un accès modero sur alpha si tu le souhaites. A voir avec NoNo< la faisabilité. Je te conseille d'en faire la demande via moderateurs Chez linuxfr point org

        Merci pour tout ton boulot sur les CSS.

        • [^] # Re: Tribune des modéros

          Posté par  (site Web personnel) . Évalué à 4.

          De rien :)
          Il y a quoi d'autre comme contenu ?

          Bon ok, le plus simple serait que je m'installe une instance de linuxfr, ça serait pas mal. Pour le moment je pense que j'ai résolu le problème de la tribune modo. Lorsque j'aurai sorti la prochaine version je verrai si j'ai besoin d'aller plus loin côté contenu modérateur ou non, et le cas échéant je ferai la demande.
          J'avais totalement oublié la version alpha :)

    • [^] # Re: Tribune des modéros

      Posté par  (site Web personnel) . Évalué à 3.

      Pour la tribune ça devrait être ok dans la prochaine release

  • # Largeur fixe

    Posté par  . Évalué à 0.

    Le thème solarized est tentant.
    Je trouve que pour du code le contraste n'est pas assez élevé, mais sur linuxfr ça a l'air de passer mieux.

    Par contre, la largeur fixe est un point bloquant pour moi: on a tous des écrans larges de nos jours… Avoir le choix serait idéal.

    • [^] # Re: Largeur fixe

      Posté par  (site Web personnel) . Évalué à 4.

      Par contre, la largeur fixe est un point bloquant pour moi: on a tous des écrans larges de nos jours… Avoir le choix serait idéal.

      hum, comment ça ?
      La largeur fixe est là en fait pour une raison : limiter la largeur maximale (le nombre de caractères) d'une ligne. Et ce, justement pour une question de lisibilité, de (non) fatigue de lecture, de facilité de lecture.
      Avoir des lignes trop longues est vraiment désagréable lors de la lecture.

      C'est d'ailleurs pour ça que les journaux (par exemple) utilisent des colonnes. Le truc c'est que le contenu de linuxfr ne se prête pas bien à une disposition en colonne.

      Donc partant de là, j'ai bloqué à 960px car ça me permet d'avoir une ligne de largeur correcte. Je suis en train de travailler sur les dimensions en dessous, mais ça ne résout pas ton problème.

      Si on veut exploiter plus de largeur, il y a plusieurs choses que j'ai déjà envisagé :

      • avoir toujours la bonne largeur pour les contenus (donc faire déborder les commentaires par exemple, quelque soit l'indentation). Ca ajouterais un scroll horizontal pas forcément évidemment de prime abord mais ça offrirait vraiment un plus grand confort.
      • avoir quelque chose sur plus de colonnes : (barre latérale) (contenu de la dépêche/journal) (commentaires). Ce serait possible pour des écrans vraiment large, ça pourrait par contre offrir une lecture un peu plus étrange. Mais si les deux contenus sont scrollables indépendamment ça offrirait la possibilité d'avoir sous les yeux à la fois l'article et les commentaires s'y rapportant. C'est un point qui peut être vraiment intéressant je pense.

      Mais par contre, dans tous ces cas la largeur du texte restera relativement fixe. Un design fluide, pourquoi pas, un texte trop large, non.

      • [^] # Re: Largeur fixe

        Posté par  . Évalué à 0.

        En fait je suis tout simplement habitué à la css par défaut de linuxfr: pas de largeur fixe, et pas de zones vides sur la moitié de l'écran. Avec des marges oui, mais pas gigantesques.

      • [^] # Commentaire supprimé

        Posté par  . Évalué à -10.

        Ce commentaire a été supprimé par l’équipe de modération.

        • [^] # Commentaire supprimé

          Posté par  . Évalué à -10.

          Ce commentaire a été supprimé par l’équipe de modération.

          • [^] # Commentaire supprimé

            Posté par  . Évalué à -10.

            Ce commentaire a été supprimé par l’équipe de modération.

            • [^] # Commentaire supprimé

              Posté par  . Évalué à -10.

              Ce commentaire a été supprimé par l’équipe de modération.

            • [^] # Re: Largeur fixe

              Posté par  (site Web personnel) . Évalué à 1.

              s'étonnant que sur Zino j'ai pu dire une annerie

              1. C'est bien plus qu'une ânerie
              2. C'est pas spécifique à zin[od]
              3. Franchement, vas-t-en. Arrête tes délires. Lorsqu'on voit que certains accordaient plus de crédit à Jayce qu'à toi ça devrait te faire comprendre qu'il faut vraiment que tu arrêtes car là t'est tombé bien bas. En fait même comme divertissement tu deviens trop lourd.
          • [^] # Re: Largeur fixe

            Posté par  (site Web personnel) . Évalué à 3.

            // De rien, CrEv. C'est cadeau :)

            Oué ben tu peux repartir avec, je m'en serais vraiment bien passé de tout ton discours incohérent et surtout inutile

  • # Bug

    Posté par  . Évalué à 2.

    Au niveau de la liste des dépêches en cours de rédaction, le premier élément de la liste est la tribune de rédaction et du coup c'est en doublon avec le lien Rédaction.

    • [^] # Re: Bug

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

      Hum, je dirais que c'est plutôt à indiquer ici ;-)

      • [^] # Re: Bug

        Posté par  . Évalué à 2.

        Je viens de comparer avec la feuille de style par défaut et « Rédaction » apparaît verticalement sur la gauche et dans ta feuille de style c'est juste au-dessus d'où mon léger trouble ;)

        Tant que j'y suis, je trouve que sur ta feuille de style le fait d'avoir « suivre les commentaires » et « haut de la page » l'un au-dessus de l'autre propice au clic au mauvais endroit. Après c'est sûrement une question d'habitude. Ça serait possible d'avoir « haut de la page » à gauche et « suivre les commentaires » sur la droite ?

        • [^] # Re: Bug

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

          Ha oui, c'est vrai, les titres sont verticaux sur la feuille de base.
          Je vais regarder (en même temps que pour le nom de l'utilisateur) si je peux trouver un style simple pour le faire un peu autrement.

          Pour le "revenir en haut de page" je vais essayer autrement : l'intégrer (visuellement au moins) dans la toolbar pour l'avoir en permanence accessible. Mais ce sera pour la prochaine version (avec les histoires de design étroits, larges, etc)

  • # Version 2

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

    Bon, je viens de passer la version 2 (je n'ai pas refais les screenshots pour le moment)

    Vous devriez donc voir un certain nombre de changements.

    Si jamais ça ne convient pas (entre autre la police à changé) dites le moi ici ou sur github.

    Et si vous voulez certaines choses pour la suivante, dites le (ici ou sur github) sachant que je vais déjà m'occuper du côté "responsive"

Suivre le flux des commentaires

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