Changeset 103690 in spip-zone


Ignore:
Timestamp:
Apr 1, 2017, 4:23:05 PM (3 years ago)
Author:
real3t@…
Message:

Mode Cognac : Fin de mise au point du RWD

Beaucoup de calculs pour afficher en 3 ou 4 colonnes au départ selon la largeur de la page configurée dans la configuration de SoyezCréateurs?.

Ça s'adapte automatiquement !

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

Legend:

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

    r103683 r103690  
    5757        <div class="row" id="masonry" role="region" aria-label="Actualités">
    5858                <div class="grid">
     59                        <div class="grid-sizer"></div>
    5960                        <BOUCLE_articles_recentsAlaUne(ARTICLES){lang}{!par #CONFIG{soyezcreateurs/ordre_quoideneuf,date_modif}}{0,(#CONFIG{soyezcreateurs/nombres_alanune,4})}{doublons}{titre_mot=AlaUne}>
    6061                        [(#SET{logo,[(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|sinon{[(#CHEMIN{images/placeholder.jpg}|image_focus{308,340})]})]})]
     
    217218                                Largeur calculée à partir de la largeur de la page, moins 5×20 (les marges),
    218219                                le tout divisé par  4 (le nombre de petits blocs maximum)
    219                 ]
    220                 columnWidth: [(#GET{LargeurContaineur}|moins{100}|div{4})]
     220               
     221                columnWidth: [(#GET{LargeurContaineur}|moins{100}|div{4})],]
     222                columnWidth: '.grid-sizer',
     223                itemSelector: '.grid-item',
     224                percentPosition: true
    221225          });
    222226        });
  • _squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/stylesportailcognac.css.html

    r103641 r103690  
    1818#SET{LargeurMilieu,(#GET{LargeurContaineur}|moins{#GET{LargeurMenuGauche}}|moins{#GET{LargeurMenuDroit}}|div{2})}
    1919
     20#SET{masonry,308}
     21
    2022div#content { width: 100%; }
    2123
    2224
    23 .portailcognac {
     25{
    2426  /* clearfix */
    2527  /* ---- grid ---- */
    2628  /* ---- grid-item ---- */
    2729}
    28 .portailcognac iframe {
     30iframe {
    2931  width: 100%;
    3032}
    31 .portailcognac img {
     33img {
    3234  display: inline-block;
    3335  vertical-align: middle;
     
    3638  -ms-interpolation-mode: bicubic;
    3739}
    38 .portailcognac :focus {
     40:focus {
    3941  outline: none;
    4042}
    41 .portailcognac select {
     43select {
    4244  cursor: pointer;
    4345}
    44 .portailcognac .spip_logo {
     46.spip_logo {
    4547  max-width: 100%;
    4648}
    47 .portailcognac .ariaformprop {
     49.ariaformprop {
    4850  padding: 0;
    4951  margin: 0;
     
    5355  font-size: 80%;
    5456}
    55 .portailcognac .ajaxbloc {
     57.ajaxbloc {
    5658  height: 100%;
    5759}
    58 .portailcognac .row {
     60.row {
    5961  margin-right: auto;
    6062  margin-left: auto;
    6163}
    62 .portailcognac .text-center {
     64.text-center {
    6365  text-align: center;
    6466}
    65 .portailcognac .text-right {
     67.text-right {
    6668  text-align: right;
    6769}
    68 .portailcognac .text-left {
     70.text-left {
    6971  text-align: left;
    7072}
    71 .portailcognac .menu {
     73.menu {
    7274  margin: 0;
    7375  list-style-type: none;
    7476}
    75 .portailcognac .menu > li {
     77.menu > li {
    7678  display: table-cell;
    7779  vertical-align: middle;
    7880}
    79 .portailcognac .vertical > li {
     81.vertical > li {
    8082  display: block;
    8183  vertical-align: middle;
    8284}
    83 .portailcognac .flexbox-flex {
     85.flexbox-flex {
    8486  display: flex;
    8587  align-items: baseline;
    8688  margin-bottom: .5em;
    8789}
    88 .portailcognac .flexbox-center-center {
     90.flexbox-center-center {
    8991  display: flex;
    9092  align-items: center;
     
    9294  flex-wrap: wrap;
    9395}
    94 .portailcognac .flexbox-center-top {
     96.flexbox-center-top {
    9597  display: flex;
    9698  align-items: stretch;
     
    98100  flex-wrap: wrap;
    99101}
    100 .portailcognac .flexbox--center {
     102.flexbox--center {
    101103  display: flex;
    102104  align-items: center;
    103105}
    104 .portailcognac .flexbox-flex-row-reverse {
     106.flexbox-flex-row-reverse {
    105107  display: flex;
    106108  flex-direction: row-reverse;
    107109}
    108 .portailcognac .flex-nowrap {
     110.flex-nowrap {
    109111  flex-wrap: nowrap;
    110112}
    111 .portailcognac .flexbox-wrap-space-between {
     113.flexbox-wrap-space-between {
    112114  display: flex;
    113115  flex-wrap: wrap;
    114116  align-content: space-between;
    115117}
    116 .portailcognac .flexbox-wrap-space-around {
     118.flexbox-wrap-space-around {
    117119  display: flex;
    118120  flex-wrap: wrap;
    119121  justify-content: space-around;
    120122}
    121 .portailcognac .flexbox-center-space-between {
     123.flexbox-center-space-between {
    122124  display: flex;
    123125  align-items: center;
    124126  justify-content: space-between;
    125127}
    126 .portailcognac .flexbox-start-space-between {
     128.flexbox-start-space-between {
    127129  display: flex;
    128130  align-items: flex-start;
     
    130132}
    131133@media screen and (max-width: 47.9375em) {
    132   .portailcognac .flex-nowrap {
     134  .flex-nowrap {
    133135    flex-wrap: wrap;
    134136  }
    135137}
    136 .portailcognac .flexbox-stretch {
     138.flexbox-stretch {
    137139  display: flex;
    138140  align-items: stretch;
    139141}
    140142@media screen and (max-width: 40em) {
    141   .portailcognac .flexbox-stretch {
     143  .flexbox-stretch {
    142144    display: block;
    143145  }
    144146}
    145 .portailcognac .hide {
     147.hide {
    146148  display: none;
    147149}
    148 .portailcognac .sans-border {
     150.sans-border {
    149151  border: 0;
    150152}
    151 .portailcognac .avec-border {
     153.avec-border {
    152154  border: 1px solid #aaa;
    153155}
    154 .portailcognac .avec-border-top {
     156.avec-border-top {
    155157  border-top: 1px solid #aaa;
    156158}
    157 .portailcognac .avec-border-bottom {
     159.avec-border-bottom {
    158160  border-bottom: 1px solid #aaa;
    159161}
    160 .portailcognac .avec-border-left {
     162.avec-border-left {
    161163  border-left: 1px solid #aaa;
    162164}
    163 .portailcognac .sans-margin {
     165.sans-margin {
    164166  margin: 0;
    165167}
    166 .portailcognac .avec-margin {
     168.avec-margin {
    167169  margin: 1.5em;
    168170}
    169 .portailcognac .avec-margin-top {
     171.avec-margin-top {
    170172  margin-top: 1.5em;
    171173}
    172 .portailcognac .avec-margin-right {
     174.avec-margin-right {
    173175  margin-right: 1.5em;
    174176}
    175 .portailcognac .avec-margin-bottom {
     177.avec-margin-bottom {
    176178  margin-bottom: 1.5em;
    177179}
    178 .portailcognac .avec-margin-bottom05 {
     180.avec-margin-bottom05 {
    179181  margin-bottom: .5em;
    180182}
    181 .portailcognac .avec-margin-bottom015 {
     183.avec-margin-bottom015 {
    182184  margin-bottom: .15em;
    183185}
    184 .portailcognac .avec-margin-left {
     186.avec-margin-left {
    185187  margin-left: 1.5em;
    186188}
    187189@media screen and (min-width: 40em) {
    188   .portailcognac .avec-margin-bottom-for-medium {
     190  .avec-margin-bottom-for-medium {
    189191    margin-bottom: 1.5em;
    190192  }
    191193}
    192 .portailcognac .sans-padding {
     194.sans-padding {
    193195  padding: 0;
    194196}
    195197@media screen and (max-width: 40em) {
    196   .portailcognac .sans-padding-for-small {
     198  .sans-padding-for-small {
    197199    padding: 0;
    198200  }
    199201}
    200 .portailcognac .avec-padding {
     202.avec-padding {
    201203  padding: 1em;
    202204}
    203 .portailcognac .avec-padding05 {
     205.avec-padding05 {
    204206  padding: .5em;
    205207}
    206 .portailcognac .avec-padding-top {
     208.avec-padding-top {
    207209  padding-top: 1em;
    208210}
    209 .portailcognac .avec-padding-top05 {
     211.avec-padding-top05 {
    210212  padding-top: .5em;
    211213}
    212 .portailcognac .avec-padding-top15 {
     214.avec-padding-top15 {
    213215  padding-top: 1.5em;
    214216}
    215 .portailcognac .avec-padding-right {
     217.avec-padding-right {
    216218  padding-right: 1em;
    217219}
    218 .portailcognac .avec-padding-right05 {
     220.avec-padding-right05 {
    219221  padding-right: .5em;
    220222}
    221 .portailcognac .avec-padding-bottom {
     223.avec-padding-bottom {
    222224  padding-bottom: 1em;
    223225}
    224 .portailcognac .avec-padding-left {
     226.avec-padding-left {
    225227  padding-left: 1em;
    226228}
    227 .portailcognac .avec-padding-leftright {
     229.avec-padding-leftright {
    228230  display: block;
    229231  padding-right: 1em;
    230232  padding-left: 1em;
    231233}
    232 .portailcognac .display-block {
     234.display-block {
    233235  display: block;
    234236}
    235 .portailcognac .text-transform-none {
     237.text-transform-none {
    236238  text-transform: none;
    237239}
    238 .portailcognac .text-uppercase {
     240.text-uppercase {
    239241  text-transform: uppercase;
    240242}
    241 .portailcognac .font-style-italic {
     243.font-style-italic {
    242244  font-style: italic;
    243245}
    244 .portailcognac .position-relative {
     246.position-relative {
    245247  position: relative;
    246248}
    247 .portailcognac .float-left {
     249.float-left {
    248250  float: left ;
    249251}
    250 .portailcognac .float-right {
     252.float-right {
    251253  float: right ;
    252254}
    253 .portailcognac .float-center {
     255.float-center {
    254256  display: table;
    255257  margin-right: auto ;
    256258  margin-left: auto ;
    257259}
    258 .portailcognac .z-index-999 {
     260.z-index-999 {
    259261  z-index: 999;
    260262}
    261 .portailcognac .cursor-pointer {
     263.cursor-pointer {
    262264  cursor: pointer;
    263265}
    264 .portailcognac .slick-slider {
     266.slick-slider {
    265267  margin-bottom: 4em;
    266268}
    267269
    268 .portailcognac #liens-diaporama {
     270#liens-diaporama {
    269271  position: absolute;
    270272  top: 100px;
     
    272274}
    273275@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
    274   .portailcognac #liens-diaporama {
     276  #liens-diaporama {
    275277    top: 5vw;
    276278  }
    277279}
    278280@media only screen and (max-width: 767px) {
    279   .portailcognac #liens-diaporama {
     281  #liens-diaporama {
    280282    position: relative;
    281283    top: 50px;
    282284  }
    283285}
    284 .portailcognac #liens-diaporama ul {
     286#liens-diaporama ul {
    285287  width: 220px;
    286288  text-align: right;
    287289}
    288290@media only screen and (max-width: 767px) {
    289   .portailcognac #liens-diaporama ul {
     291  #liens-diaporama ul {
    290292    display: flex;
    291293    width: 100%;
     
    293295  }
    294296}
    295 .portailcognac #liens-diaporama li {
     297#liens-diaporama li {
    296298  background-color: rgba(255, 255, 255, 0.75);
    297299  margin-bottom: .5em;
    298300}
    299301@media only screen and (max-width: 767px) {
    300   .portailcognac #liens-diaporama li {
     302  #liens-diaporama li {
    301303    flex-grow: 1;
    302304  }
    303305}
    304 .portailcognac #liens-diaporama li a {
     306#liens-diaporama li a {
    305307  display: flex;
    306308  font-size: 1.2em;
     
    310312  align-items: center;
    311313}
    312 .portailcognac #liens-diaporama li a span {
     314#liens-diaporama li a span {
    313315  padding: .5em .25em .5em .5em;
    314316}
    315317@media only screen and (max-width: 767px) {
    316   .portailcognac #liens-diaporama li a span {
     318  #liens-diaporama li a span {
    317319    padding: .25em .5em;
    318320  }
    319321}
    320 .portailcognac #liens-diaporama li a span.icon {
     322#liens-diaporama li a span.icon {
    321323  margin-left: .25em;
    322324  padding-left: .25em;
     
    326328}
    327329@media only screen and (max-width: 767px) {
    328   .portailcognac #liens-diaporama li a {
     330  #liens-diaporama li a {
    329331    background-color: #eae9e5;
    330332    margin-left: .5em;
     
    332334}
    333335
    334 .portailcognac .slick-slide img {
     336.slick-slide img {
    335337  margin: 0 auto;
    336338}
    337 .portailcognac .slick-slide .row {
     339.slick-slide .row {
    338340  max-width: none;
    339341}
    340 .portailcognac .slick-dots {
     342.slick-dots {
    341343  bottom: -45px;
    342344}
    343 .portailcognac .slick-dots li {
     345.slick-dots li {
    344346  width: 30px;
    345347  height: 30px;
    346348}
    347 .portailcognac .slick-dots li button {
     349.slick-dots li button {
    348350  width: 30px;
    349351  height: 30px;
    350352}
    351 .portailcognac .slick-dots li button::before {
     353.slick-dots li button::before {
    352354  font-size: 20px;
    353355  line-height: 30px;
     
    355357  height: 30px;
    356358}
    357 .portailcognac .slick-dots li.slick-active button::before {
     359.slick-dots li.slick-active button::before {
    358360  color: black;
    359361}
    360 .portailcognac #content img {
     362#content img {
    361363  padding: 0;
    362364}
    363 .portailcognac .slider-pratique {
     365.slider-pratique {
    364366  margin: 0 4rem;
    365367}
    366 .portailcognac .slider-pratique .slick-prev,
    367 .portailcognac .slider-pratique .slick-next {
     368.slider-pratique .slick-prev,
     369.slider-pratique .slick-next {
    368370  width: 40px;
    369371  height: 40px;
    370372}
    371 .portailcognac .slider-pratique .slick-prev {
     373.slider-pratique .slick-prev {
    372374  left: -40px;
    373375}
    374 .portailcognac .slider-pratique .slick-next {
     376.slider-pratique .slick-next {
    375377  right: -40px;
    376378}
    377 .portailcognac .slider-pratique .slick-prev:before,
    378 .portailcognac .slider-pratique .slick-next:before {
     379.slider-pratique .slick-prev:before,
     380.slider-pratique .slick-next:before {
    379381  font-size: 40px;
    380382  color: #777;
    381383  opacity: 1;
    382384}
    383 .portailcognac .slider-pratique .slick-prev:hover:before,
    384 .portailcognac .slider-pratique .slick-prev:focus:before,
    385 .portailcognac .slider-pratique .slick-next:hover:before,
    386 .portailcognac .slider-pratique .slick-next:focus:before {
     385.slider-pratique .slick-prev:hover:before,
     386.slider-pratique .slick-prev:focus:before,
     387.slider-pratique .slick-next:hover:before,
     388.slider-pratique .slick-next:focus:before {
    387389  opacity: 1;
    388390  color: #333 ;
    389391}
    390 .portailcognac .slider-pratique button:hover,
    391 .portailcognac .slider-pratique button:focus {
     392.slider-pratique button:hover,
     393.slider-pratique button:focus {
    392394  background-color: transparent;
    393395}
    394 .portailcognac .slider-pratique .content-pratique {
     396.slider-pratique .content-pratique {
    395397  background-color: #aaa;
    396398  width: 280px;
     
    399401  transition: all .25s ease;
    400402}
    401 .portailcognac .slider-pratique .content-pratique:hover,
    402 .portailcognac .slider-pratique .content-pratique:focus {
     403.slider-pratique .content-pratique:hover,
     404.slider-pratique .content-pratique:focus {
    403405  -webkit-transition: all .25s ease;
    404406  transition: all .25s ease;
    405407}
    406 .portailcognac .slider-pratique .h2 {
     408.slider-pratique .h2 {
    407409  display: flex;
    408410  height: 150px;
     
    415417    margin: 1.5em 0px 0px;
    416418}
    417 .portailcognac .slider-pratique .h2 .titre-pratique {
     419.slider-pratique .h2 .titre-pratique {
    418420  width: 100%;
    419421  align-self: center;
     
    422424    border-right: 1px solid;
    423425}
    424 .portailcognac .slider-pratique .h2 .icon {
     426.slider-pratique .h2 .icon {
    425427  align-self: center;
    426428  padding: 7px 15px 7px 7px;
     
    428430}
    429431@media only screen and (max-width: 400px) {
    430   .portailcognac .slider-pratique {
     432  .slider-pratique {
    431433    margin: 0 2.8rem;
    432434  }
    433   .portailcognac .slider-pratique .content-pratique {
     435  .slider-pratique .content-pratique {
    434436    width: 240px;
    435437  }
    436   .portailcognac .slider-pratique .h2 {
     438  .slider-pratique .h2 {
    437439    height: 130px;
    438440  }
    439441}
    440 .portailcognac .clearfix:after,
    441 .portailcognac .grid:after {
     442.clearfix:after,
     443.grid:after {
    442444  content: '';
    443445  display: block;
    444446  clear: both;
    445447}
    446 .portailcognac #masonry {
     448#masonry {
    447449  max-width: #GET{LargeurContaineur}px;
    448450  margin: 0 auto;
     
    450452  text-align: center;
    451453}
    452 .portailcognac .grid {
     454.grid {
    453455  text-align: center;
    454456}
    455 .portailcognac .grid-item {
     457.grid-item {
    456458  background-color: #ccc;
    457   width: calc(25% - 20px);
    458   height: calc(340px + 65px);
    459 }
    460 .portailcognac .grid-item:hover,
    461 .portailcognac .grid-item:focus {
     459}
     460.grid-item:hover,
     461.grid-item:focus {
    462462  background-color: #eee;
    463463}
    464 .portailcognac .grid-item .content-actus:nth-child(2) {
     464.grid-item .content-actus:nth-child(2) {
    465465  margin-top: 20px;
    466466  border-top: 20px solid white;
    467467}
    468 .portailcognac .grid-item header {
     468.grid-item header {
    469469  font-size: 1.5em;
    470470  overflow: auto;
    471471}
    472 .portailcognac .grid-item header strong {
     472.grid-item header strong {
    473473  font-size: inherit;
    474474}
    475 .portailcognac .grid-item header time {
     475.grid-item header time {
    476476  padding: .75em .5em;
    477477}
    478 .portailcognac .grid-item header img {
     478.grid-item header img {
    479479  max-width: 65%;
    480480}
    481 .portailcognac .grid-item .h2 {
     481.grid-item .h2 {
    482482  display: flex;
    483483  flex-direction: row;
     
    490490  border: none;
    491491}
    492 .portailcognac .grid-item .h2 .icon {
     492.grid-item .h2 .icon {
    493493    align-self: center;
    494494        padding: 7px 0 7px 7px;
    495495    font-size: 30px;
    496496}
    497 .portailcognac .grid-item .h2 .titre-actus {
     497.grid-item .h2 .titre-actus {
    498498    width: 100%;
    499499    align-self: center;
     
    501501    border-right: 1px solid;
    502502}
    503 .portailcognac .grid-item img {
     503.grid-item img {
    504504  max-width: 100%;
    505505}
    506 .portailcognac .grid-item-x2 {
    507   width: calc(50% - 20px);
    508 }
    509 .portailcognac .grid-item-x3 {
    510   width: calc(75% - 20px);
    511 }
    512 .portailcognac .grid-item {
     506.grid-item {
    513507  margin-bottom: 20px;
    514508}
    515 @media only screen and (max-width: #GET{LargeurContaineur}px) {
    516   .portailcognac .grid-item {
    517     height: calc(26vw + 90px);
    518   }
    519 }
    520 @media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
    521   .portailcognac .grid-item {
     509/*
     510M : [(#GET{masonry}|mult{3}|plus{100})]
     511LC: #GET{LargeurContaineur}
     512*/
     513[(#GET{masonry}|mult{3}|plus{100}|<={#GET{LargeurContaineur}}|oui)
     514        .grid-sizer, .grid-item {
     515          width: calc(25% - 20px);
     516        }
     517        .grid-item {
     518          height: calc(340px + 65px);
     519        }
     520        .grid-item-x2 {
     521          width: calc(50% - 20px);
     522        }
     523        .grid-item-x3 {
     524          width: calc(75% - 20px);
     525        }
     526        @media only screen and (max-width: #GET{LargeurContaineur}px) {
     527          .grid-item {
     528                height: calc(340px + 90px);
     529          }
     530        }
     531]
     532[(#GET{masonry}|mult{3}|plus{100}|<={#GET{LargeurContaineur}}|non)
     533        .grid-sizer, .grid-item {
     534          width: calc(33.333% - 20px);
     535        }
     536        .grid-item {
     537        height: calc(340px + 90px);
     538        }
     539        .grid-item-x2 {
     540        width: calc(66.666% - 20px);
     541        }
     542        .grid-item-x3 {
     543        width: calc(100% - 20px);
     544        }
     545]
     546@media only screen and (max-width:[(#GET{masonry}|mult{3}|plus{100})]px) {
     547  .grid-sizer, .grid-item {
    522548    width: calc(33.333% - 20px);
    523     height: calc(34.5vw + 90px);
    524   }
    525   .portailcognac .grid-item-x2 {
     549  }
     550  .grid-item {
     551    height: calc(340px + 90px);
     552  }
     553  .grid-item-x2 {
    526554    width: calc(66.666% - 20px);
    527555  }
    528   .portailcognac .grid-item-x3 {
     556  .grid-item-x3 {
    529557    width: calc(100% - 20px);
    530558  }
    531559}
    532 @media only screen and (max-width: 680px) {
    533   .portailcognac .grid-item {
     560@media only screen and (max-width: [(#GET{masonry}|mult{2}|plus{80})]px) {
     561  .grid-sizer, .grid-item {
    534562    width: calc(50% - 20px);
     563  }
     564  .grid-item {
     565    height: calc(340px + 90px);
     566  }
     567  .grid-item-x2 {
     568    width: calc(100% - 20px);
     569  }
     570}
     571@media only screen and (max-width: [(#GET{masonry}|mult{1}|plus{60})]px) {
     572  .grid-sizer, .grid-item {
     573    width: calc(100% - 20px);
     574  }
     575  .grid-item {
    535576    height: auto;
    536577  }
    537   .portailcognac .grid-item-x2 {
    538     width: calc(100% - 20px);
    539   }
    540 }
    541 @media only screen and (max-width: 540px) {
    542   .portailcognac .grid-item {
    543     width: calc(100% - 20px);
    544   }
    545 }
    546 .portailcognac #lesprojets {
     578}
     579#lesprojets {
    547580  margin-top: 5em;
    548581  margin-bottom: 4em;
    549582}
    550 .portailcognac #projets {
     583#projets {
    551584  margin: 0;
    552585  padding: 0;
    553586}
    554 .portailcognac #projets .projet {
     587#projets .projet {
    555588  background-color: #777;
    556589  width: 50%;
    557590  float: left;
    558591}
    559 .portailcognac #projets .projet:hover {
     592#projets .projet:hover {
    560593  background-color: #aaa;
    561594}
    562 .portailcognac #projets a {
     595#projets a {
    563596    display: flex;
    564597    flex-direction: row;
     
    571604    border-image: initial;
    572605}
    573 .portailcognac #projets a:hover {
     606#projets a:hover {
    574607  color: #333;
    575608}
    576 .portailcognac #projets h2 {
     609#projets h2 {
    577610  width: 100%;
    578611  height: auto;
     
    583616  border: none;
    584617}
    585 .portailcognac #projets h2 {
     618#projets h2 {
    586619    font-size: 2vw;
    587620    line-height: 35px;
     
    602635    padding: 0px 25px;
    603636}
    604 .portailcognac #projets .suite .icon {
     637#projets .suite .icon {
    605638  margin: auto;
    606639  align-self: center;
     
    608641}
    609642@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
    610   .portailcognac #projets h2 {
     643  #projets h2 {
    611644    font-size: 36px;
    612645    line-height: 38px;
     
    614647}
    615648@media only screen and (max-width: 768px) {
    616   .portailcognac #projets h2 {
     649  #projets h2 {
    617650    font-size: 30px;
    618651    line-height: 34px;
     
    620653}
    621654@media only screen and (max-width: 640px) {
    622   .portailcognac #projets article {
     655  #projets article {
    623656    width: 100%;
    624657    float: none;
    625658  }
    626   .portailcognac #projets article a {
     659  #projets article a {
    627660    height: auto;
    628661  }
    629   .portailcognac #projets h2 {
     662  #projets h2 {
    630663    padding: 1rem;
    631664    font-size: 26px;
    632665    line-height: 30px;
    633666  }
    634   .portailcognac #projets .suite .icon {
     667  #projets .suite .icon {
    635668    font-size: 25px;
    636669  }
    637670}
    638671
    639 .portailcognac #pratique {
     672#pratique {
    640673  margin-bottom: 4em;
    641674}
  • _squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/stylessoyezcreateurs.css.html

    r103671 r103690  
    15581558 /* passer tous les éléments de largeur fixe en largeur automatique */
    15591559 body, #container, #shadow, #content {
    1560    width: auto !important;
     1560   width: 100% !important;
    15611561   margin: auto !important;
    15621562   padding: 0 !important;
Note: See TracChangeset for help on using the changeset viewer.