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

Last change on this file since 108153 was 108153, checked in by real3t@…, 19 months ago

Harmonisation couleurs page d'accueil mode Cognac

File size: 20.7 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_body_bk,(#CONFIG{soyezcreateurs_couleurs/body_bk,#eceded})}
8#SET{c_logo_bk,(#CONFIG{soyezcreateurs_couleurs/logo_bk,transparent})}
9#SET{c_header,(#CONFIG{soyezcreateurs_couleurs/header,#262626})}
10        #SET{c_header_bk,(#CONFIG{soyezcreateurs_couleurs/header_bk,#ffffff})}
11#SET{c_footer,(#CONFIG{soyezcreateurs_couleurs/footer,#595959})}
12        #SET{c_footer_bk,(#CONFIG{soyezcreateurs_couleurs/footer_bk,#ffffff})}
13#SET{c_navigation,(#CONFIG{soyezcreateurs_couleurs/navigation,#017ca5})}
14        #SET{c_navigation_bk,(#CONFIG{soyezcreateurs_couleurs/navigation_bk,#ffffff})}
15#SET{c_menuhaut,(#CONFIG{soyezcreateurs_couleurs/menuhaut,#017ca5})}
16        #SET{c_menuhaut_bk,(#CONFIG{soyezcreateurs_couleurs/menuhaut_bk,#ffffff})}
17#SET{c_extra,(#CONFIG{soyezcreateurs_couleurs/extra,#017ca5})}
18        #SET{c_extra_bk,(#CONFIG{soyezcreateurs_couleurs/extra_bk,#ffffff})}
19#SET{c_datemajsite,(#CONFIG{soyezcreateurs_couleurs/datemajsite,#595959})}
20        #SET{c_datemajsite_bk,(#CONFIG{soyezcreateurs_couleurs/datemajsite_bk,#ffffff})}
21#SET{c_menu_a,(#CONFIG{soyezcreateurs_couleurs/menu_a,#005e7a})}
22        #SET{c_menu_a_bk,(#CONFIG{soyezcreateurs_couleurs/menu_a_bk,#ffffff})}
23#SET{c_menu_a_hover,(#CONFIG{soyezcreateurs_couleurs/menu_a_hover,#ffffff})}
24        #SET{c_menu_a_hover_bk,(#CONFIG{soyezcreateurs_couleurs/menu_a_hover_bk,#0b7899})}
25#SET{c_menu_a_active,(#CONFIG{soyezcreateurs_couleurs/menu_a_active,#ffffff})}
26        #SET{c_menu_a_active_bk,(#CONFIG{soyezcreateurs_couleurs/menu_a_active_bk,#0b7899})}
27#SET{c_menu_a_strong,(#CONFIG{soyezcreateurs_couleurs/menu_a_strong,#ffffff})}
28        #SET{c_menu_a_strong_bk,(#CONFIG{soyezcreateurs_couleurs/menu_a_strong_bk,#0b7899})}
29
30#SET{c_container,(#CONFIG{soyezcreateurs_couleurs/container,#02265a})}
31        #SET{c_container_bk,(#CONFIG{soyezcreateurs_couleurs/container_bk,#f6f6f6})}
32#SET{c_titraille,(#CONFIG{soyezcreateurs_couleurs/titraille,#005e7a})}
33        #SET{c_titraille_bk,(#CONFIG{soyezcreateurs_couleurs/titraille_bk,#f6f6f6})}
34
35#SET{LargeurContaineur,(#CONFIG{soyezcreateurs_layout/largeurconteneur,960})}
36#SET{LargeurMenuGauche,(#CONFIG{soyezcreateurs_layout/largeurmenugauche,180})}
37#SET{LargeurMenuDroit,(#CONFIG{soyezcreateurs_layout/largeurmenudroit,180})}
38#SET{LargeurMilieu,(#GET{LargeurContaineur}|moins{#GET{LargeurMenuGauche}}|moins{#GET{LargeurMenuDroit}}|div{2})}
39
40#SET{masonry,308}
41
42#miettesdepain, .boutonstexte {display: none; }
43
44div#content { width: 100%; }
45.portailcognac .boutonstexte {
46        right: 0;
47}
48
49
50{
51  /* clearfix */
52  /* ---- grid ---- */
53  /* ---- grid-item ---- */
54}
55iframe {
56  width: 100%;
57}
58img {
59  display: inline-block;
60  vertical-align: middle;
61  max-width: 100%;
62  height: auto;
63  -ms-interpolation-mode: bicubic;
64}
65:focus {
66  outline: none;
67}
68select {
69  cursor: pointer;
70}
71.spip_logo {
72  max-width: 100%;
73}
74.ariaformprop {
75  padding: 0;
76  margin: 0;
77  position: relative;
78  z-index: 99;
79  background-color: white;
80  font-size: 80%;
81}
82.ajaxbloc {
83  height: 100%;
84}
85.row {
86  margin-right: auto;
87  margin-left: auto;
88}
89.text-center {
90  text-align: center;
91}
92.text-right {
93  text-align: right;
94}
95.text-left {
96  text-align: left;
97}
98.menu {
99  margin: 0;
100  list-style-type: none;
101}
102.menu > li {
103  display: table-cell;
104  vertical-align: middle;
105}
106.vertical > li {
107  display: block;
108  vertical-align: middle;
109}
110
111.hide {
112  display: none;
113}
114.sans-border {
115  border: 0;
116}
117.avec-border {
118  border: 1px solid #aaa;
119}
120.avec-border-top {
121  border-top: 1px solid #aaa;
122}
123.avec-border-bottom {
124  border-bottom: 1px solid #aaa;
125}
126.avec-border-left {
127  border-left: 1px solid #aaa;
128}
129.sans-margin {
130  margin: 0;
131}
132.avec-margin {
133  margin: 1.5em;
134}
135.avec-margin-top {
136  margin-top: 1.5em;
137}
138.avec-margin-right {
139  margin-right: 1.5em;
140}
141.avec-margin-bottom {
142  margin-bottom: 1.5em;
143}
144.avec-margin-bottom05 {
145  margin-bottom: .5em;
146}
147.avec-margin-bottom015 {
148  margin-bottom: .15em;
149}
150.avec-margin-left {
151  margin-left: 1.5em;
152}
153@media screen and (min-width: 40em) {
154  .avec-margin-bottom-for-medium {
155    margin-bottom: 1.5em;
156  }
157}
158.sans-padding {
159  padding: 0;
160}
161@media screen and (max-width: 40em) {
162  .sans-padding-for-small {
163    padding: 0;
164  }
165}
166.avec-padding {
167  padding: 1em;
168}
169.avec-padding05 {
170  padding: .5em;
171}
172.avec-padding-top {
173  padding-top: 1em;
174}
175.avec-padding-top05 {
176  padding-top: .5em;
177}
178.avec-padding-top15 {
179  padding-top: 1.5em;
180}
181.avec-padding-right {
182  padding-right: 1em;
183}
184.avec-padding-right05 {
185  padding-right: .5em;
186}
187.avec-padding-bottom {
188  padding-bottom: 1em;
189}
190.avec-padding-left {
191  padding-left: 1em;
192}
193.avec-padding-leftright {
194  display: block;
195  padding-right: 1em;
196  padding-left: 1em;
197}
198.display-block {
199  display: block;
200}
201.text-transform-none {
202  text-transform: none;
203}
204.text-uppercase {
205  text-transform: uppercase;
206}
207.font-style-italic {
208  font-style: italic;
209}
210.position-relative {
211  position: relative;
212}
213.float-left {
214  float: left ;
215}
216.float-right {
217  float: right ;
218}
219.float-center {
220  display: table;
221  margin-right: auto ;
222  margin-left: auto ;
223}
224.z-index-999 {
225  z-index: 999;
226}
227.cursor-pointer {
228  cursor: pointer;
229}
230
231.portailcognac #letexte {
232  display: none;
233}
234.portailcognac #content {
235  padding: 0;
236  background-color: transparent;
237}
238.portailcognac #contenu {
239  max-width: 100%;
240  width: 100%;
241}
242.portailcognac #contenu #content {
243  max-width: 100%;
244  width: 100%;
245  margin: 0;
246  padding: 0;
247}
248#contenu #content img {
249  padding: 0;
250}
251#projets {
252  margin: 0;
253  padding: 0;
254}
255#projets projet {
256  width: 50%;
257  float: left;
258}
259#projets a {
260  display: flex;
261  flex-direction: row;
262  align-content: center;
263  height: 20vw;
264  color: white;
265  border: none;
266}
267#projets a:hover {
268  color: #333;
269}
270#projets h2 {
271  width: 100%;
272  height: auto;
273  margin: auto;
274  padding: 0 10px;
275  align-self: center;
276  color: inherit;
277  font-size: 3vw;
278  font-weight: 300;
279  text-align: center;
280  line-height: 50px;
281}
282#projets .suite {
283  background-color: rgba(100, 100, 100, 0.5) ;
284  display: flex;
285  height: auto;
286  padding: 0 25px;
287}
288#projets .suite .icon {
289  margin: auto;
290  align-self: center;
291  font-size: 0;
292}
293#projets .suite .icon:before {
294  font-size: 4vw;
295}
296@media only screen and (max-width: 1024px) {
297  #projets h2 {
298    font-size: 36px;
299    line-height: 38px;
300  }
301}
302@media only screen and (max-width: 768px) {
303  #projets h2 {
304    font-size: 30px;
305    line-height: 34px;
306  }
307}
308@media only screen and (max-width: 640px) {
309  #projets .projet {
310    width: 100%;
311    float: none;
312  }
313  #projets .projet a {
314    height: auto;
315  }
316  #projets h2 {
317    padding: 1rem;
318    font-size: 26px;
319    line-height: 30px;
320  }
321  #projets .suite {
322    padding: 0 15px;
323  }
324  #projets .suite .icon {
325    font-size: 0;
326  }
327}
328.slider-pratique {
329  margin: 0 4rem;
330}
331.slider-pratique .slick-prev,
332.slider-pratique .slick-next {
333  width: 60px;
334  height: 70px;
335  text-shadow: initial;
336}
337.slider-pratique .slick-prev {
338  left: -60px;
339}
340.slider-pratique .slick-prev:before {
341  content: "\276c";
342}
343.slider-pratique .slick-next {
344  right: -60px;
345}
346.slider-pratique .slick-next:before {
347  content: "\276d";
348}
349.slider-pratique .slick-prev:before,
350.slider-pratique .slick-next:before {
351  margin-left: -20px;
352  font-family: "picto-soyezcreateurs" ;
353  font-size: 50px;
354  opacity: 1;
355  color: #GET{c_titraille};
356}
357.slider-pratique .slick-prev:hover:before,
358.slider-pratique .slick-prev:focus:before,
359.slider-pratique .slick-next:hover:before,
360.slider-pratique .slick-next:focus:before {
361  opacity: 1;
362  color: #333 ;
363}
364.slider-pratique button:hover,
365.slider-pratique button:focus {
366  background-color: transparent;
367}
368.slider-pratique .content-pratique {
369  background-color: #129b9b;
370  width: 280px;
371  margin: 0 12px;
372  -webkit-transition: all .25s ease;
373  transition: all .25s ease;
374}
375.slider-pratique .content-pratique:hover,
376.slider-pratique .content-pratique:focus {
377  background-color: rgba(18, 155, 155, 0.2) ;
378  -webkit-transition: all .25s ease;
379  transition: all .25s ease;
380}
381.slider-pratique .content-pratique:hover h2,
382.slider-pratique .content-pratique:focus h2 {
383  color: #129b9b ;
384}
385.slider-pratique .h2 {
386  display: flex;
387  height: 150px;
388  margin: 1.5em 0 0 0;
389  padding-bottom: 90px;
390  font-family: 'Open Sans', sans-serif ;
391  font-size: 26px;
392  color: white;
393  font-weight: 300;
394  text-align: right;
395}
396.slider-pratique .h2 .titre-pratique {
397  width: 100%;
398  align-self: center;
399  padding: 10px;
400  text-align: right;
401  border-right: 1px solid;
402}
403.slider-pratique .h2 .icon {
404  align-self: center;
405  padding: 7px 15px 7px 7px;
406  font-size: 0;
407}
408.slider-pratique .h2 .icon:before {
409  font-size: 30px;
410}
411@media only screen and (max-width: 400px) {
412  .slider-pratique {
413    margin: 0 2.8rem;
414  }
415  .slider-pratique .content-pratique {
416    width: 240px;
417  }
418  .slider-pratique .h2 {
419    height: 130px;
420    padding-bottom: 0;
421    font-size: 21px;
422  }
423}
424
425#content .titre-sommaire {
426  margin-top: 4em;
427}
428#content .titre-sommaire:before {
429  content: "";
430  display: block;
431  background-color: #GET{c_titraille};
432  width: 100%;
433  height: 1px;
434}
435#content .titre-sommaire h1 {
436  display: block;
437  background-color: #GET{c_titraille_bk};
438max-width: [(#GET{LargeurContaineur}|moins{44})]px;
439  margin: -1.1em auto 1em auto;
440  padding: .5em .8em .5em;
441  color: #GET{c_titraille};
442  font-size: 2rem;
443  line-height: 1em;
444  border-left: 1px solid #GET{c_titraille};
445}
446@media screen and (max-width: 1178px) {
447   #content .titre-sommaire h1 {
448    border-left: none;
449  }
450}
451 .slick-slider {
452  margin-bottom: 0;
453}
454 .slider-slick img {
455  width: 100%;
456}
457 .slick-slide img {
458  margin: 0 auto;
459}
460 .slick-slide .row {
461  max-width: none;
462}
463 .slick-dots {
464  bottom: -45px;
465}
466 .slick-dots li {
467  width: 30px;
468  height: 30px;
469}
470 .slick-dots li button {
471  width: 30px;
472  height: 30px;
473}
474 .slick-dots li button::before {
475  font-size: 20px;
476  line-height: 30px;
477  width: 30px;
478  height: 30px;
479}
480 .slick-dots li.slick-active button::before {
481  color: #GET{c_titraille};
482}
483 #liens-diaporama {
484  position: absolute;
485  top: 100px;
486  right: 0;
487}
488@media only screen and (max-width: 1024px) {
489   #liens-diaporama {
490    top: 5vw;
491  }
492}
493@media only screen and (max-width: 767px) {
494   #liens-diaporama {
495    position: relative;
496    top: 50px;
497  }
498}
499 #liens-diaporama ul {
500  width: 220px;
501  text-align: right;
502}
503@media only screen and (max-width: 767px) {
504  #liens-diaporama ul {
505    display: flex;
506    width: 100%;
507    flex-wrap: wrap;
508  }
509  #liens-diaporama li {
510    flex-grow: 1;
511  }
512}
513@media only screen and (max-width: 767px) {
514   #liens-diaporama li a span {
515    padding: .25em .5em;
516  }
517}
518 #liens-diaporama li a span.icon {
519  margin-left: .55rem;
520  padding: .85rem .5rem;
521  font-size: 0;
522  border-left: 1px solid #GET{c_titraille};
523}
524 #liens-diaporama li a span.icon:before {
525  font-size: 2.15rem;
526}
527 #liens-diaporama li a:hover {
528  color: #666 ;
529}
530@media only screen and (max-width: 767px) {
531   #liens-diaporama li a {
532    background-color: #eae9e5;
533    margin-left: .5em;
534  }
535}
536 #actualites {
537  margin-top: 7em;
538}
539 #lesprojets {
540  margin-top: 5em;
541}
542 #lesprojets .titre-sommaire {
543  display: none;
544}
545
546 #pratique {
547  margin-top: 6.5em;
548  margin-bottom: 4em;
549}
550 .clearfix:after,
551 .grid:after {
552  content: '';
553  display: block;
554  clear: both;
555}
556 .grid-item .h2 .icon:before {
557  font-size: 30px;
558}
559 .grid-item-x2 {
560  width: calc(50% - 20px) ;
561}
562 .grid-item-x3 {
563  width: calc(75% - 20px) ;
564}
565#liens-diaporama {
566  position: absolute;
567  top: 100px;
568  right: 0;
569}
570@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
571  #liens-diaporama {
572    top: 5vw;
573  }
574}
575@media only screen and (max-width: 767px) {
576  #liens-diaporama {
577    position: relative;
578    top: 50px;
579  }
580}
581#liens-diaporama ul {
582  width: 220px;
583  text-align: right;
584}
585@media only screen and (max-width: 767px) {
586  #liens-diaporama ul {
587    display: flex;
588    width: 100%;
589    flex-wrap: wrap;
590  }
591}
592#liens-diaporama li {
593  /* Si le fond est clair, on va le prendre comme couleur de fond, sinon, la couleur d'écriture Texte : #GET{c_header}([(#GET{c_header}|couleur_extreme)])/ Fond : #GET{c_header_bk}([(#GET{c_header_bk}|couleur_extreme)]) */
594  background-color: rgba([(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header_bk},#GET{c_header}}|sc_rgb)], 0.75);
595  margin-bottom: .5em;
596}
597@media only screen and (max-width: 767px) {
598  #liens-diaporama li {
599    flex-grow: 1;
600  }
601}
602#liens-diaporama li a {
603  display: flex;
604  font-size: 1.2em;
605  color: [(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header},#GET{c_header_bk}})];
606  justify-content: flex-end;
607  line-height: 1 ;
608  align-items: center;
609}
610#liens-diaporama li a span {
611  padding: .5em .25em .5em .5em;
612}
613@media only screen and (max-width: 767px) {
614  #liens-diaporama li a span {
615    padding: .25em .5em;
616  }
617}
618#liens-diaporama li a span.icon {
619  border-left: 1px solid;
620  border-left-color: inherit;
621}
622@media only screen and (max-width: 767px) {
623  #liens-diaporama li a {
624    background-color: #eae9e5;
625    margin-left: .5em;
626  }
627}
628
629.slick-slide img {
630  margin: 0 auto;
631}
632.slick-slide .row {
633  max-width: none;
634}
635.slick-dots {
636  bottom: -45px;
637}
638.slick-dots li {
639  width: 30px;
640  height: 30px;
641}
642.slick-dots li button {
643  width: 30px;
644  height: 30px;
645}
646.slick-dots li button::before {
647  font-size: 20px;
648  line-height: 30px;
649  width: 30px;
650  height: 30px;
651}
652.slick-dots li.slick-active button::before {
653  color: black;
654}
655#content img {
656  padding: 0;
657}
658.clearfix:after,
659.grid:after {
660  content: '';
661  display: block;
662  clear: both;
663}
664#diaporama {
665        margin-bottom: 9em;
666}
667#zoomsurtexte {
668  max-width: [(#GET{LargeurContaineur}|moins{44})]px;
669  margin: 0 auto;
670  padding: 1em 2em;
671  color: #GET{c_container};
672  background-color: #GET{c_container_bk};
673  [(#CONFIG{soyezcreateurs_couleurs/transparencecontent,1}|!={1}|oui)background-color: rgba([(#GET{c_container_bk}|sc_rgb)], #CONFIG{soyezcreateurs_couleurs/transparencecontent,1});]
674}
675#content #zoomsur .titre-sommaire h1 {
676        margin-bottom: 0;
677}
678img.zoomsurlogo {
679  max-width: [(#GET{LargeurContaineur})]px;
680  margin: 0 auto;
681  display: block;
682}
683
684#masonry {
685  max-width: #GET{LargeurContaineur}px;
686  margin: 0 auto;
687  padding-left: 20px;
688  text-align: center;
689}
690.grid {
691  text-align: center;
692}
693.grid-item {
694  margin-bottom: 20px;
695  -webkit-transition: all .25s ease;
696  transition: all .25s ease;
697  background-color: #eae9e5;
698}
699.grid-item .content-actus:hover,
700.grid-item .content-actus:focus {
701  /* Si le fond est clair, on va le prendre comme couleur de fond, sinon, la couleur d'écriture Texte : #GET{c_header}([(#GET{c_header}|couleur_extreme)])/ Fond : #GET{c_header_bk}([(#GET{c_header_bk}|couleur_extreme)]) */
702  background-color: rgba([(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header_bk},#GET{c_header}}|sc_rgb)], 0.2);
703  -webkit-transition: all .25s ease;
704  transition: all .25s ease;
705}
706.grid-item .content-actus {
707  /* Si le fond est clair, on va le prendre comme couleur de fond, sinon, la couleur d'écriture Texte : #GET{c_header}([(#GET{c_header}|couleur_extreme)])/ Fond : #GET{c_header_bk}([(#GET{c_header_bk}|couleur_extreme)]) */
708  background-color: #[(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header_bk},#GET{c_header}}|couleur_foncerluminosite{20})];
709}
710.grid-item .content-actus:nth-child(2) {
711  margin-top: 16px;
712}
713.grid-item header {
714  font-size: 1.5em;
715  font-weight: 300;
716  line-height: 21px;
717  overflow: auto;
718}
719.agenda strong {
720  font-size: 1.8em;
721  vertical-align: bottom;
722}
723.agenda .annee {
724  font-size: 1.8em;
725}
726.agenda time {
727  padding: 0 .25em;
728}
729.agenda {height: 95px; }
730.grid-item .h2 {
731  display: flex;
732  flex-direction: row;
733  width: 100%;
734  height: 95px;
735  margin: 0;
736  font-size: 21px;
737  font-weight: 400;
738  color: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header_bk},#GET{c_header}})];
739  line-height: 21px;
740  padding: 10px;
741  text-align: right;
742  border: none;
743}
744.grid-item .agenda .h2 {
745  font-size: 18px;
746}
747.grid-item .agenda .date {
748  padding: 0;
749  flex-shrink: 0;
750  display: flex;
751  align-items: center;
752  justify-content: center;
753}
754.agenda time {
755    text-align: center;
756}
757.agenda .debutfin time {
758    text-align: left;
759}
760.grid-item .agenda .date.debutfin {
761  display: block;
762  align-items: left;
763  justify-content: left;
764}
765
766.grid-item .h2 .icon {
767  font-size: 0;
768  align-self: center;
769  padding: 7px 0 7px 7px;
770}
771.grid-item .h2 .titre-actus {
772    width: 100%;
773    align-self: center;
774    padding: 10px 10px 10px 0;
775    border-right: 1px solid;
776}
777.grid-item img {
778  max-width: 100%;
779}
780.grid-item {
781  margin-bottom: 20px;
782}
783/* Affichage des dates. cf https://codepen.io/jpyrat/pen/EmZrpR */
784.date {
785  width: 95px;
786  height: 95px;
787  position: relative;
788  background: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header_bk},#GET{c_header}})];
789  color: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header},#GET{c_header_bk}})];
790}
791
792.debutfin:after {
793  content: "";
794  position: absolute;
795  right: 0;
796  top: 0;
797  border-top: 2px solid #fff;
798  width: 142%;
799  transform: rotate(-45deg);
800  transform-origin: 99% 0%;
801}
802
803.debut, .fin {
804  width: 75%;
805  height: 50%;
806  position: absolute;
807  text-align: left;
808  display: flex;
809  flex-direction: column;
810  justify-content: center;
811  color: #fff;
812  line-height: 1.2em;
813  font-size: 75%;
814}
815
816.agenda .debutfin time.fin {
817  right: 0;
818  top: 50%;
819  text-align: right;
820}
821
822.ladate {
823  margin:0;
824  padding:0;
825}
826
827.annee {
828  font-size: 1.2em;
829  line-height: 0.82em;
830  display: block;
831}
832
833
834/*
835M : [(#GET{masonry}|mult{3}|plus{100})]
836LC: #GET{LargeurContaineur}
837*/
838.gutter-sizer { width: 20px; }
839[(#GET{masonry}|mult{3}|plus{100}|<={#GET{LargeurContaineur}}|oui)
840        .grid-sizer, .grid-item {
841          width: calc(25% - 20px);
842        }
843        .grid-item {
844          height: calc(340px + 65px);
845        }
846        .grid-item-x2 {
847          width: calc(50% - 20px);
848        }
849        .grid-item-x3 {
850          width: calc(75% - 20px);
851        }
852        @media only screen and (max-width: #GET{LargeurContaineur}px) {
853          .grid-item {
854                height: calc(340px + 90px);
855          }
856        }
857]
858[(#GET{masonry}|mult{3}|plus{100}|<={#GET{LargeurContaineur}}|non)
859        .grid-sizer, .grid-item {
860          width: calc(33.333% - 20px);
861        }
862        .grid-item {
863        height: calc(340px + 90px);
864        }
865        .grid-item-x2 {
866        width: calc(66.666% - 20px);
867        }
868        .grid-item-x3 {
869        width: calc(100% - 20px);
870        }
871]
872@media only screen and (max-width:[(#GET{masonry}|mult{3}|plus{100})]px) {
873  .grid-sizer, .grid-item {
874    width: calc(33.333% - 20px);
875  }
876  .grid-item {
877    height: calc(340px + 90px);
878  }
879  .grid-item-x2 {
880    width: calc(66.666% - 20px);
881  }
882  .grid-item-x3 {
883    width: calc(100% - 20px);
884  }
885}
886@media only screen and (max-width: [(#GET{masonry}|mult{2}|plus{80})]px) {
887  .grid-sizer, .grid-item {
888    width: calc(50% - 20px);
889  }
890  .grid-item {
891    height: calc(340px + 90px);
892  }
893  .grid-item-x2 {
894    width: calc(100% - 20px);
895  }
896}
897@media only screen and (max-width: [(#GET{masonry}|mult{1}|plus{60})]px) {
898  .grid-sizer, .grid-item {
899    width: calc(100% - 20px);
900  }
901  .grid-item {
902    height: auto;
903  }
904}
905#lesprojets {
906  margin-top: 5em;
907  margin-bottom: 4em;
908}
909#projets {
910  margin: 0;
911  padding: 0;
912}
913#projets .projet {
914  background-color: #777;
915}
916@media only screen and (min-width: 641px) {
917 #projets .projet {
918  width: 50%;
919  float: left;
920 }
921}
922
923
924#projets .projet:hover {
925  background-color: #aaa;
926}
927
928@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
929  #projets h2 {
930    font-size: 36px;
931    line-height: 38px;
932  }
933}
934@media only screen and (max-width: 768px) {
935  #projets h2 {
936    font-size: 30px;
937    line-height: 34px;
938  }
939}
940@media only screen and (max-width: 640px) {
941  #projets article {
942    width: 100%;
943    float: none;
944  }
945  #projets article a {
946    height: auto;
947  }
948  #projets h2 {
949    padding: 1rem;
950    font-size: 26px;
951    line-height: 30px;
952  }
953}
954
955#pratique {
956  margin-bottom: 4em;
957}
958
959[(#PLUGIN{lesscss}|oui)
960        [(#CHEMIN{images/stylesportailcognac_perso.less.html}|?{'/* Surcharge eventuelle */'})
961       
962                [(#PRODUIRE{fond=images/stylesportailcognac_perso.less,format=less}
963                                |supprimer_timestamp
964                                |appliquer_filtre{less_css}
965                                |file_get_contents
966                )
967                #SET{lessdone,1}
968                ]
969        ]
970]
971[(#GET{lessdone}|non)
972[(#CHEMIN{images/stylesportailcognac_perso.css}|?{'/* Surcharge eventuelle */'})
973[(#INCLURE{#CHEMIN{images/stylesportailcognac_perso.css}|url_absolue_css}|compacte{css})]
974]
975]
Note: See TracBrowser for help on using the repository browser.