début corrections 2024, ajout d'un carousel dans les lecteurs de projets, suppression des animations de l'index
This commit is contained in:
Valentin
@@ -45,7 +45,7 @@
|
||||
$titleFontSizeMobile: 1.8em;
|
||||
$bigFontSizeMobile: 2.2em;
|
||||
// typography - sizes desktop
|
||||
$bigFontSizeDesktop: 3.8em;
|
||||
$bigFontSizeDesktop: 2.9em;
|
||||
// typography - pictograms
|
||||
$pictoInlineWidth: 12px;
|
||||
$pictoInlineHeight: 10px;
|
||||
@@ -57,7 +57,7 @@
|
||||
$pictoExtraLargeHeight: 54px;
|
||||
|
||||
// colors - theme colors
|
||||
$mainColor: #0b1117;
|
||||
$mainColor: #0e1229;
|
||||
$mainColorSoft: #1f2429;
|
||||
$bgColor: #f5f5f5;
|
||||
// colors - gradient
|
||||
|
||||
@@ -193,24 +193,15 @@
|
||||
}
|
||||
#figureslibres {
|
||||
@include figures-libres-font;
|
||||
canvas {
|
||||
transform: translateX(calc(-100% + 10px)) translateY(-2px);
|
||||
}
|
||||
}
|
||||
#publique {
|
||||
@include publique-font;
|
||||
}
|
||||
#sociale {
|
||||
@include sociale-font;
|
||||
canvas {
|
||||
transform: translateX(calc(-100% + 15px)) translateY(0px);
|
||||
}
|
||||
}
|
||||
#culturelle {
|
||||
@include culturelle-font;
|
||||
canvas {
|
||||
transform: translateX(calc(-100% + 15px)) translateY(2px);
|
||||
}
|
||||
}
|
||||
#logicielslibres {
|
||||
@include logiciels-libres-font;
|
||||
@@ -274,9 +265,6 @@
|
||||
}
|
||||
#commanditaires {
|
||||
@include commanditaires-font;
|
||||
canvas {
|
||||
transform: translateX(calc(-100% + 10px)) translateY(0px);
|
||||
}
|
||||
}
|
||||
#projets {
|
||||
@include projets-font;
|
||||
@@ -296,7 +284,8 @@
|
||||
}
|
||||
#arrow-container {
|
||||
margin-top: $sectionSpacing;
|
||||
@include transition-ease-out(transform 0.8s);
|
||||
margin-bottom: 0vh;
|
||||
@include transition-ease-out(transform 0.8s, margin-bottom 0.4s);
|
||||
.picto {
|
||||
width: $pictoLargeWidth;
|
||||
height: $pictoLargeHeight;
|
||||
@@ -309,18 +298,13 @@
|
||||
overflow-y: hidden;
|
||||
height: auto;
|
||||
max-height: 0vh;
|
||||
margin-top: 0px;
|
||||
margin-top: 0vh;
|
||||
opacity: 0;
|
||||
@include transition-ease-out(opacity, 0.7s, max-height 1.2s, margin-top 1s);
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
canvas {
|
||||
position: absolute;
|
||||
transform: translateX(calc(-100% + 15px)) translateY(-2px);
|
||||
@include transition-ease-out(width, height);
|
||||
}
|
||||
}
|
||||
#projets-index {
|
||||
width: 100%;
|
||||
@@ -549,58 +533,51 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
#carousel-container {
|
||||
.swiper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
backdrop-filter: blur(2px);
|
||||
box-sizing: border-box;
|
||||
z-index: 3;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-out;
|
||||
.swiper-wrapper {
|
||||
z-index: 9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.swiper-slide {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper-button-next, .swiper-button-prev {
|
||||
color: $mainColor;
|
||||
padding: 2rem;
|
||||
bottom: 5vh;
|
||||
top: unset;
|
||||
}
|
||||
#close-carousel {
|
||||
width: calc(#{$pictoSmallWidth} - 5px);
|
||||
height: calc(#{$pictoSmallHeight} - 5px);
|
||||
position: absolute;
|
||||
top: 5vh;
|
||||
right: 5vh;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
// #carrousel {
|
||||
// display: none;
|
||||
// #bg-carrousel {
|
||||
// position: fixed;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// width: 100vw;
|
||||
// height: 100vh;
|
||||
// background-color: rgba(0, 0, 0, $transparency);
|
||||
// z-index: 3;
|
||||
// backdrop-filter: blur(2px);
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// #slider {
|
||||
// position: fixed;
|
||||
// top: 25vh;
|
||||
// left: 0;
|
||||
// width: 100%;
|
||||
// height: 50vh;
|
||||
// background-color: $bgColor;
|
||||
// z-index: 4;
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// justify-content: space-between;
|
||||
// div {
|
||||
// width: 15vw;
|
||||
// height: 100%;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// .picto {
|
||||
// width: $pictoSmallWidth;
|
||||
// height: $pictoSmallHeight;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// .disabled {
|
||||
// opacity: 0.5;
|
||||
// cursor: initial;
|
||||
// }
|
||||
// }
|
||||
// figure {
|
||||
// width: 100%;
|
||||
// img {
|
||||
// padding: 2vh 0 2vh 0;
|
||||
// object-fit: contain;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
footer {
|
||||
@@ -746,7 +723,7 @@
|
||||
width: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 2% 4%;
|
||||
grid-gap: 1em;
|
||||
figure {
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
@@ -775,6 +752,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper {
|
||||
.swiper-button-next, .swiper-button-prev {
|
||||
bottom: unset;
|
||||
top: var(--swiper-navigation-top-offset,50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
footer {
|
||||
|
||||
Reference in New Issue
Block a user