Changeset 115369 in spip-zone for _squelettes_


Ignore:
Timestamp:
May 13, 2019, 8:40:19 PM (6 weeks ago)
Author:
real3t@…
Message:

[SoyezCréateurs?] Une page spip.php?page=antichrono_grid affichant les items sous forme de tuiles comme sur le quoi de neuf du mode Cognac

Location:
_squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs
Files:
2 edited
1 copied

Legend:

Unmodified
Added
Removed
  • _squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/antichrono_grid.html

    r115353 r115369  
    1717<BOUCLE_ExclureRubriquesDuPlan(RUBRIQUES){titre_mot=PasDansPlan}><BOUCLE_ExclureArticlesDuPlan(ARTICLES){id_rubrique}{doublons articlesannees}{doublons articlesmois}{doublons articles}{lang} /><BOUCLE_ExclureBreveDuPlan(BREVES){id_rubrique}{doublons brevesannees}{doublons brevesmois}{doublons breves}{lang} /></BOUCLE_ExclureRubriquesDuPlan>
    1818<BOUCLE_ExclureArticlesDuPlan2(ARTICLES){titre_mot=PasDansPlan}{doublons articlesannees}{doublons articlesmois}{doublons articles}{lang} />
     19[(#SET{logoyear,[(#CHEMIN{images/calendar-year.jpg}|image_focus{308,#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}})]})]
     20[(#SET{logomonth,[(#CHEMIN{images/calendar-month.jpg}|image_focus{308,#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}})]})]
     21
    1922#SET{listeliens,#ARRAY}
    2023<B_Annee>
     
    2831                        <BOUCLE_ArticlesDuMois(ARTICLES){doublons articles}{mois_relatif=0}
    2932                        {!par date}{lang}>
    30                         #SET{listeliens,  #GET{listeliens}|push{#ARRAY{year,(#DATE|annee),month,(#DATE|mois),lemois,(#DATE|nom_mois),date,#DATE,url,#ARTICLE_URL,descriptif,#DESCRIPTIF,titre,#TITRE,class,'',type,''}}}
     33                        [(#SET{logo,[(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|sinon{[(#CHEMIN{images/placeholder.jpg}|image_focus{308,#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}})]})]})]
     34                        #SET{listeliens,  #GET{listeliens}|push{#ARRAY{year,(#DATE|annee),month,(#DATE|mois),lemois,(#DATE|nom_mois),date,#DATE,url,#ARTICLE_URL,descriptif,#DESCRIPTIF,titre,#TITRE,class,'',type,'',logo,#GET{logo}}}}
    3135                        </BOUCLE_ArticlesDuMois>
    3236                </B_ArticlesDuMois>
     
    4751                        <BOUCLE_BrevesDuMois(BREVES){doublons breves}{mois_relatif=0}
    4852                        {!par date}{lang}>
    49                         #SET{listeliens,  #GET{listeliens}|push{#ARRAY{year,(#DATE|annee),month,(#DATE|mois),lemois,(#DATE|nom_mois),date,#DATE,url,#URL_BREVE,descriptif,#DESCRIPTIF,titre,#TITRE,class,iconbreves,type,#GET{breve}}}}
     53                        [(#SET{logo,[(#LOGO_BREVE_SURVOL|sinon{#LOGO_BREVE_NORMAL}|sinon{[(#CHEMIN{images/placeholder.jpg}|image_focus{308,#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}})]})]})]
     54                        #SET{listeliens,  #GET{listeliens}|push{#ARRAY{year,(#DATE|annee),month,(#DATE|mois),lemois,(#DATE|nom_mois),date,#DATE,url,#URL_BREVE,descriptif,#DESCRIPTIF,titre,#TITRE,class,iconbreves,type,#GET{breve},logo,#GET{logo}}}}
    5055                        </BOUCLE_BrevesDuMois>
    5156                </B_BrevesDuMois>
     
    6570                        <BOUCLE_SitesDuMois(SITES){mois_relatif=0}
    6671                        {!par date}>
    67                         #SET{listeliens,  #GET{listeliens}|push{#ARRAY{year,(#DATE|annee),month,(#DATE|mois),lemois,(#DATE|nom_mois),date,#DATE,url,(#ID_SYNDIC|generer_url_entite{'site'}),descriptif,#DESCRIPTIF,titre,#NOM_SITE,class,iconsites,type,#GET{site}}}}
     72                        [(#SET{logo,[(#LOGO_SITE_SURVOL|sinon{#LOGO_SITE_NORMAL}|sinon{[(#CHEMIN{images/placeholder.jpg}|image_focus{308,#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}})]})]})]
     73                        #SET{listeliens,  #GET{listeliens}|push{#ARRAY{year,(#DATE|annee),month,(#DATE|mois),lemois,(#DATE|nom_mois),date,#DATE,url,(#ID_SYNDIC|generer_url_entite{'site'}),descriptif,#DESCRIPTIF,titre,#NOM_SITE,class,iconsites,type,#GET{site},logo,#GET{logo}}}}
    6874                        </BOUCLE_SitesDuMois>
    6975                </B_SitesDuMois>
     
    96102
    97103<B_AnneeObjet>
     104<div class="masonry">
    98105        <BOUCLE_AnneeObjet(DATA)
    99106                {source table,#GET{listeliens}}
     
    102109        >
    103110        <B_ListeMois>
    104         <h2 id="annee_#YEAR">[(#YEAR)]</h2>
     111        <div id="annee_#YEAR" class="grid-item masonry-brick">
     112                <div class="content-actus alaune year">
     113                        [<img src="(#GET{logoyear}|image_focus{308,#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}}|extraire_attribut{src})" alt="" width="308" height="#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}" />]
     114                        <div class="h2"><span class="titre-actus">[(#YEAR)]</span></div>
     115                </div>
     116        </div>
     117
    105118                <BOUCLE_ListeMois(DATA)
    106119                        {liste 12,11,10,9,8,7,6,5,4,3,2,1}
    107120                >
    108121                <B_ObjetsDuMois>
    109                 <h3>[(#YEAR|concat{-,#_ListeMois:VALEUR#VAL,-01}|nom_mois|ucfirst)]</h3>
    110                 <ul class="spip">
     122                <div class="grid-item masonry-brick">
     123                        <div class="content-actus alaune month">
     124                                [<img src="(#GET{logomonth}|image_focus{308,#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}}|extraire_attribut{src})" alt="" width="308" height="#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}" />]
     125                                <div class="h2"><span class="titre-actus">[(#YEAR|concat{-,#_ListeMois:VALEUR#VAL,-01}|nom_mois|ucfirst)]</span></div>
     126                        </div>
     127                </div>
    111128                        <BOUCLE_ObjetsDuMois(DATA)
    112129                                {source table,#GET{listeliens}}
     
    115132                                {!par date}
    116133                        >
    117                         <li[ class="(#CLASS)"]>[<span class="date">(#DATE|affdate)</span>]&nbsp;: <a href="#URL"[ title="(#DESCRIPTIF|attribut_html)"]>[(#TITRE)]</a>[ <span class="secondary-information">((#TYPE))</span>]</li>
     134                        <div class="grid-item masonry-brick[ (#CLASS)]">
     135                                <div class="content-actus alaune <BOUCLE_RubriqueColoreealaune(HIERARCHIE){id_rubrique}{tout}{type_mot=_CouleurRubrique}{inverse} {0,1}><BOUCLE_CouleurRubriquealaune(MOTS){id_rubrique}{type=_CouleurRubrique}{0,1}> couleurrubrique#ID_MOT</BOUCLE_CouleurRubriquealaune></BOUCLE_RubriqueColoreealaune>">
     136                                        <a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|attribut_html)"]>
     137                                                [<img src="(#LOGO|image_focus{308,#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}}|extraire_attribut{src})" alt="" width="308" height="#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}" />]
     138                                                <div class="h2"><span class="titre-actus">#TITRE[ <span class="secondary-information">((#TYPE))</span>]</span>
     139                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
     140                                        </a>
     141                                </div>
     142                        </div>
     143
    118144                        </BOUCLE_ObjetsDuMois>
    119                 </ul>
    120145                </B_ObjetsDuMois>
    121146                </BOUCLE_ListeMois>
    122147        </B_ListeMois>
    123148        </BOUCLE_AnneeObjet>
     149</div>
    124150</B_AnneeObjet>
    125151
  • _squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/stylesportailcognac.css.html

    r114984 r115369  
    4141#SET{LargeurMilieu,(#GET{LargeurContaineur}|moins{#GET{LargeurMenuGauche}}|moins{#GET{LargeurMenuDroit}}|div{2})}
    4242
    43 #SET{masonry,308}
    44 
    4543#miettesdepain, .boutonstexte {display: none; }
    4644
     
    572570  clear: both;
    573571}
    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 }
    583572.VideoALaUne figcaption { display: none; }
    584573.VideoALaUne .spip_documents.spip_documents_center { margin-bottom: 0; }
     
    790779  text-align: center;
    791780}
    792 .grid {
    793   text-align: center;
    794 }
    795 .grid-item {
    796   margin-bottom: 20px;
    797   -webkit-transition: all .25s ease;
    798   transition: all .25s ease;
    799   background-color: #eae9e5;
    800   color: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header_bk},#GET{c_header}})];
    801   float: left;
    802   margin-right: 20px;
    803 }
    804 .grid-item a {
    805   color: inherit;
    806 }
    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 }
     781
    828782.agenda strong {
    829783  font-size: 1.8em;
     
    837791}
    838792.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: inherit;
    848   line-height: 21px;
    849   padding: 10px;
    850   text-align: right;
    851   border: none;
    852 }
    853793.grid-item .agenda .h2 {
    854794  font-size: 18px;
     
    873813}
    874814
    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: [(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px;
    890   background-color: #GET{c_body_bk};
    891 }
    892 .grid-item {
    893   margin-bottom: 20px;
    894 }
    895815/* Affichage des dates. cf https://codepen.io/jpyrat/pen/EmZrpR */
    896816.date {
     
    943863}
    944864
    945 
    946 /*
    947 M : [(#GET{masonry}|mult{4}|moins{100})]
    948 LC: #GET{LargeurContaineur}
    949 */
    950 .gutter-sizer { width: 20px; }
    951 [(#GET{masonry}|mult{4}|moins{100}|<={#GET{LargeurContaineur}}|oui)
    952 /* M <= LC */
    953         .grid-sizer, .grid-item {
    954           width: calc(25% - 20px);
    955         }
    956         .grid-item {
    957           height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 65px);
    958         }
    959         .grid-item-demie {
    960           height: calc(127px + 65px);
    961           margin-bottom: 0;
    962         }
    963         .grid-item-x2 {
    964           width: calc(50% - 20px);
    965         }
    966         .grid-item-x3 {
    967           width: calc(75% - 20px);
    968         }
    969         @media only screen and (max-width: #GET{LargeurContaineur}px) {
    970           .grid-item {
    971                 height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 90px);
    972           }
    973           .grid-item-demie {
    974                 height: calc(127px + 90px);
    975                 margin-bottom: 0;
    976           }
    977         }
    978 ]
    979 [(#GET{masonry}|mult{4}|moins{100}|<={#GET{LargeurContaineur}}|non)
    980 /* M > LC */
    981         .grid-sizer, .grid-item {
    982           width: calc(33.333% - 20px);
    983         }
    984         .grid-item {
    985         height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 90px);
    986         }
    987         .grid-item-demie {
    988         height: calc(127px + 90px);
    989         margin-bottom: 0;
    990         }
    991         .grid-item-x2 {
    992         width: calc(66.666% - 20px);
    993         }
    994         .grid-item-x3 {
    995         width: calc(100% - 20px);
    996         }
    997 ]
    998 @media only screen and (max-width:[(#GET{masonry}|mult{4}|moins{100})]px) {
    999   .grid-sizer, .grid-item {
    1000     width: calc(33.333% - 20px);
    1001   }
    1002   .grid-item {
    1003     height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 90px);
    1004   }
    1005   .grid-item-demie {
    1006     height: calc(127px + 90px);
    1007         margin-bottom: 0;
    1008   }
    1009   .grid-item-x2 {
    1010     width: calc(66.666% - 20px);
    1011   }
    1012   .grid-item-x3 {
    1013     width: calc(100% - 20px);
    1014   }
    1015 }
    1016 @media only screen and (max-width: [(#GET{masonry}|mult{3}|moins{80})]px) {
    1017   .grid-sizer, .grid-item {
    1018     width: calc(50% - 20px);
    1019   }
    1020   .grid-item {
    1021     height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 90px);
    1022   }
    1023   .grid-item-demie {
    1024     height: calc(127px + 90px);
    1025         margin-bottom: 0;
    1026   }
    1027   .grid-item-x2 {
    1028     width: calc(100% - 20px);
    1029   }
    1030 }
    1031 @media only screen and (max-width: [(#GET{masonry}|mult{2}|moins{60})]px) {
    1032   .grid-sizer, .grid-item {
    1033     width: calc(100% - 20px);
    1034   }
    1035   .grid-item {
    1036     height: auto;
    1037   }
    1038 }
    1039865#projets {
    1040866  margin: 0;
     
    1089915  margin-bottom: 4em;
    1090916}
    1091 
    1092 <BOUCLE_CouleursRubriques(MOTS){type=_CouleurRubrique}{par id_mot}>
    1093 .grid-item .couleurrubrique#ID_MOT,
    1094 #projets .couleurrubrique#ID_MOT { [background-color: #(#TEXTE|textebrut);][ color: #(#TEXTE|textebrut|couleur_extreme|couleur_inverser);] }
    1095 .grid-item .couleurrubrique#ID_MOT:hover,
    1096 .grid-item .couleurrubrique#ID_MOT:focus,
    1097 #projets .couleurrubrique#ID_MOT:hover,
    1098 #projets .couleurrubrique#ID_MOT:focus  { [background-color: #(#TEXTE|textebrut|couleur_eclaircir);] }
    1099 </BOUCLE_CouleursRubriques>
    1100 
    1101917
    1102918[(#PLUGIN{lesscss}|oui)
  • _squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/stylessoyezcreateurs.css.html

    r115246 r115369  
    32853285    }
    32863286
     3287.masonry {
     3288  display: flex;
     3289  flex-flow: row wrap;
     3290  margin-left: 0;
     3291  width: calc(100% + 20px);
     3292}
     3293
     3294.masonry-brick {
     3295  flex: auto;
     3296  min-width: calc(25% - 20px);
     3297  margin: 0 20px 20px 0!important; /* Some gutter */
     3298  float: none!important;
     3299  height: auto!important;
     3300}
     3301
     3302/* grid-item */
     3303.grid-item .h2 .icon:before {
     3304  font-size: 30px;
     3305}
     3306.grid-item-x2 {
     3307  width: calc(50% - 20px) ;
     3308}
     3309.grid-item-x3 {
     3310  width: calc(75% - 20px) ;
     3311}
     3312.grid {
     3313  text-align: center;
     3314}
     3315.grid-item {
     3316  margin-bottom: 20px;
     3317  -webkit-transition: all .25s ease;
     3318  transition: all .25s ease;
     3319  background-color: #eae9e5;
     3320  color: [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header_bk},#GET{c_header}})];
     3321  float: left;
     3322  margin-right: 20px;
     3323}
     3324.grid-item a {
     3325  color: inherit;
     3326}
     3327
     3328.grid-item .content-actus:hover,
     3329.grid-item .content-actus:focus {
     3330  /* 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)]) */
     3331  background-color: rgba([(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header_bk},#GET{c_header}}|sc_rgb)], 0.2);
     3332  -webkit-transition: all .25s ease;
     3333  transition: all .25s ease;
     3334}
     3335.grid-item .content-actus {
     3336  /* 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)]) */
     3337  background-color: #[(#GET{c_header_bk}|couleur_extreme|=={ffffff}|?{#GET{c_header_bk},#GET{c_header}}|couleur_foncerluminosite{20})];
     3338}
     3339.grid-item .content-actus:nth-child(2) {
     3340  margin-top: 16px;
     3341}
     3342.grid-item header {
     3343  font-size: 1.5em;
     3344  font-weight: 300;
     3345  line-height: 21px;
     3346  overflow: auto;
     3347}
     3348.grid-item .h2 {
     3349  display: flex;
     3350  flex-direction: row;
     3351  width: 100%;
     3352  height: 95px;
     3353  margin: 0;
     3354  font-size: 21px;
     3355  font-weight: 400;
     3356  color: inherit;
     3357  line-height: 21px;
     3358  padding: 10px;
     3359  text-align: right;
     3360  border: none;
     3361}
     3362.grid-item .h2 .icon {
     3363  font-size: 0;
     3364  align-self: center;
     3365  padding: 7px 0 7px 7px;
     3366}
     3367.grid-item .h2 .titre-actus {
     3368    width: 100%;
     3369    align-self: center;
     3370    padding: 10px 10px 10px 0;
     3371    border-right: 1px solid;
     3372}
     3373#content .grid-item img { padding: 0; }
     3374.grid-item img {
     3375  max-width: 100%;
     3376  width: 100%;
     3377  max-height: [(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px;
     3378  background-color: #GET{c_body_bk};
     3379}
     3380.grid-item {
     3381  margin-bottom: 20px;
     3382}
     3383
     3384#SET{masonry,308}
     3385/*
     3386M : [(#GET{masonry}|mult{4}|moins{100})]
     3387LC: #GET{LargeurContaineur}
     3388*/
     3389.gutter-sizer { width: 20px; }
     3390[(#GET{masonry}|mult{4}|moins{100}|<={#GET{LargeurContaineur}}|oui)
     3391/* M <= LC */
     3392        .grid-sizer, .grid-item {
     3393          width: calc(25% - 20px);
     3394        }
     3395        .grid-item {
     3396          height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 65px);
     3397        }
     3398        .grid-item-demie {
     3399          height: calc(127px + 65px);
     3400          margin-bottom: 0;
     3401        }
     3402        .grid-item-x2 {
     3403          width: calc(50% - 20px);
     3404        }
     3405        .grid-item-x3 {
     3406          width: calc(75% - 20px);
     3407        }
     3408        @media only screen and (max-width: #GET{LargeurContaineur}px) {
     3409          .grid-item {
     3410                height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 90px);
     3411          }
     3412          .grid-item-demie {
     3413                height: calc(127px + 90px);
     3414                margin-bottom: 0;
     3415          }
     3416        }
     3417]
     3418[(#GET{masonry}|mult{4}|moins{100}|<={#GET{LargeurContaineur}}|non)
     3419/* M > LC */
     3420        .grid-sizer, .grid-item {
     3421          width: calc(33.333% - 20px);
     3422        }
     3423        .grid-item {
     3424        height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 90px);
     3425        }
     3426        .grid-item-demie {
     3427        height: calc(127px + 90px);
     3428        margin-bottom: 0;
     3429        }
     3430        .grid-item-x2 {
     3431        width: calc(66.666% - 20px);
     3432        }
     3433        .grid-item-x3 {
     3434        width: calc(100% - 20px);
     3435        }
     3436]
     3437@media only screen and (max-width:[(#GET{masonry}|mult{4}|moins{100})]px) {
     3438  .grid-sizer, .grid-item {
     3439    width: calc(33.333% - 20px);
     3440  }
     3441  .grid-item {
     3442    height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 90px);
     3443  }
     3444  .grid-item-demie {
     3445    height: calc(127px + 90px);
     3446        margin-bottom: 0;
     3447  }
     3448  .grid-item-x2 {
     3449    width: calc(66.666% - 20px);
     3450  }
     3451  .grid-item-x3 {
     3452    width: calc(100% - 20px);
     3453  }
     3454}
     3455@media only screen and (max-width: [(#GET{masonry}|mult{3}|moins{80})]px) {
     3456  .grid-sizer, .grid-item {
     3457    width: calc(50% - 20px);
     3458  }
     3459  .grid-item {
     3460    height: calc([(#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340})]px + 90px);
     3461  }
     3462  .grid-item-demie {
     3463    height: calc(127px + 90px);
     3464        margin-bottom: 0;
     3465  }
     3466  .grid-item-x2 {
     3467    width: calc(100% - 20px);
     3468  }
     3469}
     3470@media only screen and (max-width: [(#GET{masonry}|mult{2}|moins{60})]px) {
     3471  .grid-sizer, .grid-item {
     3472    width: calc(100% - 20px);
     3473  }
     3474  .grid-item {
     3475    height: auto;
     3476  }
     3477}
     3478
     3479<BOUCLE_CouleursRubriques(MOTS){type=_CouleurRubrique}{par id_mot}>
     3480.grid-item .couleurrubrique#ID_MOT,
     3481#projets .couleurrubrique#ID_MOT { [background-color: #(#TEXTE|textebrut);][ color: #(#TEXTE|textebrut|couleur_extreme|couleur_inverser);] }
     3482.grid-item .couleurrubrique#ID_MOT:hover,
     3483.grid-item .couleurrubrique#ID_MOT:focus,
     3484#projets .couleurrubrique#ID_MOT:hover,
     3485#projets .couleurrubrique#ID_MOT:focus  { [background-color: #(#TEXTE|textebrut|couleur_eclaircir);] }
     3486</BOUCLE_CouleursRubriques>
     3487
     3488.grid-item .year { background-color: #GET{c_menuhaut_bk}; color: #GET{c_menuhaut}; }
     3489.grid-item .year .h2 .titre-actus { border: none; font-weight: bold; font-size: 2em; }
     3490.grid-item .month { background-color: #GET{c_menuhaut_bk}; color: #GET{c_menuhaut}; }
     3491.grid-item .month .h2 .titre-actus { border: none; font-weight: bold; font-size: 1.5em; }
     3492
     3493
    32873494[(#PLUGIN{lesscss}|oui)
    32883495        [(#CHEMIN{images/stylessoyezcreateurs_perso.less.html}|?{'/* Surcharge perso Less */'})
Note: See TracChangeset for help on using the changeset viewer.