Edit indentation style

This commit is contained in:
Paul Nicoué 2022-09-09 15:19:54 +02:00
parent d916cac8c9
commit 9fc5497f33
21 changed files with 14837 additions and 14840 deletions

View file

@ -2,7 +2,7 @@ root = true
[*]
charset = utf-8
indent_style = tab
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
@ -11,6 +11,3 @@ insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[*.{yaml,yml}]
indent_style = space

File diff suppressed because it is too large Load diff

View file

@ -6,23 +6,23 @@
.k-textarea-field {
.k-toolbar {
.k-toolbar {
.k-dropdown {
.k-dropdown {
.k-button:nth-of-type(2),
.k-button:nth-of-type(3) {
display: none;
}
}
}
.k-button:nth-of-type(2),
.k-button:nth-of-type(3) {
display: none;
}
}
}
}
// Visual image crop field properties
.kirby-imagecrop-field {
.k-column:nth-of-type(2) {
display: none;
}
.k-column:nth-of-type(2) {
display: none;
}
}

View file

@ -3,34 +3,34 @@
// ----------------------------------------------------------------------------
@keyframes expand-outline {
from {
outline-offset: 0;
}
to {
outline-offset: 2px;
}
from {
outline-offset: 0;
}
to {
outline-offset: 2px;
}
}
@keyframes wave-up {
0% {
top: 0;
}
60% {
top: -0.5rem;
}
100% {
top: 0;
}
0% {
top: 0;
}
60% {
top: -0.5rem;
}
100% {
top: 0;
}
}
@keyframes wave-down {
0% {
bottom: 0;
}
60% {
bottom: -0.5rem;
}
100% {
bottom: 0;
}
0% {
bottom: 0;
}
60% {
bottom: -0.5rem;
}
100% {
bottom: 0;
}
}

View file

@ -5,66 +5,66 @@
// Nunito
@font-face {
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-Regular.ttf) format('truetype');
font-weight: 400;
font-style: normal;
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-Regular.ttf) format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-Italic.ttf) format('truetype');
font-weight: 400;
font-style: italic;
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-Italic.ttf) format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-Medium.ttf) format('truetype');
font-weight: 500;
font-style: normal;
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-Medium.ttf) format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-MediumItalic.ttf) format('truetype');
font-weight: 500;
font-style: italic;
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-MediumItalic.ttf) format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-SemiBold.ttf) format('truetype');
font-weight: 600;
font-style: normal;
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-SemiBold.ttf) format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-SemiBoldItalic.ttf) format('truetype');
font-weight: 600;
font-style: italic;
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-SemiBoldItalic.ttf) format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-Bold.ttf) format('truetype');
font-weight: 700;
font-style: normal;
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-Bold.ttf) format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-BoldItalic.ttf) format('truetype');
font-weight: 700;
font-style: italic;
font-family: 'Nunito';
src: url(../../fonts/nunito/Nunito-BoldItalic.ttf) format('truetype');
font-weight: 700;
font-style: italic;
}
// Gloria Hallelujah
@font-face {
font-family: 'Gloria Hallelujah';
src: url(../../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format('truetype');
font-weight: 400;
font-style: normal;
font-family: 'Gloria Hallelujah';
src: url(../../fonts/gloria-hallelujah/GloriaHallelujah-Regular.ttf) format('truetype');
font-weight: 400;
font-style: normal;
}

View file

@ -4,59 +4,59 @@
:root {
// Fonts
// Fonts
--text-font-family: 'Nunito', Verdana, sans-serif;
--logo-font-family: 'Gloria Hallelujah', Verdana, sans-serif;
--regular-font-weight: 400;
--medium-font-weight: 500;
--semi-bold-font-weight: 600;
--bold-font-weight: 700;
--text-font-size: 1rem;
--caption-font-size: 0.9rem;
--footnote-font-size: 0.8rem;
--text-line-height: 1.4rem;
--h1-font-size: 1.8rem;
--h2-font-size: 1.4rem;
--h3-font-size: 1.2rem;
--text-font-family: 'Nunito', Verdana, sans-serif;
--logo-font-family: 'Gloria Hallelujah', Verdana, sans-serif;
--regular-font-weight: 400;
--medium-font-weight: 500;
--semi-bold-font-weight: 600;
--bold-font-weight: 700;
--text-font-size: 1rem;
--caption-font-size: 0.9rem;
--footnote-font-size: 0.8rem;
--text-line-height: 1.4rem;
--h1-font-size: 1.8rem;
--h2-font-size: 1.4rem;
--h3-font-size: 1.2rem;
// Dimensions
// Dimensions
--content-max-width: 140rem;
--text-max-width: 70rem;
--icon-size: 2.5rem;
--header-bar-vertical-padding: 1rem;
--header-bar-horizontal-padding: 2rem;
--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--icon-size));
--footer-bar-vertical-padding: 1rem;
--footer-bar-horizontal-padding: 2rem;
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));
--generic-section-vertical-padding: 3rem;
--generic-section-horizontal-padding: 2rem;
--home-section-vertical-padding: 2rem;
--home-section-horizontal-padding: 2rem;
--home-section-min-height: calc(100vh - var(--header-bar-height) - var(--footer-bar-height));
--home-nav-gap: 1rem;
--home-nav-item-size: 2rem;
--home-nav-item-translation: 0;
--home-nav-image-max-height: calc(100vh - var(--header-bar-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-bar-height));
--content-max-width: 140rem;
--text-max-width: 70rem;
--icon-size: 2.5rem;
--header-bar-vertical-padding: 1rem;
--header-bar-horizontal-padding: 2rem;
--header-bar-height: calc((var(--header-bar-vertical-padding) * 2) + var(--icon-size));
--footer-bar-vertical-padding: 1rem;
--footer-bar-horizontal-padding: 2rem;
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size) + 1rem + var(--text-font-size));
--generic-section-vertical-padding: 3rem;
--generic-section-horizontal-padding: 2rem;
--home-section-vertical-padding: 2rem;
--home-section-horizontal-padding: 2rem;
--home-section-min-height: calc(100vh - var(--header-bar-height) - var(--footer-bar-height));
--home-nav-gap: 1rem;
--home-nav-item-size: 2rem;
--home-nav-item-translation: 0;
--home-nav-image-max-height: calc(100vh - var(--header-bar-height) - ((var(--generic-section-vertical-padding) + var(--home-nav-item-size) + var(--home-nav-gap)) * 2) - var(--footer-bar-height));
// Colors
// Colors
--black: #000;
--transparent-black: rgba(0, 0, 0, 0.8);
--jet: #333333;
--transparent-jet: rgba(51, 51, 51, 0.8);
--granite-gray: #666666;
--spanish-gray: #999999;
--light-gray: #cccccc;
--white: #fff;
--transparent-white: rgba(255, 255, 255, 0.8);
--black: #000;
--transparent-black: rgba(0, 0, 0, 0.8);
--jet: #333333;
--transparent-jet: rgba(51, 51, 51, 0.8);
--granite-gray: #666666;
--spanish-gray: #999999;
--light-gray: #cccccc;
--white: #fff;
--transparent-white: rgba(255, 255, 255, 0.8);
// Plyr (audio player)
// Plyr (audio player)
--plyr-color-main: var(--transparent-jet);
--plyr-tab-focus-color: var(--white);
--plyr-color-main: var(--transparent-jet);
--plyr-tab-focus-color: var(--white);
}
// Media queries
@ -66,26 +66,26 @@ $desktop-media-query: 62rem;
@media screen and (min-width: $tablet-media-query) {
:root {
:root {
// Fonts
// Fonts
--text-font-size: 1.2rem;
--caption-font-size: 1.1rem;
--footnote-font-size: 1rem;
--h1-font-size: 2rem;
--h2-font-size: 1.6rem;
--h3-font-size: 1.4rem;
--text-font-size: 1.2rem;
--caption-font-size: 1.1rem;
--footnote-font-size: 1rem;
--h1-font-size: 2rem;
--h2-font-size: 1.6rem;
--h3-font-size: 1.4rem;
// Dimensions
// Dimensions
--icon-size: 3rem;
--header-bar-vertical-padding: 2rem;
--header-bar-horizontal-padding: 4rem;
--footer-bar-vertical-padding: 2rem;
--footer-bar-horizontal-padding: 4rem;
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size));
--generic-section-horizontal-padding: 4rem;
--home-section-horizontal-padding: 4rem;
}
--icon-size: 3rem;
--header-bar-vertical-padding: 2rem;
--header-bar-horizontal-padding: 4rem;
--footer-bar-vertical-padding: 2rem;
--footer-bar-horizontal-padding: 4rem;
--footer-bar-height: calc((var(--footer-bar-vertical-padding) * 2) + var(--icon-size));
--generic-section-horizontal-padding: 4rem;
--home-section-horizontal-padding: 4rem;
}
}

