Visualiser une révision

CSS LinuxFR

Benoît Sibaud : Lien cassé (11 avril 2015 11:47:27)

Actuellement, LinuxFr alpha ressemble à cela : http://alpha.linuxfr.org

Des CSS peuvent être ajoutées sur  https://alpha.linuxfr.org/stylesheet/modifier (il faut être loggué)

Toutes les css de https://linuxfr.org/css.html n'ont pas encore été portées pour la nouvelle version de LinuxFr :/ De nouvelles suggestions sont les bienvenues aussi :-)

# Liste Initiale de css
## évènement (en lien avec distro ou environnement de bureau)
* FreeBSD-dlfp.css [original]
* dlfp_debian.css [original]
* kde.css
* lucidlynx.css [original]
* opensuse.css [original]
* rootix-linuxfr-ubuntu-8.10-black.css [original] /!\ obsolète /!\
* rootix-linuxfr-ubuntu-8.10-red-ibex.css [original] /!\ obsolète /!\
* rootix-linuxfr-ubuntu-8.10-red.css [original]
* zazooo_fedora.css [original]
## CSS générique
* N97.css [original] voir https://github.com/nono/linuxfr.org/wiki/LinuxFr-Mobile-Version-Requirements
* crevette.css [original]
* geeko.css
* gr3mi.css [original]
* kaiska.css [original], voir http://linuxfr.indefero.net/p/concours-yggdras/source/file/master/kaiska-new.css
* lordcow.css [original]
* nightgrey.css [original]
* original.css
* rootix-linuxfr-1.css [original]
* rootix.css [original] /!\ obsolète /!\
* springtime.css [original]
* yneveu.css [original]
* zenburn.css [original]

# Nouvelles CSS suggérées ou proposées
ajouter son nom  (ou équipe) prenant en charge une nouvelle CSS, en donnant un lien vers un exemple (voire le suivi)

* bmo (opensuse) https://github.com/nono/linuxfr.org/issues#issue/53
    * lien css : http://bmo-perso.pagesperso-orange.fr/linuxfr/alpha/opensuse
* barmic
    * https://linuxfr.org/~barmic/30498.html
    * voir l'advancement: http://linuxfr.indefero.net/p/concours-barmic/timeline/
* yellowiscool vintage css
    * https://alpha.linuxfr.org/wiki/carottes-rap%C3%A9es
    * https://alpha.linuxfr.org/users/yellowiscool/journaux/termin%C3%A9
* 0WtP0
    * Making small changes on the current default css so people stop complaining about it.
    * lien css : http://linuxfr.indefero.net/p/0wtp0/source/file/master/original_quickfix.css
    * voir l'avancement : http://linuxfr.indefero.net/p/0wtp0/timeline/
* Sygne
    * http://linuxfr.org/~Sygne/30547.html
    * lien css : http://souffles.eu/dlfp.css
* 2PetitsVerres
    * http://alpha.linuxfr.org/users/2petitsverres/journaux/css-en-cours-de-dev
    * lien css : http://linuxfr.indefero.net/p/concours-yoda222/source/file/master/RonRonnement.css
* yggdras
    * http://linuxfr.indefero.net/p/concours-yggdras/source/file/master/kaiska-new.css
    * version avec texte réduit en largeur: http://linuxfr.indefero.net/p/concours-yggdras/source/file/master/kaiska-short.css

# demande d'amélioration des CSS et suivi des bugs

cf. https://github.com/nono/linuxfr.org/issues/labels/CSS, voir aussi les journaux  https://alpha.linuxfr.org/tags/css/public qui en parlent (si le tag a bien été ajouté).

# Liste des classes CSS de pygments

Pygments est utilisé pour la coloration syntaxique du code, mais il utilise des noms de classe très courts. La feuille de style par défaut peut être utilisé en ajoutant la ligne suivante dans la CSS:

```css
@import url('https://alpha.linuxfr.org/stylesheets/pygments/colorful.css');
```

Sinon, voici la liste des classes de pygments :

```css
.hll Highlight
.c Comment
.err Error
.k Keyword
.o Operator
.cm Comment.Multiline
.cp Comment.Preproc
.c1 Comment.Single
.cs Comment.Special
.gd Generic.Deleted
.ge Generic.Emph
.gr Generic.Error
.gh Generic.Heading
.gi Generic.Inserted
.go Generic.Output
.gp Generic.Prompt
.gs Generic.Strong
.gu Generic.Subheading
.gt Generic.Traceback
.kc Keyword.Constant
.kd Keyword.Declaration
.kn Keyword.Namespace
.kp Keyword.Pseudo
.kr Keyword.Reserved
.kt Keyword.Type
.m Literal.Number
.s Literal.String
.na Name.Attribute
.nb Name.Builtin
.nc Name.Class
.no Name.Constant
.nd Name.Decorator
.ni Name.Entity
.ne Name.Exception
.nf Name.Function
.nl Name.Label
.nn Name.Namespace
.nt Name.Tag
.nv Name.Variable
.ow Operator.Word
.w Text.Whitespace
.mf Literal.Number.Float
.mh Literal.Number.Hex
.mi Literal.Number.Integer
.mo Literal.Number.Oct
.sb Literal.String.Backtick
.sc Literal.String.Char
.sd Literal.String.Doc
.s2 Literal.String.Double
.se Literal.String.Escape
.sh Literal.String.Heredoc
.si Literal.String.Interpol
.sx Literal.String.Other
.sr Literal.String.Regex
.s1 Literal.String.Single
.ss Literal.String.Symbol
.bp Name.Builtin.Pseudo
.vc Name.Variable.Class
.vg Name.Variable.Global
.vi Name.Variable.Instance
.il Literal.Number.Integer.Long
```

# markitup

Markitup est l'éditeur de markup utilisé sur les textarea. Pour le personnaliser, le plus simple est de suivre [les instructions de la doc officiellle](http://markitup.jaysalvat.com/documentation/).

# tests de non-régression

navigateurs :

* epiphany
* firefox
* chromium
* konqueror

pages :

* https://alpha.linuxfr.org/tableau-de-bord
* https://alpha.linuxfr.org/ accueil (PPP)
* https://alpha.linuxfr.org/news dépêches
* https://alpha.linuxfr.org/journaux journaux (certains proposent du formatage)
* . . . .
* https://alpha.linuxfr.org/plan le reste (compléter)
* http://download.tuxfamily.org/cooker/DLFP/alpha/red-hat-lance-rhel-6.html un exemple de page en modo (changer la css via firefox)
* https://alpha.linuxfr.org/statistiques vérifier ce qui peut être ajouté
* https://alpha.linuxfr.org/redaction l'espace de rédaction avec ses fonctionnalités supplémentaires (création de dépêche collaborative)

vérification conformité

* http://validator.w3.org/ HTML 5
* http://jigsaw.w3.org/css-validator/ CSS
* autre (HTML5, CSS, WAI) aller plus loin avec http://www.w3.org/WAI/eval/Overview