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

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

On règle le problème de la largeur des colonnes latérales en mettant une largeur à leur contenu plutôt qu'aux colonnes elles-mêmes. Ainsi en absence de contenu, elles se collapsent.

File size: 2.4 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#contenu,
45#navigation,
46#extra {
47  width: 100%;
48  float: none;
49  margin-left: auto;
50  margin-right: auto;
51}
52
53/* Des blocs à limiter en largeur pour obtenir ~80 caractères max par ligne */
54#wysiwyg,
55/* .cadre-formulaire-editer, */
56.formulaire_spip textarea,
57.formulaire_spip .edition {
58  display: block;
59  max-width: 45em;
60  margin-left: auto;
61  margin-right: auto;
62}
63
64
65/*
66  ==========
67  Responsive
68  ==========
69*/
70
71
72/* 2 colonnes */
73@media (min-width: 780px) {
74
75  /* D'abord le fallback pour les vieux navigateurs */
76  /* [TODO] */
77 
78  /* Ensuite le layout en CSS grid : 2 colonnes */
79  @supports (display: grid) {
80    #conteneur {
81      display: grid;
82      grid-gap: 0 1.5vw;
83      grid-template-columns: auto repeat(3, 1fr);
84      grid-template-rows: auto 1fr; /* la 1ère ligne doit se collapser */
85      grid-template-areas:
86        "navigation contenu contenu contenu"
87        "extra      contenu contenu contenu";
88    }
89    #contenu {
90      grid-area: contenu;
91    }
92    #navigation {
93      grid-area: navigation;
94    }
95    #extra {
96      grid-area: extra;
97    }
98    /* Hack : on met une largeur au contenu des colonnes latérales,
99    ainsi quand elles sont vides, elles se collapsent */
100    #navigation > .ajaxbloc > *,
101    #extra > .ajaxbloc > * {
102      width: calc(18em + 2vw);
103    }
104  }
105}
106
107/* 3 colonnes */
108@media (min-width: 1200px) {
109
110  @supports (display: grid) {
111    #conteneur {
112      grid-template-columns: auto repeat(3, 1fr) auto;
113      grid-template-rows: auto auto;
114      grid-template-areas:
115        "navigation contenu contenu contenu extra"
116        "navigation contenu contenu contenu extra";
117    }
118  }
119
120}
Note: See TracBrowser for help on using the repository browser.