View file

@ -25,8 +25,8 @@ h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
margin: 0;
padding: 0;
}
h1,
@ -35,44 +35,44 @@ h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
font-size: 100%;
font-weight: normal;
}
ul {
list-style: none;
list-style: none;
}
button,
input,
select {
margin: 0;
margin: 0;
}
html {
box-sizing: border-box;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
box-sizing: inherit;
}
img,
video {
height: auto;
max-width: 100%;
height: auto;
max-width: 100%;
}
iframe {
border: 0;
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
padding: 0;
}

View file

@ -32,8 +32,8 @@ const headerNavMenu = document.querySelector('.header-bar__nav-menu');
const headerNavMenuListEls = document.querySelectorAll('.header-bar__nav-menu li');
const headerNavOverlay = document.querySelector('.header-bar__nav-overlay');
const touchPosition = {
initialX: null,
initialY: null
initialX: null,
initialY: null
};
// ----------------------------------------------------------------------------
@ -42,8 +42,8 @@ const touchPosition = {
// Convert rem to pixels by getting font-size CSS property
function convertRemToPixels(rem) {
let fontSize = parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'));
return rem * fontSize;
let fontSize = parseFloat(window.getComputedStyle(document.body).getPropertyValue('font-size'));
return rem * fontSize;
}
// ----------------------------------------------------------------------------
@ -54,282 +54,282 @@ function convertRemToPixels(rem) {
// Calculate navigation grid inner width
function calculateNavGridInnerWidth() {
if (root && navImage) {
let navGridGapProperty = window.getComputedStyle(root).getPropertyValue('--home-nav-gap');
let navGridGap = parseFloat(navGridGapProperty.slice(0, -3));
return navImage.getBoundingClientRect().width + (convertRemToPixels(navGridGap) * 2);
}
if (root && navImage) {
let navGridGapProperty = window.getComputedStyle(root).getPropertyValue('--home-nav-gap');
let navGridGap = parseFloat(navGridGapProperty.slice(0, -3));
return navImage.getBoundingClientRect().width + (convertRemToPixels(navGridGap) * 2);
}
}
// Calculate navigation grid inner diagonal
function calculateNavGridInnerDiagonal() {
return calculateNavGridInnerWidth() * Math.sqrt(2);
return calculateNavGridInnerWidth() * Math.sqrt(2);
}
// Create new instance of CircleType for each navigation link, set radius and direction
function curveNavLinks() {
if (navLinks.length !== 0 && circleTypes) {
for (let i = 0; i < (navLinks.length - 2); i++) {
circleTypes[i] = new CircleType(navLinks[i]);
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
}
for (let i = (navLinks.length - 2); i < navLinks.length; i++) {
circleTypes[i] = new CircleType(navLinks[i]);
circleTypes[i].dir(-1);
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
}
}
if (navLinks.length !== 0 && circleTypes) {
for (let i = 0; i < (navLinks.length - 2); i++) {
circleTypes[i] = new CircleType(navLinks[i]);
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
}
for (let i = (navLinks.length - 2); i < navLinks.length; i++) {
circleTypes[i] = new CircleType(navLinks[i]);
circleTypes[i].dir(-1);
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
}
}
}
// Set --home-nav-item-translation CSS property
function setNavItemTranslationProperty() {
let navItemTranslation = (calculateNavGridInnerDiagonal() - calculateNavGridInnerWidth()) / 2;
if (root) {
root.style.setProperty('--home-nav-item-translation', navItemTranslation + 'px');
}
let navItemTranslation = (calculateNavGridInnerDiagonal() - calculateNavGridInnerWidth()) / 2;
if (root) {
root.style.setProperty('--home-nav-item-translation', navItemTranslation + 'px');
}
}
// Set navigation grid display depending on number of links
function setNavGridDisplay() {
if (navEl && navLinks.length !== 0) {
if (navLinks.length === 2) {
navEl.classList.add('home__nav--2-items');
} else if (navLinks.length === 3) {
navEl.classList.add('home__nav--3-items');
} else if (navLinks.length === 4) {
navEl.classList.add('home__nav--4-items');
}
for (let i = 0; i < navLinks.length; i++) {
navLinks[i].classList.add('home__nav-link--visible');
}
}
if (navEl && navLinks.length !== 0) {
if (navLinks.length === 2) {
navEl.classList.add('home__nav--2-items');
} else if (navLinks.length === 3) {
navEl.classList.add('home__nav--3-items');
} else if (navLinks.length === 4) {
navEl.classList.add('home__nav--4-items');
}
for (let i = 0; i < navLinks.length; i++) {
navLinks[i].classList.add('home__nav-link--visible');
}
}
}
// Edit navigation links radius and translation on window resize event
function editNavLinksOnResize() {
window.addEventListener('resize', function(e) {
if (navLinks.length !== 0 && circleTypes) {
for (let i = 0; i < navLinks.length; i++) {
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
}
}
setNavItemTranslationProperty();
});
window.addEventListener('resize', function(e) {
if (navLinks.length !== 0 && circleTypes) {
for (let i = 0; i < navLinks.length; i++) {
circleTypes[i].radius(calculateNavGridInnerWidth() / 2);
}
}
setNavItemTranslationProperty();
});
}
// Add wave up animation to a single letter and remove it on animationend event
function waveNavLetterUp(navLetter) {
navLetter.classList.add('home__nav-letter--wave-up');
navLetter.addEventListener('animationend', function(e) {
navLetter.classList.remove('home__nav-letter--wave-up');
});
navLetter.classList.add('home__nav-letter--wave-up');
navLetter.addEventListener('animationend', function(e) {
navLetter.classList.remove('home__nav-letter--wave-up');
});
}
// Add wave down animation to a single letter and remove it on animationend event
function waveNavLetterDown(navLetter) {
navLetter.classList.add('home__nav-letter--wave-down');
navLetter.addEventListener('animationend', function(e) {
navLetter.classList.remove('home__nav-letter--wave-down');
});
navLetter.classList.add('home__nav-letter--wave-down');
navLetter.addEventListener('animationend', function(e) {
navLetter.classList.remove('home__nav-letter--wave-down');
});
}
// Add wave up animation to every letters of a single link with a slight delay
function waveNavLinkUp(navLink) {
let navLinkLetters = navLink.querySelectorAll('span');
let animationDelay = 0;
for (let i = 0; i < navLinkLetters.length; i++) {
setTimeout(waveNavLetterUp, animationDelay, navLinkLetters[i]);
animationDelay += 50;
}
let navLinkLetters = navLink.querySelectorAll('span');
let animationDelay = 0;
for (let i = 0; i < navLinkLetters.length; i++) {
setTimeout(waveNavLetterUp, animationDelay, navLinkLetters[i]);
animationDelay += 50;
}
}
// Add wave down animation to every letters of a single link with a slight delay
function waveNavLinkDown(navLink) {
let navLinkLetters = navLink.querySelectorAll('span');
let animationDelay = 0;
for (let i = 0; i < navLinkLetters.length; i++) {
setTimeout(waveNavLetterDown, animationDelay, navLinkLetters[i]);
animationDelay += 50;
}
let navLinkLetters = navLink.querySelectorAll('span');
let animationDelay = 0;
for (let i = 0; i < navLinkLetters.length; i++) {
setTimeout(waveNavLetterDown, animationDelay, navLinkLetters[i]);
animationDelay += 50;
}
}
// Add wave (up or down) animation to every letters of each link on mouseover event
function waveNavLinksOnHover() {
if (navLinks.length !== 0) {
for (let i = 0; i < (navLinks.length - 2); i++) {
navLinks[i].addEventListener('mouseover', function(e) {
waveNavLinkUp(navLinks[i]);
});
}
for (let i = (navLinks.length - 2); i < navLinks.length; i++) {
navLinks[i].addEventListener('mouseover', function(e) {
waveNavLinkDown(navLinks[i]);
});
}
}
if (navLinks.length !== 0) {
for (let i = 0; i < (navLinks.length - 2); i++) {
navLinks[i].addEventListener('mouseover', function(e) {
waveNavLinkUp(navLinks[i]);
});
}
for (let i = (navLinks.length - 2); i < navLinks.length; i++) {
navLinks[i].addEventListener('mouseover', function(e) {
waveNavLinkDown(navLinks[i]);
});
}
}
}
// VIDEO PLAYERS //
// Set up Plyr video players
function setUpVideoPlayers() {
if (galleryVideos.length !== 0) {
videoPlayers = Plyr.setup(galleryVideos, {
controls: [
'play-large',
'play',
'progress',
'current-time',
'duration',
'mute',
'volume',
'fullscreen'
],
i18n: {
play: 'Lire',
pause: 'Mettre sur pause',
seek: 'Parcourir la piste audio',
currentTime: 'Temps écoulé depuis le début de la piste audio',
duration: 'Durée de la piste audio',
volume: 'Ajuster le volume',
mute: 'Couper le son',
unmute: 'Activer le son',
enterFullscreen: 'Activer le mode plein écran',
exitFullscreen: 'Quitter le mode plein écran'
}
});
}
if (galleryVideos.length !== 0) {
videoPlayers = Plyr.setup(galleryVideos, {
controls: [
'play-large',
'play',
'progress',
'current-time',
'duration',
'mute',
'volume',
'fullscreen'
],
i18n: {
play: 'Lire',
pause: 'Mettre sur pause',
seek: 'Parcourir la piste audio',
currentTime: 'Temps écoulé depuis le début de la piste audio',
duration: 'Durée de la piste audio',
volume: 'Ajuster le volume',
mute: 'Couper le son',
unmute: 'Activer le son',
enterFullscreen: 'Activer le mode plein écran',
exitFullscreen: 'Quitter le mode plein écran'
}
});
}
}
// Toggle videos full screen mode on Plyr enterfullscreen and exitfullscreen media events
function toggleVideosFullScreen() {
if (videoPlayers.length !== 0) {
for (let i = 0; i < videoPlayers.length; i++) {
videoPlayers[i].on('enterfullscreen', function(e) {
galleryVideos[i].classList.add('gallery__video--full-screen');
});
videoPlayers[i].on('exitfullscreen', function(e) {
galleryVideos[i].classList.remove('gallery__video--full-screen');
});
}
}
if (videoPlayers.length !== 0) {
for (let i = 0; i < videoPlayers.length; i++) {
videoPlayers[i].on('enterfullscreen', function(e) {
galleryVideos[i].classList.add('gallery__video--full-screen');
});
videoPlayers[i].on('exitfullscreen', function(e) {
galleryVideos[i].classList.remove('gallery__video--full-screen');
});
}
}
}
// HEADER BAR ANIMATION //
// Toggle header bar depending on scroll offset
function toggleHeaderBar() {
if (headerBar && headerLogo) {
let headerBarHeight = headerBar.getBoundingClientRect().height;
if (window.pageYOffset > headerBarHeight) { // Scroll down past header bar height
headerBar.classList.add('header-bar--fixed');
headerLogo.classList.add('header-bar__logo--small');
} else if (window.pageYOffset <= 0) {
headerBar.classList.remove('header-bar--fixed');
headerLogo.classList.remove('header-bar__logo--small');
headerBar.classList.remove('header-bar--visible');
}
if (headerBar.classList.contains('header-bar--fixed')) {
if (scrollOffset < window.pageYOffset) { // Scroll down
headerBar.classList.remove('header-bar--visible');
} else if (scrollOffset > window.pageYOffset) { // Scroll up
headerBar.classList.add('header-bar--visible');
}
scrollOffset = window.pageYOffset;
}
}
if (headerBar && headerLogo) {
let headerBarHeight = headerBar.getBoundingClientRect().height;
if (window.pageYOffset > headerBarHeight) { // Scroll down past header bar height
headerBar.classList.add('header-bar--fixed');
headerLogo.classList.add('header-bar__logo--small');
} else if (window.pageYOffset <= 0) {
headerBar.classList.remove('header-bar--fixed');
headerLogo.classList.remove('header-bar__logo--small');
headerBar.classList.remove('header-bar--visible');
}
if (headerBar.classList.contains('header-bar--fixed')) {
if (scrollOffset < window.pageYOffset) { // Scroll down
headerBar.classList.remove('header-bar--visible');
} else if (scrollOffset > window.pageYOffset) { // Scroll up
headerBar.classList.add('header-bar--visible');
}
scrollOffset = window.pageYOffset;
}
}
}
// NAVIGATION MENU ANIMATION //
// Toggle header navigation
function toggleHeaderNav() {
if (headerNavBtn && headerNavMenu) {
headerNavBtn.classList.toggle('header-bar__nav-button--custom-focus');
headerNavMenu.classList.toggle('header-bar__nav-menu--visible');
headerNavOverlay.classList.toggle('header-bar__nav-overlay--visible');
document.body.classList.toggle('body--hidden-overflow-y');
}
if (headerNavBtn && headerNavMenu) {
headerNavBtn.classList.toggle('header-bar__nav-button--custom-focus');
headerNavMenu.classList.toggle('header-bar__nav-menu--visible');
headerNavOverlay.classList.toggle('header-bar__nav-overlay--visible');
document.body.classList.toggle('body--hidden-overflow-y');
}
}
// Open header navigation
function openHeaderNav() {
if (headerNavBtn && headerNavMenu) {
headerNavBtn.classList.add('header-bar__nav-button--custom-focus');
headerNavMenu.classList.add('header-bar__nav-menu--visible');
headerNavOverlay.classList.add('header-bar__nav-overlay--visible');
document.body.classList.add('body--hidden-overflow-y');
}
if (headerNavBtn && headerNavMenu) {
headerNavBtn.classList.add('header-bar__nav-button--custom-focus');
headerNavMenu.classList.add('header-bar__nav-menu--visible');
headerNavOverlay.classList.add('header-bar__nav-overlay--visible');
document.body.classList.add('body--hidden-overflow-y');
}
}
// Close header navigation
function closeHeaderNav() {
if (headerNavBtn && headerNavMenu) {
headerNavBtn.classList.remove('header-bar__nav-button--custom-focus');
headerNavMenu.classList.remove('header-bar__nav-menu--visible');
headerNavOverlay.classList.remove('header-bar__nav-overlay--visible');
document.body.classList.remove('body--hidden-overflow-y');
}
if (headerNavBtn && headerNavMenu) {
headerNavBtn.classList.remove('header-bar__nav-button--custom-focus');
headerNavMenu.classList.remove('header-bar__nav-menu--visible');
headerNavOverlay.classList.remove('header-bar__nav-overlay--visible');
document.body.classList.remove('body--hidden-overflow-y');
}
}
// Toggle header navigation on button click event
function toggleHeaderNavOnClick() {
headerNavBtn.addEventListener('click', toggleHeaderNav);
headerNavBtn.addEventListener('click', toggleHeaderNav);
}
// Close header navigation on document click event
function closeHeaderNavOnClick() {
document.addEventListener('click', function(e) {
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && !headerNavBtn.contains(e.target) && !headerNavMenu.contains(e.target)) {
closeHeaderNav(e);
if (e.cancelable) {
e.preventDefault();
}
}
});
document.addEventListener('click', function(e) {
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && !headerNavBtn.contains(e.target) && !headerNavMenu.contains(e.target)) {
closeHeaderNav(e);
if (e.cancelable) {
e.preventDefault();
}
}
});
}
// Open header navigation on menu list focusin event
function openHeaderNavBeforeFocus() {
if (headerNavMenuListEls) {
for (let i = 0; i < headerNavMenuListEls.length; i++) {
headerNavMenuListEls[i].addEventListener('focusin', openHeaderNav);
}
}
if (headerNavMenuListEls) {
for (let i = 0; i < headerNavMenuListEls.length; i++) {
headerNavMenuListEls[i].addEventListener('focusin', openHeaderNav);
}
}
}
// Close header navigation on menu list focusout event
function closeHeaderNavAfterFocus() {
if (headerNavMenuListEls) {
for (let i = 0; i < headerNavMenuListEls.length; i++) {
headerNavMenuListEls[i].addEventListener('focusout', closeHeaderNav);
}
}
if (headerNavMenuListEls) {
for (let i = 0; i < headerNavMenuListEls.length; i++) {
headerNavMenuListEls[i].addEventListener('focusout', closeHeaderNav);
}
}
}
// Close header navigation on touchstart and touchmove events (swipe right)
function closeHeaderNavOnSwipe() {
headerNavMenu.addEventListener('touchstart', function(e) {
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && touchPosition.initialX === null && touchPosition.initialY === null) {
touchPosition.initialX = event.touches[0].clientX;
touchPosition.initialY = event.touches[0].clientY;
}
}, {passive: true});
headerNavMenu.addEventListener('touchmove', function(e) {
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && touchPosition.initialX !== null && touchPosition.initialY !== null) {
touchPosition.currentX = event.touches[0].clientX;
touchPosition.currentY = event.touches[0].clientY;
touchPosition.diffX = touchPosition.initialX - touchPosition.currentX;
touchPosition.diffY = touchPosition.initialY - touchPosition.currentY;
if (Math.abs(touchPosition.diffX) > Math.abs(touchPosition.diffY)) {
if (touchPosition.diffX < 0) {
closeHeaderNav(e);
}
}
touchPosition.initialX = null;
touchPosition.initialY = null;
}
}, {passive: true});
headerNavMenu.addEventListener('touchstart', function(e) {
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && touchPosition.initialX === null && touchPosition.initialY === null) {
touchPosition.initialX = event.touches[0].clientX;
touchPosition.initialY = event.touches[0].clientY;
}
}, {passive: true});
headerNavMenu.addEventListener('touchmove', function(e) {
if (headerNavBtn.classList.contains('header-bar__nav-button--custom-focus') && headerNavMenu.classList.contains('header-bar__nav-menu--visible') && touchPosition.initialX !== null && touchPosition.initialY !== null) {
touchPosition.currentX = event.touches[0].clientX;
touchPosition.currentY = event.touches[0].clientY;
touchPosition.diffX = touchPosition.initialX - touchPosition.currentX;
touchPosition.diffY = touchPosition.initialY - touchPosition.currentY;
if (Math.abs(touchPosition.diffX) > Math.abs(touchPosition.diffY)) {
if (touchPosition.diffX < 0) {
closeHeaderNav(e);
}
}
touchPosition.initialX = null;
touchPosition.initialY = null;
}
}, {passive: true});
}
// ----------------------------------------------------------------------------
@ -342,11 +342,11 @@ document.addEventListener("touchstart", function() {},false);
// HOME NAVIGATION DISPLAY //
window.addEventListener('load', function() {
curveNavLinks();
setNavItemTranslationProperty();
setNavGridDisplay();
editNavLinksOnResize();
waveNavLinksOnHover();
curveNavLinks();
setNavItemTranslationProperty();
setNavGridDisplay();
editNavLinksOnResize();
waveNavLinksOnHover();
});
// VIDEO PLAYERS //
@ -357,7 +357,7 @@ toggleVideosFullScreen();
// HEADER BAR ANIMATION //
document.addEventListener('scroll', function() {
toggleHeaderBar();
toggleHeaderBar();
});
// NAVIGATION MENU ANIMATION //

