source: spip-zone/_plugins_/spip_hop/trunk/prive/style_prive_plugin_spip_hop.html @ 96277

Last change on this file since 96277 was 96277, checked in by teddy.spip@…, 3 years ago

Des éléments correctifs pour le responsive :

  • Quand on été en pleine largeur, la navigation et le conteneur n'étaient pas 'responsive' ;
  • Pour la div.largeur, on n'avait plus de padding, tout était collé au bord ;
  • On réduit la hauteur de #navigation pour ne pas avoir un espace 'vide' non compréhensible ;
  • Up de z.
File size: 4.3 KB
Line 
1[(#REM)<style>/*
2        Ce squelette definit les styles de l'espace prive
3
4        Note: l'entete "Vary:" sert a repousser l'entete par
5        defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)
6        genant en cas de "rotation du cookie de session" apres
7        un changement d'IP (effet de clignotement).
8
9        ATTENTION: il faut absolument le charset sinon Firefox croit que
10        c'est du text/html !
11*/]#CACHE{3600*100,cache-client}
12#HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
13#HTTP_HEADER{Vary: Accept-Encoding}
14/*
15On recupere les valeurs des define pour ne pas casser la compatibilite
16#SET{config_petit_ecran,#CONFIG{spip_hop/petit_ecran}}
17#SET{config_grand_ecran,#CONFIG{spip_hop/grand_ecran}}
18#SET{petit_ecran,#GET{config_petit_ecran,#EVAL{_PETIT_ECRAN}|sinon{960px}}} [petit_ecran: (#GET{petit_ecran});]
19#SET{grand_ecran,#GET{config_grand_ecran,#EVAL{_GRAND_ECRAN}|sinon{1280px}}} [grand_ecran: (#GET{grand_ecran});]
20
21Gestion de la largeur du bandeau, par defaut (pour ne pas casser la compatibilite) il prend la dimension de la largeur de l'ecran
22[(#CONFIG{spip_hop/etendre_bandeau}|oui) #SET{largeur_bandeau,div#page}]
23
24Si on est en pourcentage, on donne une valeur min-width equivalent aux valeurs standards de SPIP
25[(#GET{petit_ecran}|match{'%'}|oui)
26        [(#SET{petit_minwidth, 780px})]
27][(#GET{grand_ecran}|match{'%'}|oui)
28        [(#SET{grand_minwidth, 974px})]
29]
30Si on est en px, on verifie que la valeur indiquee dans la constante n'est pas plus petite que les valeurs standards de SPIP.
31Si oui, on prend cette valeur pour min-width, sinon, on prend les valeurs standards de SPIP.
32[(#GET{petit_ecran}|match{'px'}|oui)
33        [(#SET{petit_minwidth, [(#GET{petit_ecran}|intval|<{780}|?{#GET{petit_ecran},780px})]})]
34][(#GET{grand_ecran}|match{'px'}|oui)
35        [(#SET{grand_minwidth, [(#GET{grand_ecran}|intval|<{974}|?{#GET{grand_ecran},974px})]})]
36]
37*/
38
39/* Layout */
40body { min-width: [(#GET{petit_minwidth})]; }
41body.large { min-width: [(#GET{grand_minwidth})]; }
42/* ecran etroit*/
43[(#GET{largeur_bandeau,''}) ].largeur,
44.ecrire #conteneur,
45.ecrire #page div table.centered,
46.ecrire #page .table_page { width: [(#GET{petit_ecran})]; }
47#conteneur,
48.table_page { width: 100%; }
49#navigation { width: 27.5%; }
50#extra { width: 27.5%; }
51#contenu { margin-left: 2.5%; width: 70%; }
52#pied {}
53div.messages-alertes { width: [(#GET{petit_ecran})]; }
54table.calendrier-large { width: 100%; }
55
56/* ecran large*/
57[(#GET{largeur_bandeau}) .largeur,
58][(#GET{largeur_bandeau}|non) .large .largeur,
59].ecrire #conteneur,
60.ecrire #page div table.centered,
61.ecrire #page .table_page { width: [(#GET{grand_ecran})]; }
62.large #conteneur,
63.large .table_page { width: 100%; }
64.large div.messages-alertes { width: [(#GET{grand_ecran})]; }
65.large #navigation { width: 20%; }
66.large #extra { width: 20%; }
67.large #contenu { margin-left: 2%; width: 56%; }
68
69/* les formulaires sont en 600px en config large */
70body.large.edition #contenu,
71.articles_edit.large #contenu,
72.mots_edit.large #contenu,
73.breves_edit.large #contenu,
74.rubriques_edit.large #contenu { width: 60%; }
75body.large.edition #extra,
76.articles_edit.large #extra,
77.mots_edit.large #extra,
78.breves_edit.large #extra,
79.rubriques_edit.large #extra { width: 16%; }
80
81@media (max-width: [(#GET{grand_minwidth})]) {
82        body { min-width: 98%; width: 98%; margin: 0 1%; }
83        body.large { min-width: 98%; width: 98%; margin: 0 1%; }
84        #navigation { min-height: 1px; }
85        /* ecran large*/
86        .ecrire #conteneur,
87        .ecrire #page div table.centered,
88        .ecrire #page .table_page,
89        [(#GET{largeur_bandeau}) ].largeur,
90        .ecrire #conteneur,
91        .ecrire #page div table.centered,
92        .ecrire #page .table_page { width: 100%; }
93
94        .large .largeur, .largeur {
95                width: 97.5%;
96                padding-right: 1.5%;
97                padding-left: 1.5%;
98        }
99
100        .large #conteneur,
101        .large .table_page,
102        #conteneur,
103        .table_page { width: 100%; }
104
105        .large div.messages-alertes,
106        div.messages-alertes { width: 95%; }
107        .large #navigation,
108        #navigation { width: 100%; float: none; }
109
110        .large #extra,
111        #extra { width: 100%; float: none; }
112
113        .large #contenu,
114        #contenu { margin-left: 0; width: 100%; }
115
116        body.large.edition #contenu,
117        .articles_edit.large #contenu,
118        .mots_edit.large #contenu,
119        .breves_edit.large #contenu,
120        .rubriques_edit.large #contenu { width: 100%; float: none; }
121
122        body.large.edition #extra,
123        .articles_edit.large #extra,
124        .mots_edit.large #extra,
125        .breves_edit.large #extra,
126        .rubriques_edit.large #extra { width: 100%; float: none; }
127
128}
Note: See TracBrowser for help on using the repository browser.