Changeset 103154 in spip-zone


Ignore:
Timestamp:
Mar 5, 2017, 8:11:23 PM (3 years ago)
Author:
real3t@…
Message:

Les CSS du mode Cognac (reste à reporter pour le mini plan du site sur les autres pages).
Et l'appel des JS

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

Legend:

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

    r103144 r103154  
    346346</div><!-- communiquant_content --></main>
    347347
    348 [<script src="(#CHEMIN{js/masonry.pkgd.min.js})" type="text/javascript"></script>]
    349 [<script src="(#CHEMIN{js/imagesloaded.pkgd.min.js})" type="text/javascript"></script>]
     348[<script src="(#CHEMIN{javascript/masonry.pkgd.min.js})" type="text/javascript"></script>]
     349[<script src="(#CHEMIN{javascript/imagesloaded.pkgd.min.js})" type="text/javascript"></script>]
    350350<script type="text/javascript">
    351351        // slider Slick
  • _squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/stylesportailcognac.css.html

    r103146 r103154  
    1818div#content { width: 100%; }
    1919
     20
     21.portailcognac {
     22  /* clearfix */
     23  /* ---- grid ---- */
     24  /* ---- grid-item ---- */
     25}
     26.portailcognac iframe {
     27  width: 100%!important;
     28}
     29.portailcognac img {
     30  display: inline-block;
     31  vertical-align: middle;
     32  max-width: 100%;
     33  height: auto;
     34  -ms-interpolation-mode: bicubic;
     35}
     36.portailcognac :focus {
     37  outline: none;
     38}
     39.portailcognac select {
     40  cursor: pointer;
     41}
     42.portailcognac .spip_logo {
     43  max-width: 100%;
     44}
     45.portailcognac .ariaformprop {
     46  padding: 0;
     47  margin: 0;
     48  position: relative;
     49  z-index: 99;
     50  background-color: white;
     51  font-size: 80%;
     52}
     53.portailcognac .ajaxbloc {
     54  height: 100%!important;
     55}
     56.portailcognac .row {
     57  margin-right: auto;
     58  margin-left: auto;
     59}
     60.portailcognac .text-center {
     61  text-align: center!important;
     62}
     63.portailcognac .text-right {
     64  text-align: right!important;
     65}
     66.portailcognac .text-left {
     67  text-align: left!important;
     68}
     69.portailcognac .menu {
     70  margin: 0;
     71  list-style-type: none;
     72}
     73.portailcognac .menu > li {
     74  display: table-cell;
     75  vertical-align: middle;
     76}
     77.portailcognac .vertical > li {
     78  display: block;
     79  vertical-align: middle;
     80}
     81.portailcognac .flexbox-flex {
     82  display: flex;
     83  align-items: baseline;
     84  margin-bottom: .5em;
     85}
     86.portailcognac .flexbox-center-center {
     87  display: flex;
     88  align-items: center;
     89  justify-content: center;
     90  flex-wrap: wrap;
     91}
     92.portailcognac .flexbox-center-top {
     93  display: flex!important;
     94  align-items: stretch;
     95  justify-content: center;
     96  flex-wrap: wrap;
     97}
     98.portailcognac .flexbox--center {
     99  display: flex;
     100  align-items: center;
     101}
     102.portailcognac .flexbox-flex-row-reverse {
     103  display: flex;
     104  flex-direction: row-reverse;
     105}
     106.portailcognac .flex-nowrap {
     107  flex-wrap: nowrap;
     108}
     109.portailcognac .flexbox-wrap-space-between {
     110  display: flex;
     111  flex-wrap: wrap;
     112  align-content: space-between;
     113}
     114.portailcognac .flexbox-wrap-space-around {
     115  display: flex;
     116  flex-wrap: wrap;
     117  justify-content: space-around;
     118}
     119.portailcognac .flexbox-center-space-between {
     120  display: flex;
     121  align-items: center;
     122  justify-content: space-between;
     123}
     124.portailcognac .flexbox-start-space-between {
     125  display: flex;
     126  align-items: flex-start;
     127  justify-content: space-between;
     128}
     129@media screen and (max-width: 47.9375em) {
     130  .portailcognac .flex-nowrap {
     131    flex-wrap: wrap;
     132  }
     133}
     134.portailcognac .flexbox-stretch {
     135  display: flex;
     136  align-items: stretch;
     137}
     138@media screen and (max-width: 40em) {
     139  .portailcognac .flexbox-stretch {
     140    display: block;
     141  }
     142}
     143.portailcognac .hide {
     144  display: none!important;
     145}
     146.portailcognac .sans-border {
     147  border: 0!important;
     148}
     149.portailcognac .avec-border {
     150  border: 1px solid #aaa!important;
     151}
     152.portailcognac .avec-border-top {
     153  border-top: 1px solid #aaa!important;
     154}
     155.portailcognac .avec-border-bottom {
     156  border-bottom: 1px solid #aaa!important;
     157}
     158.portailcognac .avec-border-left {
     159  border-left: 1px solid #aaa!important;
     160}
     161.portailcognac .sans-margin {
     162  margin: 0!important;
     163}
     164.portailcognac .avec-margin {
     165  margin: 1.5em!important;
     166}
     167.portailcognac .avec-margin-top {
     168  margin-top: 1.5em!important;
     169}
     170.portailcognac .avec-margin-right {
     171  margin-right: 1.5em!important;
     172}
     173.portailcognac .avec-margin-bottom {
     174  margin-bottom: 1.5em!important;
     175}
     176.portailcognac .avec-margin-bottom05 {
     177  margin-bottom: .5em!important;
     178}
     179.portailcognac .avec-margin-bottom015 {
     180  margin-bottom: .15em!important;
     181}
     182.portailcognac .avec-margin-left {
     183  margin-left: 1.5em!important;
     184}
     185@media screen and (min-width: 40em) {
     186  .portailcognac .avec-margin-bottom-for-medium {
     187    margin-bottom: 1.5em!important;
     188  }
     189}
     190.portailcognac .sans-padding {
     191  padding: 0!important;
     192}
     193@media screen and (max-width: 40em) {
     194  .portailcognac .sans-padding-for-small {
     195    padding: 0!important;
     196  }
     197}
     198.portailcognac .avec-padding {
     199  padding: 1em!important;
     200}
     201.portailcognac .avec-padding05 {
     202  padding: .5em!important;
     203}
     204.portailcognac .avec-padding-top {
     205  padding-top: 1em!important;
     206}
     207.portailcognac .avec-padding-top05 {
     208  padding-top: .5em!important;
     209}
     210.portailcognac .avec-padding-top15 {
     211  padding-top: 1.5em!important;
     212}
     213.portailcognac .avec-padding-right {
     214  padding-right: 1em!important;
     215}
     216.portailcognac .avec-padding-right05 {
     217  padding-right: .5em!important;
     218}
     219.portailcognac .avec-padding-bottom {
     220  padding-bottom: 1em!important;
     221}
     222.portailcognac .avec-padding-left {
     223  padding-left: 1em!important;
     224}
     225.portailcognac .avec-padding-leftright {
     226  display: block;
     227  padding-right: 1em!important;
     228  padding-left: 1em!important;
     229}
     230.portailcognac .display-block {
     231  display: block!important;
     232}
     233.portailcognac .text-transform-none {
     234  text-transform: none!important;
     235}
     236.portailcognac .text-uppercase {
     237  text-transform: uppercase!important;
     238}
     239.portailcognac .font-style-italic {
     240  font-style: italic!important;
     241}
     242.portailcognac .position-relative {
     243  position: relative!important;
     244}
     245.portailcognac .float-left {
     246  float: left !important;
     247}
     248.portailcognac .float-right {
     249  float: right !important;
     250}
     251.portailcognac .float-center {
     252  display: table;
     253  margin-right: auto !important;
     254  margin-left: auto !important;
     255}
     256.portailcognac .z-index-999 {
     257  z-index: 999!important;
     258}
     259.portailcognac .cursor-pointer {
     260  cursor: pointer;
     261}
     262.portailcognac .slick-slider {
     263  margin-bottom: 4em;
     264}
     265.portailcognac .slick-slide img {
     266  margin: 0 auto;
     267}
     268.portailcognac .slick-slide .row {
     269  max-width: none!important;
     270}
     271.portailcognac .slick-dots {
     272  bottom: -45px;
     273}
     274.portailcognac .slick-dots li {
     275  width: 30px;
     276  height: 30px;
     277}
     278.portailcognac .slick-dots li button {
     279  width: 30px;
     280  height: 30px;
     281}
     282.portailcognac .slick-dots li button::before {
     283  font-size: 20px;
     284  line-height: 30px;
     285  width: 30px;
     286  height: 30px;
     287}
     288.portailcognac .slick-dots li.slick-active button::before {
     289  color: black;
     290}
     291.portailcognac #content img {
     292  padding: 0;
     293}
     294.portailcognac .slider-pratique {
     295  margin: 0 4rem;
     296}
     297.portailcognac .slider-pratique .slick-prev,
     298.portailcognac .slider-pratique .slick-next {
     299  width: 40px;
     300  height: 40px;
     301}
     302.portailcognac .slider-pratique .slick-prev {
     303  left: -40px;
     304}
     305.portailcognac .slider-pratique .slick-next {
     306  right: -40px;
     307}
     308.portailcognac .slider-pratique .slick-prev:before,
     309.portailcognac .slider-pratique .slick-next:before {
     310  font-size: 40px;
     311  color: #777;
     312  opacity: 1;
     313}
     314.portailcognac .slider-pratique .slick-prev:hover:before,
     315.portailcognac .slider-pratique .slick-prev:focus:before,
     316.portailcognac .slider-pratique .slick-next:hover:before,
     317.portailcognac .slider-pratique .slick-next:focus:before {
     318  opacity: 1;
     319  color: #333 !important;
     320}
     321.portailcognac .slider-pratique button:hover,
     322.portailcognac .slider-pratique button:focus {
     323  background-color: transparent!important;
     324}
     325.portailcognac .slider-pratique .content-pratique {
     326  background-color: #aaa;
     327  width: 280px;
     328  margin: 0 12px;
     329  -webkit-transition: all .25s ease!important;
     330  transition: all .25s ease!important;
     331}
     332.portailcognac .slider-pratique .content-pratique:hover,
     333.portailcognac .slider-pratique .content-pratique:focus {
     334  -webkit-transition: all .25s ease!important;
     335  transition: all .25s ease!important;
     336}
     337.portailcognac .slider-pratique h2 {
     338  display: flex;
     339  height: 50px;
     340  margin: 0!important;
     341  color: white!important;
     342  text-align: right;
     343}
     344.portailcognac .slider-pratique h2 .titre-pratique {
     345  width: 100%;
     346  align-self: center;
     347  text-align: center;
     348}
     349.portailcognac .slider-pratique h2 .icon {
     350  align-self: center;
     351  padding: 7px 15px 7px 7px;
     352  font-size: 30px;
     353}
     354@media only screen and (max-width: 400px) {
     355  .portailcognac .slider-pratique {
     356    margin: 0 2.8rem;
     357  }
     358  .portailcognac .slider-pratique .content-pratique {
     359    width: 240px;
     360  }
     361  .portailcognac .slider-pratique h2 {
     362    height: 130px;
     363  }
     364}
     365.portailcognac .clearfix:after,
     366.portailcognac .grid:after {
     367  content: '';
     368  display: block;
     369  clear: both;
     370}
     371.portailcognac #masonry {
     372  max-width: 1200px;
     373  margin: 0 auto;
     374  padding-left: 20px;
     375  text-align: center;
     376}
     377.portailcognac .grid {
     378  text-align: center;
     379}
     380.portailcognac .grid-item {
     381  background-color: #ccc;
     382  width: calc(25% - 20px);
     383  height: calc(340px + 65px);
     384}
     385.portailcognac .grid-item:hover,
     386.portailcognac .grid-item:focus {
     387  background-color: #eee;
     388}
     389.portailcognac .grid-item .content-actus:nth-child(2) {
     390  margin-top: 20px;
     391  border-top: 20px solid white;
     392}
     393.portailcognac .grid-item header {
     394  font-size: 18px;
     395  overflow: auto;
     396}
     397.portailcognac .grid-item header strong {
     398  font-size: inherit;
     399}
     400.portailcognac .grid-item header time {
     401  padding: .75em .5em;
     402}
     403.portailcognac .grid-item header img {
     404  max-width: 65%!important;
     405}
     406.portailcognac .grid-item h2 {
     407  display: flex;
     408  flex-direction: column;
     409  width: 100%;
     410  height: 50px;
     411  margin: 0!important;
     412  padding: 10px;
     413  text-align: center;
     414  border: none!important;
     415}
     416.portailcognac .grid-item h2 .icon {
     417  align-self: center;
     418  padding: 7px;
     419  font-size: 30px;
     420}
     421.portailcognac .grid-item h2 .titre-actus {
     422  width: 100%;
     423  padding: 10px;
     424}
     425.portailcognac .grid-item img {
     426  max-width: 100%;
     427}
     428.portailcognac .grid-item-x2 {
     429  width: calc(50% - 20px);
     430}
     431.portailcognac .grid-item-x3 {
     432  width: calc(75% - 20px);
     433}
     434.portailcognac .grid-item {
     435  margin-bottom: 20px;
     436}
     437@media only screen and (max-width: 1200px) {
     438  .portailcognac .grid-item {
     439    height: calc(26vw + 90px);
     440  }
     441}
     442@media only screen and (max-width: 1024px) {
     443  .portailcognac .grid-item {
     444    width: calc(33.333% - 20px);
     445    height: calc(34.5vw + 90px);
     446  }
     447  .portailcognac .grid-item-x2 {
     448    width: calc(66.666% - 20px);
     449  }
     450  .portailcognac .grid-item-x3 {
     451    width: calc(100% - 20px);
     452  }
     453}
     454@media only screen and (max-width: 680px) {
     455  .portailcognac .grid-item {
     456    width: calc(50% - 20px);
     457    height: auto;
     458  }
     459  .portailcognac .grid-item-x2 {
     460    width: calc(100% - 20px);
     461  }
     462}
     463@media only screen and (max-width: 540px) {
     464  .portailcognac .grid-item {
     465    width: calc(100% - 20px);
     466  }
     467}
     468.portailcognac #lesprojets {
     469  margin-top: 5em;
     470  margin-bottom: 4em;
     471}
     472.portailcognac #projets {
     473  margin: 0;
     474  padding: 0;
     475}
     476.portailcognac #projets article {
     477  background-color: #777;
     478  width: 50%;
     479  float: left;
     480}
     481.portailcognac #projets article:hover {
     482  background-color: #aaa!important;
     483}
     484.portailcognac #projets a {
     485  display: flex;
     486  flex-direction: column;
     487  height: 10vw;
     488  color: white;
     489  border: 4px solid white;
     490}
     491.portailcognac #projets a:hover {
     492  color: #333!important;
     493}
     494.portailcognac #projets h2 {
     495  width: 100%;
     496  height: auto;
     497  margin: auto;
     498  padding: 0 10px;
     499  color: inherit;
     500  text-align: center;
     501  border: none;
     502}
     503.portailcognac #projets .suite {
     504  background-color: rgba(100, 100, 100, 0.5);
     505  height: auto;
     506  padding: 25px;
     507}
     508.portailcognac #projets .suite .icon {
     509  margin: auto;
     510}
     511@media only screen and (max-width: 1024px) {
     512  .portailcognac #projets h2 {
     513    font-size: 36px;
     514    line-height: 38px;
     515  }
     516}
     517@media only screen and (max-width: 768px) {
     518  .portailcognac #projets h2 {
     519    font-size: 30px;
     520    line-height: 34px;
     521  }
     522}
     523@media only screen and (max-width: 640px) {
     524  .portailcognac #projets article {
     525    width: 100%;
     526    float: none;
     527  }
     528  .portailcognac #projets article a {
     529    height: auto;
     530  }
     531  .portailcognac #projets h2 {
     532    padding: 1rem;
     533    font-size: 26px;
     534    line-height: 30px;
     535  }
     536  .portailcognac #projets .suite .icon {
     537    font-size: 25px;
     538  }
     539}
     540
     541.portailcognac #pratique {
     542  margin-bottom: 4em;
     543}
     544
     545
     546
     547
    20548[(#CHEMIN{images/stylesportailcognac_perso.css}|?{'/* Surcharge eventuelle */'})
    21549[(#INCLURE{#CHEMIN{images/stylesportailcognac_perso.css}|url_absolue_css}|compacte{css})]
Note: See TracChangeset for help on using the changeset viewer.