source: spip-zone/_squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/stylesportailcognac.css.html @ 103690

Last change on this file since 103690 was 103690, checked in by real3t@…, 4 years ago

Mode Cognac : Fin de mise au point du RWD

Beaucoup de calculs pour afficher en 3 ou 4 colonnes au départ selon la largeur de la page configurée dans la configuration de SoyezCréateurs?.

Ça s'adapte automatiquement !

File size: 13.1 KB
Line 
1#CACHE{24*3600,cache-client}
2#HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
3#HTTP_HEADER{Vary: Accept-Encoding}
4
5#SET{c_vignettes_bk,(#CONFIG{soyezcreateurs_couleurs/vignettes_bk,#ffffff})}
6#SET{c_navigation,(#CONFIG{soyezcreateurs_couleurs/navigation,#017ca5})}
7        #SET{c_navigation_bk,(#CONFIG{soyezcreateurs_couleurs/navigation_bk,#ffffff})}
8#SET{c_menuhaut,(#CONFIG{soyezcreateurs_couleurs/menuhaut,#017ca5})}
9        #SET{c_menuhaut_bk,(#CONFIG{soyezcreateurs_couleurs/menuhaut_bk,#ffffff})}
10#SET{c_extra,(#CONFIG{soyezcreateurs_couleurs/extra,#017ca5})}
11        #SET{c_extra_bk,(#CONFIG{soyezcreateurs_couleurs/extra_bk,#ffffff})}
12#SET{c_menu_a,(#CONFIG{soyezcreateurs_couleurs/menu_a,#005e7a})}
13        #SET{c_menu_a_bk,(#CONFIG{soyezcreateurs_couleurs/menu_a_bk,#ffffff})}
14
15#SET{LargeurContaineur,(#CONFIG{soyezcreateurs_layout/largeurconteneur,960})}
16#SET{LargeurMenuGauche,(#CONFIG{soyezcreateurs_layout/largeurmenugauche,180})}
17#SET{LargeurMenuDroit,(#CONFIG{soyezcreateurs_layout/largeurmenudroit,180})}
18#SET{LargeurMilieu,(#GET{LargeurContaineur}|moins{#GET{LargeurMenuGauche}}|moins{#GET{LargeurMenuDroit}}|div{2})}
19
20#SET{masonry,308}
21
22div#content { width: 100%; }
23
24
25{
26  /* clearfix */
27  /* ---- grid ---- */
28  /* ---- grid-item ---- */
29}
30iframe {
31  width: 100%;
32}
33img {
34  display: inline-block;
35  vertical-align: middle;
36  max-width: 100%;
37  height: auto;
38  -ms-interpolation-mode: bicubic;
39}
40:focus {
41  outline: none;
42}
43select {
44  cursor: pointer;
45}
46.spip_logo {
47  max-width: 100%;
48}
49.ariaformprop {
50  padding: 0;
51  margin: 0;
52  position: relative;
53  z-index: 99;
54  background-color: white;
55  font-size: 80%;
56}
57.ajaxbloc {
58  height: 100%;
59}
60.row {
61  margin-right: auto;
62  margin-left: auto;
63}
64.text-center {
65  text-align: center;
66}
67.text-right {
68  text-align: right;
69}
70.text-left {
71  text-align: left;
72}
73.menu {
74  margin: 0;
75  list-style-type: none;
76}
77.menu > li {
78  display: table-cell;
79  vertical-align: middle;
80}
81.vertical > li {
82  display: block;
83  vertical-align: middle;
84}
85.flexbox-flex {
86  display: flex;
87  align-items: baseline;
88  margin-bottom: .5em;
89}
90.flexbox-center-center {
91  display: flex;
92  align-items: center;
93  justify-content: center;
94  flex-wrap: wrap;
95}
96.flexbox-center-top {
97  display: flex;
98  align-items: stretch;
99  justify-content: center;
100  flex-wrap: wrap;
101}
102.flexbox--center {
103  display: flex;
104  align-items: center;
105}
106.flexbox-flex-row-reverse {
107  display: flex;
108  flex-direction: row-reverse;
109}
110.flex-nowrap {
111  flex-wrap: nowrap;
112}
113.flexbox-wrap-space-between {
114  display: flex;
115  flex-wrap: wrap;
116  align-content: space-between;
117}
118.flexbox-wrap-space-around {
119  display: flex;
120  flex-wrap: wrap;
121  justify-content: space-around;
122}
123.flexbox-center-space-between {
124  display: flex;
125  align-items: center;
126  justify-content: space-between;
127}
128.flexbox-start-space-between {
129  display: flex;
130  align-items: flex-start;
131  justify-content: space-between;
132}
133@media screen and (max-width: 47.9375em) {
134  .flex-nowrap {
135    flex-wrap: wrap;
136  }
137}
138.flexbox-stretch {
139  display: flex;
140  align-items: stretch;
141}
142@media screen and (max-width: 40em) {
143  .flexbox-stretch {
144    display: block;
145  }
146}
147.hide {
148  display: none;
149}
150.sans-border {
151  border: 0;
152}
153.avec-border {
154  border: 1px solid #aaa;
155}
156.avec-border-top {
157  border-top: 1px solid #aaa;
158}
159.avec-border-bottom {
160  border-bottom: 1px solid #aaa;
161}
162.avec-border-left {
163  border-left: 1px solid #aaa;
164}
165.sans-margin {
166  margin: 0;
167}
168.avec-margin {
169  margin: 1.5em;
170}
171.avec-margin-top {
172  margin-top: 1.5em;
173}
174.avec-margin-right {
175  margin-right: 1.5em;
176}
177.avec-margin-bottom {
178  margin-bottom: 1.5em;
179}
180.avec-margin-bottom05 {
181  margin-bottom: .5em;
182}
183.avec-margin-bottom015 {
184  margin-bottom: .15em;
185}
186.avec-margin-left {
187  margin-left: 1.5em;
188}
189@media screen and (min-width: 40em) {
190  .avec-margin-bottom-for-medium {
191    margin-bottom: 1.5em;
192  }
193}
194.sans-padding {
195  padding: 0;
196}
197@media screen and (max-width: 40em) {
198  .sans-padding-for-small {
199    padding: 0;
200  }
201}
202.avec-padding {
203  padding: 1em;
204}
205.avec-padding05 {
206  padding: .5em;
207}
208.avec-padding-top {
209  padding-top: 1em;
210}
211.avec-padding-top05 {
212  padding-top: .5em;
213}
214.avec-padding-top15 {
215  padding-top: 1.5em;
216}
217.avec-padding-right {
218  padding-right: 1em;
219}
220.avec-padding-right05 {
221  padding-right: .5em;
222}
223.avec-padding-bottom {
224  padding-bottom: 1em;
225}
226.avec-padding-left {
227  padding-left: 1em;
228}
229.avec-padding-leftright {
230  display: block;
231  padding-right: 1em;
232  padding-left: 1em;
233}
234.display-block {
235  display: block;
236}
237.text-transform-none {
238  text-transform: none;
239}
240.text-uppercase {
241  text-transform: uppercase;
242}
243.font-style-italic {
244  font-style: italic;
245}
246.position-relative {
247  position: relative;
248}
249.float-left {
250  float: left ;
251}
252.float-right {
253  float: right ;
254}
255.float-center {
256  display: table;
257  margin-right: auto ;
258  margin-left: auto ;
259}
260.z-index-999 {
261  z-index: 999;
262}
263.cursor-pointer {
264  cursor: pointer;
265}
266.slick-slider {
267  margin-bottom: 4em;
268}
269
270#liens-diaporama {
271  position: absolute;
272  top: 100px;
273  right: 0;
274}
275@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
276  #liens-diaporama {
277    top: 5vw;
278  }
279}
280@media only screen and (max-width: 767px) {
281  #liens-diaporama {
282    position: relative;
283    top: 50px;
284  }
285}
286#liens-diaporama ul {
287  width: 220px;
288  text-align: right;
289}
290@media only screen and (max-width: 767px) {
291  #liens-diaporama ul {
292    display: flex;
293    width: 100%;
294    flex-wrap: wrap;
295  }
296}
297#liens-diaporama li {
298  background-color: rgba(255, 255, 255, 0.75);
299  margin-bottom: .5em;
300}
301@media only screen and (max-width: 767px) {
302  #liens-diaporama li {
303    flex-grow: 1;
304  }
305}
306#liens-diaporama li a {
307  display: flex;
308  font-size: 1.2em;
309  color: #GET{c_menu_a};
310  justify-content: flex-end;
311  line-height: 1 ;
312  align-items: center;
313}
314#liens-diaporama li a span {
315  padding: .5em .25em .5em .5em;
316}
317@media only screen and (max-width: 767px) {
318  #liens-diaporama li a span {
319    padding: .25em .5em;
320  }
321}
322#liens-diaporama li a span.icon {
323  margin-left: .25em;
324  padding-left: .25em;
325  font-size: 1.8em;
326  border-left: 1px solid;
327  border-left-color: inherit;
328}
329@media only screen and (max-width: 767px) {
330  #liens-diaporama li a {
331    background-color: #eae9e5;
332    margin-left: .5em;
333  }
334}
335
336.slick-slide img {
337  margin: 0 auto;
338}
339.slick-slide .row {
340  max-width: none;
341}
342.slick-dots {
343  bottom: -45px;
344}
345.slick-dots li {
346  width: 30px;
347  height: 30px;
348}
349.slick-dots li button {
350  width: 30px;
351  height: 30px;
352}
353.slick-dots li button::before {
354  font-size: 20px;
355  line-height: 30px;
356  width: 30px;
357  height: 30px;
358}
359.slick-dots li.slick-active button::before {
360  color: black;
361}
362#content img {
363  padding: 0;
364}
365.slider-pratique {
366  margin: 0 4rem;
367}
368.slider-pratique .slick-prev,
369.slider-pratique .slick-next {
370  width: 40px;
371  height: 40px;
372}
373.slider-pratique .slick-prev {
374  left: -40px;
375}
376.slider-pratique .slick-next {
377  right: -40px;
378}
379.slider-pratique .slick-prev:before,
380.slider-pratique .slick-next:before {
381  font-size: 40px;
382  color: #777;
383  opacity: 1;
384}
385.slider-pratique .slick-prev:hover:before,
386.slider-pratique .slick-prev:focus:before,
387.slider-pratique .slick-next:hover:before,
388.slider-pratique .slick-next:focus:before {
389  opacity: 1;
390  color: #333 ;
391}
392.slider-pratique button:hover,
393.slider-pratique button:focus {
394  background-color: transparent;
395}
396.slider-pratique .content-pratique {
397  background-color: #aaa;
398  width: 280px;
399  margin: 0 12px;
400  -webkit-transition: all .25s ease;
401  transition: all .25s ease;
402}
403.slider-pratique .content-pratique:hover,
404.slider-pratique .content-pratique:focus {
405  -webkit-transition: all .25s ease;
406  transition: all .25s ease;
407}
408.slider-pratique .h2 {
409  display: flex;
410  height: 150px;
411  color: white;
412  text-align: right;
413        padding-bottom: 90px;
414    font-size: 2em;
415    font-weight: 300;
416    text-align: right;
417    margin: 1.5em 0px 0px;
418}
419.slider-pratique .h2 .titre-pratique {
420  width: 100%;
421  align-self: center;
422  text-align: right;
423  padding: 10px;
424    border-right: 1px solid;
425}
426.slider-pratique .h2 .icon {
427  align-self: center;
428  padding: 7px 15px 7px 7px;
429  font-size: 30px;
430}
431@media only screen and (max-width: 400px) {
432  .slider-pratique {
433    margin: 0 2.8rem;
434  }
435  .slider-pratique .content-pratique {
436    width: 240px;
437  }
438  .slider-pratique .h2 {
439    height: 130px;
440  }
441}
442.clearfix:after,
443.grid:after {
444  content: '';
445  display: block;
446  clear: both;
447}
448#masonry {
449  max-width: #GET{LargeurContaineur}px;
450  margin: 0 auto;
451  padding-left: 20px;
452  text-align: center;
453}
454.grid {
455  text-align: center;
456}
457.grid-item {
458  background-color: #ccc;
459}
460.grid-item:hover,
461.grid-item:focus {
462  background-color: #eee;
463}
464.grid-item .content-actus:nth-child(2) {
465  margin-top: 20px;
466  border-top: 20px solid white;
467}
468.grid-item header {
469  font-size: 1.5em;
470  overflow: auto;
471}
472.grid-item header strong {
473  font-size: inherit;
474}
475.grid-item header time {
476  padding: .75em .5em;
477}
478.grid-item header img {
479  max-width: 65%;
480}
481.grid-item .h2 {
482  display: flex;
483  flex-direction: row;
484  width: 100%;
485  height: 95px;
486  margin: 0;
487  font-weight: 400;
488  padding: 10px;
489  text-align: right;
490  border: none;
491}
492.grid-item .h2 .icon {
493    align-self: center;
494        padding: 7px 0 7px 7px;
495    font-size: 30px;
496}
497.grid-item .h2 .titre-actus {
498    width: 100%;
499    align-self: center;
500    padding: 10px 10px 10px 0;
501    border-right: 1px solid;
502}
503.grid-item img {
504  max-width: 100%;
505}
506.grid-item {
507  margin-bottom: 20px;
508}
509/*
510M : [(#GET{masonry}|mult{3}|plus{100})]
511LC: #GET{LargeurContaineur}
512*/
513[(#GET{masonry}|mult{3}|plus{100}|<={#GET{LargeurContaineur}}|oui)
514        .grid-sizer, .grid-item {
515          width: calc(25% - 20px);
516        }
517        .grid-item {
518          height: calc(340px + 65px);
519        }
520        .grid-item-x2 {
521          width: calc(50% - 20px);
522        }
523        .grid-item-x3 {
524          width: calc(75% - 20px);
525        }
526        @media only screen and (max-width: #GET{LargeurContaineur}px) {
527          .grid-item {
528                height: calc(340px + 90px);
529          }
530        }
531]
532[(#GET{masonry}|mult{3}|plus{100}|<={#GET{LargeurContaineur}}|non)
533        .grid-sizer, .grid-item {
534          width: calc(33.333% - 20px);
535        }
536        .grid-item {
537        height: calc(340px + 90px);
538        }
539        .grid-item-x2 {
540        width: calc(66.666% - 20px);
541        }
542        .grid-item-x3 {
543        width: calc(100% - 20px);
544        }
545]
546@media only screen and (max-width:[(#GET{masonry}|mult{3}|plus{100})]px) {
547  .grid-sizer, .grid-item {
548    width: calc(33.333% - 20px);
549  }
550  .grid-item {
551    height: calc(340px + 90px);
552  }
553  .grid-item-x2 {
554    width: calc(66.666% - 20px);
555  }
556  .grid-item-x3 {
557    width: calc(100% - 20px);
558  }
559}
560@media only screen and (max-width: [(#GET{masonry}|mult{2}|plus{80})]px) {
561  .grid-sizer, .grid-item {
562    width: calc(50% - 20px);
563  }
564  .grid-item {
565    height: calc(340px + 90px);
566  }
567  .grid-item-x2 {
568    width: calc(100% - 20px);
569  }
570}
571@media only screen and (max-width: [(#GET{masonry}|mult{1}|plus{60})]px) {
572  .grid-sizer, .grid-item {
573    width: calc(100% - 20px);
574  }
575  .grid-item {
576    height: auto;
577  }
578}
579#lesprojets {
580  margin-top: 5em;
581  margin-bottom: 4em;
582}
583#projets {
584  margin: 0;
585  padding: 0;
586}
587#projets .projet {
588  background-color: #777;
589  width: 50%;
590  float: left;
591}
592#projets .projet:hover {
593  background-color: #aaa;
594}
595#projets a {
596    display: flex;
597    flex-direction: row;
598    align-content: center;
599    height: 10vw;
600    color: rgb(255, 255, 255);
601    border-width: initial;
602    border-style: none;
603    border-color: initial;
604    border-image: initial;
605}
606#projets a:hover {
607  color: #333;
608}
609#projets h2 {
610  width: 100%;
611  height: auto;
612  margin: auto;
613  padding: 0 10px;
614  color: inherit;
615  text-align: center;
616  border: none;
617}
618#projets h2 {
619    font-size: 2vw;
620    line-height: 35px;
621    width: 100%;
622    height: auto;
623    align-self: center;
624    color: inherit;
625    font-weight: 300;
626    text-align: center;
627    margin: auto;
628    padding: 0px 10px;
629}
630
631.portailcognac#sommaire_mode_portailcognac #projets .suite {
632    background-color: rgba(100, 100, 100, 0.498039);
633    display: flex;
634    height: auto;
635    padding: 0px 25px;
636}
637#projets .suite .icon {
638  margin: auto;
639  align-self: center;
640  font-size: 3vw;
641}
642@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
643  #projets h2 {
644    font-size: 36px;
645    line-height: 38px;
646  }
647}
648@media only screen and (max-width: 768px) {
649  #projets h2 {
650    font-size: 30px;
651    line-height: 34px;
652  }
653}
654@media only screen and (max-width: 640px) {
655  #projets article {
656    width: 100%;
657    float: none;
658  }
659  #projets article a {
660    height: auto;
661  }
662  #projets h2 {
663    padding: 1rem;
664    font-size: 26px;
665    line-height: 30px;
666  }
667  #projets .suite .icon {
668    font-size: 25px;
669  }
670}
671
672#pratique {
673  margin-bottom: 4em;
674}
675
676
677
678
679[(#CHEMIN{images/stylesportailcognac_perso.css}|?{'/* Surcharge eventuelle */'})
680[(#INCLURE{#CHEMIN{images/stylesportailcognac_perso.css}|url_absolue_css}|compacte{css})]
681]
Note: See TracBrowser for help on using the repository browser.