modale responsive
This commit is contained in:
Valentin
@@ -1,6 +1,7 @@
|
||||
@import 'fonts.scss';
|
||||
|
||||
$desktop-min-width: 992px;
|
||||
$tablet-min-width: 467px;
|
||||
|
||||
$body-margin-x: 30px;
|
||||
$body-margin-y: 5px;
|
||||
@@ -9,10 +10,23 @@ $body-margin-bottom: 4vh;
|
||||
$modale-x-padding: 5vw;
|
||||
$modale-bottom-padding: 180px;
|
||||
|
||||
$sm-font-size: 0.8rem;
|
||||
$m-font-size: 1.4rem;
|
||||
$l-font-size: 1.8rem;
|
||||
$xl-font-size: 2.4rem;
|
||||
$modale-width-mobile: 80vw;
|
||||
$modale-width-desktop: 50vw;
|
||||
|
||||
$brand-pattern-height: 110px;
|
||||
|
||||
$sm-font-size-mobile: 0.6rem;
|
||||
$sm-font-size-desktop: 0.8rem;
|
||||
|
||||
$m-font-size-mobile: 1.1rem;
|
||||
$m-font-size-desktop: 1.4rem;
|
||||
|
||||
$l-font-size-mobile: 1.3rem;
|
||||
$l-font-size-desktop: 1.8rem;
|
||||
|
||||
$xl-font-size-mobile: 1.6rem;
|
||||
$xl-font-size-desktop: 2.4rem;
|
||||
|
||||
|
||||
$main-color: #1a1918;
|
||||
$main-color-light: #635b58;
|
||||
@@ -36,7 +50,7 @@ body{
|
||||
.layout-container {
|
||||
> header {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
position: fixed;
|
||||
> div {
|
||||
padding: $body-margin-y $body-margin-x 0 $body-margin-x;
|
||||
display: grid;
|
||||
@@ -112,9 +126,12 @@ body{
|
||||
padding-left: $menu-margin;
|
||||
margin: 10px 0;
|
||||
color: white;
|
||||
font-size: $l-font-size;
|
||||
font-size: $l-font-size-mobile;
|
||||
font-family: 'Joost', sans-serif;
|
||||
font-weight: bold;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $l-font-size-desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
> #menu-title.open {
|
||||
@@ -130,10 +147,13 @@ body{
|
||||
> h2 {
|
||||
z-index: 2;
|
||||
margin-block: 0;
|
||||
font-size: $sm-font-size;
|
||||
font-size: $sm-font-size-mobile;
|
||||
color: $main-color-light;
|
||||
font-weight: normal;
|
||||
margin-bottom: 5px;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $sm-font-size-desktop;
|
||||
}
|
||||
}
|
||||
> h2 {
|
||||
display: none;
|
||||
@@ -199,7 +219,9 @@ body{
|
||||
opacity: 0;
|
||||
transition: top 0.3s ease-out, opacity 0.2s ease-out;
|
||||
z-index: 1;
|
||||
font-size: $m-font-size-mobile;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $m-font-size-desktop;
|
||||
width: $menu-desktop-width;
|
||||
}
|
||||
> li {
|
||||
@@ -244,7 +266,6 @@ body{
|
||||
height: 100vh;
|
||||
> .layout-content {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -268,7 +289,7 @@ body{
|
||||
}
|
||||
}
|
||||
> .layout__region--second {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
@@ -286,11 +307,14 @@ body{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: $m-font-size;
|
||||
font-size: $m-font-size-mobile;
|
||||
font-family: 'marianne', sans-serif;
|
||||
font-weight: lighter;
|
||||
width: 4vh;
|
||||
height: 4vh;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $m-font-size-desktop;
|
||||
}
|
||||
}
|
||||
> a:first-of-type {
|
||||
border-top-left-radius: 2vh;
|
||||
@@ -359,7 +383,7 @@ body{
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
font-family: 'Joost', sans-serif;
|
||||
font-size: $m-font-size;
|
||||
font-size: $m-font-size-mobile;
|
||||
/* display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@@ -369,6 +393,9 @@ body{
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
text-wrap: wrap;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $m-font-size-desktop;
|
||||
}
|
||||
> a {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
@@ -386,9 +413,12 @@ body{
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
> time {
|
||||
font-size: $sm-font-size;
|
||||
font-size: $sm-font-size-mobile;
|
||||
font-family: 'Marianne', sans-serif;
|
||||
font-weight: lighter;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $sm-font-size-desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
> div:nth-of-type(3) {
|
||||
@@ -440,7 +470,7 @@ body{
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 1 / span 1;
|
||||
font-family: 'Joost', sans-serif;
|
||||
font-size: $m-font-size;
|
||||
font-size: $m-font-size-mobile;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@@ -449,6 +479,9 @@ body{
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
text-wrap: wrap;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $m-font-size-desktop;
|
||||
}
|
||||
> a {
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
@@ -462,9 +495,12 @@ body{
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
> time {
|
||||
font-size: $sm-font-size;
|
||||
font-size: $sm-font-size-mobile;
|
||||
font-family: 'Marianne', sans-serif;
|
||||
font-weight: lighter;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $sm-font-size-desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
> a {
|
||||
@@ -496,11 +532,12 @@ body{
|
||||
}*/
|
||||
}
|
||||
> .layout__region--third {
|
||||
padding-right: $body-margin-x;
|
||||
height: 100%;
|
||||
padding-right: $body-margin-x;
|
||||
grid-column: 4 / span 13;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 4;
|
||||
display: flex;
|
||||
background: linear-gradient(to right, #faf1ebaa, #faf1eb);
|
||||
align-items: center;
|
||||
@@ -523,10 +560,14 @@ body{
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-out;
|
||||
display: block;
|
||||
transition: all 0.3s ease-out;
|
||||
&.retracted {
|
||||
opacity: 0;
|
||||
}
|
||||
&.disapeared {
|
||||
display: none;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
> li {
|
||||
@@ -559,9 +600,12 @@ body{
|
||||
color: $main-color;
|
||||
font-family: 'Joost', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: $m-font-size;
|
||||
font-size: $m-font-size-mobile;
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $m-font-size-desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .views-field-field-adresse-postal-code {
|
||||
@@ -570,8 +614,11 @@ body{
|
||||
color: $main-color;
|
||||
font-family: 'Joost', sans-serif;
|
||||
font-weight: lighter;
|
||||
font-size: $m-font-size;
|
||||
font-size: $m-font-size-mobile;
|
||||
align-self: end;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $m-font-size-desktop;
|
||||
}
|
||||
> span {
|
||||
> p::before {
|
||||
content: '(';
|
||||
@@ -585,11 +632,14 @@ body{
|
||||
> .views-field-field-dates {
|
||||
grid-column: 1 / span 2;
|
||||
grid-row: 2 / span 1;
|
||||
font-size: $sm-font-size;
|
||||
font-size: $sm-font-size-mobile;
|
||||
font-family: 'Marianne', sans-serif;
|
||||
font-weight: lighter;
|
||||
text-align: right;
|
||||
margin-top: 7px;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $sm-font-size-desktop;
|
||||
}
|
||||
}
|
||||
> .views-field-field-couleur {
|
||||
display: none;
|
||||
@@ -655,7 +705,10 @@ body{
|
||||
border-radius: 1.3rem;
|
||||
margin: 0;
|
||||
margin-bottom: 0.2rem;
|
||||
font-size: $sm-font-size;
|
||||
font-size: $sm-font-size-mobile;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $sm-font-size-desktop;
|
||||
}
|
||||
}
|
||||
> div {
|
||||
width: 20px;
|
||||
@@ -667,7 +720,436 @@ body{
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> #content-modale {
|
||||
> div:not(.image-viewer-wrapper, .image-modale) {
|
||||
padding-bottom: 5vh;
|
||||
> .content-wrapper {
|
||||
left: calc(100vw - $modale-width-mobile - $modale-x-padding * 3.5);
|
||||
width: calc($modale-width-mobile);
|
||||
top: 15vh;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
//padding-bottom: $modale-bottom-padding;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
width: $modale-width-desktop;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
> div {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
> header {
|
||||
margin-bottom: 2rem;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto auto auto;
|
||||
> .cover {
|
||||
grid-row: 1 / span 1;
|
||||
max-height: 60vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
> .cartouche {
|
||||
grid-row: 4 / span 1;
|
||||
position: relative;
|
||||
padding: 1rem 1.5rem;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
background-color: $brand-color;
|
||||
z-index: 1;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
top: 2rem;
|
||||
position: absolute;
|
||||
}
|
||||
> p {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
> p:last-of-type {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
> .locality-wrapper {
|
||||
position: relative;
|
||||
> .locality {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
> .top-triangle {
|
||||
display: block;
|
||||
width: calc($modale-width-mobile - $modale-x-padding * 3);
|
||||
margin-left: $modale-x-padding * 1.5;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
clip-path: polygon(-1% 100%, 50% 0, 101% 100%);
|
||||
background-color: white;
|
||||
margin-bottom: -1px;
|
||||
@media screen and (min-width: $tablet-min-width) {
|
||||
width: calc($modale-width-mobile - $modale-x-padding * 6);
|
||||
margin-left: $modale-x-padding * 3;
|
||||
|
||||
}
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
width: calc($modale-width-desktop - $modale-x-padding * 4);
|
||||
margin-left: $modale-x-padding * 2;
|
||||
}
|
||||
}
|
||||
> .locality-title {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
width: calc($modale-width-mobile - $modale-x-padding * 3);
|
||||
top: 99px;
|
||||
margin-left: $modale-x-padding * 1.5;
|
||||
min-height: 115px;
|
||||
background-color: white;
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
@media screen and (min-width: $tablet-min-width) {
|
||||
width: calc($modale-width-mobile - $modale-x-padding * 6);
|
||||
margin-left: $modale-x-padding * 3;
|
||||
}
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
width: calc($modale-width-desktop - $modale-x-padding * 4);
|
||||
margin-left: $modale-x-padding * 2;
|
||||
}
|
||||
> h1 {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: block;
|
||||
font-size: $xl-font-size-mobile;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
font-family: 'Joost', sans-serif;
|
||||
text-align: center;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $xl-font-size-desktop;
|
||||
}
|
||||
> em {
|
||||
font-style: normal;
|
||||
font-weight: lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.brand-pattern {
|
||||
grid-row: 3 / span 1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: $brand-pattern-height;
|
||||
> .pattern {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(/themes/custom/caravane/assets/imgs/motif-caravane-invert-tile.png);
|
||||
background-size: 300px;
|
||||
background-size: repeat;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
> main {
|
||||
width: 100%;
|
||||
padding: 0 $modale-x-padding;
|
||||
box-sizing: border-box;
|
||||
> .partie {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
> .sensible-map {
|
||||
margin: 0;
|
||||
width: calc(100% + $modale-x-padding);
|
||||
margin-left: calc(($modale-x-padding / 2) * -1);
|
||||
margin-top: calc($modale-x-padding / 2);
|
||||
.vh--message {
|
||||
font-size: $sm-font-size-mobile;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
bottom: unset;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
color: $main-color-light;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $sm-font-size-desktop;
|
||||
}
|
||||
}
|
||||
> figcaption {
|
||||
margin-left: calc($modale-x-padding / 2);
|
||||
}
|
||||
}
|
||||
> .partie-title,
|
||||
> .chiffres-cles,
|
||||
> .entretien {
|
||||
> h3 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
> p {
|
||||
display: inline;
|
||||
font-size: $l-font-size-mobile;
|
||||
font-family: 'Joost', sans-serif;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
padding: 0 0.5rem;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $l-font-size-desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
.personne {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 2rem 0;
|
||||
width: 100%;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
flex-direction: row;
|
||||
}
|
||||
&:first-of-type {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
> figure {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
border-radius: 3rem;
|
||||
> img {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
> .description {
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
width: calc(100% - 6rem);
|
||||
margin-top: 0;
|
||||
}
|
||||
> p {
|
||||
margin: 0;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.questions-reponses {
|
||||
margin-top: 3rem;
|
||||
> div {
|
||||
> .question {
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
padding-left: 1.8rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0.8rem;
|
||||
left: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .chiffres-cles {
|
||||
> div {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-content: flex-start;
|
||||
margin: 2rem 0;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
> .chiffre {
|
||||
padding-left: 1rem;
|
||||
font-size: $xl-font-size-mobile;
|
||||
font-weight: bold;
|
||||
font-family: 'Joost', sans-serif;
|
||||
margin: 0;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $xl-font-size-desktop;
|
||||
}
|
||||
> p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
> .chiffre-caption {
|
||||
padding-left: 1rem;
|
||||
font-size: $sm-font-size-mobile;
|
||||
margin: 0;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $sm-font-size-desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .diaporama {
|
||||
width: calc(100% + 2 * #{$modale-x-padding});
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 3rem;
|
||||
margin-left: -$modale-x-padding;
|
||||
figure {
|
||||
margin: 0 calc(#{$modale-x-padding} / 2);
|
||||
> img {
|
||||
width: 100%;
|
||||
}
|
||||
> figcaption {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .videos iframe {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
}
|
||||
.caption {
|
||||
font-size: $sm-font-size-mobile;
|
||||
color: $main-color-light;
|
||||
margin-top: 0.2rem;
|
||||
margin-bottom: 1.8rem;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $sm-font-size-desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
> footer {
|
||||
.pattern-bottom {
|
||||
mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
|
||||
height: $modale-bottom-padding;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.related-etape-links {
|
||||
position: absolute;
|
||||
//bottom: calc(($modale-bottom-padding / 2) * -1);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 calc($modale-x-padding / 2);
|
||||
display: grid;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
> .card {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease-out;
|
||||
justify-self: center;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
&.previous {
|
||||
grid-column: 1 / span 1;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
justify-self: flex-start;
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
&.next {
|
||||
//margin-top: 2rem;
|
||||
grid-column: 1 / span 2;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
grid-column: 2 / span 1;
|
||||
margin-top: 0;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
> .icon {
|
||||
z-index: 2;
|
||||
width: 10px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
> div {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
&:first-of-type, &:last-of-type {
|
||||
height: 8px;
|
||||
clip-path: polygon(0 0, 100% 0, 50% 100%);
|
||||
}
|
||||
&:first-of-type {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
> .card-content {
|
||||
z-index: 1;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
> .infos {
|
||||
width: 60%;
|
||||
text-align: center;
|
||||
> .titre {
|
||||
padding: 1rem 0.5rem;
|
||||
font-weight: bold;
|
||||
font-family: 'Joost', sans-serif;
|
||||
font-size: $m-font-size-mobile;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $m-font-size-desktop;
|
||||
}
|
||||
> span {
|
||||
font-weight: lighter;
|
||||
}
|
||||
}
|
||||
> .date {
|
||||
font-size: $sm-font-size-mobile;
|
||||
font-family: 'Marianne', sans-serif;
|
||||
font-weight: lighter;
|
||||
padding-bottom: 1rem;
|
||||
@media screen and (min-width: $desktop-min-width) {
|
||||
font-size: $sm-font-size-desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .vignette {
|
||||
width: 40%;
|
||||
position: relative;
|
||||
> img {
|
||||
top: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .user-login-form {
|
||||
height: 90vh;
|
||||
@@ -681,288 +1163,6 @@ body{
|
||||
}
|
||||
}
|
||||
}
|
||||
> #content-modale {
|
||||
> div:not(.image-viewer-wrapper, .image-modale) {
|
||||
padding-bottom: 40vh;
|
||||
> .content-wrapper {
|
||||
left: 25vw;
|
||||
width: 50vw;
|
||||
top: 15vh;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
background-color: white;
|
||||
padding-bottom: $modale-bottom-padding;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
> div {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
> header {
|
||||
margin-bottom: 2rem;
|
||||
> .cover {
|
||||
max-height: 60vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
}
|
||||
> .cartouche {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
padding: 1rem 1.5rem;
|
||||
background-color: $brand-color;
|
||||
z-index: 1;
|
||||
> p {
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
> p:last-of-type {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
> .locality {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 50%;
|
||||
margin-left: 25%;
|
||||
margin-top: -245px;
|
||||
> .top-triangle {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
clip-path: polygon(-1% 100%, 50% 0, 101% 100%);
|
||||
background-color: white;
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
> .locality-title {
|
||||
min-height: 115px;
|
||||
display: block;
|
||||
background-color: white;
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> h1 {
|
||||
width: 100%;
|
||||
font-size: $xl-font-size;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
font-family: 'Joost', sans-serif;
|
||||
text-align: center;
|
||||
> em {
|
||||
font-style: normal;
|
||||
font-weight: lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> main {
|
||||
width: 100%;
|
||||
padding: 0 $modale-x-padding;
|
||||
box-sizing: border-box;
|
||||
> .partie {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
> .sensible-map {
|
||||
margin: 0;
|
||||
width: calc(100% + $modale-x-padding);
|
||||
margin-left: calc(($modale-x-padding / 2) * -1);
|
||||
margin-top: calc($modale-x-padding / 2);
|
||||
.vh--message {
|
||||
font-size: $sm-font-size;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
bottom: unset;
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
color: $main-color-light;
|
||||
}
|
||||
> figcaption {
|
||||
margin-left: calc($modale-x-padding / 2);
|
||||
}
|
||||
}
|
||||
> .partie-title,
|
||||
> .chiffres-cles,
|
||||
> .entretien {
|
||||
> h3 {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
> p {
|
||||
display: inline;
|
||||
font-size: $l-font-size;
|
||||
font-family: 'Joost', sans-serif;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .chiffres-cles {
|
||||
> div {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
align-content: flex-start;
|
||||
margin: 2rem 0;
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
> .chiffre {
|
||||
padding-left: 1rem;
|
||||
font-size: $xl-font-size;
|
||||
font-weight: bold;
|
||||
font-family: 'Joost', sans-serif;
|
||||
margin: 0;
|
||||
> p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
> .chiffre-caption {
|
||||
padding-left: 1rem;
|
||||
font-size: $sm-font-size;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> .diaporama {
|
||||
width: calc(100% + 2 * #{$modale-x-padding});
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 3rem;
|
||||
margin-left: -$modale-x-padding;
|
||||
figure {
|
||||
margin: 0 calc(#{$modale-x-padding} / 2);
|
||||
> img {
|
||||
width: 100%;
|
||||
}
|
||||
> figcaption {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .videos iframe {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
}
|
||||
.caption {
|
||||
font-size: $sm-font-size;
|
||||
color: $main-color-light;
|
||||
margin-top: 0.2rem;
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
}
|
||||
.brand-pattern {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
> .pattern {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(/themes/custom/caravane/assets/imgs/motif-caravane-invert-tile.png);
|
||||
background-size: 300px;
|
||||
background-size: repeat;
|
||||
}
|
||||
}
|
||||
> footer {
|
||||
.pattern-bottom {
|
||||
mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
|
||||
height: $modale-bottom-padding;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
.related-etape-links {
|
||||
position: absolute;
|
||||
bottom: calc(($modale-bottom-padding / 2) * -1);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 calc($modale-x-padding / 2);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
> .card {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease-out;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
&.next {
|
||||
grid-column: 2 / span 1;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
> .icon {
|
||||
z-index: 2;
|
||||
width: 10px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
> div {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 10px;
|
||||
&:first-of-type, &:last-of-type {
|
||||
height: 8px;
|
||||
clip-path: polygon(0 0, 100% 0, 50% 100%);
|
||||
}
|
||||
&:first-of-type {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
> .card-content {
|
||||
z-index: 1;
|
||||
background-color: white;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
> .infos {
|
||||
width: 60%;
|
||||
text-align: center;
|
||||
> .titre {
|
||||
padding: 1rem 0.5rem;
|
||||
font-weight: bold;
|
||||
font-family: 'Joost', sans-serif;
|
||||
font-size: $m-font-size;
|
||||
> span {
|
||||
font-weight: lighter;
|
||||
}
|
||||
}
|
||||
> .date {
|
||||
font-size: $sm-font-size;
|
||||
font-family: 'Marianne', sans-serif;
|
||||
font-weight: lighter;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
> .vignette {
|
||||
width: 40%;
|
||||
position: relative;
|
||||
> img {
|
||||
top: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user