238 lines
5 KiB
SCSS
Vendored
238 lines
5 KiB
SCSS
Vendored
@use 'sass:color';
|
|
|
|
:root {
|
|
// --container: 100%;
|
|
// --container: calc(100% - 40px);
|
|
--container: 80%;
|
|
// --container-max: 1000px;
|
|
--header-height: 130px;
|
|
--footer-height: 110px;
|
|
}
|
|
html, body {font-size: var(--base-font-size);}
|
|
|
|
body {
|
|
position: relative;
|
|
background-color: $secondary;
|
|
}
|
|
|
|
.mobile-nav-active,
|
|
.popup-choice-active{
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
p, a, li, span, strong, label{
|
|
color: #000;
|
|
font-family: 'Open Sans', sans-serif;
|
|
font-size: 1rem;
|
|
line-height: 1.2rem;
|
|
}
|
|
strong{font-weight: bold;}
|
|
p{ margin: 5px 0;}
|
|
|
|
a{
|
|
text-decoration: none;
|
|
transition: color .5s;
|
|
|
|
&:hover{color: $tertiary;}
|
|
}
|
|
|
|
.text-decoration-underline {
|
|
text-decoration: underline !important;
|
|
}
|
|
|
|
.small {
|
|
font-size: .875rem;
|
|
}
|
|
|
|
.flex {display: flex;}
|
|
.grid {display: grid;}
|
|
|
|
.container {
|
|
padding-right: 10px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.clamp{
|
|
display: flex;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.post-title{
|
|
margin-bottom: 10px;
|
|
color: #000;
|
|
font-family: "Exo_2_Bold", Arial, Helvetica, sans-serif;
|
|
font-size: 1.3rem;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.post-subtitle, .post-chapter, .paragraph-title {
|
|
margin-bottom: 10px;
|
|
color: #000;
|
|
font-family: "Exo_2_Bold", Arial, Helvetica, sans-serif;
|
|
font-size: 1.3rem;
|
|
font-weight: normal;
|
|
}
|
|
section {padding: 30px 10px;}
|
|
|
|
// section ~ section {padding: 30px 10px;}
|
|
// .container section:last-child{padding-bottom: 40px;}
|
|
.header-bloc{height: var(--header-height);}
|
|
|
|
.bandeau {
|
|
&.winter {
|
|
background: linear-gradient(
|
|
rgb(255 255 255 / 30%),
|
|
rgb(255 255 255 / 50%)
|
|
), url("@/images/hiver.jpg"), url("@/images/bg-repeat.jpg");
|
|
background-position-x: right, right;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
&.spring {
|
|
background: linear-gradient(
|
|
rgb(255 255 255 / 30%),
|
|
rgb(255 255 255 / 50%)
|
|
), url("@/images/printemps.jpg"), url("@/images/bg-repeat.jpg");
|
|
background-position-x: right, right;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
&.summer {
|
|
background: linear-gradient(
|
|
rgb(255 255 255 / 30%),
|
|
rgb(255 255 255 / 50%)
|
|
), url("@/images/ete.jpg"), url("@/images/bg-repeat.jpg");
|
|
background-position-x: right, right;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
&.fall {
|
|
background: linear-gradient(
|
|
rgb(255 255 255 / 30%),
|
|
rgb(255 255 255 / 50%)
|
|
), url("@/images/automne.jpg"), url("@/images/bg-repeat.jpg");
|
|
background-position-x: right, right;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.d-none {
|
|
display: none;
|
|
}
|
|
|
|
// // DEBUT INFO BULLE
|
|
// .picto-item {position: relative;}
|
|
// /* on génère un élément :after lors du survol et du focus :*/
|
|
// .picto-item:hover:after,
|
|
// .picto-item:focus:after {
|
|
// content: attr(aria-label); /* on affiche aria-label */
|
|
// position: absolute;
|
|
// left: 50%; bottom: -2.4rem;
|
|
// transform: translateX(-50%); /* on centre horizontalement */
|
|
// z-index: 1; /* pour s'afficher au dessus des éléments en position relative */
|
|
// white-space: nowrap; /* on interdit le retour à la ligne*/
|
|
// padding: 5px 14px;
|
|
// background: #000;
|
|
// color: #fff;
|
|
// border-radius: 4px;
|
|
// font-size: 1rem;
|
|
// }
|
|
// .picto-item.login:hover:after,
|
|
// .picto-item.login:focus:after {
|
|
// content: "Mon compte";
|
|
// }
|
|
// /* on génère un second élément en :before pour la flèche */
|
|
// [aria-label]:hover:before,
|
|
// [aria-label]:focus:before {
|
|
// content: "▼";
|
|
// position: absolute;
|
|
// left: 50%; bottom: -1rem;
|
|
// transform: translateX(-50%) rotate(180deg); /* on centre horizontalement */
|
|
// font-size: 1rem;
|
|
// color: #000;
|
|
// }
|
|
// /* pas de contour durant le :focus */
|
|
// [aria-label]:focus {outline: none;}
|
|
// // FIN INFO BULLE
|
|
|
|
// .bg-popup-detail{
|
|
// position: absolute;
|
|
// left: 0; right: 0;
|
|
// top: 0; bottom: 0;
|
|
// background-color: rgba(#737373, .25);
|
|
// justify-content: center;
|
|
// display: none;
|
|
|
|
// &.active{display: flex;}
|
|
// }
|
|
.bg-opacity{
|
|
position: absolute;
|
|
z-index: 5;
|
|
display: none;
|
|
background-color: rgb(115 115 115 / 25%);
|
|
inset: 0;
|
|
|
|
&.active{display: block;}
|
|
}
|
|
|
|
// ****
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// ****
|
|
@media only screen and (width >= 1024px) {
|
|
:root{
|
|
// --container: 1000px;
|
|
--header-height: 106px;
|
|
}
|
|
section {padding: 30px 40px;}
|
|
// section ~ section {padding: 30px 40px;}
|
|
.bandeau{background-size: cover, contain, cover;}
|
|
|
|
// body{font-size: 1rem;}
|
|
}
|
|
|
|
// ********
|
|
// * ***** *
|
|
// * * * *
|
|
// *** * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * *
|
|
// * **************
|
|
// * *
|
|
// *****************
|
|
@media only screen and (width >= 1440px) {
|
|
// :root{
|
|
// --container: 1400px;
|
|
// }
|
|
|
|
.container {
|
|
padding-right: calc(50% - var(--container) / 2);
|
|
padding-left: calc(50% - var(--container) / 2);
|
|
}
|
|
}
|