996 lines
32 KiB
SCSS
996 lines
32 KiB
SCSS
@import 'fonts.scss';
|
|
|
|
$body-margin-x: 30px;
|
|
$body-margin-y: 5px;
|
|
$body-margin-bottom: 4vh;
|
|
|
|
$modale-x-padding: 5vw;
|
|
|
|
$sm-font-size: 0.8rem;
|
|
$m-font-size: 1.4rem;
|
|
$l-font-size: 1.8rem;
|
|
$xl-font-size: 2.4rem;
|
|
|
|
$main-color: #1a1918;
|
|
$main-color-light: #635b58;
|
|
$light-color: #faf1eb;
|
|
$brand-color: #80c8bf;
|
|
|
|
$menu-width: 15vw;
|
|
$menu-margin: 2rem;
|
|
|
|
body{
|
|
font-family: 'Marianne', sans-serif;
|
|
color: $main-color;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-y: scroll;
|
|
&.no-scroll {
|
|
overflow-y: hidden;
|
|
}
|
|
.layout-container {
|
|
> header {
|
|
z-index: 2;
|
|
position: relative;
|
|
> div {
|
|
padding: $body-margin-y $body-margin-x 0 $body-margin-x;
|
|
display: grid;
|
|
grid-template-columns: repeat(16, 1fr);
|
|
> #block-caravane-logorepublique {
|
|
grid-column: 1 / span 1;
|
|
display: flex;
|
|
align-items: center;
|
|
> div > div > a > img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
> #block-caravane-logoepau {
|
|
grid-column: 2 / span 2;
|
|
display: flex;
|
|
align-items: center;
|
|
> div > div > a > img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
> #block-caravane-logocaravane {
|
|
grid-column: 7 / span 4;
|
|
display: flex;
|
|
align-items: center;
|
|
> div > div > a > img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
> #block-caravane-mainnavigation {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
grid-column: 16 / span 1;
|
|
width: 10vw;
|
|
margin-top: 1.8vh;
|
|
position: fixed;
|
|
right: $body-margin-x;
|
|
> #menu-title {
|
|
display: flex;
|
|
z-index: 2;
|
|
background-color: $brand-color;
|
|
position: fixed;
|
|
width: $menu-width;
|
|
right: 0;
|
|
top: 0;
|
|
padding-top: 2.8vh;
|
|
margin-right: $body-margin-x;
|
|
padding-bottom: 10px;
|
|
max-height: 0vh;
|
|
overflow: hidden;
|
|
height: 5vh;
|
|
transition: max-height 0.3s ease-out, opacity 0.2s ease-out;
|
|
opacity: 0;
|
|
align-items: center;
|
|
> p {
|
|
padding-left: $menu-margin;
|
|
margin: 10px 0;
|
|
color: white;
|
|
font-size: $l-font-size;
|
|
font-family: 'Joost', sans-serif;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
> #menu-title.open {
|
|
opacity: 1;
|
|
max-height: 5vh;
|
|
}
|
|
> #menu {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
cursor: pointer;
|
|
> h2 {
|
|
z-index: 2;
|
|
margin-block: 0;
|
|
font-size: $sm-font-size;
|
|
color: $main-color-light;
|
|
font-weight: normal;
|
|
margin-bottom: 5px;
|
|
}
|
|
> h2 {
|
|
display: none;
|
|
}
|
|
> #hamburger {
|
|
position: fixed;
|
|
height: 5vh;
|
|
right: 0;
|
|
top: 0;
|
|
margin-right: $body-margin-x;
|
|
padding-top: 2.8vh;
|
|
padding-bottom: 10px;
|
|
z-index: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 2.4rem;
|
|
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
|
|
> div {
|
|
width: 100%;
|
|
height: 3px;
|
|
margin: 4px 0;
|
|
border-radius: 2px;
|
|
background-color: $main-color-light;
|
|
opacity: 1;
|
|
transition: transform 0.5s, opacity 0.2s;
|
|
}
|
|
}
|
|
> #hamburger:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
> #hamburger.open {
|
|
transform: scale(0.7) translateX(-20px);
|
|
> div {
|
|
background-color: white;
|
|
}
|
|
> div:first-of-type {
|
|
transform: rotate(45deg);
|
|
margin-top: 50%;
|
|
}
|
|
> div:last-of-type {
|
|
transform: rotate(-45deg);
|
|
margin-top: -50%;
|
|
}
|
|
> div:nth-child(2) {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
> #hamburger.open:hover {
|
|
transform: scale(0.75) translateX(-20px);
|
|
}
|
|
> ul {
|
|
list-style-type: none;
|
|
background-color: white;
|
|
position: fixed;
|
|
width: $menu-width;
|
|
right: $body-margin-x;
|
|
padding: 0;
|
|
padding-top: 1.5rem;
|
|
padding-bottom: 1.5rem;
|
|
top: -5vh;
|
|
opacity: 0;
|
|
transition: top 0.3s ease-out, opacity 0.2s ease-out;
|
|
z-index: 1;
|
|
> li {
|
|
padding-left: $menu-margin;
|
|
margin: 15px 0;
|
|
> a {
|
|
color: $main-color;
|
|
text-decoration: none;
|
|
}
|
|
> a.is-active::before,
|
|
> a:hover::before {
|
|
content: '→';
|
|
color: $brand-color;
|
|
width: 2rem;
|
|
display: inline-block;
|
|
opacity: 1;
|
|
}
|
|
> a::before {
|
|
content: '→';
|
|
color: $brand-color;
|
|
opacity: 0;
|
|
display: inline-block;
|
|
width: 0rem;
|
|
transition: width 0.2s ease-out, opacity 0.2s ease-out;
|
|
}
|
|
}
|
|
}
|
|
> ul.open {
|
|
opacity: 1;
|
|
top: 7vh;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> main {
|
|
z-index: 1;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
> .layout-content {
|
|
z-index: 1;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
> div {
|
|
height: 100%;
|
|
> .layout {
|
|
display: grid;
|
|
grid-template-columns: repeat(16,1fr);
|
|
align-items: center;
|
|
height: 100%;
|
|
> .layout__region--first {
|
|
padding-left: $body-margin-x;
|
|
grid-column: 1 / span 4;
|
|
position: relative;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
width: fit-content;
|
|
> div {
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
> .layout__region--second {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
width: 100vw;
|
|
.leaflet-container {
|
|
// add map style here
|
|
.leaflet-control-zoom {
|
|
border: none;
|
|
margin: 0;
|
|
left: $body-margin-x;
|
|
bottom: $body-margin-bottom;
|
|
> a {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: $m-font-size;
|
|
font-family: 'marianne', sans-serif;
|
|
font-weight: lighter;
|
|
width: 4vh;
|
|
height: 4vh;
|
|
}
|
|
> a:first-of-type {
|
|
border-top-left-radius: 2vh;
|
|
border-top-right-radius: 2vh;
|
|
|
|
}
|
|
> a:last-of-type {
|
|
border-bottom-left-radius: 2vh;
|
|
border-bottom-right-radius: 2vh;
|
|
> span {
|
|
padding-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
.leaflet-right {
|
|
right: unset;
|
|
left: 0;
|
|
}
|
|
.leaflet-map-divicon {
|
|
width: 10px;
|
|
height: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
transition: transform 0.3s ease-out;
|
|
> div {
|
|
background-color: red;
|
|
display: block;
|
|
width: 20px;
|
|
height: 10px;
|
|
}
|
|
> div:first-of-type {
|
|
height: 8px;
|
|
clip-path: polygon(0 0, 100% 0, 50% 100%);
|
|
transform: rotate(180deg);
|
|
}
|
|
> div:nth-of-type(3) {
|
|
height: 8px;
|
|
clip-path: polygon(0 0, 100% 0, 50% 100%);
|
|
}
|
|
}
|
|
}
|
|
.leaflet-tooltip-pane {
|
|
width: 20vw;
|
|
pointer-events: none;
|
|
> div {
|
|
padding: 0;
|
|
border-radius: none;
|
|
box-shadow: none;
|
|
opacity: 1 !important;
|
|
border-radius: 0 !important;
|
|
background-color: transparent;
|
|
border: none;
|
|
> div {
|
|
max-height: 15vh;
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-template-columns: minmax(10px, 10vw) 10vw;
|
|
grid-template-rows: 1.5fr 0.5fr;
|
|
transform: translateY(-60%);
|
|
background-color: white;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease-out;
|
|
> div:first-of-type {
|
|
grid-column: 1 / span 1;
|
|
grid-row: 1 / span 1;
|
|
font-family: 'Joost', sans-serif;
|
|
font-size: $m-font-size;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding-top: 10px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
text-wrap: wrap;
|
|
> a {
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
color: $main-color;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
> div:nth-of-type(2) {
|
|
grid-column: 1 / span 1;
|
|
grid-row: 2 / span 1;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
> time {
|
|
font-size: $sm-font-size;
|
|
font-family: 'Marianne', sans-serif;
|
|
font-weight: lighter;
|
|
}
|
|
}
|
|
> div:nth-of-type(3) {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
padding: 0;
|
|
grid-column: 2 / span 1;
|
|
grid-row: 1 / span 2;
|
|
overflow: hidden;
|
|
> a {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
> img {
|
|
padding: 0;
|
|
height: 100%;
|
|
width: auto;
|
|
object-fit: cover;
|
|
margin: 0;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/* .leaflet-tooltip-center {
|
|
width: 20vw;
|
|
padding: 0;
|
|
border-radius: none;
|
|
box-shadow: none;
|
|
opacity: 1 !important;
|
|
border-radius: 0 !important;
|
|
background-color: transparent;
|
|
border: none;
|
|
pointer-events: none;
|
|
> div {
|
|
display: grid;
|
|
grid-template-columns: minmax(10px, 10vw) 10vw;
|
|
grid-template-rows: 1.5fr 0.5fr;
|
|
transform: translateY(-60%);
|
|
background-color: white;
|
|
background-color: red;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease-out;
|
|
> div:first-of-type {
|
|
grid-column: 1 / span 1;
|
|
grid-row: 1 / span 1;
|
|
font-family: 'Joost', sans-serif;
|
|
font-size: $m-font-size;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding-top: 10px;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
text-wrap: wrap;
|
|
> a {
|
|
font-weight: bold;
|
|
text-decoration: none;
|
|
color: $main-color;
|
|
padding-right: 10px;
|
|
}
|
|
}
|
|
> div:nth-of-type(2) {
|
|
grid-column: 1 / span 1;
|
|
grid-row: 2 / span 1;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
> time {
|
|
font-size: $sm-font-size;
|
|
font-family: 'Marianne', sans-serif;
|
|
font-weight: lighter;
|
|
}
|
|
}
|
|
> a {
|
|
display: block;
|
|
grid-column: 2 / span 1;
|
|
grid-row: 1 / span 2;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
> div {
|
|
width: 100%;
|
|
display: block;
|
|
padding: 0;
|
|
background-color: blue;
|
|
max-height: 0;
|
|
> img {
|
|
padding: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
object-fit: cover;
|
|
margin: 0;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}*/
|
|
}
|
|
> .layout__region--third {
|
|
padding-right: $body-margin-x;
|
|
height: 100%;
|
|
grid-column: 13 / span 4;
|
|
position: relative;
|
|
z-index: 2;
|
|
background: linear-gradient(to right, transparent, #faf1eb);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
pointer-events: none;
|
|
> div {
|
|
pointer-events: auto;
|
|
ul {
|
|
list-style: none;
|
|
> li {
|
|
display: flex;
|
|
justify-content: end;
|
|
align-items: center;
|
|
margin: 30px 0;
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
|
|
cursor: pointer;
|
|
> .infos-arret {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
grid-template-rows: auto auto;
|
|
justify-content: end;
|
|
margin-right: 20px;
|
|
p {
|
|
margin: 0;
|
|
}
|
|
> .views-field-title {
|
|
grid-column: 1 / span 1;
|
|
grid-row: 1 / span 1;
|
|
margin-right: 10px;
|
|
a {
|
|
text-decoration: none;
|
|
color: $main-color;
|
|
font-family: 'Joost', sans-serif;
|
|
font-weight: bold;
|
|
font-size: $m-font-size;
|
|
display: inline-block;
|
|
text-align: right;
|
|
}
|
|
}
|
|
> .views-field-field-adresse-postal-code {
|
|
grid-column: 2 / span 1;
|
|
grid-row: 1 / span 1;
|
|
color: $main-color;
|
|
font-family: 'Joost', sans-serif;
|
|
font-weight: lighter;
|
|
font-size: $m-font-size;
|
|
align-self: end;
|
|
> span {
|
|
> p::before {
|
|
content: '(';
|
|
}
|
|
> p::after {
|
|
content: ')';
|
|
}
|
|
}
|
|
|
|
}
|
|
> .views-field-field-dates {
|
|
grid-column: 1 / span 2;
|
|
grid-row: 2 / span 1;
|
|
font-size: $sm-font-size;
|
|
font-family: 'Marianne', sans-serif;
|
|
font-weight: lighter;
|
|
text-align: right;
|
|
margin-top: 7px;
|
|
}
|
|
> .views-field-field-couleur {
|
|
display: none;
|
|
}
|
|
}
|
|
> .icone-arret {
|
|
width: 10px;
|
|
height: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
> div {
|
|
background-color: red;
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> li:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
> li.inactive {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> .user-login-form {
|
|
height: 90vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
> div {
|
|
margin: 20px 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> #content-modale {
|
|
> div:not(.image-viewer-wrapper, .image-modale) {
|
|
padding-bottom: 40vh;
|
|
background-color: red;
|
|
> .content-wrapper {
|
|
left: 25vw;
|
|
width: 50vw;
|
|
top: 15vh;
|
|
z-index: 2;
|
|
position: relative;
|
|
background-color: white;
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
object-fit: cover;
|
|
}
|
|
> div {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
> header {
|
|
// margin-bottom: 3rem;
|
|
> .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;
|
|
> #sensible-map {
|
|
width: calc(100% + $modale-x-padding);
|
|
margin-left: calc(($modale-x-padding / 2) * -1);
|
|
margin-top: calc($modale-x-padding / 2);
|
|
> figure {
|
|
margin: 0;
|
|
.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 {
|
|
width: 100%;
|
|
display: inline-block;
|
|
> .partie-title,
|
|
> .chiffres-cles {
|
|
> h3 {
|
|
position: relative;
|
|
display: inline-block;
|
|
> p {
|
|
display: inline-block;
|
|
font-size: $l-font-size;
|
|
font-family: 'Joost', sans-serif;
|
|
margin: 0;
|
|
z-index: 1;
|
|
position: relative;
|
|
padding: 0 0.5rem;
|
|
}
|
|
> .underline {
|
|
z-index: 0;
|
|
left: 0;
|
|
top: 1.4rem;
|
|
position: absolute;
|
|
width: 100%;
|
|
display: inline-block;
|
|
height: 0.8rem;
|
|
}
|
|
}
|
|
}
|
|
> .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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> .partie-content {
|
|
img {
|
|
margin-top: 2rem;
|
|
cursor: pointer;
|
|
transition: transform 0.3s ease-out;
|
|
&:hover {
|
|
transform: scale(1.01);
|
|
}
|
|
}
|
|
}
|
|
> .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;
|
|
}
|
|
}
|
|
.pattern-bottom {
|
|
width: calc(100% + $modale-x-padding * 2);
|
|
margin-left: -$modale-x-padding;
|
|
height: 180px;
|
|
margin-top: -90px;
|
|
}
|
|
.related-etape-links {
|
|
position: absolute;
|
|
margin-top: -3rem;
|
|
width: calc(100% - $modale-x-padding);
|
|
margin-left: -$modale-x-padding;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> .image-viewer-wrapper {
|
|
backdrop-filter: blur(3px);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 100;
|
|
> .img-modale {
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
> .simple-viewer {
|
|
> .img-wrapper {
|
|
max-width: 60%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
> img {
|
|
width: 100%;
|
|
}
|
|
> figcaption {
|
|
margin: 0;
|
|
background-color: white;
|
|
font-size: $sm-font-size;
|
|
padding: 0.5rem 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
> .swiper-viewer {
|
|
z-index: 1;
|
|
> .swiper-wrapper {
|
|
height: 100%;
|
|
width: 100%;
|
|
swiper-container {
|
|
height: 95%;
|
|
swiper-slide {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
figure {
|
|
margin-top: 3%;
|
|
max-width: 60%;
|
|
height: 80%;
|
|
img {
|
|
height: -webkit-fill-available;
|
|
max-width: 100%;
|
|
margin-bottom: -5px;
|
|
object-fit: cover;
|
|
}
|
|
figcaption {
|
|
margin: 0;
|
|
background-color: white;
|
|
font-size: $sm-font-size;
|
|
padding: 0.5rem 1.5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> .close-button {
|
|
position: fixed;
|
|
top: 2rem;
|
|
right: $body-margin-x;
|
|
background-color: unset;
|
|
border: none;
|
|
display: block;
|
|
height: 3rem;
|
|
width: 3rem;
|
|
border-radius: 1.5rem;
|
|
cursor: pointer;
|
|
background-color: white;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 2;
|
|
> div {
|
|
display: block;
|
|
height: 2px;
|
|
border-radius: 4px;
|
|
width: 60%;
|
|
background-color: $main-color;
|
|
position: absolute;
|
|
transition: transform 0.3s ease;
|
|
&:nth-of-type(1) {
|
|
transform: rotate(45deg) scale(1);
|
|
}
|
|
&:nth-of-type(2) {
|
|
transform: rotate(-45deg) scale(1);
|
|
}
|
|
}
|
|
&:hover {
|
|
> div:nth-of-type(1) {
|
|
transform: rotate(45deg) scale(1.1);
|
|
}
|
|
> div:nth-of-type(2) {
|
|
transform: rotate(-45deg) scale(1.1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |