Changeset 113607 in spip-zone


Ignore:
Timestamp:
Jan 25, 2019, 9:07:29 AM (3 months ago)
Author:
real3t@…
Message:

[Mode Cognac] Amélioration de l'affichage de l'accueil, en particulier en RWD (WIP)

Location:
_squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs
Files:
3 edited

Legend:

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

    r111212 r113607  
    77                <h1 class="hide">#TITRE</h1>
    88        </header>
     9        <div id="liens-diaporama">
     10                <ul>
     11                        <li class="#EDIT{titre}">
     12                                <a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>
     13                                        <span>#TITRE</span>
     14                                        <span class="icon icon-arrow-right2 icon-2x">&#10140;</span>
     15                                </a>
     16                        </li>
     17                        [<li class="hide-for-small-only">(#INCLURE{fond=noisettes/liste_auteurs,id_article,nolink=1})</li>]
     18                        [<li class="hide-for-small-only">(#INCLURE{fond=noisettes/aff_datepublication,id_article,lang})</li>]
     19                </ul>
     20        </div>
    921        <div class="slider-slick">
    1022                <BOUCLE_Slider(DOCUMENTS){id_article}{mode=document}{par rang_lien, num titre, titre}{!par date}{media IN image,video}{vu=non}>
     
    4254                <//B_Slider>
    4355        </div>
    44         <div id="liens-diaporama">
    45                 <ul>
    46                         <li class="#EDIT{titre}">
    47                                 <a href="#ARTICLE_URL"[ title="(#DESCRIPTIF|attribut_html)"]>
    48                                         <span>#TITRE</span>
    49                                         <span class="icon icon-arrow-right2 icon-2x">&#10140;</span>
    50                                 </a>
    51                         </li>
    52                         [<li class="hide-for-small-only">(#INCLURE{fond=noisettes/liste_auteurs,id_article,nolink=1})</li>]
    53                         [<li class="hide-for-small-only">(#INCLURE{fond=noisettes/aff_datepublication,id_article,lang})</li>]
    54                 </ul>
    55         </div>
    5656</div>
    5757<!-- fin SLIDER -->
  • _squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/stylesportailcognac.css.html

    r112743 r113607  
    260260  flex-direction: row;
    261261  align-content: center;
    262   height: [(#CONFIG{soyezcreateurs/variante_blocprojet,par2}|=={par2}|?{20vw,12vw})];
     262  height: [(#CONFIG{soyezcreateurs/variante_blocprojet,par2}|=={par2}|?{20vw,7vw})];
    263263  color: white;
    264264  border: none;
     
    274274  align-self: center;
    275275  color: inherit;
    276   font-size: 3vw;
    277276  font-weight: 300;
    278277  text-align: center;
    279   line-height: 50px;
    280278}
    281279#projets .suite {
     
    291289}
    292290#projets .suite .icon:before {
    293   font-size: 4vw;
     291  font-size: 3rem;
    294292}
    295293@media only screen and (max-width: 1024px) {
     
    503501  top: 100px;
    504502  right: 0;
     503  z-index: 1;
    505504}
    506505@media only screen and (max-width: 1024px) {
     
    512511   #liens-diaporama {
    513512    position: relative;
    514     top: 50px;
     513        z-index: 0;
    515514  }
    516515}
    517516 #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}
     556 #lesprojets {
     557  margin-top: 5em;
     558}
     559 #lesprojets .titre-sommaire {
     560  display: none;
     561}
     562
     563 #pratique {
     564  margin-top: 6.5em;
     565  margin-bottom: 4em;
     566}
     567 .clearfix:after,
     568 .grid:after {
     569  content: '';
     570  display: block;
     571  clear: both;
     572}
     573 .grid-item .h2 .icon:before {
     574  font-size: 30px;
     575}
     576 .grid-item-x2 {
     577  width: calc(50% - 20px) ;
     578}
     579 .grid-item-x3 {
     580  width: calc(75% - 20px) ;
     581}
     582#sommaire_mode_portailcognac header .logo_rubrique { margin-bottom: 3em; }
     583#liens-diaporama {
     584  position: absolute;
     585  top: 100px;
     586  right: 0;
     587}
     588@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
     589  #liens-diaporama {
     590    top: 5vw;
     591  }
     592}
     593@media only screen and (max-width: 767px) {
     594  #liens-diaporama {
     595    position: relative;
     596  }
     597}
     598#liens-diaporama ul {
    518599  width: 220px;
    519600  text-align: right;
     
    525606    flex-wrap: wrap;
    526607  }
    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   }
    610608}
    611609#liens-diaporama li {
     
    622620}
    623621
    624 @media only screen and (max-width: 767px) {
    625   #liens-diaporama li {
    626     flex-grow: 1;
    627   }
    628 }
    629622#liens-diaporama li a {
    630623  display: flex;
     
    651644    background-color: #eae9e5;
    652645    margin-left: .5em;
     646    margin-right: .5em;
    653647  }
    654648}
     
    687681}
    688682#diaporama {
    689         margin-bottom: 9em;
    690683        position: relative;
    691684}
     
    10371030  }
    10381031}
    1039 #lesprojets {
    1040   margin-top: 5em;
    1041   margin-bottom: 4em;
    1042 }
    10431032#projets {
    10441033  margin: 0;
     
    10681057@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
    10691058  #projets h2 {
    1070     font-size: 36px;
    1071     line-height: 38px;
     1059    font-size: 2.5rem;
    10721060  }
    10731061}
    10741062@media only screen and (max-width: 768px) {
    10751063  #projets h2 {
    1076     font-size: 30px;
    1077     line-height: 34px;
     1064    font-size: 2rem;
    10781065  }
    10791066}
     
    10881075  #projets h2 {
    10891076    padding: 1rem;
    1090     font-size: 26px;
    1091     line-height: 30px;
     1077    font-size: 1.8rem;
    10921078  }
    10931079}
  • _squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/stylessoyezcreateurs.css.html

    r113569 r113607  
    209209        color: [(#GET{c_triadea}|couleur_extreme|=={000000}|?{#FFFFFF,#000000})];
    210210}
     211a.triadeA, a.triadeA:visited, a.triadeA:hover, a.triadeA:focus {
     212        color: [(#GET{c_triadea}|couleur_extreme|=={000000}|?{#FFFFFF,#000000})]!important;
     213}
     214
    211215.texte-triadeA {
    212216        color:#GET{c_triadea};
     
    18721876 }
    18731877 #header h1 {
    1874     clear: right; float: inherit;
     1878    clear: right; float: inherit; margin: 0;
    18751879 }
    18761880 
Note: See TracChangeset for help on using the changeset viewer.