View file

@ -1,33 +1,33 @@
{
"name": "paulnicoue/xiaowang",
"description": "Xiao Wang",
"type": "project",
"homepage": "https://xiaowang.fr",
"authors": [
{
"name": "Paul Nicoué",
"email": "contact@paulnicoue.com",
"homepage": "https://paulnicoue.com"
}
],
"require": {
"php": ">=7.3.0 <8.1.0",
"getkirby/cms": "^3.5",
"amteich/kirby-twig": "^4.1",
"sylvainjule/matomo": "^1.0",
"kirbyzone/sitemapper": "^1.2",
"mullema/k3-image-clip": "^3.0"
},
"scripts": {
"start": [
"Composer\\Config::disableProcessTimeout",
"@php -S localhost:8000 kirby/router.php"
]
},
"config": {
"optimize-autoloader": true,
"allow-plugins": {
"getkirby/composer-installer": true
}
}
"name": "paulnicoue/xiaowang",
"description": "Xiao Wang",
"type": "project",
"homepage": "https://xiaowang.fr",
"authors": [
{
"name": "Paul Nicoué",
"email": "contact@paulnicoue.com",
"homepage": "https://paulnicoue.com"
}
],
"require": {
"php": ">=7.3.0 <8.1.0",
"getkirby/cms": "^3.5",
"amteich/kirby-twig": "^4.1",
"sylvainjule/matomo": "^1.0",
"kirbyzone/sitemapper": "^1.2",
"mullema/k3-image-clip": "^3.0"
},
"scripts": {
"start": [
"Composer\\Config::disableProcessTimeout",
"@php -S localhost:8000 kirby/router.php"
]
},
"config": {
"optimize-autoloader": true,
"allow-plugins": {
"getkirby/composer-installer": true
}
}
}

