Journal [css] linuxfr-solarized 2.1

Posté par  (site web personnel) .
Étiquettes : aucune
12
30
juil.
2012

Je remonte juste l'info pour ceux que ça pourrait intéresser : une nouvelle version de ma CSS solarized a été publiée

Modifs depuis la version 1 :

  • Amélioration du rendu de la tribune de modération (dans la barre latérale)
  • Prise en compte des écrans / fenêtres < 960px
    • dégradation sommaire pour commencer
    • remontée de la barre latérale si écran trop étroit
    • tous les contenus en une seule colonne sur petits écrans (mobiles)
  • Mise en évidence http/https
  • Espacement des boites dans la barre latérale
  • Espacement des liens de navigation
  • Meilleur placement du sommaire
  • Logo cliquable pour retourner à l'accueil
  • Utilisation de polices externes pour un meilleur rendu (puisque la police précédente, Century Gothic, n'était pas dispo partout)
  • Quelques modifications mineures (taille du texte dans la barre latérale, mise en évidence du login, …)

Suite : la suite est déjà prévue, avec essentiellement du boulot sur la gestion des différentes tailles (mieux que ce qui est fait actuellement). Entre autre tenter de prendre en compte les écrans plus large et pas seulement ceux qui sont plus petit).
Si vous avez des suggestions, c'est ouvert :) (ici ou sur github) Je ne promet pas de prendre en compte les demandes, mais au moins de les étudier.

Note : sous chrome windows (en même temps vous cherchez…) la police n'est pas géniale, comme s'il n'y avait pas du tout d'anti aliasing. Dommage…

