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
@@ -145,7 +145,7 @@ a, a:active, a:focus, a:visited {
|
||||
.picto {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background-color: #0b1117;
|
||||
background-color: #0e1229;
|
||||
}
|
||||
|
||||
.picto-url {
|
||||
@@ -177,7 +177,7 @@ em {
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
color: #0b1117;
|
||||
color: #0e1229;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
body header {
|
||||
@@ -204,7 +204,7 @@ body header #nav-container #burger {
|
||||
}
|
||||
body header nav {
|
||||
position: absolute;
|
||||
background-color: #0b1117;
|
||||
background-color: #0e1229;
|
||||
top: -100vh;
|
||||
width: 100%;
|
||||
height: calc(100vh - 7vh);
|
||||
@@ -240,7 +240,7 @@ body header nav ul li a {
|
||||
font-size: 2.2em;
|
||||
}
|
||||
body header nav ul li.selected a {
|
||||
color: #0b1117;
|
||||
color: #0e1229;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
body header nav.mobile-nav-open {
|
||||
@@ -298,7 +298,7 @@ body main .content .projet-card a {
|
||||
width: 100%;
|
||||
}
|
||||
body main .content .projet-card a figcaption {
|
||||
color: #0b1117;
|
||||
color: #0e1229;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin-top: 5px;
|
||||
@@ -348,9 +348,6 @@ body main #index-content #main-p-index #figureslibres {
|
||||
font-family: Syne, sans-serif;
|
||||
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 {
|
||||
font-family: PlayfairDisplay, serif;
|
||||
font-style: italic;
|
||||
@@ -360,17 +357,11 @@ body main #index-content #main-p-index #sociale {
|
||||
font-weight: bold;
|
||||
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 {
|
||||
font-family: Avara, serif;
|
||||
font-weight: bold;
|
||||
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 {
|
||||
font-family: Rumeur, sans-serif;
|
||||
font-weight: bold;
|
||||
@@ -401,7 +392,7 @@ body main #index-content #extrait-projets > div div:last-of-type p {
|
||||
justify-content: center;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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-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 {
|
||||
font-family: Redaction50, serif;
|
||||
font-weight: bold;
|
||||
@@ -456,7 +444,8 @@ body main #index-content #commanditaires-grid img {
|
||||
}
|
||||
body main #index-content #arrow-container {
|
||||
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 {
|
||||
width: 45px;
|
||||
@@ -469,18 +458,13 @@ body main #index-content .container {
|
||||
overflow-y: hidden;
|
||||
height: auto;
|
||||
max-height: 0vh;
|
||||
margin-top: 0px;
|
||||
margin-top: 0vh;
|
||||
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;
|
||||
}
|
||||
body main #index-content a {
|
||||
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 {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -686,8 +670,8 @@ body main #reader hr {
|
||||
margin-bottom: 2vh;
|
||||
width: 66%;
|
||||
opacity: 0.5;
|
||||
color: #0b1117;
|
||||
background-color: #0b1117;
|
||||
color: #0e1229;
|
||||
background-color: #0e1229;
|
||||
}
|
||||
body main #reader #related-pages {
|
||||
margin-top: 5vh;
|
||||
@@ -710,8 +694,50 @@ body main #reader #related-pages #related-grid {
|
||||
body main #reader #related-pages #related-grid .card-displayed {
|
||||
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;
|
||||
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 {
|
||||
display: none;
|
||||
@@ -731,7 +757,7 @@ body footer p {
|
||||
}
|
||||
body footer p a {
|
||||
display: block;
|
||||
background: #0b1117;
|
||||
background: #0e1229;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-family: Syne, Sans-serif;
|
||||
@@ -751,7 +777,7 @@ body footer p a {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
background: #0b1117;
|
||||
background: #0e1229;
|
||||
color: #f5f5f5;
|
||||
font-size: 0.75em;
|
||||
border-radius: 0 0 10px 10px;
|
||||
@@ -827,7 +853,7 @@ body footer p a {
|
||||
margin-bottom: 5vh;
|
||||
}
|
||||
body main #reader h2#main-project-title {
|
||||
font-size: 3.8em;
|
||||
font-size: 2.9em;
|
||||
}
|
||||
body main #reader #info-project {
|
||||
margin-top: -6vh;
|
||||
@@ -844,7 +870,7 @@ body footer p a {
|
||||
width: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 2% 4%;
|
||||
grid-gap: 1em;
|
||||
}
|
||||
body main #reader #project-images-grid figure {
|
||||
margin-top: 0;
|
||||
@@ -873,6 +899,10 @@ body footer p a {
|
||||
min-height: 80px !important;
|
||||
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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -882,7 +912,7 @@ body footer p a {
|
||||
height: 4vh;
|
||||
right: 3vw;
|
||||
border-radius: 20px 20px 0 0;
|
||||
background-color: #0b1117;
|
||||
background-color: #0e1229;
|
||||
}
|
||||
body footer p {
|
||||
height: auto;
|
||||
@@ -915,7 +945,7 @@ body footer p a {
|
||||
}
|
||||
body header nav ul li {
|
||||
width: auto;
|
||||
color: #0b1117;
|
||||
color: #0e1229;
|
||||
height: 0.95em;
|
||||
z-index: 0;
|
||||
}
|
||||
@@ -943,7 +973,7 @@ body footer p a {
|
||||
width: 100%;
|
||||
padding: 4px 12px;
|
||||
transform: translateX(-12px) translateY(calc(-100% - 2px + 4px));
|
||||
background-color: #0b1117;
|
||||
background-color: #0e1229;
|
||||
border-radius: 15px;
|
||||
z-index: -1;
|
||||
transition: opacity 0.4s ease-out;
|
||||
@@ -1070,7 +1100,7 @@ body footer p a {
|
||||
}
|
||||
@media only screen and (min-width: 1500px) {
|
||||
body main #index-content #main-p-index p {
|
||||
font-size: 3.8em;
|
||||
font-size: 2.9em;
|
||||
}
|
||||
body main #index-content #arrow-container {
|
||||
margin-top: 7vh;
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -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
|
||||
);
|
||||
@@ -6,7 +6,7 @@ $(document).ready( () => {
|
||||
hoverDesktopNavItems()
|
||||
if (currentPage.text().trim() == 'Accueil') {
|
||||
hideFooter()
|
||||
animateText()
|
||||
toggleIndexContent()
|
||||
} else if (currentPage.text().trim() == 'Projets' && $('main').children(":first").attr('id') != 'reader') {
|
||||
hideFooter()
|
||||
loadProjetIndex()
|
||||
@@ -21,7 +21,6 @@ $(document).ready( () => {
|
||||
let isMobileNavOpen = false,
|
||||
isDesktopDevice = false,
|
||||
currentPage,
|
||||
indexIsReady = false,
|
||||
filterObj = {
|
||||
publiqueCardsDisplayed : true,
|
||||
socialeCardsDisplayed : true,
|
||||
@@ -66,8 +65,7 @@ function initBarba() {
|
||||
displayPictograms()
|
||||
$('html, body').scrollTop(0)
|
||||
if ($(data.next.container).attr('id') == 'index-content') {
|
||||
animateText()
|
||||
indexIsReady = false
|
||||
toggleIndexContent()
|
||||
} else if ($(data.next.container).attr('id') == 'projets-index') {
|
||||
loadProjetIndex()
|
||||
filterWhenEntering()
|
||||
@@ -281,8 +279,8 @@ function toggleIndexContent(closeEverything) {
|
||||
}
|
||||
})
|
||||
|
||||
$('#index-content canvas').click( function(event) {
|
||||
target = $(event.target).parent().attr('id')
|
||||
$('#index-content .animateText').click( function(event) {
|
||||
target = $(event.target).attr('id')
|
||||
if (target == 'publique' || target == 'sociale' || target == 'culturelle') {
|
||||
toggleExtrait(target)
|
||||
return false
|
||||
@@ -416,195 +414,6 @@ function hideContent(content) {
|
||||
}, 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
|
||||
function toggleCategory(category) {
|
||||
@@ -756,12 +565,43 @@ function filterWhenEntering() {
|
||||
|
||||
// display reader
|
||||
function displayReader() {
|
||||
$('.owl-carousel').owlCarousel()
|
||||
// initCarrousel()
|
||||
const swiper = new Swiper('.swiper', {
|
||||
// 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()
|
||||
projectTitleIsScrolling = false
|
||||
checkTitleAutoScroll()
|
||||
|
||||
|
||||
|
||||
let isProjectHeaderDisplayed = false
|
||||
|
||||
$(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
|
||||
function displayFooter() {
|
||||
$('footer').fadeIn()
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -3,10 +3,6 @@
|
||||
{% block content %}
|
||||
<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">
|
||||
{{ page.content|raw }}
|
||||
</div>
|
||||
|
||||
@@ -16,17 +16,19 @@
|
||||
{% block stylesheets %}
|
||||
{% do assets.addCss('theme://css/theme.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 %}
|
||||
|
||||
{% block javascripts %}
|
||||
{% do assets.addJs('jquery', 100) %}
|
||||
<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/blotter/blotter.min.js', 98) %}
|
||||
{% do assets.addJs('theme://js/libraries/blotter/liquidDistortMaterial.js', 97) %}
|
||||
<script src="https://unpkg.com/animate-css-grid@1.4.3"></script>
|
||||
{% 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 %}
|
||||
|
||||
{% block assets deferred %}
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -54,8 +54,8 @@
|
||||
{% block related_pages %}
|
||||
{% include 'partials/relatedpages.html.twig' %}
|
||||
{% endblock %}
|
||||
{% block carrousel %}
|
||||
{% include 'partials/carrousel.html.twig' %}
|
||||
{% block carousel %}
|
||||
{% include 'partials/carousel.html.twig' %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
{% extends 'partials/base.html.twig' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="content" id="text-content" data-barba="container" data-barba-namespace="text-content">
|
||||
{% for p in page.children.order('date', 'asc') %}
|
||||
<div class="text-item">
|
||||
{{ p.content }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% extends 'partials/base.html.twig' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="content" id="text-content" data-barba="container" data-barba-namespace="text-content">
|
||||
{% for p in page.children.order('date', 'asc') %}
|
||||
<div class="text-item">
|
||||
{{ p.content }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user