27334
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -1,26 +1,26 @@
{
"browserslist": [
"> 0.5%",
"last 4 versions",
"Firefox ESR",
"not dead"
],
"devDependencies": {
"@symfony/webpack-encore": "^3.0.0",
"autoprefixer": "^10.4.7",
"circletype": "^2.3.0",
"core-js": "^3.23.4",
"plyr": "^3.7.2",
"postcss-loader": "^7.0.1",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"webpack-notifier": "^1.15.0"
},
"private": true,
"scripts": {
"build": "encore production --progress",
"dev": "encore dev",
"dev-server": "encore dev-server",
"watch": "encore dev --watch"
}
"browserslist": [
"> 0.5%",
"last 4 versions",
"Firefox ESR",
"not dead"
],
"devDependencies": {
"@symfony/webpack-encore": "^3.0.0",
"autoprefixer": "^10.4.7",
"circletype": "^2.3.0",
"core-js": "^3.23.4",
"plyr": "^3.7.2",
"postcss-loader": "^7.0.1",
"sass": "^1.53.0",
"sass-loader": "^13.0.2",
"webpack-notifier": "^1.15.0"
},
"private": true,
"scripts": {
"build": "encore production --progress",
"dev": "encore dev",
"dev-server": "encore dev-server",
"watch": "encore dev --watch"
}
}

