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

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

Pas besoin ici de marge haute

File size: 23.5 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.slider-pratique {
332  margin: 0 4rem;
333}
334#cycloshow .slick-prev,
335#cycloshow .slick-next,
336.slider-pratique .slick-prev,
337.slider-pratique .slick-next {
338  width: 60px;
339  height: 70px;
340  text-shadow: initial;
341}
342.slider-pratique .slick-prev {
343  left: -60px;
344}
345#cycloshow .slick-prev:before,
346.slider-pratique .slick-prev:before {
347  content: "\276c";
348}
349.slider-pratique .slick-next {
350  right: -60px;
351}
352#cycloshow .slick-next:before,
353.slider-pratique .slick-next:before {
354  content: "\276d";
355}
356#cycloshow .slick-prev:before,
357#cycloshow .slick-next:before {
358  font-family: "picto-soyezcreateurs" ;
359  font-size: 50px;
360  opacity: 1;
361  color: #FFF;
362}
363.slider-pratique .slick-prev:before,
364.slider-pratique .slick-next:before {
365  margin-left: -20px;
366  font-family: "picto-soyezcreateurs" ;
367  font-size: 50px;
368  opacity: 1;
369  color: #GET{c_triadea};
370}
371.slider-pratique .slick-prev:hover:before,
372.slider-pratique .slick-prev:focus:before,
373.slider-pratique .slick-next:hover:before,
374.slider-pratique .slick-next:focus:before {
375  opacity: 1;
376  color: #333 ;
377}
378.slider-pratique button:hover,
379.slider-pratique button:focus {
380  background-color: transparent;
381}
382.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
383    background: rgba(48,48,48,0.5);
384}
385.slider-pratique .content-pratique {
386  background-color: #GET{c_triadeb};
387  width: 280px;
388  margin: 0 12px;
389  -webkit-transition: all .25s ease;
390  transition: all .25s ease;
391}
392.slider-pratique .content-pratique:hover,
393.slider-pratique .content-pratique:focus {
394  background-color: rgba(18, 155, 155, 0.2) ;
395  -webkit-transition: all .25s ease;
396  transition: all .25s ease;
397}
398.slider-pratique .content-pratique:hover h2,
399.slider-pratique .content-pratique:focus h2 {
400  color: #129b9b ;
401}
402.slider-pratique .h2 {
403  display: flex;
404  height: 150px;
405  margin: 1.5em 0 0 0;
406  padding-bottom: 90px;
407  font-family: 'Open Sans', sans-serif ;
408  font-size: 26px;
409  color: white;
410  font-weight: 300;
411  text-align: right;
412  border-bottom: none;
413}
414.slider-pratique .h2 .titre-pratique {
415  width: 100%;
416  align-self: center;
417  padding: 10px;
418  text-align: right;
419  border-right: 1px solid;
420}
421.slider-pratique .h2 .icon {
422  align-self: center;
423  padding: 7px 15px 7px 7px;
424  font-size: 0;
425}
426.slider-pratique .h2 .icon:before {
427  font-size: 30px;
428}
429@media only screen and (max-width: 400px) {
430  .slider-pratique {
431    margin: 0 2.8rem;
432  }
433  .slider-pratique .content-pratique {
434    width: 240px;
435  }
436  .slider-pratique .h2 {
437    height: 130px;
438    padding-bottom: 0;
439    font-size: 21px;
440  }
441}
442
443#content .titre-sommaire {
444  margin-top: 4em;
445}
446#content .titre-sommaire:before {
447  content: "";
448  display: block;
449  background-color: #GET{c_titraille};
450  width: 100%;
451  height: 1px;
452}
453#content .titre-sommaire h1 {
454  display: block;
455  background-color: #GET{c_titraille_bk};
456max-width: [(#GET{LargeurContaineur}|moins{44})]px;
457  margin: -1.1em auto 1em auto;
458  padding: .5em .8em .5em;
459  color: #GET{c_titraille};
460  font-size: 2rem;
461  line-height: 1em;
462  border-left: 1px solid #GET{c_titraille};
463}
464@media screen and (max-width: 1178px) {
465   #content .titre-sommaire h1 {
466    border-left: none;
467  }
468}
469 .slick-slider {
470  margin-bottom: 0;
471}
472 .slider-slick img {
473  width: 100%;
474}
475 .slick-slide img {
476  margin: 0 auto;
477}
478 .slick-slide .row {
479  max-width: none;
480}
481 .slick-dots {
482  bottom: -45px;
483}
484 .slick-dots li {
485  width: 30px;
486  height: 30px;
487}
488 .slick-dots li button {
489  width: 30px;
490  height: 30px;
491}
492 .slick-dots li button::before {
493  font-size: 20px;
494  line-height: 30px;
495  width: 30px;
496  height: 30px;
497}
498 .slick-dots li.slick-active button::before {
499  color: #GET{c_triadea};
500}
501 #liens-diaporama {
502  position: absolute;
503  top: 100px;
504  right: 0;
505}
506@media only screen and (max-width: 1024px) {
507   #liens-diaporama {
508    top: 5vw;
509  }
510}
511@media only screen and (max-width: 767px) {
512   #liens-diaporama {
513    position: relative;
514    top: 50px;
515  }
516}
517 #liens-diaporama ul {
518  width: 220px;
519  text-align: right;
520}
521@media only screen and (max-width: 767px) {
522  #liens-diaporama ul {
523    display: flex;
524    width: 100%;
525    flex-wrap: wrap;
526  }
527  #liens-diaporama li {
528    flex-grow: 1;
529  }
530}
531@media only screen and (max-width: 767px) {
532   #liens-diaporama li a span {
533    padding: .25em .5em;
534  }
535}
536 #liens-diaporama li a span.icon {
537  margin-left: .55rem;
538  padding: .85rem .5rem;
539  font-size: 0;
540  border-left: 1px solid #GET{c_titraille};
541}
542 #liens-diaporama li a span.icon:before {
543  font-size: 2.15rem;
544}
545 #liens-diaporama li a:hover {
546  color: #666 ;
547}
548@media only screen and (max-width: 767px) {
549   #liens-diaporama li a {
550    background-color: #eae9e5;
551    margin-left: .5em;
552  }
553}
554 #actualites {
555  margin-top: 7em;
556}
557 #lesprojets {
558  margin-top: 5em;
559}
560 #lesprojets .titre-sommaire {
561  display: none;
562}
563
564 #pratique {
565  margin-top: 6.5em;
566  margin-bottom: 4em;
567}
568 .clearfix:after,
569 .grid:after {
570  content: '';
571  display: block;
572  clear: both;
573}
574 .grid-item .h2 .icon:before {
575  font-size: 30px;
576}
577 .grid-item-x2 {
578  width: calc(50% - 20px) ;
579}
580 .grid-item-x3 {
581  width: calc(75% - 20px) ;
582}
583#sommaire_mode_portailcognac header .logo_rubrique { margin-bottom: 3em; }
584#liens-diaporama {
585  position: absolute;
586  top: 100px;
587  right: 0;
588}
589@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
590  #liens-diaporama {
591    top: 5vw;
592  }
593}
594@media only screen and (max-width: 767px) {
595  #liens-diaporama {
596    position: relative;
597    top: 50px;
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@media only screen and (max-width: 767px) {
625  #liens-diaporama li {
626    flex-grow: 1;
627  }
628}
629#liens-diaporama li a {
630  display: flex;
631  font-size: 1.2em;
632  color: [(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header},#GET{c_header_bk}})];
633  justify-content: flex-end;
634  line-height: 1 ;
635  align-items: center;
636}
637#liens-diaporama li a span {
638  padding: .5em .25em .5em .5em;
639}
640@media only screen and (max-width: 767px) {
641  #liens-diaporama li a span {
642    padding: .25em .5em;
643  }
644}
645#liens-diaporama li a span.icon {
646  border-left: 1px solid;
647  border-left-color: inherit;
648}
649@media only screen and (max-width: 767px) {
650  #liens-diaporama li a {
651    background-color: #eae9e5;
652    margin-left: .5em;
653  }
654}
655
656.slick-slide img {
657  margin: 0 auto;
658}
659.slick-slide .row {
660  max-width: none;
661}
662.slick-dots {
663  bottom: -45px;
664}
665.slick-dots li {
666  width: 30px;
667  height: 30px;
668}
669.slick-dots li button {
670  width: 30px;
671  height: 30px;
672}
673.slick-dots li button::before {
674  font-size: 20px;
675  line-height: 30px;
676  width: 30px;
677  height: 30px;
678}
679#content img {
680  padding: 0;
681}
682.clearfix:after,
683.grid:after {
684  content: '';
685  display: block;
686  clear: both;
687}
688#diaporama {
689        margin-bottom: 9em;
690}
691#editotexte {
692  max-width: [(#GET{LargeurContaineur}|moins{44})]px;
693  margin: 0 auto;
694  padding: 1em 2em;
695  color: #GET{c_container};
696  background-color: #GET{c_container_bk};
697  [(#CONFIG{soyezcreateurs_couleurs/transparencecontent,1}|!={1}|oui)background-color: rgba([(#GET{c_container_bk}|sc_rgb)], #CONFIG{soyezcreateurs_couleurs/transparencecontent,1});]
698}
699#content #edito .titre-sommaire h1 {
700        margin-bottom: 0;
701}
702img.editologo {
703  max-width: [(#GET{LargeurContaineur})]px;
704  margin: 0 auto;
705  display: block;
706}
707
708
709
710/* gestion block texte sur slider : CycloShow */
711#cycloshow {
712        position: relative;
713        max-width: #GET{LargeurContaineur}px;
714        width: 100%;
715    margin: 0 auto 7em auto;
716}
717
718
719.slider-diapo-imgfull {
720  position: relative;
721}
722@media screen and (max-width: 39.9375em) {
723  .hide-for-small-only {
724    display: none !important;
725  }
726}
727.slider-content.desc-gauche {
728  position: absolute;
729  display: flex;
730  flex-direction: column;
731  justify-content: center;
732  background-color: rgba(152, 152, 152, 0.7);
733  top: 0;
734  bottom: 0;
735  left: 8%;
736  width: 27%;
737  padding: 1.75em !important;
738}
739#content .slider-content.desc-gauche h3 {
740  margin: 0 0 1em 0;
741  padding: 0;
742  color: #GET{c_triadec};
743  font-family: 'Oswald', sans-serif;
744  font-weight: 300;
745  font-size: 2.15em;
746  line-height: 1.15em;
747  text-align: left;
748}
749.slider-content.desc-gauche p {
750  font-size: 1.25em;
751  color: white;
752  line-height: 1.35;
753}
754@media screen and (max-width: 100em) {
755  .slider-content.desc-gauche h3 {
756    margin: 0 0 .5em;
757    font-size: 1.75em;
758  }
759  .slider-content.desc-gauche p {
760    font-size: 1.1em;
761  }
762}
763@media screen and (max-width: 80em) {
764  .slider-content.desc-gauche {
765    left: 8%;
766    width: 346px;
767    padding: 1.5em !important;
768  }
769  .slider-content.desc-gauche h3 {
770    margin: 0 0 .5em;
771    font-size: 1.5em;
772  }
773  .slider-content.desc-gauche p {
774    font-size: 1.1em;
775  }
776}
777@media screen and (max-width: 410px) {
778  .slider-content.desc-gauche {
779    left: 0;
780    width: 100%;
781  }
782}
783
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}
885.grid-item {
886  margin-bottom: 20px;
887}
888/* Affichage des dates. cf https://codepen.io/jpyrat/pen/EmZrpR */
889.date {
890  width: 95px;
891  height: 95px;
892  position: relative;
893  background: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header_bk},#GET{c_header}})];
894  color: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header},#GET{c_header_bk}})];
895}
896
897.debutfin:after {
898  content: "";
899  position: absolute;
900  right: 0;
901  top: 0;
902  border-top: 2px solid #fff;
903  width: 142%;
904  transform: rotate(-45deg);
905  transform-origin: 99% 0%;
906}
907
908.debut, .fin {
909  width: 75%;
910  height: 50%;
911  position: absolute;
912  text-align: left;
913  display: flex;
914  flex-direction: column;
915  justify-content: center;
916  color: #fff;
917  line-height: 1.2em;
918  font-size: 75%;
919}
920
921.agenda .debutfin time.fin {
922  right: 0;
923  top: 50%;
924  text-align: right;
925}
926
927.ladate {
928  margin:0;
929  padding:0;
930}
931
932.annee {
933  font-size: 1.2em;
934  line-height: 0.82em;
935  display: block;
936}
937
938
939/*
940M : [(#GET{masonry}|mult{3}|plus{100})]
941LC: #GET{LargeurContaineur}
942*/
943.gutter-sizer { width: 20px; }
944[(#GET{masonry}|mult{3}|plus{100}|<={#GET{LargeurContaineur}}|oui)
945        .grid-sizer, .grid-item {
946          width: calc(25% - 20px);
947        }
948        .grid-item {
949          height: calc(340px + 65px);
950        }
951        .grid-item-demie {
952          height: calc(127px + 65px);
953          margin-bottom: 0;
954        }
955        .grid-item-x2 {
956          width: calc(50% - 20px);
957        }
958        .grid-item-x3 {
959          width: calc(75% - 20px);
960        }
961        @media only screen and (max-width: #GET{LargeurContaineur}px) {
962          .grid-item {
963                height: calc(340px + 90px);
964          }
965          .grid-item-demie {
966                height: calc(127px + 90px);
967                margin-bottom: 0;
968          }
969        }
970]
971[(#GET{masonry}|mult{3}|plus{100}|<={#GET{LargeurContaineur}}|non)
972        .grid-sizer, .grid-item {
973          width: calc(33.333% - 20px);
974        }
975        .grid-item {
976        height: calc(340px + 90px);
977        }
978        .grid-item-demie {
979        height: calc(127px + 90px);
980        margin-bottom: 0;
981        }
982        .grid-item-x2 {
983        width: calc(66.666% - 20px);
984        }
985        .grid-item-x3 {
986        width: calc(100% - 20px);
987        }
988]
989@media only screen and (max-width:[(#GET{masonry}|mult{3}|plus{100})]px) {
990  .grid-sizer, .grid-item {
991    width: calc(33.333% - 20px);
992  }
993  .grid-item {
994    height: calc(340px + 90px);
995  }
996  .grid-item-demie {
997    height: calc(127px + 90px);
998        margin-bottom: 0;
999  }
1000  .grid-item-x2 {
1001    width: calc(66.666% - 20px);
1002  }
1003  .grid-item-x3 {
1004    width: calc(100% - 20px);
1005  }
1006}
1007@media only screen and (max-width: [(#GET{masonry}|mult{2}|plus{80})]px) {
1008  .grid-sizer, .grid-item {
1009    width: calc(50% - 20px);
1010  }
1011  .grid-item {
1012    height: calc(340px + 90px);
1013  }
1014  .grid-item-demie {
1015    height: calc(127px + 90px);
1016        margin-bottom: 0;
1017  }
1018  .grid-item-x2 {
1019    width: calc(100% - 20px);
1020  }
1021}
1022@media only screen and (max-width: [(#GET{masonry}|mult{1}|plus{60})]px) {
1023  .grid-sizer, .grid-item {
1024    width: calc(100% - 20px);
1025  }
1026  .grid-item {
1027    height: auto;
1028  }
1029}
1030#lesprojets {
1031  margin-top: 5em;
1032  margin-bottom: 4em;
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  width: 50%;
1044  float: left;
1045 }
1046}
1047
1048
1049#projets .projet:hover {
1050  background-color: #aaa;
1051}
1052
1053@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
1054  #projets h2 {
1055    font-size: 36px;
1056    line-height: 38px;
1057  }
1058}
1059@media only screen and (max-width: 768px) {
1060  #projets h2 {
1061    font-size: 30px;
1062    line-height: 34px;
1063  }
1064}
1065@media only screen and (max-width: 640px) {
1066  #projets article {
1067    width: 100%;
1068    float: none;
1069  }
1070  #projets article a {
1071    height: auto;
1072  }
1073  #projets h2 {
1074    padding: 1rem;
1075    font-size: 26px;
1076    line-height: 30px;
1077  }
1078}
1079
1080#pratique {
1081  margin-bottom: 4em;
1082}
1083
1084[(#PLUGIN{lesscss}|oui)
1085        [(#CHEMIN{images/stylesportailcognac_perso.less.html}|?{'/* Surcharge eventuelle */'})
1086       
1087                [(#PRODUIRE{fond=images/stylesportailcognac_perso.less,format=less}
1088                                |supprimer_timestamp
1089                                |appliquer_filtre{less_css}
1090                                |file_get_contents
1091                )
1092                #SET{lessdone,1}
1093                ]
1094        ]
1095]
1096[(#GET{lessdone}|non)
1097[(#CHEMIN{images/stylesportailcognac_perso.css}|?{'/* Surcharge eventuelle */'})
1098[(#INCLURE{#CHEMIN{images/stylesportailcognac_perso.css}|url_absolue_css}|compacte{css})]
1099]
1100]
Note: See TracBrowser for help on using the repository browser.