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

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

Configuration des couleurs en mode Cognac plus complète et logique.
Couleurs du menu bas cohérentes avec le reste.

File size: 20.9 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.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.slider-pratique .slick-prev:before {
344  content: "\276c";
345}
346.slider-pratique .slick-next {
347  right: -60px;
348}
349.slider-pratique .slick-next:before {
350  content: "\276d";
351}
352.slider-pratique .slick-prev:before,
353.slider-pratique .slick-next:before {
354  margin-left: -20px;
355  font-family: "picto-soyezcreateurs" ;
356  font-size: 50px;
357  opacity: 1;
358  color: #GET{c_triadea};
359}
360.slider-pratique .slick-prev:hover:before,
361.slider-pratique .slick-prev:focus:before,
362.slider-pratique .slick-next:hover:before,
363.slider-pratique .slick-next:focus:before {
364  opacity: 1;
365  color: #333 ;
366}
367.slider-pratique button:hover,
368.slider-pratique button:focus {
369  background-color: transparent;
370}
371.slider-pratique .content-pratique {
372  background-color: #GET{c_triadeb};
373  width: 280px;
374  margin: 0 12px;
375  -webkit-transition: all .25s ease;
376  transition: all .25s ease;
377}
378.slider-pratique .content-pratique:hover,
379.slider-pratique .content-pratique:focus {
380  background-color: rgba(18, 155, 155, 0.2) ;
381  -webkit-transition: all .25s ease;
382  transition: all .25s ease;
383}
384.slider-pratique .content-pratique:hover h2,
385.slider-pratique .content-pratique:focus h2 {
386  color: #129b9b ;
387}
388.slider-pratique .h2 {
389  display: flex;
390  height: 150px;
391  margin: 1.5em 0 0 0;
392  padding-bottom: 90px;
393  font-family: 'Open Sans', sans-serif ;
394  font-size: 26px;
395  color: white;
396  font-weight: 300;
397  text-align: right;
398  border-bottom: none;
399}
400.slider-pratique .h2 .titre-pratique {
401  width: 100%;
402  align-self: center;
403  padding: 10px;
404  text-align: right;
405  border-right: 1px solid;
406}
407.slider-pratique .h2 .icon {
408  align-self: center;
409  padding: 7px 15px 7px 7px;
410  font-size: 0;
411}
412.slider-pratique .h2 .icon:before {
413  font-size: 30px;
414}
415@media only screen and (max-width: 400px) {
416  .slider-pratique {
417    margin: 0 2.8rem;
418  }
419  .slider-pratique .content-pratique {
420    width: 240px;
421  }
422  .slider-pratique .h2 {
423    height: 130px;
424    padding-bottom: 0;
425    font-size: 21px;
426  }
427}
428
429#content .titre-sommaire {
430  margin-top: 4em;
431}
432#content .titre-sommaire:before {
433  content: "";
434  display: block;
435  background-color: #GET{c_titraille};
436  width: 100%;
437  height: 1px;
438}
439#content .titre-sommaire h1 {
440  display: block;
441  background-color: #GET{c_titraille_bk};
442max-width: [(#GET{LargeurContaineur}|moins{44})]px;
443  margin: -1.1em auto 1em auto;
444  padding: .5em .8em .5em;
445  color: #GET{c_titraille};
446  font-size: 2rem;
447  line-height: 1em;
448  border-left: 1px solid #GET{c_titraille};
449}
450@media screen and (max-width: 1178px) {
451   #content .titre-sommaire h1 {
452    border-left: none;
453  }
454}
455 .slick-slider {
456  margin-bottom: 0;
457}
458 .slider-slick img {
459  width: 100%;
460}
461 .slick-slide img {
462  margin: 0 auto;
463}
464 .slick-slide .row {
465  max-width: none;
466}
467 .slick-dots {
468  bottom: -45px;
469}
470 .slick-dots li {
471  width: 30px;
472  height: 30px;
473}
474 .slick-dots li button {
475  width: 30px;
476  height: 30px;
477}
478 .slick-dots li button::before {
479  font-size: 20px;
480  line-height: 30px;
481  width: 30px;
482  height: 30px;
483}
484 .slick-dots li.slick-active button::before {
485  color: #GET{c_triadea};
486}
487 #liens-diaporama {
488  position: absolute;
489  top: 100px;
490  right: 0;
491}
492@media only screen and (max-width: 1024px) {
493   #liens-diaporama {
494    top: 5vw;
495  }
496}
497@media only screen and (max-width: 767px) {
498   #liens-diaporama {
499    position: relative;
500    top: 50px;
501  }
502}
503 #liens-diaporama ul {
504  width: 220px;
505  text-align: right;
506}
507@media only screen and (max-width: 767px) {
508  #liens-diaporama ul {
509    display: flex;
510    width: 100%;
511    flex-wrap: wrap;
512  }
513  #liens-diaporama li {
514    flex-grow: 1;
515  }
516}
517@media only screen and (max-width: 767px) {
518   #liens-diaporama li a span {
519    padding: .25em .5em;
520  }
521}
522 #liens-diaporama li a span.icon {
523  margin-left: .55rem;
524  padding: .85rem .5rem;
525  font-size: 0;
526  border-left: 1px solid #GET{c_titraille};
527}
528 #liens-diaporama li a span.icon:before {
529  font-size: 2.15rem;
530}
531 #liens-diaporama li a:hover {
532  color: #666 ;
533}
534@media only screen and (max-width: 767px) {
535   #liens-diaporama li a {
536    background-color: #eae9e5;
537    margin-left: .5em;
538  }
539}
540 #actualites {
541  margin-top: 7em;
542}
543 #lesprojets {
544  margin-top: 5em;
545}
546 #lesprojets .titre-sommaire {
547  display: none;
548}
549
550 #pratique {
551  margin-top: 6.5em;
552  margin-bottom: 4em;
553}
554 .clearfix:after,
555 .grid:after {
556  content: '';
557  display: block;
558  clear: both;
559}
560 .grid-item .h2 .icon:before {
561  font-size: 30px;
562}
563 .grid-item-x2 {
564  width: calc(50% - 20px) ;
565}
566 .grid-item-x3 {
567  width: calc(75% - 20px) ;
568}
569#liens-diaporama {
570  position: absolute;
571  top: 100px;
572  right: 0;
573}
574@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
575  #liens-diaporama {
576    top: 5vw;
577  }
578}
579@media only screen and (max-width: 767px) {
580  #liens-diaporama {
581    position: relative;
582    top: 50px;
583  }
584}
585#liens-diaporama ul {
586  width: 220px;
587  text-align: right;
588}
589@media only screen and (max-width: 767px) {
590  #liens-diaporama ul {
591    display: flex;
592    width: 100%;
593    flex-wrap: wrap;
594  }
595}
596#liens-diaporama li {
597  /* 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)]) */
598  background-color: rgba([(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header_bk},#GET{c_header}}|sc_rgb)], 0.75);
599  margin-bottom: .5em;
600}
601@media only screen and (max-width: 767px) {
602  #liens-diaporama li {
603    flex-grow: 1;
604  }
605}
606#liens-diaporama li a {
607  display: flex;
608  font-size: 1.2em;
609  color: [(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header},#GET{c_header_bk}})];
610  justify-content: flex-end;
611  line-height: 1 ;
612  align-items: center;
613}
614#liens-diaporama li a span {
615  padding: .5em .25em .5em .5em;
616}
617@media only screen and (max-width: 767px) {
618  #liens-diaporama li a span {
619    padding: .25em .5em;
620  }
621}
622#liens-diaporama li a span.icon {
623  border-left: 1px solid;
624  border-left-color: inherit;
625}
626@media only screen and (max-width: 767px) {
627  #liens-diaporama li a {
628    background-color: #eae9e5;
629    margin-left: .5em;
630  }
631}
632
633.slick-slide img {
634  margin: 0 auto;
635}
636.slick-slide .row {
637  max-width: none;
638}
639.slick-dots {
640  bottom: -45px;
641}
642.slick-dots li {
643  width: 30px;
644  height: 30px;
645}
646.slick-dots li button {
647  width: 30px;
648  height: 30px;
649}
650.slick-dots li button::before {
651  font-size: 20px;
652  line-height: 30px;
653  width: 30px;
654  height: 30px;
655}
656#content img {
657  padding: 0;
658}
659.clearfix:after,
660.grid:after {
661  content: '';
662  display: block;
663  clear: both;
664}
665#diaporama {
666        margin-bottom: 9em;
667}
668#zoomsurtexte {
669  max-width: [(#GET{LargeurContaineur}|moins{44})]px;
670  margin: 0 auto;
671  padding: 1em 2em;
672  color: #GET{c_container};
673  background-color: #GET{c_container_bk};
674  [(#CONFIG{soyezcreateurs_couleurs/transparencecontent,1}|!={1}|oui)background-color: rgba([(#GET{c_container_bk}|sc_rgb)], #CONFIG{soyezcreateurs_couleurs/transparencecontent,1});]
675}
676#content #zoomsur .titre-sommaire h1 {
677        margin-bottom: 0;
678}
679img.zoomsurlogo {
680  max-width: [(#GET{LargeurContaineur})]px;
681  margin: 0 auto;
682  display: block;
683}
684
685#masonry {
686  max-width: #GET{LargeurContaineur}px;
687  margin: 0 auto;
688  padding-left: 20px;
689  text-align: center;
690}
691.grid {
692  text-align: center;
693}
694.grid-item {
695  margin-bottom: 20px;
696  -webkit-transition: all .25s ease;
697  transition: all .25s ease;
698  background-color: #eae9e5;
699}
700.grid-item .content-actus:hover,
701.grid-item .content-actus:focus {
702  /* 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)]) */
703  background-color: rgba([(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header_bk},#GET{c_header}}|sc_rgb)], 0.2);
704  -webkit-transition: all .25s ease;
705  transition: all .25s ease;
706}
707.grid-item .content-actus {
708  /* 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)]) */
709  background-color: #[(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header_bk},#GET{c_header}}|couleur_foncerluminosite{20})];
710}
711.grid-item .content-actus:nth-child(2) {
712  margin-top: 16px;
713}
714.grid-item header {
715  font-size: 1.5em;
716  font-weight: 300;
717  line-height: 21px;
718  overflow: auto;
719}
720.agenda strong {
721  font-size: 1.8em;
722  vertical-align: bottom;
723}
724.agenda .annee {
725  font-size: 1.8em;
726}
727.agenda time {
728  padding: 0 .25em;
729}
730.agenda {height: 95px; }
731.grid-item .h2 {
732  display: flex;
733  flex-direction: row;
734  width: 100%;
735  height: 95px;
736  margin: 0;
737  font-size: 21px;
738  font-weight: 400;
739  color: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header_bk},#GET{c_header}})];
740  line-height: 21px;
741  padding: 10px;
742  text-align: right;
743  border: none;
744}
745.grid-item .agenda .h2 {
746  font-size: 18px;
747}
748.grid-item .agenda .date {
749  padding: 0;
750  flex-shrink: 0;
751  display: flex;
752  align-items: center;
753  justify-content: center;
754}
755.agenda time {
756    text-align: center;
757}
758.agenda .debutfin time {
759    text-align: left;
760}
761.grid-item .agenda .date.debutfin {
762  display: block;
763  align-items: left;
764  justify-content: left;
765}
766
767.grid-item .h2 .icon {
768  font-size: 0;
769  align-self: center;
770  padding: 7px 0 7px 7px;
771}
772.grid-item .h2 .titre-actus {
773    width: 100%;
774    align-self: center;
775    padding: 10px 10px 10px 0;
776    border-right: 1px solid;
777}
778.grid-item img {
779  max-width: 100%;
780}
781.grid-item {
782  margin-bottom: 20px;
783}
784/* Affichage des dates. cf https://codepen.io/jpyrat/pen/EmZrpR */
785.date {
786  width: 95px;
787  height: 95px;
788  position: relative;
789  background: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header_bk},#GET{c_header}})];
790  color: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header},#GET{c_header_bk}})];
791}
792
793.debutfin:after {
794  content: "";
795  position: absolute;
796  right: 0;
797  top: 0;
798  border-top: 2px solid #fff;
799  width: 142%;
800  transform: rotate(-45deg);
801  transform-origin: 99% 0%;
802}
803
804.debut, .fin {
805  width: 75%;
806  height: 50%;
807  position: absolute;
808  text-align: left;
809  display: flex;
810  flex-direction: column;
811  justify-content: center;
812  color: #fff;
813  line-height: 1.2em;
814  font-size: 75%;
815}
816
817.agenda .debutfin time.fin {
818  right: 0;
819  top: 50%;
820  text-align: right;
821}
822
823.ladate {
824  margin:0;
825  padding:0;
826}
827
828.annee {
829  font-size: 1.2em;
830  line-height: 0.82em;
831  display: block;
832}
833
834
835/*
836M : [(#GET{masonry}|mult{3}|plus{100})]
837LC: #GET{LargeurContaineur}
838*/
839.gutter-sizer { width: 20px; }
840[(#GET{masonry}|mult{3}|plus{100}|<={#GET{LargeurContaineur}}|oui)
841        .grid-sizer, .grid-item {
842          width: calc(25% - 20px);
843        }
844        .grid-item {
845          height: calc(340px + 65px);
846        }
847        .grid-item-x2 {
848          width: calc(50% - 20px);
849        }
850        .grid-item-x3 {
851          width: calc(75% - 20px);
852        }
853        @media only screen and (max-width: #GET{LargeurContaineur}px) {
854          .grid-item {
855                height: calc(340px + 90px);
856          }
857        }
858]
859[(#GET{masonry}|mult{3}|plus{100}|<={#GET{LargeurContaineur}}|non)
860        .grid-sizer, .grid-item {
861          width: calc(33.333% - 20px);
862        }
863        .grid-item {
864        height: calc(340px + 90px);
865        }
866        .grid-item-x2 {
867        width: calc(66.666% - 20px);
868        }
869        .grid-item-x3 {
870        width: calc(100% - 20px);
871        }
872]
873@media only screen and (max-width:[(#GET{masonry}|mult{3}|plus{100})]px) {
874  .grid-sizer, .grid-item {
875    width: calc(33.333% - 20px);
876  }
877  .grid-item {
878    height: calc(340px + 90px);
879  }
880  .grid-item-x2 {
881    width: calc(66.666% - 20px);
882  }
883  .grid-item-x3 {
884    width: calc(100% - 20px);
885  }
886}
887@media only screen and (max-width: [(#GET{masonry}|mult{2}|plus{80})]px) {
888  .grid-sizer, .grid-item {
889    width: calc(50% - 20px);
890  }
891  .grid-item {
892    height: calc(340px + 90px);
893  }
894  .grid-item-x2 {
895    width: calc(100% - 20px);
896  }
897}
898@media only screen and (max-width: [(#GET{masonry}|mult{1}|plus{60})]px) {
899  .grid-sizer, .grid-item {
900    width: calc(100% - 20px);
901  }
902  .grid-item {
903    height: auto;
904  }
905}
906#lesprojets {
907  margin-top: 5em;
908  margin-bottom: 4em;
909}
910#projets {
911  margin: 0;
912  padding: 0;
913}
914#projets .projet {
915  background-color: #777;
916}
917@media only screen and (min-width: 641px) {
918 #projets .projet {
919  width: 50%;
920  float: left;
921 }
922}
923
924
925#projets .projet:hover {
926  background-color: #aaa;
927}
928
929@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
930  #projets h2 {
931    font-size: 36px;
932    line-height: 38px;
933  }
934}
935@media only screen and (max-width: 768px) {
936  #projets h2 {
937    font-size: 30px;
938    line-height: 34px;
939  }
940}
941@media only screen and (max-width: 640px) {
942  #projets article {
943    width: 100%;
944    float: none;
945  }
946  #projets article a {
947    height: auto;
948  }
949  #projets h2 {
950    padding: 1rem;
951    font-size: 26px;
952    line-height: 30px;
953  }
954}
955
956#pratique {
957  margin-bottom: 4em;
958}
959
960[(#PLUGIN{lesscss}|oui)
961        [(#CHEMIN{images/stylesportailcognac_perso.less.html}|?{'/* Surcharge eventuelle */'})
962       
963                [(#PRODUIRE{fond=images/stylesportailcognac_perso.less,format=less}
964                                |supprimer_timestamp
965                                |appliquer_filtre{less_css}
966                                |file_get_contents
967                )
968                #SET{lessdone,1}
969                ]
970        ]
971]
972[(#GET{lessdone}|non)
973[(#CHEMIN{images/stylesportailcognac_perso.css}|?{'/* Surcharge eventuelle */'})
974[(#INCLURE{#CHEMIN{images/stylesportailcognac_perso.css}|url_absolue_css}|compacte{css})]
975]
976]
Note: See TracBrowser for help on using the repository browser.