View file

@ -1,5 +1,5 @@
module.exports = {
plugins: {
autoprefixer: {} // Browserlist configuration is defined in package.json
}
plugins: {
autoprefixer: {} // Browserlist configuration is defined in package.json
}
}

View file

@ -1,16 +1,16 @@
{
"name": "Xiao Wang",
"short_name": "Xiao Wang",
"icons": [
{
"src": "xiao-wang-favicon-192px.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "xiao-wang-favicon-512px.png",
"sizes": "512x512",
"type": "image/png"
}
]
"name": "Xiao Wang",
"short_name": "Xiao Wang",
"icons": [
{
"src": "xiao-wang-favicon-192px.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "xiao-wang-favicon-512px.png",
"sizes": "512x512",
"type": "image/png"
}
]
}

View file

@ -1,42 +1,42 @@
<?php
return [
// Kirby configuration settings
'home' => 'accueil',
'error' => 'erreur',
'panel' => [
'language' => 'fr',
'css' => 'build/panel.css'
],
// Sitemapper plugin options
'kirbyzone.sitemapper' => [
'intro' => false,
'byLine' => 'Sitemap generated with <a href="https://github.com/kirbyzone/sitemapper" target="_blank">Sitemapper by Kirbyzone</a>.'
],
// Hooks
'hooks' => [
'file.create:after' => function($file) {
// Populate file_type field with $file->type() method after file creation
if ($file->type()) {
$file->update([
'file_type' => $file->type()
]);
}
},
'kirbytext:after' => function (string $text) {
// Replace any HTML <h1> or <h2> tag by <h3> tag after Markdown parsing
return preg_replace(['/<h1>|<h2>/', '/<\/h1>|<\/h2>/'], ['<h3>', '</h3>'], $text);
}
],
// Thumbnails and srcsets presets
'thumbs' => [
'srcsets' => [
'default' => [
'640w' => ['width' => 640, 'quality' => 80],
'1280w' => ['width' => 1280, 'quality' => 80],
'1920w' => ['width' => 1920, 'quality' => 80],
'2560w' => ['width' => 2560, 'quality' => 80]
]
]
]
// Kirby configuration settings
'home' => 'accueil',
'error' => 'erreur',
'panel' => [
'language' => 'fr',
'css' => 'build/panel.css'
],
// Sitemapper plugin options
'kirbyzone.sitemapper' => [
'intro' => false,
'byLine' => 'Sitemap generated with <a href="https://github.com/kirbyzone/sitemapper" target="_blank">Sitemapper by Kirbyzone</a>.'
],
// Hooks
'hooks' => [
'file.create:after' => function($file) {
// Populate file_type field with $file->type() method after file creation
if ($file->type()) {
$file->update([
'file_type' => $file->type()
]);
}
},
'kirbytext:after' => function (string $text) {
// Replace any HTML <h1> or <h2> tag by <h3> tag after Markdown parsing
return preg_replace(['/<h1>|<h2>/', '/<\/h1>|<\/h2>/'], ['<h3>', '</h3>'], $text);
}
],
// Thumbnails and srcsets presets
'thumbs' => [
'srcsets' => [
'default' => [
'640w' => ['width' => 640, 'quality' => 80],
'1280w' => ['width' => 1280, 'quality' => 80],
'1920w' => ['width' => 1920, 'quality' => 80],
'2560w' => ['width' => 2560, 'quality' => 80]
]
]
]
];

View file

