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

Last change on this file since 111893 was 111893, checked in by tcharlss@…, 11 months ago

Ajustement proportions colonnes / contenu : colonnes un peu plus proportionnelles à la largeur de l'écran

File size: 3.3 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  On met du float comme en 40 pour les vieux navigateurs,
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  LAYOUT
20  ======
21  Agencement et dimensions des blocs principaux en mobile-first
22*/
23
24/* Containers en pleine largeur */
25body,
26body.large {
27  min-width: auto;
28}
29.largeur,
30#conteneur,
31.table_page,
32.large .largeur,
33.large #conteneur,
34.large .table_page {
35  width: auto;
36}
37.largeur,
38.large .largeur {
39  padding: 0 1.5vw;
40}
41
42/* Pas de colonne
43   Obligé de mettre des !important à moins de cibler 50 variantes différentes
44   (.large #contenu, body.large .edition #contenu, etc.)
45*/
46#contenu,
47#navigation,
48#extra {
49  width: 100% !important;
50  float: none !important;
51  margin-left: auto !important;
52  margin-right: auto !important;
53}
54
55/* Des blocs à limiter en largeur pour obtenir ~80 caractères max par ligne */
56#wysiwyg,
57/* .cadre-formulaire-editer, */
58.formulaire_spip textarea,
59.formulaire_spip .edition {
60  display: block;
61  max-width: 45em;
62  margin-left: auto;
63  margin-right: auto;
64}
65
66/* Moyen écran : 2 colonnes */
67@media (min-width: 780px) {
68
69  /* D'abord le fallback pour les vieux navigateurs */
70  /* [TODO] */
71 
72  /* Ensuite le layout en CSS grid : 2 colonnes */
73  @supports (display: grid) {
74    #conteneur {
75      display: grid;
76      grid-gap: 0 1.5vw;
77      grid-template-columns: auto repeat(3, 1fr);
78      grid-template-rows: auto 1fr; /* la 1ère ligne doit se collapser */
79      grid-template-areas:
80        "navigation contenu contenu contenu"
81        "extra      contenu contenu contenu";
82    }
83    #contenu {
84      grid-area: contenu;
85    }
86    #navigation {
87      grid-area: navigation;
88    }
89    #extra {
90      grid-area: extra;
91    }
92    /* Hack : on met une largeur au contenu des colonnes latérales,
93    ainsi quand elles sont vides, elles se collapsent */
94    #navigation > .ajaxbloc > *,
95    #navigation > :not(.ajaxbloc),
96    #extra > .ajaxbloc > *,
97    #extra > :not(.ajaxbloc) {
98      width: calc(4em + 18vw);
99    }
100  }
101}
102
103/* Grand écran : 3 colonnes */
104@media (min-width: 1200px) {
105
106  @supports (display: grid) {
107    #conteneur {
108      grid-template-columns: auto repeat(3, 1fr) auto;
109      grid-template-rows: auto auto;
110      grid-template-areas:
111        "navigation contenu contenu contenu extra"
112        "navigation contenu contenu contenu extra";
113    }
114  }
115
116}
117
118
119/*
120  ======
121  Divers
122  ======
123  Des petits ajustements divers
124*/
125
126
127/* Polices */
128@font-face {
129  font-family: 'Lato';
130  src: url('#CHEMIN{prive/themes/spip/webfonts/lato-regular-webfont.woff2}') format('woff2'),
131  url('#CHEMIN{webfonts/lato-regular-webfont.woff}') format('woff');
132  font-weight: normal;
133  font-style: normal;
134}
135@font-face {
136  font-family: 'Lato';
137  src: url('#CHEMIN{prive/themes/spip/webfonts/lato-bold-webfont.woff2}') format('woff2'),
138  url('#CHEMIN{webfonts/lato-regular-webfont.woff}') format('woff');
139  font-weight: bold;
140  font-style: normal;
141}
142body {
143  font-size: calc(0.8em + 0.133vw); /* mobile => 14px, 1920px => 15px */
144  font-family: "Lato", sans-serif;
145}
Note: See TracBrowser for help on using the repository browser.