bachir/drupal-caravane
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajout partenaires et équipe

Browse Source
This commit is contained in:
Valentin
2024-11-15 13:33:36 +01:00
parent 9370996c03
commit 77817ab74c
8 changed files with 386 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
web/themes/custom/caravane/assets/scss/main.scss
View File

@@ -129,7 +129,7 @@ body{
padding-left: $menu-margin;
margin: 10px 0;
color: white;
font-size: $l-font-size-mobile;
font-size: 2rem;
font-family: 'Joost', sans-serif;
font-weight: bold;
@media screen and (min-width: $desktop-min-width) {
@@ -229,7 +229,6 @@ body{
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 {
@@ -746,6 +745,10 @@ body{
}
}
> #content-modale {
padding-bottom: 20vh;
@media screen and (min-width: $desktop-min-width) {
z-index: 6;
}
> div:not(.image-viewer-wrapper, .image-modale) {
padding-bottom: 5vh;
> .content-wrapper {
@@ -888,6 +891,7 @@ body{
> main {
width: 100%;
padding: 0 $modale-x-padding;
padding-bottom: 5vh;
box-sizing: border-box;
> .partie {
width: 100%;
@@ -1060,6 +1064,55 @@ body{
font-size: $sm-font-size-desktop;
}
}
> #equipe,
> #partenaires {
margin-top: 5vh;
> div:not(.personne) {
@media screen and (min-width: $desktop-min-width) {
margin: 10vh 0;
}
}
> div.personne,
> div.partenaire {
display: grid;
grid-template-columns: 0.4fr 1fr;
column-gap: 3rem;
grid-template-rows: 1fr 1fr;
justify-items: start;
margin: 5vh 0;
> figure {
grid-column: 1;
grid-row: 1 / span 2;
width: 100%;
margin: 0;
> img {
border-radius: 50%;
}
}
> .name,
> .title {
align-self: flex-end;
margin-bottom: 1.3rem;
font-size: $m-font-size-mobile;
@media screen and (min-width: $desktop-min-width) {
font-size: $m-font-size-desktop;
}
> p {
margin: 0;
}
}
> .description {
> p {
margin: 0;
}
}
}
}
#partenaires {
@media screen and (min-width: $desktop-min-width) {
margin-top: 10vh;
}
}
}
> footer {
.pattern-bottom {
@@ -1179,71 +1232,76 @@ body{
}
}
}
> #animation-toggle > div {
cursor: pointer;
position: fixed;
bottom: $body-margin-bottom;
right: $body-margin-x;
z-index: 999;
display: flex;
align-items: center;
padding: 0.4rem 1.2rem;
border-radius: 10rem;
background-color: white;
transition: background-color 0.3s ease-out;
> div {
margin-right: 1rem;
> p {
font-size: $sm-font-size-mobile;
@media screen and (min-width: $desktop-min-width) {
font-size: $sm-font-size-desktop;
}
}
> #animation-toggle {
@media screen and (min-width: $desktop-min-width) {
z-index: 5;
}
> .switch {
position: relative;
display: inline-block;
width: 2.2rem;
height: 1.2rem;
> input {
opacity: 0;
width: 0;
height: 0;
&:checked + .slider {
background-color: $brand-color;
}
&:focus + .slider {
box-shadow: 0 0 1px $brand-color;
}
&:checked + .slider::before {
-webkit-transform: translateX(1rem);
-ms-transform: translateX(1rem);
transform: translateX(1rem);
> div {
cursor: pointer;
position: fixed;
bottom: $body-margin-bottom;
right: $body-margin-x;
z-index: 999;
display: flex;
align-items: center;
padding: 0.4rem 1.2rem;
border-radius: 10rem;
background-color: white;
transition: background-color 0.3s ease-out;
> div {
margin-right: 1rem;
> p {
font-size: $sm-font-size-mobile;
@media screen and (min-width: $desktop-min-width) {
font-size: $sm-font-size-desktop;
}
}
}
> .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 34px;
background-color: $main-color-light;
-webkit-transition: .4s;
transition: .4s;
&::before {
> .switch {
position: relative;
display: inline-block;
width: 2.2rem;
height: 1.2rem;
> input {
opacity: 0;
width: 0;
height: 0;
&:checked + .slider {
background-color: $brand-color;
}
&:focus + .slider {
box-shadow: 0 0 1px $brand-color;
}
&:checked + .slider::before {
-webkit-transform: translateX(1rem);
-ms-transform: translateX(1rem);
transform: translateX(1rem);
}
}
> .slider {
position: absolute;
content: "";
height: 1rem;
width: 1rem;
border-radius: 50%;
left: 0.1rem;
bottom: 0.1rem;
background-color: $light-color;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 34px;
background-color: $main-color-light;
-webkit-transition: .4s;
transition: .4s;
&::before {
position: absolute;
content: "";
height: 1rem;
width: 1rem;
border-radius: 50%;
left: 0.1rem;
bottom: 0.1rem;
background-color: $light-color;
-webkit-transition: .4s;
transition: .4s;
}
}
}
}