valentin_le_moign/figureslibres.cc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

début corrections 2024, ajout d'un carousel dans les lecteurs de projets, suppression des animations de l'index

Browse Source
This commit is contained in:
Valentin
2024-03-05 00:05:41 +01:00
parent 5d90d88ae5
commit 16b7135b03
13 changed files with 190 additions and 480 deletions
Download Patch File Download Diff File Expand all files Collapse all files
user/themes/figureslibres-v2/css/theme.css
+66 -36
View File
@@ -145,7 +145,7 @@ a, a:active, a:focus, a:visited {
.picto { .picto {
display: block; display: block;
cursor: pointer; cursor: pointer;
background-color: #0b1117; background-color: #0e1229;
} }
.picto-url { .picto-url {
@@ -177,7 +177,7 @@ em {
body { body {
overflow-x: hidden; overflow-x: hidden;
color: #0b1117; color: #0e1229;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
body header { body header {
@@ -204,7 +204,7 @@ body header #nav-container #burger {
} }
body header nav { body header nav {
position: absolute; position: absolute;
background-color: #0b1117; background-color: #0e1229;
top: -100vh; top: -100vh;
width: 100%; width: 100%;
height: calc(100vh - 7vh); height: calc(100vh - 7vh);
@@ -240,7 +240,7 @@ body header nav ul li a {
font-size: 2.2em; font-size: 2.2em;
} }
body header nav ul li.selected a { body header nav ul li.selected a {
color: #0b1117; color: #0e1229;
background-color: #f5f5f5; background-color: #f5f5f5;
} }
body header nav.mobile-nav-open { body header nav.mobile-nav-open {
@@ -298,7 +298,7 @@ body main .content .projet-card a {
width: 100%; width: 100%;
} }
body main .content .projet-card a figcaption { body main .content .projet-card a figcaption {
color: #0b1117; color: #0e1229;
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
margin-top: 5px; margin-top: 5px;
@@ -348,9 +348,6 @@ body main #index-content #main-p-index #figureslibres {
font-family: Syne, sans-serif; font-family: Syne, sans-serif;
font-weight: bold; font-weight: bold;
} }
body main #index-content #main-p-index #figureslibres canvas {
transform: translateX(calc(-100% + 10px)) translateY(-2px);
}
body main #index-content #main-p-index #publique { body main #index-content #main-p-index #publique {
font-family: PlayfairDisplay, serif; font-family: PlayfairDisplay, serif;
font-style: italic; font-style: italic;
@@ -360,17 +357,11 @@ body main #index-content #main-p-index #sociale {
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
body main #index-content #main-p-index #sociale canvas {
transform: translateX(calc(-100% + 15px)) translateY(0px);
}
body main #index-content #main-p-index #culturelle { body main #index-content #main-p-index #culturelle {
font-family: Avara, serif; font-family: Avara, serif;
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
body main #index-content #main-p-index #culturelle canvas {
transform: translateX(calc(-100% + 15px)) translateY(2px);
}
body main #index-content #main-p-index #logicielslibres { body main #index-content #main-p-index #logicielslibres {
font-family: Rumeur, sans-serif; font-family: Rumeur, sans-serif;
font-weight: bold; font-weight: bold;
@@ -401,7 +392,7 @@ body main #index-content #extrait-projets > div div:last-of-type p {
justify-content: center; justify-content: center;
} }
body main #index-content #extrait-projets > div div:last-of-type p span { body main #index-content #extrait-projets > div div:last-of-type p span {
border-bottom: solid 1px #0b1117; border-bottom: solid 1px #0e1229;
padding-bottom: 1px; padding-bottom: 1px;
} }
body main #index-content #extrait-projets > div div:last-of-type p span #publique-link { body main #index-content #extrait-projets > div div:last-of-type p span #publique-link {
@@ -435,9 +426,6 @@ body main #index-content #second-p-index #commanditaires {
font-family: Moche, sans-serif; font-family: Moche, sans-serif;
font-weight: bold; font-weight: bold;
} }
body main #index-content #second-p-index #commanditaires canvas {
transform: translateX(calc(-100% + 10px)) translateY(0px);
}
body main #index-content #second-p-index #projets { body main #index-content #second-p-index #projets {
font-family: Redaction50, serif; font-family: Redaction50, serif;
font-weight: bold; font-weight: bold;
@@ -456,7 +444,8 @@ body main #index-content #commanditaires-grid img {
} }
body main #index-content #arrow-container { body main #index-content #arrow-container {
margin-top: 30px; margin-top: 30px;
transition: transform 0.8s ease-out; margin-bottom: 0vh;
transition: transform 0.8s ease-out, margin-bottom 0.4s ease-out;
} }
body main #index-content #arrow-container .picto { body main #index-content #arrow-container .picto {
width: 45px; width: 45px;
@@ -469,18 +458,13 @@ body main #index-content .container {
overflow-y: hidden; overflow-y: hidden;
height: auto; height: auto;
max-height: 0vh; max-height: 0vh;
margin-top: 0px; margin-top: 0vh;
opacity: 0; opacity: 0;
transition: opacity 0.4s ease-out, 0.7s 0.4s ease-out, max-height 1.2s ease-out, margin-top 1s ease-out; transition: opacity 0.4s ease-out, 0.7s 0.4s ease-out, max-height 1.2s ease-out, margin-top 1s ease-out;
} }
body main #index-content a { body main #index-content a {
text-decoration: none; text-decoration: none;
} }
body main #index-content canvas {
position: absolute;
transform: translateX(calc(-100% + 15px)) translateY(-2px);
transition: width 0.4s ease-out, height 0.4s ease-out;
}
body main #projets-index { body main #projets-index {
width: 100%; width: 100%;
} }
@@ -686,8 +670,8 @@ body main #reader hr {
margin-bottom: 2vh; margin-bottom: 2vh;
width: 66%; width: 66%;
opacity: 0.5; opacity: 0.5;
color: #0b1117; color: #0e1229;
background-color: #0b1117; background-color: #0e1229;
} }
body main #reader #related-pages { body main #reader #related-pages {
margin-top: 5vh; margin-top: 5vh;
@@ -710,8 +694,50 @@ body main #reader #related-pages #related-grid {
body main #reader #related-pages #related-grid .card-displayed { body main #reader #related-pages #related-grid .card-displayed {
margin-top: 1.5vh; margin-top: 1.5vh;
} }
body main #reader #carousel-container { body main #reader .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; display: none;
opacity: 0;
transition: opacity 0.3s ease-out;
}
body main #reader .swiper .swiper-wrapper {
z-index: 9;
display: flex;
align-items: center;
}
body main #reader .swiper .swiper-wrapper .swiper-slide {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
body main #reader .swiper .swiper-wrapper .swiper-slide img {
max-height: 100%;
max-width: 100%;
object-fit: cover;
}
body main #reader .swiper .swiper-button-next, body main #reader .swiper .swiper-button-prev {
color: #0e1229;
padding: 2rem;
bottom: 5vh;
top: unset;
}
body main #reader .swiper #close-carousel {
width: calc(25px - 5px);
height: calc(23px - 5px);
position: absolute;
top: 5vh;
right: 5vh;
z-index: 10;
} }
body footer { body footer {
display: none; display: none;
@@ -731,7 +757,7 @@ body footer p {
} }
body footer p a { body footer p a {
display: block; display: block;
background: #0b1117; background: #0e1229;
height: 100%; height: 100%;
width: 100%; width: 100%;
font-family: Syne, Sans-serif; font-family: Syne, Sans-serif;
@@ -751,7 +777,7 @@ body footer p a {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
background: #0b1117; background: #0e1229;
color: #f5f5f5; color: #f5f5f5;
font-size: 0.75em; font-size: 0.75em;
border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;
@@ -827,7 +853,7 @@ body footer p a {
margin-bottom: 5vh; margin-bottom: 5vh;
} }
body main #reader h2#main-project-title { body main #reader h2#main-project-title {
font-size: 3.8em; font-size: 2.9em;
} }
body main #reader #info-project { body main #reader #info-project {
margin-top: -6vh; margin-top: -6vh;
@@ -844,7 +870,7 @@ body footer p a {
width: auto; width: auto;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-gap: 2% 4%; grid-gap: 1em;
} }
body main #reader #project-images-grid figure { body main #reader #project-images-grid figure {
margin-top: 0; margin-top: 0;
@@ -873,6 +899,10 @@ body footer p a {
min-height: 80px !important; min-height: 80px !important;
min-width: 15vw; min-width: 15vw;
} }
body main #reader .swiper .swiper-button-next, body main #reader .swiper .swiper-button-prev {
bottom: unset;
top: var(--swiper-navigation-top-offset, 50%);
}
body footer { body footer {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -882,7 +912,7 @@ body footer p a {
height: 4vh; height: 4vh;
right: 3vw; right: 3vw;
border-radius: 20px 20px 0 0; border-radius: 20px 20px 0 0;
background-color: #0b1117; background-color: #0e1229;
} }
body footer p { body footer p {
height: auto; height: auto;
@@ -915,7 +945,7 @@ body footer p a {
} }
body header nav ul li { body header nav ul li {
width: auto; width: auto;
color: #0b1117; color: #0e1229;
height: 0.95em; height: 0.95em;
z-index: 0; z-index: 0;
} }
@@ -943,7 +973,7 @@ body footer p a {
width: 100%; width: 100%;
padding: 4px 12px; padding: 4px 12px;
transform: translateX(-12px) translateY(calc(-100% - 2px + 4px)); transform: translateX(-12px) translateY(calc(-100% - 2px + 4px));
background-color: #0b1117; background-color: #0e1229;
border-radius: 15px; border-radius: 15px;
z-index: -1; z-index: -1;
transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out;
@@ -1070,7 +1100,7 @@ body footer p a {
} }
@media only screen and (min-width: 1500px) { @media only screen and (min-width: 1500px) {
body main #index-content #main-p-index p { body main #index-content #main-p-index p {
font-size: 3.8em; font-size: 2.9em;
} }
body main #index-content #arrow-container { body main #index-content #arrow-container {
margin-top: 7vh; margin-top: 7vh;
user/themes/figureslibres-v2/css/theme.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
user/themes/figureslibres-v2/js/libraries/blotter/blotter.min.js
Vendored
-30
View File
File diff suppressed because one or more lines are too long
user/themes/figureslibres-v2/js/libraries/blotter/liquidDistortMaterial.js
-50
View File
@@ -1,50 +0,0 @@
(function(Blotter) {
Blotter.LiquidDistortMaterial = function() {
Blotter.Material.apply(this, arguments);
};
Blotter.LiquidDistortMaterial.prototype = Object.create(Blotter.Material.prototype);
Blotter._extendWithGettersSetters(Blotter.LiquidDistortMaterial.prototype, (function () {
function _mainImageSrc () {
var mainImageSrc = [
Blotter.Assets.Shaders.Noise3D,
"void mainImage( out vec4 mainImage, in vec2 fragCoord )",
"{",
" // Setup ========================================================================",
" vec2 uv = fragCoord.xy / uResolution.xy;",
" float z = uSeed + uGlobalTime * uSpeed;",
" uv += snoise(vec3(uv, z)) * uVolatility;",
" mainImage = textTexture(uv);",
"}"
].join("\n");
return mainImageSrc;
}
return {
constructor : Blotter.LiquidDistortMaterial,
init : function () {
this.mainImage = _mainImageSrc();
this.uniforms = {
uSpeed : { type : "1f", value : 1.0 },
uVolatility : { type : "1f", value : 0.15 },
uSeed : { type : "1f", value : 0.1 }
};
}
};
})());
})(
this.Blotter
);
user/themes/figureslibres-v2/js/script.js
+37 -246
View File
@@ -6,7 +6,7 @@ $(document).ready( () => {
hoverDesktopNavItems() hoverDesktopNavItems()
if (currentPage.text().trim() == 'Accueil') { if (currentPage.text().trim() == 'Accueil') {
hideFooter() hideFooter()
animateText() toggleIndexContent()
} else if (currentPage.text().trim() == 'Projets' && $('main').children(":first").attr('id') != 'reader') { } else if (currentPage.text().trim() == 'Projets' && $('main').children(":first").attr('id') != 'reader') {
hideFooter() hideFooter()
loadProjetIndex() loadProjetIndex()
@@ -21,7 +21,6 @@ $(document).ready( () => {
let isMobileNavOpen = false, let isMobileNavOpen = false,
isDesktopDevice = false, isDesktopDevice = false,
currentPage, currentPage,
indexIsReady = false,
filterObj = { filterObj = {
publiqueCardsDisplayed : true, publiqueCardsDisplayed : true,
socialeCardsDisplayed : true, socialeCardsDisplayed : true,
@@ -66,8 +65,7 @@ function initBarba() {
displayPictograms() displayPictograms()
$('html, body').scrollTop(0) $('html, body').scrollTop(0)
if ($(data.next.container).attr('id') == 'index-content') { if ($(data.next.container).attr('id') == 'index-content') {
animateText() toggleIndexContent()
indexIsReady = false
} else if ($(data.next.container).attr('id') == 'projets-index') { } else if ($(data.next.container).attr('id') == 'projets-index') {
loadProjetIndex() loadProjetIndex()
filterWhenEntering() filterWhenEntering()
@@ -281,8 +279,8 @@ function toggleIndexContent(closeEverything) {
} }
}) })
$('#index-content canvas').click( function(event) { $('#index-content .animateText').click( function(event) {
target = $(event.target).parent().attr('id') target = $(event.target).attr('id')
if (target == 'publique' || target == 'sociale' || target == 'culturelle') { if (target == 'publique' || target == 'sociale' || target == 'culturelle') {
toggleExtrait(target) toggleExtrait(target)
return false return false
@@ -416,195 +414,6 @@ function hideContent(content) {
}, 1200) }, 1200)
} }
// index animation
function animateText() {
waitForWebfonts(['Moche'], () => { // idk why listing only one font makes it work....
// For each item
$(".animateText").each(function(i, e) {
$(e).contents().wrap('<span></span>')
$('#main-p-index span').css('color', 'transparent')
$('#second-p-index span').css('color', 'transparent')
// Initialize a new LiquidText instance
var liquidText = new LiquidText(
e, // Element
0.0, // Liquid Volatility
0.5 // Speed
).start()
})
toggleIndexContent()
displayIndexWhenReady()
})
}
let globalMaterial = new Blotter.LiquidDistortMaterial()
let globalBlotter = new Blotter(globalMaterial, {
texts: [],
autostart: false,
autobuild: false
})
class LiquidText {
constructor(element, volatility, speed) {
this.element = element
this.text = element.text
this.fontSize = parseInt($(element).css('font-size'))
this.fontStack = $(element).css('font-family')
this.fontWeight = $(element).css('font-weight')
this.fontColor = $(element).css('color')
this.material = globalMaterial
this.hoverDuration = 0.35
this.hoverEase = Linear.easeIn
this.liquidVolatility = volatility
this.liquidSpeed = speed
this.scope = null
this.blotter = globalBlotter
this.blotterText = null
this.onResize = this.onResize.bind(this)
this.seed = 0.1
window.addEventListener('resize', this.onResize)
this.initialize()
}
initialize() {
let blotter = this.blotter
let text = new Blotter.Text(this.text, {
family: this.fontStack,
size: this.fontSize,
fill: this.fontColor,
weight: this.fontWeight,
paddingLeft: 15,
paddingRight: 15
})
this.blotterText = text
this.material.uniforms.uSpeed.value = this.liquidSpeed
this.material.uniforms.uVolatility.value = this.liquidVolatility
blotter.addText(text)
blotter.needsUpdate = true
var scope = blotter.forText(text)
this.scope = scope
scope.appendTo(this.element)
this.material.needsUpdate = true
gsap.fromTo(this.material.uniforms.uVolatility, this.hoverDuration, {
value: 0,
ease: this.hoverEase
}, {
value: this.liquidVolatility,
ease: this.hoverEase
})
this.element.onmouseenter = (event) => {
this.scope.material.needsUpdate = true
gsap.fromTo(this.scope.material.uniforms.uVolatility, this.hoverDuration, {
value: 0,
ease: this.hoverEase
}, {
value: this.liquidVolatility + 0.04,
ease: this.hoverEase
})
}
this.element.onmouseleave = (event) => {
gsap.fromTo(this.scope.material.uniforms.uVolatility, this.hoverDuration, {
value: this.scope.material.uniforms.uVolatility.value,
ease: this.hoverEase
}, {
value: this.liquidVolatility,
ease: this.hoverEase,
onComplete: () => {
this.scope.material.needsUpdate = true
}
})
}
}
stop() {
this.blotter.stop()
}
start() {
this.blotter.start()
}
onResize() {
let text = this.blotterText
let time = 100
let timer
if(timer) clearTimeout(timer)
timer = setTimeout(() => {
text.properties.size = parseInt($(this.element).css('font-size'))
text.needsUpdate = true
}, time, event)
}
}
function displayIndexWhenReady() {
globalBlotter.on('update', () => {
if (!indexIsReady) {
indexIsReady = true
$('#loader-index').fadeOut(1400)
}
})
}
function waitForWebfonts(fonts, callback) {
var loadedFonts = 0
for (var i = 0, l = fonts.length; i < l; ++i) {
((font) => {
var node = document.createElement('span')
// Characters that vary significantly among different fonts
node.innerHTML = 'giItT1WQy@!-/#'
// Visible - so we can measure it - but not on the screen
node.style.position = 'absolute'
node.style.left = '-10000px'
node.style.top = '-10000px'
// Large font size makes even subtle changes obvious
node.style.fontSize = '300px'
// Reset any font properties
node.style.fontFamily = 'sans-serif'
node.style.fontVariant = 'normal'
node.style.fontStyle = 'normal'
node.style.fontWeight = 'normal'
node.style.letterSpacing = '0'
document.body.appendChild(node)
// Remember width with no applied web font
var width = node.offsetWidth
node.style.fontFamily = font + ', sans-serif'
var interval
function checkFont() {
// Compare current width with original width
if (node && node.offsetWidth != width) {
++loadedFonts
node.parentNode.removeChild(node)
node = null
}
// If all fonts have been loaded
if (loadedFonts >= fonts.length) {
if (interval) {
clearInterval(interval)
}
if (loadedFonts == fonts.length) {
callback()
return true
}
}
}
if (!checkFont()) {
interval = setInterval(checkFont, 50)
}
})(fonts[i])
}
}
// display project grid // display project grid
function toggleCategory(category) { function toggleCategory(category) {
@@ -756,12 +565,43 @@ function filterWhenEntering() {
// display reader // display reader
function displayReader() { function displayReader() {
$('.owl-carousel').owlCarousel() const swiper = new Swiper('.swiper', {
// initCarrousel() // Optional parameters
loop: true,
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
$('#cover-image img, .project-image').click( function(event) {
const totalImg = $('img')
let indexImg = 0
for (let img of totalImg) {
if (event.target === img) { break }
indexImg++
}
swiper.slideToLoop(indexImg - 1)
$('body').css('overflow-y', 'hidden');
swiper.el.style.display = "block";
setTimeout(() => {
swiper.el.style.opacity = "1";
}, 10);
})
$('#close-carousel').click( () => {
$('body').css('overflow-y', 'auto');
swiper.el.style.opacity = "0";
setTimeout(() => {
swiper.el.style.display = "none";
}, 300);
})
$('header').fadeOut() $('header').fadeOut()
projectTitleIsScrolling = false projectTitleIsScrolling = false
checkTitleAutoScroll() checkTitleAutoScroll()
let isProjectHeaderDisplayed = false let isProjectHeaderDisplayed = false
$(window).scroll( () => { $(window).scroll( () => {
@@ -822,55 +662,6 @@ function checkTitleAutoScroll() {
} }
} }
// function initCarrousel() {
// let isCarrouselOpen = false, currentImg
// $('#reader img').each((i, el) => {
// $(el).on('click', () => {
// if (!isCarrouselOpen) { displayCarrousel(el) }
// })
// })
// $('#bg-carrousel').on('click', () => {
// hideCarrousel()
// })
// function displayCarrousel(img) {
// // if ($(img).attr('src') == $('#cover-image img').attr('src')) {
// // $('#arrow-left .picto').addClass('disabled')
// // } else {
// // $('#arrow-left .picto').removeClass('disabled')
// // }
// // if ($(img).attr('src') == $('#reader img').last().attr('src')) {
// // $('#arrow-right .picto').addClass('disabled')
// // } else {
// // $('#arrow-right .picto').removeClass('disabled')
// // }
// $('#reader #carrousel figure img').attr('src', $(img).attr('src'))
// currentImg = $(img)
// $('#arrow-left').on('click', () => {
// $('#reader #carrousel figure img').attr('src', $(currentImg).parent().prev().children().first().attr('src'))
// currentImg = $(currentImg).parent().prev().children().first()
// })
// $('#arrow-right').on('click', () => {
// $('#reader #carrousel figure img').attr('src', $(currentImg).parent().next().children().first().attr('src'))
// currentImg = $(currentImg).parent().next().children().first()
// })
// $('#carrousel').css('display', 'block')
// isCarrouselOpen = true
// }
// function hideCarrousel() {
// $('#carrousel').css('display', 'none')
// isCarrouselOpen = false
// }
// }
// show and hide footer // show and hide footer
function displayFooter() { function displayFooter() {
$('footer').fadeIn() $('footer').fadeIn()
user/themes/figureslibres-v2/scss/configuration/_variable.scss
+2 -2
View File
@@ -45,7 +45,7 @@
$titleFontSizeMobile: 1.8em; $titleFontSizeMobile: 1.8em;
$bigFontSizeMobile: 2.2em; $bigFontSizeMobile: 2.2em;
// typography - sizes desktop // typography - sizes desktop
$bigFontSizeDesktop: 3.8em; $bigFontSizeDesktop: 2.9em;
// typography - pictograms // typography - pictograms
$pictoInlineWidth: 12px; $pictoInlineWidth: 12px;
$pictoInlineHeight: 10px; $pictoInlineHeight: 10px;
@@ -57,7 +57,7 @@
$pictoExtraLargeHeight: 54px; $pictoExtraLargeHeight: 54px;
// colors - theme colors // colors - theme colors
$mainColor: #0b1117; $mainColor: #0e1229;
$mainColorSoft: #1f2429; $mainColorSoft: #1f2429;
$bgColor: #f5f5f5; $bgColor: #f5f5f5;
// colors - gradient // colors - gradient
user/themes/figureslibres-v2/scss/style.scss
+53 -70
View File
@@ -193,24 +193,15 @@
} }
#figureslibres { #figureslibres {
@include figures-libres-font; @include figures-libres-font;
canvas {
transform: translateX(calc(-100% + 10px)) translateY(-2px);
}
} }
#publique { #publique {
@include publique-font; @include publique-font;
} }
#sociale { #sociale {
@include sociale-font; @include sociale-font;
canvas {
transform: translateX(calc(-100% + 15px)) translateY(0px);
}
} }
#culturelle { #culturelle {
@include culturelle-font; @include culturelle-font;
canvas {
transform: translateX(calc(-100% + 15px)) translateY(2px);
}
} }
#logicielslibres { #logicielslibres {
@include logiciels-libres-font; @include logiciels-libres-font;
@@ -274,9 +265,6 @@
} }
#commanditaires { #commanditaires {
@include commanditaires-font; @include commanditaires-font;
canvas {
transform: translateX(calc(-100% + 10px)) translateY(0px);
}
} }
#projets { #projets {
@include projets-font; @include projets-font;
@@ -296,7 +284,8 @@
} }
#arrow-container { #arrow-container {
margin-top: $sectionSpacing; 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 { .picto {
width: $pictoLargeWidth; width: $pictoLargeWidth;
height: $pictoLargeHeight; height: $pictoLargeHeight;
@@ -309,18 +298,13 @@
overflow-y: hidden; overflow-y: hidden;
height: auto; height: auto;
max-height: 0vh; max-height: 0vh;
margin-top: 0px; margin-top: 0vh;
opacity: 0; opacity: 0;
@include transition-ease-out(opacity, 0.7s, max-height 1.2s, margin-top 1s); @include transition-ease-out(opacity, 0.7s, max-height 1.2s, margin-top 1s);
} }
a { a {
text-decoration: none; text-decoration: none;
} }
canvas {
position: absolute;
transform: translateX(calc(-100% + 15px)) translateY(-2px);
@include transition-ease-out(width, height);
}
} }
#projets-index { #projets-index {
width: 100%; 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; 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 { footer {
@@ -746,7 +723,7 @@
width: auto; width: auto;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-gap: 2% 4%; grid-gap: 1em;
figure { figure {
margin-top: 0; margin-top: 0;
width: 100%; width: 100%;
@@ -775,6 +752,12 @@
} }
} }
} }
.swiper {
.swiper-button-next, .swiper-button-prev {
bottom: unset;
top: var(--swiper-navigation-top-offset,50%);
}
}
} }
} }
footer { footer {
user/themes/figureslibres-v2/templates/index.html.twig
-4
View File
@@ -3,10 +3,6 @@
{% block content %} {% block content %}
<div class="content" id="index-content" data-barba="container" data-barba-namespace="index"> <div class="content" id="index-content" data-barba="container" data-barba-namespace="index">
<div id="loader-index">
<img src="{{ url('theme://images/loader/rolling.svg') }}" alt="loading animation" />
</div>
<div id="main-p-index"> <div id="main-p-index">
{{ page.content|raw }} {{ page.content|raw }}
</div> </div>
user/themes/figureslibres-v2/templates/partials/base.html.twig
+6 -4
View File
@@ -16,17 +16,19 @@
{% block stylesheets %} {% block stylesheets %}
{% do assets.addCss('theme://css/theme.css', 95) %} {% do assets.addCss('theme://css/theme.css', 95) %}
{% do assets.addCss('theme://css/owl.carousel.min.css', 95) %} {% do assets.addCss('theme://css/owl.carousel.min.css', 95) %}
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
{% endblock %} {% endblock %}
{% block javascripts %} {% block javascripts %}
{% do assets.addJs('jquery', 100) %} {% do assets.addJs('jquery', 100) %}
<script src="https://unpkg.com/@barba/core"></script> <script src="https://unpkg.com/@barba/core"></script>
<script src="https://unpkg.com/animate-css-grid@latest"></script>
{% do assets.addJs('theme://js/libraries/lazy/jquery.lazy.min.js', 99) %} {% do assets.addJs('theme://js/libraries/lazy/jquery.lazy.min.js', 99) %}
{% do assets.addJs('theme://js/libraries/blotter/blotter.min.js', 98) %} <script src="https://unpkg.com/animate-css-grid@1.4.3"></script>
{% do assets.addJs('theme://js/libraries/blotter/liquidDistortMaterial.js', 97) %}
{% do assets.addJs('theme://js/libraries/gsap/gsap.min.js', 96) %} {% do assets.addJs('theme://js/libraries/gsap/gsap.min.js', 96) %}
{% do assets.addJs('theme://js/libraries/owl.carousel.min.js', 94) %} <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
{% endblock %} {% endblock %}
{% block assets deferred %} {% block assets deferred %}
user/themes/figureslibres-v2/templates/partials/carousel.html.twig
+12
View File
@@ -0,0 +1,12 @@
<div class="swiper">
<div class="swiper-wrapper">
{% for image in page.media.images %}
<div class="swiper-slide">
<img class="lazy loader" src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ image.url }}" alt="{{ page.title }}" />
</div>
{% endfor %}
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div id="close-carousel" class="picto" data-src="{{ url('theme://images/pictos/cross.svg') }}" aria-hidden="true"></div>
</div>
user/themes/figureslibres-v2/templates/partials/carrousel.html.twig
-24
View File
@@ -1,24 +0,0 @@
<div id="carousel-container">
<div class="owl-carousel owl-theme">
{# <div id="bg-carrousel">
</div>
<div id="slider">
<div id="arrow-left">
<div class="picto" data-src="{{ url('theme://images/pictos/arrow-left.svg') }}" aria-hidden="true"></div>
</div>
<figure>
<img alt="{{ page.title }}" class="project-image">
</figure>
<div id="arrow-right">
<div class="picto" data-src="{{ url('theme://images/pictos/arrow-right.svg') }}" aria-hidden="true"></div>
</div>
</div> #}
{% for image in page.media.images %}
<img src="{{ url('theme://images/loader/rolling.svg') }}" data-src="{{ image.url }}" alt="{{ page.title }}" class="lazy loader project-image">
{% endfor %}
</div>
</div>
user/themes/figureslibres-v2/templates/reader.html.twig
+2 -2
View File
@@ -54,8 +54,8 @@
{% block related_pages %} {% block related_pages %}
{% include 'partials/relatedpages.html.twig' %} {% include 'partials/relatedpages.html.twig' %}
{% endblock %} {% endblock %}
{% block carrousel %} {% block carousel %}
{% include 'partials/carrousel.html.twig' %} {% include 'partials/carousel.html.twig' %}
{% endblock %} {% endblock %}
</div> </div>
{% endblock %} {% endblock %}
user/themes/figureslibres-v2/templates/text-content.html.twig
+11 -11
View File
@@ -1,11 +1,11 @@
{% extends 'partials/base.html.twig' %} {% extends 'partials/base.html.twig' %}
{% block content %} {% block content %}
<div class="content" id="text-content" data-barba="container" data-barba-namespace="text-content"> <div class="content" id="text-content" data-barba="container" data-barba-namespace="text-content">
{% for p in page.children.order('date', 'asc') %} {% for p in page.children.order('date', 'asc') %}
<div class="text-item"> <div class="text-item">
{{ p.content }} {{ p.content }}
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{% endblock %} {% endblock %}