@ -11,11 +11,11 @@
{# Description #}
{% if page.meta_description is not empty %}
<meta name="description" content="{{ page.meta_description }}">
<meta id="schema_description" itemprop="description" content="{{ page.meta_description }}">
<meta name="description" content="{{ page.meta_description }}">
<meta id="schema_description" itemprop="description" content="{{ page.meta_description }}">
{% elseif site.homePage.meta_description is not empty %}
<meta name="description" content="{{ site.homePage.meta_description }}">
<meta id="schema_description" itemprop="description" content="{{ site.homePage.meta_description }}">
<meta name="description" content="{{ site.homePage.meta_description }}">
<meta id="schema_description" itemprop="description" content="{{ site.homePage.meta_description }}">
{% endif %}
{# Canonical URL #}
@ -29,44 +29,44 @@
{# Image #}
{% if page.meta_image is not empty %}
<meta id="schema_image" itemprop="image" content="{{ page.meta_image.toImage.url }}">
<meta id="schema_image" itemprop="image" content="{{ page.meta_image.toImage.url }}">
{% elseif site.homePage.meta_image is not empty %}
<meta id="schema_image" itemprop="image" content="{{ site.homePage.meta_image.toImage.url }}">
<meta id="schema_image" itemprop="image" content="{{ site.homePage.meta_image.toImage.url }}">
{% endif %}
{% if page.template != 'error' %}
{# Open Graph #}
<meta property="og:title" content="{{ site.title ~ ' | ' ~ page.title }}">
{% if page.meta_description is not empty %}
<meta property="og:description" content="{{ page.meta_description }}">
{% elseif site.homePage.meta_description is not empty %}
<meta property="og:description" content="{{ site.homePage.meta_description }}">
{% endif %}
{% if page.meta_image is not empty %}
<meta property="og:image" content="{{ page.meta_image.toImage.clip(1200, 675).url }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="675">
{% elseif site.homePage.meta_image is not empty %}
<meta property="og:image" content="{{ site.homePage.meta_image.toImage.clip(1200, 675).url }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="675">
{% endif %}
<meta property="og:url" content="{{ page.url }}">
<meta property="og:type" content="{{ page.og_type }}">
{# Open Graph #}
<meta property="og:title" content="{{ site.title ~ ' | ' ~ page.title }}">
{% if page.meta_description is not empty %}
<meta property="og:description" content="{{ page.meta_description }}">
{% elseif site.homePage.meta_description is not empty %}
<meta property="og:description" content="{{ site.homePage.meta_description }}">
{% endif %}
{% if page.meta_image is not empty %}
<meta property="og:image" content="{{ page.meta_image.toImage.clip(1200, 675).url }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="675">
{% elseif site.homePage.meta_image is not empty %}
<meta property="og:image" content="{{ site.homePage.meta_image.toImage.clip(1200, 675).url }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="675">
{% endif %}
<meta property="og:url" content="{{ page.url }}">
<meta property="og:type" content="{{ page.og_type }}">
{# Twitter Card #}
<meta name="twitter:card" content="{{ page.twitter_card_type.value }}">
<meta name="twitter:title" content="{{ site.title ~ ' | ' ~ page.title }}">
{% if page.meta_description is not empty %}
<meta name="twitter:description" content="{{ page.meta_description }}">
{% elseif site.homePage.meta_description is not empty %}
<meta name="twitter:description" content="{{ site.homePage.meta_description }}">
{% endif %}
{% if page.meta_image is not empty %}
<meta name="twitter:image" content="{{ page.meta_image.toImage.clip(1200, 675).url }}">
{% elseif site.homePage.meta_image is not empty %}
<meta name="twitter:image" content="{{ site.homePage.meta_image.toImage.clip(1200, 675).url }}">
{% endif %}
{# Twitter Card #}
<meta name="twitter:card" content="{{ page.twitter_card_type.value }}">
<meta name="twitter:title" content="{{ site.title ~ ' | ' ~ page.title }}">
{% if page.meta_description is not empty %}
<meta name="twitter:description" content="{{ page.meta_description }}">
{% elseif site.homePage.meta_description is not empty %}
<meta name="twitter:description" content="{{ site.homePage.meta_description }}">
{% endif %}
{% if page.meta_image is not empty %}
<meta name="twitter:image" content="{{ page.meta_image.toImage.clip(1200, 675).url }}">
{% elseif site.homePage.meta_image is not empty %}
<meta name="twitter:image" content="{{ site.homePage.meta_image.toImage.clip(1200, 675).url }}">
{% endif %}
{% endif %}

View file

@ -4,148 +4,148 @@
<head>
{{ snippet('metadata') }}
{{ snippet('favicon') }}
{{ snippet('metadata') }}
{{ snippet('favicon') }}
{# CSS #}
{% block stylesheets %}
<link rel="stylesheet" href="build/main.css">
{% endblock %}
{# CSS #}
{% block stylesheets %}
<link rel="stylesheet" href="build/main.css">
{% endblock %}
{# JavaScript #}
{% block scripts %}
<script src="build/app.js" defer></script>
{% endblock %}
{# JavaScript #}
{% block scripts %}
<script src="build/app.js" defer></script>
{% endblock %}
{# Matomo #}
<script>
var _paq = window._paq = window._paq || [];
_paq.push(['disableCookies']);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//matomo.paulnicoue.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '2']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
{# Matomo #}
<script>
var _paq = window._paq = window._paq || [];
_paq.push(['disableCookies']);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//matomo.paulnicoue.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '2']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
</head>
<body>
{% block header %}
<header>
{% block header %}
<header>
<div class="header-bar">
<div class="header-bar">
<div class="header-bar__logo" aria-hidden="true">
<a class="header-bar__logo-link" href="{{ site.homePage.url }}" target="_self" aria-label="Accéder à la page d'accueil de {{ site.title }}" tabindex="-1">
<h1 class="header-bar__logo-title">{{ site.title }}</h1>
</a>
</div>
<div class="header-bar__logo" aria-hidden="true">
<a class="header-bar__logo-link" href="{{ site.homePage.url }}" target="_self" aria-label="Accéder à la page d'accueil de {{ site.title }}" tabindex="-1">
<h1 class="header-bar__logo-title">{{ site.title }}</h1>
</a>
</div>
<nav class="header-bar__nav" aria-label="Menu">
<button class="header-bar__nav-button" aria-hidden="true" tabindex="-1">
<svg viewBox="0 0 48 48" fill="currentColor">
<path d="M7.5 36Q6.85 36 6.425 35.575Q6 35.15 6 34.5Q6 33.85 6.425 33.425Q6.85 33 7.5 33H30.5Q31.15 33 31.575 33.425Q32 33.85 32 34.5Q32 35.15 31.575 35.575Q31.15 36 30.5 36ZM7.5 25.4Q6.85 25.4 6.425 24.975Q6 24.55 6 23.9Q6 23.25 6.425 22.825Q6.85 22.4 7.5 22.4H24.5Q25.15 22.4 25.575 22.825Q26 23.25 26 23.9Q26 24.55 25.575 24.975Q25.15 25.4 24.5 25.4ZM7.5 15Q6.85 15 6.425 14.575Q6 14.15 6 13.5Q6 12.85 6.425 12.425Q6.85 12 7.5 12H30.5Q31.15 12 31.575 12.425Q32 12.85 32 13.5Q32 14.15 31.575 14.575Q31.15 15 30.5 15ZM34.75 23.95 41 30.2Q41.45 30.65 41.425 31.25Q41.4 31.85 40.95 32.3Q40.5 32.75 39.875 32.75Q39.25 32.75 38.8 32.3L31.5 25Q31.05 24.55 31.05 23.95Q31.05 23.35 31.5 22.9L38.8 15.6Q39.25 15.15 39.875 15.15Q40.5 15.15 40.95 15.6Q41.4 16.05 41.4 16.675Q41.4 17.3 40.95 17.75Z"/>
</svg>
<svg viewBox="0 0 48 48" fill="currentColor">
<path d="M24 26.1 13.5 36.6Q13.05 37.05 12.45 37.05Q11.85 37.05 11.4 36.6Q10.95 36.15 10.95 35.55Q10.95 34.95 11.4 34.5L21.9 24L11.4 13.5Q10.95 13.05 10.95 12.45Q10.95 11.85 11.4 11.4Q11.85 10.95 12.45 10.95Q13.05 10.95 13.5 11.4L24 21.9L34.5 11.4Q34.95 10.95 35.55 10.95Q36.15 10.95 36.6 11.4Q37.05 11.85 37.05 12.45Q37.05 13.05 36.6 13.5L26.1 24L36.6 34.5Q37.05 34.95 37.05 35.55Q37.05 36.15 36.6 36.6Q36.15 37.05 35.55 37.05Q34.95 37.05 34.5 36.6Z"/>
</svg>
</button>
<ul class="header-bar__nav-menu" tabindex="-1">
{% set headerNavItemNo = 1 %}
{% if site.homePage.isActive %}
<li class="header-bar__nav-item-{{ headerNavItemNo }} header-bar__nav-item--active">
<div>
<a href="{{ site.homePage.url }}" target="_self" aria-current="page">{{ site.homePage.title }}</a>
</div>
</li>
{% else %}
<li class="header-bar__nav-item-{{ headerNavItemNo }}">
<div>
<a href="{{ site.homePage.url }}" target="_self">{{ site.homePage.title }}</a>
</div>
</li>
{% endif %}
{% set headerNavItemNo = headerNavItemNo + 1 %}
{% if pages.template('biography').first.isActive %}
<li class="header-bar__nav-item-{{ headerNavItemNo }} header-bar__nav-item--active">
<div>
<a href="{{ pages.template('biography').first.url }}" target="_self" aria-current="page">{{ pages.template('biography').first.title }}</a>
</div>
</li>
{% else %}
<li class="header-bar__nav-item-{{ headerNavItemNo }}">
<div>
<a href="{{ pages.template('biography').first.url }}" target="_self">{{ pages.template('biography').first.title }}</a>
</div>
</li>
{% endif %}
{% set headerNavItemNo = headerNavItemNo + 1 %}
<li class="header-bar__nav-item-{{ headerNavItemNo }}">
<div>
<span>Galeries</span>
</div>
<ul>
{% for gallery in pages.template('gallery') %}
{% set headerNavItemNo = headerNavItemNo + 1 %}
{% if gallery.isActive %}
<li class="header-bar__nav-item-{{ headerNavItemNo }} header-bar__nav-item--active">
<div>
<a href="{{ gallery.url }}" target="_self" aria-current="page">{{ gallery.title }}</a>
</div>
</li>
{% else %}
<li class="header-bar__nav-item-{{ headerNavItemNo }}">
<div>
<a href="{{ gallery.url }}" target="_self">{{ gallery.title }}</a>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
</ul>
<div class="header-bar__nav-overlay" aria-hidden="true"></div>
</nav>
<nav class="header-bar__nav" aria-label="Menu">
<button class="header-bar__nav-button" aria-hidden="true" tabindex="-1">
<svg viewBox="0 0 48 48" fill="currentColor">
<path d="M7.5 36Q6.85 36 6.425 35.575Q6 35.15 6 34.5Q6 33.85 6.425 33.425Q6.85 33 7.5 33H30.5Q31.15 33 31.575 33.425Q32 33.85 32 34.5Q32 35.15 31.575 35.575Q31.15 36 30.5 36ZM7.5 25.4Q6.85 25.4 6.425 24.975Q6 24.55 6 23.9Q6 23.25 6.425 22.825Q6.85 22.4 7.5 22.4H24.5Q25.15 22.4 25.575 22.825Q26 23.25 26 23.9Q26 24.55 25.575 24.975Q25.15 25.4 24.5 25.4ZM7.5 15Q6.85 15 6.425 14.575Q6 14.15 6 13.5Q6 12.85 6.425 12.425Q6.85 12 7.5 12H30.5Q31.15 12 31.575 12.425Q32 12.85 32 13.5Q32 14.15 31.575 14.575Q31.15 15 30.5 15ZM34.75 23.95 41 30.2Q41.45 30.65 41.425 31.25Q41.4 31.85 40.95 32.3Q40.5 32.75 39.875 32.75Q39.25 32.75 38.8 32.3L31.5 25Q31.05 24.55 31.05 23.95Q31.05 23.35 31.5 22.9L38.8 15.6Q39.25 15.15 39.875 15.15Q40.5 15.15 40.95 15.6Q41.4 16.05 41.4 16.675Q41.4 17.3 40.95 17.75Z"/>
</svg>
<svg viewBox="0 0 48 48" fill="currentColor">
<path d="M24 26.1 13.5 36.6Q13.05 37.05 12.45 37.05Q11.85 37.05 11.4 36.6Q10.95 36.15 10.95 35.55Q10.95 34.95 11.4 34.5L21.9 24L11.4 13.5Q10.95 13.05 10.95 12.45Q10.95 11.85 11.4 11.4Q11.85 10.95 12.45 10.95Q13.05 10.95 13.5 11.4L24 21.9L34.5 11.4Q34.95 10.95 35.55 10.95Q36.15 10.95 36.6 11.4Q37.05 11.85 37.05 12.45Q37.05 13.05 36.6 13.5L26.1 24L36.6 34.5Q37.05 34.95 37.05 35.55Q37.05 36.15 36.6 36.6Q36.15 37.05 35.55 37.05Q34.95 37.05 34.5 36.6Z"/>
</svg>
</button>
<ul class="header-bar__nav-menu" tabindex="-1">
{% set headerNavItemNo = 1 %}
{% if site.homePage.isActive %}
<li class="header-bar__nav-item-{{ headerNavItemNo }} header-bar__nav-item--active">
<div>
<a href="{{ site.homePage.url }}" target="_self" aria-current="page">{{ site.homePage.title }}</a>
</div>
</li>
{% else %}
<li class="header-bar__nav-item-{{ headerNavItemNo }}">
<div>
<a href="{{ site.homePage.url }}" target="_self">{{ site.homePage.title }}</a>
</div>
</li>
{% endif %}
{% set headerNavItemNo = headerNavItemNo + 1 %}
{% if pages.template('biography').first.isActive %}
<li class="header-bar__nav-item-{{ headerNavItemNo }} header-bar__nav-item--active">
<div>
<a href="{{ pages.template('biography').first.url }}" target="_self" aria-current="page">{{ pages.template('biography').first.title }}</a>
</div>
</li>
{% else %}
<li class="header-bar__nav-item-{{ headerNavItemNo }}">
<div>
<a href="{{ pages.template('biography').first.url }}" target="_self">{{ pages.template('biography').first.title }}</a>
</div>
</li>
{% endif %}
{% set headerNavItemNo = headerNavItemNo + 1 %}
<li class="header-bar__nav-item-{{ headerNavItemNo }}">
<div>
<span>Galeries</span>
</div>
<ul>
{% for gallery in pages.template('gallery') %}
{% set headerNavItemNo = headerNavItemNo + 1 %}
{% if gallery.isActive %}
<li class="header-bar__nav-item-{{ headerNavItemNo }} header-bar__nav-item--active">
<div>
<a href="{{ gallery.url }}" target="_self" aria-current="page">{{ gallery.title }}</a>
</div>
</li>
{% else %}
<li class="header-bar__nav-item-{{ headerNavItemNo }}">
<div>
<a href="{{ gallery.url }}" target="_self">{{ gallery.title }}</a>
</div>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
</ul>
<div class="header-bar__nav-overlay" aria-hidden="true"></div>
</nav>
</div>
</div>
</header>
{% endblock %}
</header>
{% endblock %}
{% block main %}
{% endblock %}
{% block main %}
{% endblock %}
{% block footer %}
<footer>
{% block footer %}
<footer>
<div class="footer-bar">
<div class="footer-bar">
<div class="footer-bar__social">
<a class="footer-bar__instagram-button" rel="me" href="{{ site.homePage.instagram }}" target="_blank" aria-label="Accéder au profil Instagram de {{ site.title }}">
<svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
</svg>
</a>
<a class="footer-bar__email-button" href="mailto:{{ site.homePage.email }}" target="_blank" aria-label="Écrire un e-mail à {{ site.title }}">
<svg aria-hidden="true" viewBox="0 0 48 48" fill="currentColor">
<path d="M7 40Q5.8 40 4.9 39.1Q4 38.2 4 37V11Q4 9.8 4.9 8.9Q5.8 8 7 8H41Q42.2 8 43.1 8.9Q44 9.8 44 11V37Q44 38.2 43.1 39.1Q42.2 40 41 40ZM41 13.75 24.8 24.35Q24.6 24.45 24.425 24.525Q24.25 24.6 24 24.6Q23.75 24.6 23.575 24.525Q23.4 24.45 23.2 24.35L7 13.75V37Q7 37 7 37Q7 37 7 37H41Q41 37 41 37Q41 37 41 37ZM24 21.9 40.8 11H7.25ZM7 13.75V14.1Q7 13.95 7 13.7Q7 13.45 7 13.15Q7 12.5 7 12.125Q7 11.75 7 12.15V11V12.15Q7 11.75 7 12.1Q7 12.45 7 13.1Q7 13.4 7 13.675Q7 13.95 7 14.1V13.75V37Q7 37 7 37Q7 37 7 37Q7 37 7 37Q7 37 7 37Z"/>
</svg>
</a>
</div>
<div class="footer-bar__copyright">
<p>&copy; {{ 'now' | date('Y') }} {{ site.title }}</p>
</div>
<div class="footer-bar__social">
<a class="footer-bar__instagram-button" rel="me" href="{{ site.homePage.instagram }}" target="_blank" aria-label="Accéder au profil Instagram de {{ site.title }}">
<svg aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
</svg>
</a>
<a class="footer-bar__email-button" href="mailto:{{ site.homePage.email }}" target="_blank" aria-label="Écrire un e-mail à {{ site.title }}">
<svg aria-hidden="true" viewBox="0 0 48 48" fill="currentColor">
<path d="M7 40Q5.8 40 4.9 39.1Q4 38.2 4 37V11Q4 9.8 4.9 8.9Q5.8 8 7 8H41Q42.2 8 43.1 8.9Q44 9.8 44 11V37Q44 38.2 43.1 39.1Q42.2 40 41 40ZM41 13.75 24.8 24.35Q24.6 24.45 24.425 24.525Q24.25 24.6 24 24.6Q23.75 24.6 23.575 24.525Q23.4 24.45 23.2 24.35L7 13.75V37Q7 37 7 37Q7 37 7 37H41Q41 37 41 37Q41 37 41 37ZM24 21.9 40.8 11H7.25ZM7 13.75V14.1Q7 13.95 7 13.7Q7 13.45 7 13.15Q7 12.5 7 12.125Q7 11.75 7 12.15V11V12.15Q7 11.75 7 12.1Q7 12.45 7 13.1Q7 13.4 7 13.675Q7 13.95 7 14.1V13.75V37Q7 37 7 37Q7 37 7 37Q7 37 7 37Q7 37 7 37Z"/>
</svg>
</a>
</div>
<div class="footer-bar__copyright">
<p>&copy; {{ 'now' | date('Y') }} {{ site.title }}</p>
</div>
</div>
</div>
</footer>
{% endblock %}
</footer>
{% endblock %}
</body>

View file

@ -1,16 +1,16 @@
{% extends "base.twig" %}
{% block main %}
<main>
<main>
<section class="biography-section">
<section class="biography-section">
<article class="biography">
<h2 class="biography__title">{{ page.title }}</h2>
<div class="biography__presentation">{{ page.text.kirbytext|raw }}</div>
</article>
<article class="biography">
<h2 class="biography__title">{{ page.title }}</h2>
<div class="biography__presentation">{{ page.text.kirbytext|raw }}</div>
</article>
</section>
</section>
</main>
</main>
{% endblock %}

View file

@ -1,21 +1,21 @@
{% extends "base.twig" %}
{% block main %}
<main>
<main>
<section class="error-section">
<article class="error">
<h2 class="error__title">Erreur {{ kirby.response.code }}</h2>
{% if kirby.response.code == 404 %}
<p class="error__message">La page que vous demandez n'existe pas...</p>
{% else %}
<p class="error__message">Une erreur est survenue...</p>
{% endif %}
<div class="error__button">
<a href="{{ site.homePage.url }}" target="_self">Retourner à la page d'accueil</a>
</div>
</article>
</section>
<section class="error-section">
<article class="error">
<h2 class="error__title">Erreur {{ kirby.response.code }}</h2>
{% if kirby.response.code == 404 %}
<p class="error__message">La page que vous demandez n'existe pas...</p>
{% else %}
<p class="error__message">Une erreur est survenue...</p>
{% endif %}
<div class="error__button">
<a href="{{ site.homePage.url }}" target="_self">Retourner à la page d'accueil</a>
</div>
</article>
</section>
</main>
</main>
{% endblock %}

View file

@ -1,42 +1,42 @@
{% extends "base.twig" %}
{% block main %}
<main>
<main>
<section class="gallery-section">
<section class="gallery-section">
<article class="gallery">
<h2 class="gallery__title">{{ page.title }}</h2>
{% if page.text.isNotEmpty %}
<div class="gallery__introduction">{{ page.text.kirbytext|raw }}</div>
{% endif %}
{% if page.files.template("artwork").isNotEmpty %}
{% set artworks = page.files.template("artwork").sortBy('sort') %}
{% for artwork in artworks %}
<figure class="gallery__artwork">
{% if artwork.type == 'video' %}
{% if artwork.poster is not empty %}
<video class="gallery__video" data-poster="{{ artwork.poster.toFile.url }}" preload="metadata" controls playsinline>
<source src="{{ artwork.url }}" type="video/mp4"/>
</video>
{% else %}
<video class="gallery__video" preload="metadata" controls playsinline>
<source src="{{ artwork.url }}" type="video/mp4"/>
</video>
{% endif %}
{% endif %}
{% if artwork.type == 'image' %}
<img class="gallery__image" src="{{ artwork.url }}" srcset="{{ artwork.srcset() }}" alt="{{ artwork.alt_text }}">
{% endif %}
{% if artwork.caption %}
<figcaption>{{ artwork.caption.kirbytext|raw }}</figcaption>
{% endif %}
</figure>
{% endfor %}
{% endif %}
</article>
<article class="gallery">
<h2 class="gallery__title">{{ page.title }}</h2>
{% if page.text.isNotEmpty %}
<div class="gallery__introduction">{{ page.text.kirbytext|raw }}</div>
{% endif %}
{% if page.files.template("artwork").isNotEmpty %}
{% set artworks = page.files.template("artwork").sortBy('sort') %}
{% for artwork in artworks %}
<figure class="gallery__artwork">
{% if artwork.type == 'video' %}
{% if artwork.poster is not empty %}
<video class="gallery__video" data-poster="{{ artwork.poster.toFile.url }}" preload="metadata" controls playsinline>
<source src="{{ artwork.url }}" type="video/mp4"/>
</video>
{% else %}
<video class="gallery__video" preload="metadata" controls playsinline>
<source src="{{ artwork.url }}" type="video/mp4"/>
</video>
{% endif %}
{% endif %}
{% if artwork.type == 'image' %}
<img class="gallery__image" src="{{ artwork.url }}" srcset="{{ artwork.srcset() }}" alt="{{ artwork.alt_text }}">
{% endif %}
{% if artwork.caption %}
<figcaption>{{ artwork.caption.kirbytext|raw }}</figcaption>
{% endif %}
</figure>
{% endfor %}
{% endif %}
</article>
</section>
</section>
</main>
</main>
{% endblock %}

View file

@ -1,26 +1,26 @@
{% extends "base.twig" %}
{% block main %}
<main>
<main>
<section class="home-section" aria-hidden="true">
<section class="home-section" aria-hidden="true">
<div class="home">
<nav class="home__nav" aria-label="Menu">
{% set navItemNo = 1 %}
{% for gallery in pages.template('gallery') %}
<div class="home__nav-item-{{ navItemNo }}">
<a href="{{ gallery.url }}" target="_self" class="home__nav-link" tabindex="-1">{{ gallery.title }}</a>
</div>
{% set navItemNo = navItemNo + 1 %}
{% endfor %}
<div class="home__nav-image" aria-hidden="true">
<img src="{{ page.images.template("image").first.url }}" srcset="{{ page.images.template("image").first.srcset() }}" alt="{{ page.images.template("image").first.alt_text }}">
</div>
</nav>
</div>
<div class="home">
<nav class="home__nav" aria-label="Menu">
{% set navItemNo = 1 %}
{% for gallery in pages.template('gallery') %}
<div class="home__nav-item-{{ navItemNo }}">
<a href="{{ gallery.url }}" target="_self" class="home__nav-link" tabindex="-1">{{ gallery.title }}</a>
</div>
{% set navItemNo = navItemNo + 1 %}
{% endfor %}
<div class="home__nav-image" aria-hidden="true">
<img src="{{ page.images.template("image").first.url }}" srcset="{{ page.images.template("image").first.srcset() }}" alt="{{ page.images.template("image").first.alt_text }}">
</div>
</nav>
</div>
</section>
</section>
</main>
</main>
{% endblock %}

View file

@ -1,43 +1,43 @@
const Encore = require('@symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// ----------------------------------------------------------------------------
// PATHS
// ----------------------------------------------------------------------------
// ----------------------------------------------------------------------------
// PATHS
// ----------------------------------------------------------------------------
.setOutputPath('public/build/')
.setPublicPath('/build')
.setOutputPath('public/build/')
.setPublicPath('/build')
// ----------------------------------------------------------------------------
// ENTRIES
// ----------------------------------------------------------------------------
// ----------------------------------------------------------------------------
// ENTRIES
// ----------------------------------------------------------------------------
.addEntry('app', './assets/js/app.js')
.addStyleEntry('main', './assets/css/main.scss')
.addStyleEntry('panel', './assets/css/panel.scss')
.addEntry('app', './assets/js/app.js')
.addStyleEntry('main', './assets/css/main.scss')
.addStyleEntry('panel', './assets/css/panel.scss')
// ----------------------------------------------------------------------------
// FEATURES
// ----------------------------------------------------------------------------
// ----------------------------------------------------------------------------
// FEATURES
// ----------------------------------------------------------------------------
.disableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.configureBabel((config) => {
config.plugins.push('@babel/plugin-proposal-class-properties');
})
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
.enableSassLoader()
.enablePostCssLoader()
.disableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.configureBabel((config) => {
config.plugins.push('@babel/plugin-proposal-class-properties');
})
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
.enableSassLoader()
.enablePostCssLoader()
;
module.exports = Encore.getWebpackConfig();