fix agenda archive && thumbnails

This commit is contained in:
Tessier
2020-09-21 12:55:26 +02:00
parent 7f3fb7facb
commit 6de32791c3
20 changed files with 172 additions and 152 deletions
@@ -1,28 +1,14 @@
function slides() {
$('body:not(.les-temps-forts) main .main-carousel').flickity({
$('body:not(.les-temps-forts) .hero .main-carousel').flickity({
cellAlign: 'left',
autoPlay: true,
prevNextButtons: false,
});
$('.privatiser.main-carousel').flickity({
cellAlign: 'left',
autoPlay: true,
prevNextButtons: false,
});
// console.log('carrousell');
// if (Home != null) {
// var flkty = new Flickity( Home, {
// cellAlign: 'left',
// autoPlay: true,
// prevNextButtons: false,
// // fade: true,
// });
// }
// var prive = document.querySelector('.prive .__slide');
// if (prive != null) {
// var flkty = new Flickity( prive, {
// // options
// cellAlign: 'left',
// autoPlay: true,
// })
// }
var slide_tpsF = document.querySelectorAll('.tpsF .main-carousel');
if (slide_tpsF != null) {
@@ -133,5 +119,7 @@ $( document ).ready(function() {
isotope();
// drag();
click_nav();
scrollto();
if (window.width >= 578) {
scrollto();
}
});
@@ -2,6 +2,7 @@ body{
& > footer{
box-shadow: inset 0px 10px 10px rgba(0, 0, 0, 0.05);
padding-top: 2rem;
margin-top: 5rem;
section{
& > .row{
margin-bottom: 1rem;
@@ -1,32 +1,28 @@
.thumbnails{
min-height: 520px;
@media screen and (min-width: 768px) {
min-height: 430px;
}
// margin-bottom: 2rem;
a{
display: block;
text-decoration: none;
}
figure{
overflow: hidden;
position: relative;
img{
transform: scale(1);
transition: 1s transform ease;
}
}
.wrap_content{
position: absolute;
display: flex;
flex-direction: column;
max-height: 11.3rem;
overflow: hidden;
justify-content: center;
border: 5px solid black;
padding: 1rem;
position: relative;
margin: -6rem 2rem;
margin: 0;
background: white;
transition: 0.2s margin-top ease;
text-align: center;
transform: translate(-50%, -50%);
width: calc(100% - 4rem);
left: 50%;
transition: 0.2s transform ease;
& > * {
color: black;
}
@@ -41,13 +37,11 @@
}
.date{
margin-bottom: 0.5rem;
line-height: 1;
& > * {
font-family: 'universalis-regular';
font-size: 0.9rem;
line-height: 0.5;
time{
line-height: 0.5;
}
line-height: inherit;
}
}
.places{
@@ -59,15 +53,14 @@
}
&:hover {
figure{
overflow: hidden;
img{
transform: scale(1.1);
transition: 1s transform ease;
}
}
.wrap_content{
margin-top: -7rem;
transition: 0.2s margin-top ease;
.wrap_content{
transform: translate(-50%,-60%);
transition: 0.2s transform ease;
}
}
}
}
@@ -18,6 +18,7 @@
line-height: 1;
@media screen and (min-width: 576px) {
transform: translateX(0%) rotate(-15deg);
}
@media screen and (min-width: 1200px) {
transform: translateX(-50%) rotate(-15deg);
@@ -2,6 +2,12 @@
// ==================================================
.hamburger {
padding: $hamburger-padding-y $hamburger-padding-x;
@media screen and (min-width: 576px) {
// $hamburger-padding-y : 13px !default;
// $hamburger-padding-x : 15px !default;
padding: 13px 15px;
}
display: inline-block;
cursor: pointer;
@@ -9,8 +9,9 @@
// Settings
// ==================================================
$hamburger-padding-x : 15px !default;
$hamburger-padding-y : 13px !default;
$hamburger-padding-x : 13px !default;
$hamburger-padding-y : 15px !default;
$hamburger-layer-width : 20px !default;
$hamburger-layer-height : 2px !default;
$hamburger-layer-spacing : 4px !default;
@@ -24,8 +24,13 @@
body,html{
font-size: 16px;
line-height: 1.5;
font-size: 14px;
line-height: 1;
@media screen and (min-width: 576px) {
font-size: 16px;
line-height: 1.5;
}
}
// reboot perso
figure{
@@ -63,7 +63,7 @@
}
}
.thumbnails{
margin-bottom: 2rem;
margin-bottom: 5rem;
}
}
}
@@ -24,10 +24,11 @@
margin-bottom: 2rem;
transform: translateX(0%) rotate(-15deg);
font-family: 'millimetre-bold';
font-size: 2rem;
font-size: 1.5rem;
line-height: 1;
@media screen and (min-width: 576px) {
transform: translateX(0%) rotate(-15deg);
font-size: 2rem;
}
@media screen and (min-width: 1200px) {
transform: translateX(-50%) rotate(-15deg);
@@ -52,7 +53,7 @@
& > .row{
justify-content: center;
&:first-of-type{
min-height: 430px;
margin-bottom: 100px;
}
}
}
@@ -65,6 +66,8 @@
}
& > .row{
position: relative;
width: 100%;
margin: auto;
}
figure {
position: absolute;
@@ -95,6 +98,7 @@
.container-fluid{
& > .row{
position: relative;
}
figure {
position: absolute;
@@ -142,7 +146,7 @@
font-size: 1.875rem;
}
& > div{
border:10px solid $colorRed;
border:5px solid $colorRed;
padding: 1rem;
height: calc(100% - 4rem);
h4{
@@ -173,13 +177,13 @@
& > .row{
justify-content: center;
&:first-of-type{
min-height: 450px;
margin-bottom: 50px;
}
}
}
article{
height: auto;
min-height: 520px;
min-height: 450px;
@media screen and (min-width: 576px) {
min-height: 450px;
}
@@ -193,7 +197,7 @@
}
}
.wrap_content{
margin: -8rem 2rem!important;
// margin: -8rem 2rem!important;
}
.content{
font-family: 'universalis-regular';
@@ -58,14 +58,14 @@
}
&.is-selected .legendes{
opacity: 1;
-webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
transform: translateX(-50%);
-webkit-transition: all 1.3s;
-o-transition: all 1.3s;
transition: all 1.3s;
@media screen and (min-width: 576px) {
transform: translateX(0px);
}
}
figcaption{
left: 50%;
transform: translateX(-50%);
@@ -84,7 +84,7 @@
h6{
font-size: 1rem;
text-transform: uppercase;
font-family: 'universalis-bold';
font-family: 'universalis-bold';
}
&.legendes{
opacity: 0;
@@ -98,4 +98,4 @@
}
}
}
}
}
@@ -14,10 +14,15 @@
h3{
border: 5px solid $colorYellow;
padding: 0.5rem;
width: max-content;
font-size: 2rem;
font-size: 1.5rem;
width: auto;
line-height: 1;
font-family: 'millimetre-bold';
@media screen and (min-width: 576px) {
width: max-content;
font-size: 2rem;
}
}
}
.data{
@@ -54,7 +59,7 @@
margin: 5rem 0;
h3{
font-family: 'millimetre-bold';
font-size: 2rem;
font-size: 1.5rem;
line-height: 1;
border: 5px solid $colorYellow;
width: max-content;
@@ -70,7 +75,8 @@
margin-bottom: 2rem;
transform: translateX(0%) rotate(-15deg);
@media screen and (min-width: 576px) {
transform: translateX(0%) rotate(-15deg);
font-size: 2rem;
transform: translateX(0%) rotate(-15deg);
}
@media screen and (min-width: 1200px) {
transform: translateX(-50%) rotate(-15deg);