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

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

[SoyezCréateurs?] Mode Cognac, ajustement espacements verticaux

File size: 23.8 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 a {
259  display: flex;
260  flex-direction: row;
261  align-content: center;
262  height: [(#CONFIG{soyezcreateurs/variante_blocprojet,par2}|=={par2}|?{20vw,7vw})];
263  color: white;
264  border: none;
265}
266#projets a:hover {
267  color: #333;
268}
269#projets h2 {
270  width: 100%;
271  height: auto;
272  margin: auto;
273  padding: 0 10px;
274  align-self: center;
275  color: inherit;
276  font-weight: 300;
277  text-align: center;
278}
279#projets .suite {
280  background-color: rgba(100, 100, 100, 0.5) ;
281  display: flex;
282  height: auto;
283  padding: 0 25px;
284}
285#projets .suite .icon {
286  margin: auto;
287  align-self: center;
288  font-size: 0;
289}
290#projets .suite .icon:before {
291  font-size: 3rem;
292}
293@media only screen and (max-width: 1024px) {
294  #projets h2 {
295    font-size: 36px;
296    line-height: 38px;
297  }
298}
299@media only screen and (max-width: 768px) {
300  #projets h2 {
301    font-size: 30px;
302    line-height: 34px;
303  }
304}
305@media only screen and (max-width: 640px) {
306  #projets .projet {
307    width: 100%;
308    float: none;
309  }
310  #projets .projet a {
311    height: auto;
312  }
313  #projets h2 {
314    padding: 1rem;
315    font-size: 26px;
316    line-height: 30px;
317  }
318  #projets .suite {
319    padding: 0 15px;
320  }
321  #projets .suite .icon {
322    font-size: 0;
323  }
324}
325.hasJS .slider:not(:first-child) { display:none; }
326.hasJS .slick-initialized .slider:not(:first-child) { display:block; }
327
328
329.slider-pratique {
330  margin: 0 4rem;
331}
332#cycloshow .slick-prev,
333#cycloshow .slick-next,
334.slider-pratique .slick-prev,
335.slider-pratique .slick-next {
336  width: 60px;
337  height: 70px;
338  text-shadow: initial;
339}
340.slider-pratique .slick-prev {
341  left: -60px;
342}
343#cycloshow .slick-prev:before,
344.slider-pratique .slick-prev:before {
345  content: "\276c";
346}
347.slider-pratique .slick-next {
348  right: -60px;
349}
350#cycloshow .slick-next:before,
351.slider-pratique .slick-next:before {
352  content: "\276d";
353}
354#cycloshow .slick-prev:before,
355#cycloshow .slick-next:before {
356  font-family: "picto-soyezcreateurs" ;
357  font-size: 50px;
358  opacity: 1;
359  color: #FFF;
360}
361.slider-pratique .slick-prev:before,
362.slider-pratique .slick-next:before {
363  margin-left: -20px;
364  font-family: "picto-soyezcreateurs" ;
365  font-size: 50px;
366  opacity: 1;
367  color: #GET{c_triadea};
368}
369.slider-pratique .slick-prev:hover:before,
370.slider-pratique .slick-prev:focus:before,
371.slider-pratique .slick-next:hover:before,
372.slider-pratique .slick-next:focus:before {
373  opacity: 1;
374  color: #333 ;
375}
376.slider-pratique button:hover,
377.slider-pratique button:focus {
378  background-color: transparent;
379}
380.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
381    background: rgba(48,48,48,0.5);
382}
383.slider-pratique .content-pratique {
384  background-color: #GET{c_triadeb};
385  width: 280px !important;
386  margin: 0 24px 0 0;
387  -webkit-transition: all .25s ease;
388  transition: all .25s ease;
389}
390.slider-pratique .content-pratique:hover,
391.slider-pratique .content-pratique:focus {
392  background-color: rgba(18, 155, 155, 0.2) ;
393  -webkit-transition: all .25s ease;
394  transition: all .25s ease;
395}
396.slider-pratique .content-pratique:hover h2,
397.slider-pratique .content-pratique:focus h2 {
398  color: #129b9b ;
399}
400.slider-pratique .h2 {
401  display: flex;
402  height: 150px;
403  margin: 1.5em 0 0 0;
404  padding-bottom: 90px;
405  font-family: 'Open Sans', sans-serif ;
406  font-size: 26px;
407  color: white;
408  font-weight: 300;
409  text-align: right;
410  border-bottom: none;
411}
412.slider-pratique .h2 .titre-pratique {
413  width: 100%;
414  align-self: center;
415  padding: 10px;
416  text-align: right;
417  border-right: 1px solid;
418}
419.slider-pratique .h2 .icon {
420  align-self: center;
421  padding: 7px 15px 7px 7px;
422  font-size: 0;
423}
424.slider-pratique .h2 .icon:before {
425  font-size: 30px;
426}
427@media only screen and (max-width: 400px) {
428  .slider-pratique {
429    margin: 0 2.8rem;
430  }
431  .slider-pratique .content-pratique {
432    width: 240px !important;
433  }
434  .slider-pratique .h2 {
435    height: 130px;
436    padding-bottom: 0;
437    font-size: 21px;
438  }
439}
440
441#content .titre-sommaire {
442  margin-top: 4em;
443}
444#content .titre-sommaire:before {
445  content: "";
446  display: block;
447  background-color: #GET{c_titraille};
448  width: 100%;
449  height: 1px;
450}
451#content .titre-sommaire h1 {
452  display: block;
453  background-color: #GET{c_titraille_bk};
454  max-width: [(#GET{LargeurContaineur}|moins{40})]px;
455  margin: -1.1em auto .5em auto;
456  padding: .5em .8em .5em;
457  color: #GET{c_titraille};
458  font-size: 2rem;
459  line-height: 1em;
460  border-left: 1px solid #GET{c_titraille};
461}
462@media screen and (max-width: 1178px) {
463   #content .titre-sommaire h1 {
464    border-left: none;
465  }
466}
467 .slick-slider {
468  margin-bottom: 0;
469}
470 .slider-slick img {
471  width: 100%;
472}
473 .slick-slide img {
474  margin: 0 auto;
475}
476 .slick-slide .row {
477  max-width: none;
478}
479 .slick-dots {
480  bottom: -45px;
481}
482 .slick-dots li {
483  width: 30px;
484  height: 30px;
485}
486 .slick-dots li button {
487  width: 30px;
488  height: 30px;
489}
490 .slick-dots li button::before {
491  font-size: 20px;
492  line-height: 30px;
493  width: 30px;
494  height: 30px;
495}
496 .slick-dots li.slick-active button::before {
497  color: #GET{c_triadea};
498}
499 #liens-diaporama {
500  position: absolute;
501  top: 100px;
502  right: 0;
503  z-index: 1;
504}
505@media only screen and (max-width: 1024px) {
506   #liens-diaporama {
507    top: 5vw;
508  }
509}
510@media only screen and (max-width: 767px) {
511   #liens-diaporama {
512    position: relative;
513        z-index: 0;
514  }
515}
516 #liens-diaporama ul {
517  width: 220px;
518  text-align: right;
519}
520@media only screen and (max-width: 767px) {
521  #liens-diaporama ul {
522    width: 100%;
523        margin: 0;
524  }
525  #liens-diaporama li {
526    padding: 0;
527        width: 100%;
528  }
529}
530@media only screen and (max-width: 767px) {
531   #liens-diaporama li a span {
532    padding: .25em .5em;
533  }
534}
535 #liens-diaporama li a span.icon {
536  margin-left: .55rem;
537  padding: .85rem .5rem;
538  font-size: 0;
539  border-left: 1px solid #GET{c_titraille};
540}
541 #liens-diaporama li a span.icon:before {
542  font-size: 2.15rem;
543}
544 #liens-diaporama li a:hover {
545  color: #666 ;
546}
547@media only screen and (max-width: 767px) {
548   #liens-diaporama li a {
549    background-color: #eae9e5;
550    margin-left: .5em;
551  }
552}
553#actualites {
554  margin-top: 7em;
555  margin-bottom: 5em;
556}
557#lesprojets {
558  margin-top: 0em;
559  margin-bottom: 5em;
560}
561#lesprojets .titre-sommaire {
562  display: none;
563}
564
565#pratique {
566  margin-top: 6.5em;
567  margin-bottom: 4em;
568}
569.clearfix:after,
570.grid:after {
571  content: '';
572  display: block;
573  clear: both;
574}
575.grid-item .h2 .icon:before {
576  font-size: 30px;
577}
578.grid-item-x2 {
579  width: calc(50% - 20px) ;
580}
581.grid-item-x3 {
582  width: calc(75% - 20px) ;
583}
584#sommaire_mode_portailcognac header .logo_rubrique { margin-bottom: 3em; }
585#liens-diaporama {
586  position: absolute;
587  top: 100px;
588  right: 0;
589}
590@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
591  #liens-diaporama {
592    top: 5vw;
593  }
594}
595@media only screen and (max-width: 767px) {
596  #liens-diaporama {
597    position: relative;
598  }
599}
600#liens-diaporama ul {
601  width: 220px;
602  text-align: right;
603}
604@media only screen and (max-width: 767px) {
605  #liens-diaporama ul {
606    display: flex;
607    width: 100%;
608    flex-wrap: wrap;
609  }
610}
611#liens-diaporama li {
612  /* 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)]) */
613  background-color: rgba([(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header_bk},#GET{c_header}}|sc_rgb)], 0.75);
614}
615#diaporama .liste_auteurs { text-align: left; padding: 0 1em; }
616
617#diaporama .datepublication,
618#cycloshow .datepublication {
619        float: none;
620        background-color : transparent;
621        color: inherit;
622}
623
624#liens-diaporama li a {
625  display: flex;
626  font-size: 1.2em;
627  color: [(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header},#GET{c_header_bk}})];
628  justify-content: flex-end;
629  line-height: 1 ;
630  align-items: center;
631}
632#liens-diaporama li a span {
633  padding: .5em .25em .5em .5em;
634}
635@media only screen and (max-width: 767px) {
636  #liens-diaporama li a span {
637    padding: .25em .5em;
638  }
639}
640#liens-diaporama li a span.icon {
641  border-left: 1px solid;
642  border-left-color: inherit;
643}
644@media only screen and (max-width: 767px) {
645  #liens-diaporama li a {
646    background-color: #eae9e5;
647    margin-left: .5em;
648    margin-right: .5em;
649  }
650}
651
652.slick-slide img {
653  margin: 0 auto;
654}
655.slick-slide .row {
656  max-width: none;
657}
658.slick-dots {
659  bottom: -45px;
660}
661.slick-dots li {
662  width: 30px;
663  height: 30px;
664}
665.slick-dots li button {
666  width: 30px;
667  height: 30px;
668}
669.slick-dots li button::before {
670  font-size: 20px;
671  line-height: 30px;
672  width: 30px;
673  height: 30px;
674}
675#content img {
676  padding: 0;
677}
678.clearfix:after,
679.grid:after {
680  content: '';
681  display: block;
682  clear: both;
683}
684#diaporama {
685        position: relative;
686}
687#editotexte {
688  max-width: [(#GET{LargeurContaineur}|moins{44})]px;
689  margin: 0 auto;
690  padding: 1em 2em;
691  color: #GET{c_container};
692  background-color: #GET{c_container_bk};
693  [(#CONFIG{soyezcreateurs_couleurs/transparencecontent,1}|!={1}|oui)background-color: rgba([(#GET{c_container_bk}|sc_rgb)], #CONFIG{soyezcreateurs_couleurs/transparencecontent,1});]
694}
695#content #edito .titre-sommaire h1 {
696        margin-bottom: 0;
697}
698img.editologo {
699  max-width: [(#GET{LargeurContaineur})]px;
700  margin: 0 auto;
701  display: block;
702}
703
704
705
706/* gestion block texte sur slider : CycloShow */
707#cycloshow {
708        position: relative;
709        max-width: #GET{LargeurContaineur}px;
710        width: 100%;
711    margin: 0 auto 7em auto;
712}
713
714
715.slider-diapo-imgfull {
716  position: relative;
717}
718@media screen and (max-width: 39.9375em) {
719  .hide-for-small-only {
720    display: none !important;
721  }
722}
723.slider-content.desc-gauche {
724  position: absolute;
725  display: flex;
726  flex-direction: column;
727  justify-content: center;
728  background-color: rgba(152, 152, 152, 0.7);
729  top: 0;
730  bottom: 0;
731  left: 8%;
732  width: 27%;
733  padding: 1.75em !important;
734}
735#content .slider-content.desc-gauche h3 {
736  margin: 0 0 1em 0;
737  padding: 0;
738  color: #GET{c_triadec};
739  font-family: 'Oswald', sans-serif;
740  font-weight: 300;
741  font-size: 2.15em;
742  line-height: 1.15em;
743  text-align: left;
744}
745.slider-content.desc-gauche p {
746  font-size: 1.25em;
747  color: white;
748  line-height: 1.35;
749}
750@media screen and (max-width: 100em) {
751  .slider-content.desc-gauche h3 {
752    margin: 0 0 .5em;
753    font-size: 1.75em;
754  }
755  .slider-content.desc-gauche p {
756    font-size: 1.1em;
757  }
758}
759@media screen and (max-width: 80em) {
760  .slider-content.desc-gauche {
761    left: 8%;
762    width: 346px;
763    padding: 1.5em !important;
764  }
765  .slider-content.desc-gauche h3 {
766    margin: 0 0 .5em;
767    font-size: 1.5em;
768  }
769  .slider-content.desc-gauche p {
770    font-size: 1.1em;
771  }
772}
773@media screen and (max-width: 410px) {
774  .slider-content.desc-gauche {
775    left: 0;
776    width: 100%;
777  }
778}
779
780.largeurcontrainte {
781        max-width: [(#GET{LargeurContaineur}|moins{40})]px;
782        margin: 0 auto;
783        text-align: center;
784}
785
786
787#masonry {
788  max-width: #GET{LargeurContaineur}px;
789  margin: 0 auto;
790  padding-left: 20px;
791  text-align: center;
792}
793.grid {
794  text-align: center;
795}
796.grid-item {
797  margin-bottom: 20px;
798  -webkit-transition: all .25s ease;
799  transition: all .25s ease;
800  background-color: #eae9e5;
801  float: left;
802  margin-right: 20px;
803}
804.grid-item .content-actus:hover,
805.grid-item .content-actus:focus {
806  /* 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)]) */
807  background-color: rgba([(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header_bk},#GET{c_header}}|sc_rgb)], 0.2);
808  -webkit-transition: all .25s ease;
809  transition: all .25s ease;
810}
811.grid-item .content-actus {
812  /* 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)]) */
813  background-color: #[(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header_bk},#GET{c_header}}|couleur_foncerluminosite{20})];
814}
815.grid-item .content-actus:nth-child(2) {
816  margin-top: 16px;
817}
818.grid-item header {
819  font-size: 1.5em;
820  font-weight: 300;
821  line-height: 21px;
822  overflow: auto;
823}
824.agenda strong {
825  font-size: 1.8em;
826  vertical-align: bottom;
827}
828.agenda .annee {
829  font-size: 1.8em;
830}
831.agenda time {
832  padding: 0 .25em;
833}
834.agenda {height: 95px; }
835.grid-item .h2 {
836  display: flex;
837  flex-direction: row;
838  width: 100%;
839  height: 95px;
840  margin: 0;
841  font-size: 21px;
842  font-weight: 400;
843  color: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header_bk},#GET{c_header}})];
844  line-height: 21px;
845  padding: 10px;
846  text-align: right;
847  border: none;
848}
849.grid-item .agenda .h2 {
850  font-size: 18px;
851}
852.grid-item .agenda .date {
853  padding: 0;
854  flex-shrink: 0;
855  display: flex;
856  align-items: center;
857  justify-content: center;
858}
859.agenda time {
860    text-align: center;
861}
862.agenda .debutfin time {
863    text-align: left;
864}
865.grid-item .agenda .date.debutfin {
866  display: block;
867  align-items: left;
868  justify-content: left;
869}
870
871.grid-item .h2 .icon {
872  font-size: 0;
873  align-self: center;
874  padding: 7px 0 7px 7px;
875}
876.grid-item .h2 .titre-actus {
877    width: 100%;
878    align-self: center;
879    padding: 10px 10px 10px 0;
880    border-right: 1px solid;
881}
882.grid-item img {
883  max-width: 100%;
884  width: 100%;
885  max-height: 340px;
886}
887.grid-item {
888  margin-bottom: 20px;
889}
890/* Affichage des dates. cf https://codepen.io/jpyrat/pen/EmZrpR */
891.date {
892  width: 95px;
893  height: 95px;
894  position: relative;
895  background: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header_bk},#GET{c_header}})];
896  color: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header},#GET{c_header_bk}})];
897}
898
899.debutfin:after {
900  content: "";
901  position: absolute;
902  right: 0;
903  top: 0;
904  border-top: 2px solid #fff;
905  width: 142%;
906  transform: rotate(-45deg);
907  transform-origin: 99% 0%;
908}
909
910.debut, .fin {
911  width: 75%;
912  height: 50%;
913  position: absolute;
914  text-align: left;
915  display: flex;
916  flex-direction: column;
917  justify-content: center;
918  color: #fff;
919  line-height: 1.2em;
920  font-size: 75%;
921}
922
923.agenda .debutfin time.fin {
924  right: 0;
925  top: 50%;
926  text-align: right;
927}
928
929.ladate {
930  margin:0;
931  padding:0;
932}
933
934.annee {
935  font-size: 1.2em;
936  line-height: 0.82em;
937  display: block;
938}
939
940
941/*
942M : [(#GET{masonry}|mult{4}|moins{100})]
943LC: #GET{LargeurContaineur}
944*/
945.gutter-sizer { width: 20px; }
946[(#GET{masonry}|mult{4}|moins{100}|<={#GET{LargeurContaineur}}|oui)
947/* M <= LC */
948        .grid-sizer, .grid-item {
949          width: calc(25% - 20px);
950        }
951        .grid-item {
952          height: calc(340px + 65px);
953        }
954        .grid-item-demie {
955          height: calc(127px + 65px);
956          margin-bottom: 0;
957        }
958        .grid-item-x2 {
959          width: calc(50% - 20px);
960        }
961        .grid-item-x3 {
962          width: calc(75% - 20px);
963        }
964        @media only screen and (max-width: #GET{LargeurContaineur}px) {
965          .grid-item {
966                height: calc(340px + 90px);
967          }
968          .grid-item-demie {
969                height: calc(127px + 90px);
970                margin-bottom: 0;
971          }
972        }
973]
974[(#GET{masonry}|mult{4}|moins{100}|<={#GET{LargeurContaineur}}|non)
975/* M > LC */
976        .grid-sizer, .grid-item {
977          width: calc(33.333% - 20px);
978        }
979        .grid-item {
980        height: calc(340px + 90px);
981        }
982        .grid-item-demie {
983        height: calc(127px + 90px);
984        margin-bottom: 0;
985        }
986        .grid-item-x2 {
987        width: calc(66.666% - 20px);
988        }
989        .grid-item-x3 {
990        width: calc(100% - 20px);
991        }
992]
993@media only screen and (max-width:[(#GET{masonry}|mult{4}|moins{100})]px) {
994  .grid-sizer, .grid-item {
995    width: calc(33.333% - 20px);
996  }
997  .grid-item {
998    height: calc(340px + 90px);
999  }
1000  .grid-item-demie {
1001    height: calc(127px + 90px);
1002        margin-bottom: 0;
1003  }
1004  .grid-item-x2 {
1005    width: calc(66.666% - 20px);
1006  }
1007  .grid-item-x3 {
1008    width: calc(100% - 20px);
1009  }
1010}
1011@media only screen and (max-width: [(#GET{masonry}|mult{3}|moins{80})]px) {
1012  .grid-sizer, .grid-item {
1013    width: calc(50% - 20px);
1014  }
1015  .grid-item {
1016    height: calc(340px + 90px);
1017  }
1018  .grid-item-demie {
1019    height: calc(127px + 90px);
1020        margin-bottom: 0;
1021  }
1022  .grid-item-x2 {
1023    width: calc(100% - 20px);
1024  }
1025}
1026@media only screen and (max-width: [(#GET{masonry}|mult{2}|moins{60})]px) {
1027  .grid-sizer, .grid-item {
1028    width: calc(100% - 20px);
1029  }
1030  .grid-item {
1031    height: auto;
1032  }
1033}
1034#projets {
1035  margin: 0;
1036  padding: 0;
1037}
1038#projets .projet {
1039  background-color: #777;
1040}
1041@media only screen and (min-width: 641px) {
1042 #projets .projet {
1043[(#CONFIG{soyezcreateurs/variante_blocprojet,par2}|=={par2}|oui)
1044  width: 50%;
1045]
1046[(#CONFIG{soyezcreateurs/variante_blocprojet,par2}|=={par3}|oui)
1047  width: 25%;
1048  margin-left: 4%;
1049  margin-right: 4%;
1050]
1051  float: left;
1052 }
1053}
1054
1055#projets .projet:hover {
1056  background-color: #aaa;
1057}
1058
1059@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
1060  #projets h2 {
1061    font-size: 2.5rem;
1062  }
1063}
1064@media only screen and (max-width: 768px) {
1065  #projets h2 {
1066    font-size: 2rem;
1067  }
1068}
1069@media only screen and (max-width: 640px) {
1070  #projets article {
1071    width: 100%;
1072    float: none;
1073  }
1074  #projets article a {
1075    height: auto;
1076  }
1077  #projets h2 {
1078    padding: 1rem;
1079    font-size: 1.8rem;
1080  }
1081}
1082
1083#pratique {
1084  margin-bottom: 4em;
1085}
1086
1087[(#PLUGIN{lesscss}|oui)
1088        [(#CHEMIN{images/stylesportailcognac_perso.less.html}|?{'/* Surcharge eventuelle */'})
1089       
1090                [(#PRODUIRE{fond=images/stylesportailcognac_perso.less,format=less}
1091                                |supprimer_timestamp
1092                                |appliquer_filtre{less_css}
1093                                |file_get_contents
1094                )
1095                #SET{lessdone,1}
1096                ]
1097        ]
1098]
1099[(#GET{lessdone}|non)
1100[(#CHEMIN{images/stylesportailcognac_perso.css}|?{'/* Surcharge eventuelle */'})
1101[(#INCLURE{#CHEMIN{images/stylesportailcognac_perso.css}|url_absolue_css}|compacte{css})]
1102]
1103]
Note: See TracBrowser for help on using the repository browser.