Episodes précédents :

  • # Un truc con

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

    Il est possible d'avoir l'image de LFR clickable pour revenir à l'accueil?
    Parce que là c'est super chiant d'avoir à aller en haut dans la barre des liens pour trouver le minuscule "Accueil".

    Alors que viser cette image:
    (celle là)
    est bien plus simple!

    D'ailleurs, la barre de liens est très (trop?) petite et les éléments sont très (trop?) serrés à mon humble avis.

    Sinon elle est super, je l'ai adoptée :)

  • # Police

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

    Alors sous firefox/linux et chromium/linux, la police passe parfaitement bien.
    Mais par contre, même si c'est hautement subjectif, je la trouve très très moche… elle me fait irrésistiblement penser à la comic sans MS (bon, ok, là je suis un peu dur, c'est pas si pire) et même si je vois bien que ce n'est pas la même, j'ai vraiment du mal.

    Dommage, j'aime beaucoup ta CSS par ailleurs!

    \Ö<

    • [^] # Re: Police

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

      ha oué l'a tu es quand même vraiment dur… comic sans ms…

      plus sérieusement de quelle police parles-tu ? celle du corps des messages ? si oui c'est entre autre l'une qui était choisie dans les commentaires dans le précédent journal. dur de contenter tout le monde…

      par contre rien n'empêche que la police soit différente dans la prochaine version,il suffit de m'en indiquer une autre ;) j'ai pas beaucoup de critères, juste que le corps soit assez léger pour avoir une police en 14px qui ne fasse pas grasse, pas trop sombre. donc si certains ont des suggestions je suis ok

      • [^] # Re: Police

        Posté par  (site web personnel) . Évalué à 0. Dernière modification le 30 juillet 2012 à 20:05.

        je viens de regarder plus en détail, et non, ce n'est pas la police du corps des messages qui me dérange, même si je la trouve un peu large/espacée à mon goût. C'est la police des titres qui me gêne, elle fait un peu playskool, je trouve (ce qui m'a fait associer avec la Comic sans ms, mais a y regarder de plus prêt, elle n'y ressemble pas).

        Je t'en suggérerais bien une, mais je n'ai aucune expérience en la matière… Alors d'informer de ce que j'en pense, c'est a peu prêt tt ce que je peux faire, je crois.

        Merci pour ton attention aux retours, en tt cas!

        Edit: j'avais ratée la discussion sur les polices dans le précédent journal, et je viens de regarder. numans, que tu utilise pour le corps, me semble parfaite pour les titres aussi ;)

        \Ö<

        • [^] # Re: Police

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

          Ha ok. Pourtant moi je la trouve pas mal, avec un W sympa. Et j'aime bien le côté police assez grande mais hauteur d'x assez faible.

          Numans j'aime pas trop pour les titre, trop rond et pas assez dense entre autre.
          Mais par contre aucun problème si tu as des suggestions :)

          • [^] # Re: Police

            Posté par  . Évalué à 2.

            Chunk?

            Titre de l'image

            Depending on the time of day, the French go either way.

            • [^] # Re: Police

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

              Sympa :)
              Je vais tester, même si je pense qu'elle est un peu trop grasse. Mais ça se tente, et je rajouterai un screenshot pour que vous voyez ce que ça donne.

              • [^] # Re: Police

                Posté par  . Évalué à 3. Dernière modification le 31 juillet 2012 à 09:05.

                Te casse pas la tête il n’y a pas de caractères accentués, je suis un boulet parfois.
                Mais sinon j’aime bien, mais j'aime Gotham, et ce genre de typos, so…

                Les gens qui veulent suggérer des fontes devraient se sortir les doigts, et faire des screenshots, je ferais un petit tuto sur comment faire ça sous ff et chrome plus tard dans la matinée.

                http://pix.toile-libre.org/?img=1343718196.png

                Depending on the time of day, the French go either way.

      • [^] # Re: Police

        Posté par  . Évalué à 1.

        Et, « bêtement », les polices de la famille DéjàVu ?
        Elles sont sympas, plutôt étendues et souvent disponibles dans les dépôts (ce qui permettrait de ne pas avoir à charger une police externe si elle est déjà installée, si c'est possible en CSS).

        • [^] # Re: Police

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

          J'y avais pensé, mais le truc c'est que je trouve qu'elles sont pas très belles en fait… et surtout hyper classiques car quasi clone de Arial. Et je voulais quelque chose d'un peu plus "sympa". Mais je garde tout de même l'idée sous le coude.

  • # Juste merci

    Posté par  . Évalué à 2.

    Voilà j'utilise la "fond sombre/code sombre" depuis la première version et comme je la trouve juste merveilleuse (pour mes yeux c'est l'extase) ben je tenais à te remercier pour ce magnifique boulot et le résultat que tu as obtenu !

    • [^] # Re: Juste merci

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

      Ben de rien, moi ça me fait plaisir de la faire et plaisir de la voir utilisée. Et surtout la CSS est là où elle en est justement par vos retours et critiques, ce qui permet de confronter les points de vue et de l'améliorer.
      Elle est déjà bien plus fournie et va bien plus loin que ce que je pensais initialement, et c'est pas encore fini :)

  • # 77345

    Posté par  . Évalué à 4.

    Mon coeur balance entre la version sombre et claire, merci pour le temps passé sur ces css!

    Sinon, juste une question, mais je suis peut être passé a coté d’un commentaire qui le mentionnait, c’est normale le titre de la colone note:
    Titre de l'image

    Depending on the time of day, the French go either way.

    • [^] # Re: 77345

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

      Ha oué, alors ça…
      En fait le tableau est trop large pour la place que je lui alloue. Donc j'ai préféré dégrader certains titres (ou même directement certaines colonnes dans le suivi par exemple) pour réduire l'espace des colonnes et garder les titres lisibles.
      Mais je viens de penser qu'il faut que j'essaie avec une rotation des libellés, peut-être que ça peut suffire (soit une rotation, type 45° de tous les titres, soit une écriture verticale). A voir

      • [^] # Re: 77345

        Posté par  . Évalué à 3.

        C'est pas super gênant, mais comme je suis sous Firefox je me suis demandé si le problème venait de lui.

        Sinon, tu as ça comme option: ♩ :)

        Depending on the time of day, the French go either way.

  • # Bogue et suggestion

    Posté par  . Évalué à 2. Dernière modification le 31 juillet 2012 à 09:11.

    Bogue

    Il faudrait prévoir un poil d'espace à gauche des badges qui changent de couleur selon la note. Si le titre est long, comme c'est le cas de la revue de presse de l'APRIL, il arrive qu'avant de passer à la ligne la dernière lettre soit quasiment collée au badge.

    Suggestion

    Un liserer ou une ombre ou je ne sais quoi de léger serait possible pour mieux démarquer la barre d'outil du fond. Si on ouvre un contenu et la barre d'outil se superpose à un titre, il est difficile de la distinguer.

    PS : c'est marrant que les mots inconnus du site apparaissent en rouge lors de la prévisualisation. Par contre cette détection ne se fait pas dans les titres des commentaires. Ou alors c'est que la feuille de style ne le prévoit pas.

    • [^] # Re: Bogue et suggestion

      Posté par  . Évalué à 2.

      Dans le suivi, le style télétype n'est pas le même que dans les journaux. On le voit dans la dernière entrée que j'ai soumise.

    • [^] # Re: Bogue et suggestion

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

      Pour le style de code, j'ai noté ce sera corrigé.

      Pour ce qui est de la séparation de la barre d'outil, je vais la changer. Mais pour ce qui est de la repérer, en fait le truc le plus simple c'est quelle est toujours au même endroit ;)

      Pour le titre trop long, tu aurais une capture ?
      Car chez moi ça donne ça :

      titre

      • [^] # Re: Bogue et suggestion

        Posté par  . Évalué à 2.

        Titre collé au badge

        Pour ce qui est de la plateforme, je suis sous Firefox 14 avec NoScript qui autorise DLFP.

        • [^] # Re: Bogue et suggestion

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

          ok. Le truc c'est que tu dois probablement refuser les polices externes. Et donc tu utilises les polices de bases, qui n'ont pas la même taille.
          Si tu débloque les polices ça devrait être mieux. Et sinon je verrai pour rajouter un peu plus d'espace si c'est possible.

        • [^] # Re: Bogue et suggestion

          Posté par  . Évalué à 2. Dernière modification le 31 juillet 2012 à 10:38.

          Rajoute http://fonts.googleapis.com/ dans la white liste de noscript.
          Pour le moment les fonts ne sont pas dispo sur Linuxfr, il les charge depuis l'url précitée (au passage pas de https pour fonts.googleapis, ça passe dans chrome?)

          Depending on the time of day, the French go either way.

          • [^] # Re: Bogue et suggestion

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

            A priori elles sont aussi dispo en https
            Je vais voir si je peux les charger en relatives (sans http/https, comme c'est fait d'ailleurs pour les css embarquées de linuxfr, voir la news) et dans ce cas ça devrait aller

            • [^] # Re: Bogue et suggestion

              Posté par  . Évalué à 2.

              Du coup je n'ai plus le problème avec le badge mais j'ai une préférence pour la fonte que j'ai par défaut. Je vais essayer celle proposée tout de même.

            • [^] # Re: Bogue et suggestion

              Posté par  . Évalué à 2.

              Ok, j’ai dû avoir les yeux qui se croisent, j’étais certain qu’il me redirigeait sur la version http…
              Et j'imagine qu'il faudrait qu'il rajoute aussi http://themes.googleusercontent.com dans sa white list.

              Depending on the time of day, the French go either way.

    • [^] # Re: Bogue et suggestion

      Posté par  . Évalué à 2.

      Si la première partie d'une dépêche se termine par un sommaire, ce dernier est accolé à la liste de liens qui suit et faudrait un poil d'espacement pour mieux faire le distinguo. La revue de presse de l'APRIL est un exemple.

Suivre le flux des commentaires

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