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

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

[SoyezCréateurs?] Ajustement du calcul des tailles des images de la Zone Masonry en mode Cognac (Eric)

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