Skip to content
Extraits de code Groupes Projets
Valider 149c0413 rédigé par real3t@gmail.com's avatar real3t@gmail.com
Parcourir les fichiers

Les CSS du mode Cognac (reste à reporter pour le mini plan du site sur les autres pages). 

Et l'appel des JS
parent 0c4e645d
Aucune branche associée trouvée
Aucune étiquette associée trouvée
Aucune requête de fusion associée trouvée
Masquer les modifications d'espaces
En ligne Côte à côte
noisettes/sommaire/sommaire_modeportailcognac.html
+ 2
− 2
Voir le fichier @ 149c0413
......@@ -345,8 +345,8 @@
</div><!-- communiquant_content --></main>
[<script src="(#CHEMIN{js/masonry.pkgd.min.js})" type="text/javascript"></script>]
[<script src="(#CHEMIN{js/imagesloaded.pkgd.min.js})" type="text/javascript"></script>]
[<script src="(#CHEMIN{javascript/masonry.pkgd.min.js})" type="text/javascript"></script>]
[<script src="(#CHEMIN{javascript/imagesloaded.pkgd.min.js})" type="text/javascript"></script>]
<script type="text/javascript">
// slider Slick
$(document).ready(function(){
......
stylesportailcognac.css.html
+ 528
− 0
Voir le fichier @ 149c0413
......@@ -17,6 +17,534 @@
div#content { width: 100%; }
.portailcognac {
/* clearfix */
/* ---- grid ---- */
/* ---- grid-item ---- */
}
.portailcognac iframe {
width: 100%!important;
}
.portailcognac img {
display: inline-block;
vertical-align: middle;
max-width: 100%;
height: auto;
-ms-interpolation-mode: bicubic;
}
.portailcognac :focus {
outline: none;
}
.portailcognac select {
cursor: pointer;
}
.portailcognac .spip_logo {
max-width: 100%;
}
.portailcognac .ariaformprop {
padding: 0;
margin: 0;
position: relative;
z-index: 99;
background-color: white;
font-size: 80%;
}
.portailcognac .ajaxbloc {
height: 100%!important;
}
.portailcognac .row {
margin-right: auto;
margin-left: auto;
}
.portailcognac .text-center {
text-align: center!important;
}
.portailcognac .text-right {
text-align: right!important;
}
.portailcognac .text-left {
text-align: left!important;
}
.portailcognac .menu {
margin: 0;
list-style-type: none;
}
.portailcognac .menu > li {
display: table-cell;
vertical-align: middle;
}
.portailcognac .vertical > li {
display: block;
vertical-align: middle;
}
.portailcognac .flexbox-flex {
display: flex;
align-items: baseline;
margin-bottom: .5em;
}
.portailcognac .flexbox-center-center {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.portailcognac .flexbox-center-top {
display: flex!important;
align-items: stretch;
justify-content: center;
flex-wrap: wrap;
}
.portailcognac .flexbox--center {
display: flex;
align-items: center;
}
.portailcognac .flexbox-flex-row-reverse {
display: flex;
flex-direction: row-reverse;
}
.portailcognac .flex-nowrap {
flex-wrap: nowrap;
}
.portailcognac .flexbox-wrap-space-between {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.portailcognac .flexbox-wrap-space-around {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.portailcognac .flexbox-center-space-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.portailcognac .flexbox-start-space-between {
display: flex;
align-items: flex-start;
justify-content: space-between;
}
@media screen and (max-width: 47.9375em) {
.portailcognac .flex-nowrap {
flex-wrap: wrap;
}
}
.portailcognac .flexbox-stretch {
display: flex;
align-items: stretch;
}
@media screen and (max-width: 40em) {
.portailcognac .flexbox-stretch {
display: block;
}
}
.portailcognac .hide {
display: none!important;
}
.portailcognac .sans-border {
border: 0!important;
}
.portailcognac .avec-border {
border: 1px solid #aaa!important;
}
.portailcognac .avec-border-top {
border-top: 1px solid #aaa!important;
}
.portailcognac .avec-border-bottom {
border-bottom: 1px solid #aaa!important;
}
.portailcognac .avec-border-left {
border-left: 1px solid #aaa!important;
}
.portailcognac .sans-margin {
margin: 0!important;
}
.portailcognac .avec-margin {
margin: 1.5em!important;
}
.portailcognac .avec-margin-top {
margin-top: 1.5em!important;
}
.portailcognac .avec-margin-right {
margin-right: 1.5em!important;
}
.portailcognac .avec-margin-bottom {
margin-bottom: 1.5em!important;
}
.portailcognac .avec-margin-bottom05 {
margin-bottom: .5em!important;
}
.portailcognac .avec-margin-bottom015 {
margin-bottom: .15em!important;
}
.portailcognac .avec-margin-left {
margin-left: 1.5em!important;
}
@media screen and (min-width: 40em) {
.portailcognac .avec-margin-bottom-for-medium {
margin-bottom: 1.5em!important;
}
}
.portailcognac .sans-padding {
padding: 0!important;
}
@media screen and (max-width: 40em) {
.portailcognac .sans-padding-for-small {
padding: 0!important;
}
}
.portailcognac .avec-padding {
padding: 1em!important;
}
.portailcognac .avec-padding05 {
padding: .5em!important;
}
.portailcognac .avec-padding-top {
padding-top: 1em!important;
}
.portailcognac .avec-padding-top05 {
padding-top: .5em!important;
}
.portailcognac .avec-padding-top15 {
padding-top: 1.5em!important;
}
.portailcognac .avec-padding-right {
padding-right: 1em!important;
}
.portailcognac .avec-padding-right05 {
padding-right: .5em!important;
}
.portailcognac .avec-padding-bottom {
padding-bottom: 1em!important;
}
.portailcognac .avec-padding-left {
padding-left: 1em!important;
}
.portailcognac .avec-padding-leftright {
display: block;
padding-right: 1em!important;
padding-left: 1em!important;
}
.portailcognac .display-block {
display: block!important;
}
.portailcognac .text-transform-none {
text-transform: none!important;
}
.portailcognac .text-uppercase {
text-transform: uppercase!important;
}
.portailcognac .font-style-italic {
font-style: italic!important;
}
.portailcognac .position-relative {
position: relative!important;
}
.portailcognac .float-left {
float: left !important;
}
.portailcognac .float-right {
float: right !important;
}
.portailcognac .float-center {
display: table;
margin-right: auto !important;
margin-left: auto !important;
}
.portailcognac .z-index-999 {
z-index: 999!important;
}
.portailcognac .cursor-pointer {
cursor: pointer;
}
.portailcognac .slick-slider {
margin-bottom: 4em;
}
.portailcognac .slick-slide img {
margin: 0 auto;
}
.portailcognac .slick-slide .row {
max-width: none!important;
}
.portailcognac .slick-dots {
bottom: -45px;
}
.portailcognac .slick-dots li {
width: 30px;
height: 30px;
}
.portailcognac .slick-dots li button {
width: 30px;
height: 30px;
}
.portailcognac .slick-dots li button::before {
font-size: 20px;
line-height: 30px;
width: 30px;
height: 30px;
}
.portailcognac .slick-dots li.slick-active button::before {
color: black;
}
.portailcognac #content img {
padding: 0;
}
.portailcognac .slider-pratique {
margin: 0 4rem;
}
.portailcognac .slider-pratique .slick-prev,
.portailcognac .slider-pratique .slick-next {
width: 40px;
height: 40px;
}
.portailcognac .slider-pratique .slick-prev {
left: -40px;
}
.portailcognac .slider-pratique .slick-next {
right: -40px;
}
.portailcognac .slider-pratique .slick-prev:before,
.portailcognac .slider-pratique .slick-next:before {
font-size: 40px;
color: #777;
opacity: 1;
}
.portailcognac .slider-pratique .slick-prev:hover:before,
.portailcognac .slider-pratique .slick-prev:focus:before,
.portailcognac .slider-pratique .slick-next:hover:before,
.portailcognac .slider-pratique .slick-next:focus:before {
opacity: 1;
color: #333 !important;
}
.portailcognac .slider-pratique button:hover,
.portailcognac .slider-pratique button:focus {
background-color: transparent!important;
}
.portailcognac .slider-pratique .content-pratique {
background-color: #aaa;
width: 280px;
margin: 0 12px;
-webkit-transition: all .25s ease!important;
transition: all .25s ease!important;
}
.portailcognac .slider-pratique .content-pratique:hover,
.portailcognac .slider-pratique .content-pratique:focus {
-webkit-transition: all .25s ease!important;
transition: all .25s ease!important;
}
.portailcognac .slider-pratique h2 {
display: flex;
height: 50px;
margin: 0!important;
color: white!important;
text-align: right;
}
.portailcognac .slider-pratique h2 .titre-pratique {
width: 100%;
align-self: center;
text-align: center;
}
.portailcognac .slider-pratique h2 .icon {
align-self: center;
padding: 7px 15px 7px 7px;
font-size: 30px;
}
@media only screen and (max-width: 400px) {
.portailcognac .slider-pratique {
margin: 0 2.8rem;
}
.portailcognac .slider-pratique .content-pratique {
width: 240px;
}
.portailcognac .slider-pratique h2 {
height: 130px;
}
}
.portailcognac .clearfix:after,
.portailcognac .grid:after {
content: '';
display: block;
clear: both;
}
.portailcognac #masonry {
max-width: 1200px;
margin: 0 auto;
padding-left: 20px;
text-align: center;
}
.portailcognac .grid {
text-align: center;
}
.portailcognac .grid-item {
background-color: #ccc;
width: calc(25% - 20px);
height: calc(340px + 65px);
}
.portailcognac .grid-item:hover,
.portailcognac .grid-item:focus {
background-color: #eee;
}
.portailcognac .grid-item .content-actus:nth-child(2) {
margin-top: 20px;
border-top: 20px solid white;
}
.portailcognac .grid-item header {
font-size: 18px;
overflow: auto;
}
.portailcognac .grid-item header strong {
font-size: inherit;
}
.portailcognac .grid-item header time {
padding: .75em .5em;
}
.portailcognac .grid-item header img {
max-width: 65%!important;
}
.portailcognac .grid-item h2 {
display: flex;
flex-direction: column;
width: 100%;
height: 50px;
margin: 0!important;
padding: 10px;
text-align: center;
border: none!important;
}
.portailcognac .grid-item h2 .icon {
align-self: center;
padding: 7px;
font-size: 30px;
}
.portailcognac .grid-item h2 .titre-actus {
width: 100%;
padding: 10px;
}
.portailcognac .grid-item img {
max-width: 100%;
}
.portailcognac .grid-item-x2 {
width: calc(50% - 20px);
}
.portailcognac .grid-item-x3 {
width: calc(75% - 20px);
}
.portailcognac .grid-item {
margin-bottom: 20px;
}
@media only screen and (max-width: 1200px) {
.portailcognac .grid-item {
height: calc(26vw + 90px);
}
}
@media only screen and (max-width: 1024px) {
.portailcognac .grid-item {
width: calc(33.333% - 20px);
height: calc(34.5vw + 90px);
}
.portailcognac .grid-item-x2 {
width: calc(66.666% - 20px);
}
.portailcognac .grid-item-x3 {
width: calc(100% - 20px);
}
}
@media only screen and (max-width: 680px) {
.portailcognac .grid-item {
width: calc(50% - 20px);
height: auto;
}
.portailcognac .grid-item-x2 {
width: calc(100% - 20px);
}
}
@media only screen and (max-width: 540px) {
.portailcognac .grid-item {
width: calc(100% - 20px);
}
}
.portailcognac #lesprojets {
margin-top: 5em;
margin-bottom: 4em;
}
.portailcognac #projets {
margin: 0;
padding: 0;
}
.portailcognac #projets article {
background-color: #777;
width: 50%;
float: left;
}
.portailcognac #projets article:hover {
background-color: #aaa!important;
}
.portailcognac #projets a {
display: flex;
flex-direction: column;
height: 10vw;
color: white;
border: 4px solid white;
}
.portailcognac #projets a:hover {
color: #333!important;
}
.portailcognac #projets h2 {
width: 100%;
height: auto;
margin: auto;
padding: 0 10px;
color: inherit;
text-align: center;
border: none;
}
.portailcognac #projets .suite {
background-color: rgba(100, 100, 100, 0.5);
height: auto;
padding: 25px;
}
.portailcognac #projets .suite .icon {
margin: auto;
}
@media only screen and (max-width: 1024px) {
.portailcognac #projets h2 {
font-size: 36px;
line-height: 38px;
}
}
@media only screen and (max-width: 768px) {
.portailcognac #projets h2 {
font-size: 30px;
line-height: 34px;
}
}
@media only screen and (max-width: 640px) {
.portailcognac #projets article {
width: 100%;
float: none;
}
.portailcognac #projets article a {
height: auto;
}
.portailcognac #projets h2 {
padding: 1rem;
font-size: 26px;
line-height: 30px;
}
.portailcognac #projets .suite .icon {
font-size: 25px;
}
}
.portailcognac #pratique {
margin-bottom: 4em;
}
[(#CHEMIN{images/stylesportailcognac_perso.css}|?{'/* Surcharge eventuelle */'})
[(#INCLURE{#CHEMIN{images/stylesportailcognac_perso.css}|url_absolue_css}|compacte{css})]
]
\ No newline at end of file
0% ou .
You are about to add 0 people to the discussion. Proceed with caution.
Terminez d'abord l'édition de ce message.
Veuillez vous inscrire ou vous pour commenter

Forge communautaire SPIP | Charte d'utilisation | Signaler un problème sur ce site