source: spip-zone/_plugins_/prive_fluide/trunk/prive/style_prive_plugin_prive_fluide.html @ 110655

Last change on this file since 110655 was 110655, checked in by tcharlss@…, 2 years ago

Passons en force avec 'important' pour #contenu, pas le choix à moins de cibler pleins de variantes : .large #contenu, body.large .edition #contenu et cie

File size: 2.6 KB
Line 
1[(#REM)<style>/*
2
3  Nouveau markup identique pour le mode étroit et large dans body.html :
4  - #conteneur
5      - #contenu
6      - #navigation
7      - #extra
8
9  On fait du mobile-first : pas de colonne à la base, puis on en met 2 ou 3 selon la largeur.
10  Pour les vieux navigateurs, on met du float comme en 40e,
11  et du CSS grid pur les nouveaux.
12
13*/]#CACHE{3600*100,cache-client}
14#HTTP_HEADER{Content-Type: text/css;charset=utf-8}
15#HTTP_HEADER{Vary: Accept-Encoding}
16
17/*
18  ====
19  Base
20  ====
21  - On met tout en pleine largeur
22  - Pas de colonne (mobile first)
23*/
24
25/* Containers en pleine largeur */
26body,
27body.large {
28  min-width: auto;
29}
30.largeur,
31#conteneur,
32.table_page,
33.large .largeur,
34.large #conteneur,
35.large .table_page {
36  width: auto;
37}
38.largeur,
39.large .largeur {
40  padding: 0 1.5vw;
41}
42
43/* Pas de colonne
44   Obligé de mettre des !important à moins de cibler 50 variantes différentes
45   (.large #contenu, body.large .edition #contenu, etc.)
46*/
47#contenu,
48#navigation,
49#extra {
50  width: 100% !important;
51  float: none !important;
52  margin-left: auto !important;
53  margin-right: auto !important;
54}
55
56/* Des blocs à limiter en largeur pour obtenir ~80 caractères max par ligne */
57#wysiwyg,
58/* .cadre-formulaire-editer, */
59.formulaire_spip textarea,
60.formulaire_spip .edition {
61  display: block;
62  max-width: 45em;
63  margin-left: auto;
64  margin-right: auto;
65}
66
67
68/*
69  ==========
70  Responsive
71  ==========
72*/
73
74
75/* 2 colonnes */
76@media (min-width: 780px) {
77
78  /* D'abord le fallback pour les vieux navigateurs */
79  /* [TODO] */
80 
81  /* Ensuite le layout en CSS grid : 2 colonnes */
82  @supports (display: grid) {
83    #conteneur {
84      display: grid;
85      grid-gap: 0 1.5vw;
86      grid-template-columns: auto repeat(3, 1fr);
87      grid-template-rows: auto 1fr; /* la 1ère ligne doit se collapser */
88      grid-template-areas:
89        "navigation contenu contenu contenu"
90        "extra      contenu contenu contenu";
91    }
92    #contenu {
93      grid-area: contenu;
94    }
95    #navigation {
96      grid-area: navigation;
97    }
98    #extra {
99      grid-area: extra;
100    }
101    /* Hack : on met une largeur au contenu des colonnes latérales,
102    ainsi quand elles sont vides, elles se collapsent */
103    #navigation > .ajaxbloc > *,
104    #navigation > :not(.ajaxbloc),
105    #extra > .ajaxbloc > *,
106    #extra > :not(.ajaxbloc) {
107      width: calc(18em + 2vw);
108    }
109  }
110}
111
112/* 3 colonnes */
113@media (min-width: 1200px) {
114
115  @supports (display: grid) {
116    #conteneur {
117      grid-template-columns: auto repeat(3, 1fr) auto;
118      grid-template-rows: auto auto;
119      grid-template-areas:
120        "navigation contenu contenu contenu extra"
121        "navigation contenu contenu contenu extra";
122    }
123  }
124
125}
Note: See TracBrowser for help on using the repository browser.